/* Lumen — Zapal świeczkę. Ciemna ściana intencji z animowanymi płomieniami. */

.lumen-swiece{
  --gold:#d8b94a; --gold-d:#c9a227;
  background:radial-gradient(120% 80% at 50% 0%, #3a0f16 0%, #2a0d12 55%, #1c070b 100%);
  color:#f3e7e0; border-radius:20px; padding:clamp(22px,4vw,40px);
  font-family:inherit;
}

/* --- pasek górny: licznik + przycisk --- */
.lumen-swiece__intro{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;margin-bottom:26px}
.lumen-swiece__count{display:flex;flex-direction:column;line-height:1}
.lumen-swiece__count strong{font-size:2.1rem;color:var(--gold);font-weight:800}
.lumen-swiece__count span{font-size:.85rem;color:#caa9a3;letter-spacing:.04em;margin-top:4px}

.btn-light{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#3a2c05;
  border:0;padding:13px 24px;border-radius:999px;font-weight:700;font-size:.95rem;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;
  transition:transform .2s,box-shadow .2s}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(216,185,74,.7)}
.btn-light .ico{font-size:1.15rem}

/* --- formularz --- */
.lumen-swiece__form{background:rgba(255,255,255,.05);border:1px solid rgba(216,185,74,.25);
  border-radius:16px;padding:22px;margin-bottom:26px;display:grid;gap:14px}
.lumen-swiece__lead{margin:0;color:#e7cdc9;font-size:.95rem}
.lumen-swiece__form label{display:grid;gap:6px;font-size:.82rem;color:#caa9a3;
  text-transform:uppercase;letter-spacing:.06em}
.lumen-swiece__form textarea,.lumen-swiece__form input[type=text]{
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.18);color:#fff;
  border-radius:10px;padding:11px 13px;font:inherit;font-size:.95rem;resize:vertical}
.lumen-swiece__form textarea:focus,.lumen-swiece__form input:focus{
  outline:none;border-color:var(--gold)}
.lumen-swiece__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.lumen-swiece__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lumen-swiece__cancel{background:transparent;border:1px solid rgba(255,255,255,.25);
  color:#e7cdc9;border-radius:999px;padding:12px 20px;cursor:pointer;font:inherit}
.lumen-swiece__msg{margin:0;font-size:.9rem;color:var(--gold);min-height:1.2em}

/* --- ściana świec --- */
.lumen-swiece__wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));
  gap:30px 6px;align-items:end}
.lumen-swiece__empty{grid-column:1/-1;text-align:center;color:#caa9a3}

/* --- pojedyncza świeca --- */
.swieca{margin:0;text-align:center;animation:swieca-rise .6s ease both}
.swieca__candle{position:relative;width:60px;height:96px;margin:0 auto}

/* korpus świecy */
.swieca__wax{position:absolute;left:50%;top:30px;width:34px;height:62px;margin-left:-17px;
  background:linear-gradient(90deg,#d9c8a6 0%,#fdf6e6 42%,#e7d6b4 100%);
  border-radius:7px 7px 6px 6px;box-shadow:inset 0 -8px 12px rgba(80,40,0,.12)}
.swieca__wax::before{content:"";position:absolute;top:-5px;left:0;right:0;height:9px;
  background:#fdf6e6;border-radius:50%;box-shadow:inset 0 2px 3px rgba(120,70,0,.25)}

/* knot */
.swieca__wick{position:absolute;left:50%;top:21px;width:2px;height:8px;margin-left:-1px;
  background:#2c1810;border-radius:2px}

/* poświata */
.swieca__glow{position:absolute;left:50%;top:-8px;width:46px;height:46px;margin-left:-23px;
  background:radial-gradient(circle,rgba(255,186,72,.55) 0%,rgba(255,140,30,.18) 45%,transparent 72%);
  border-radius:50%;filter:blur(2px);
  animation:swieca-glow var(--t,1s) ease-in-out infinite alternate;animation-delay:var(--d,0s)}

/* płomień (kropla skierowana w górę) */
.swieca__flame{position:absolute;left:50%;top:2px;width:18px;height:18px;margin-left:-9px;
  background:linear-gradient(to top,#ff5e00 5%,#ff9d2f 45%,#ffd23d 80%);
  border-radius:0 50% 50% 50%;transform:rotate(45deg);transform-origin:50% 65%;
  box-shadow:0 0 16px 5px rgba(255,150,40,.55);
  animation:swieca-flicker var(--t,1s) ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.swieca__flame::before{content:"";position:absolute;inset:30% 22% 8% 30%;
  background:linear-gradient(to top,#ffd23d,#fff7e0);border-radius:0 50% 50% 50%;opacity:.95}

/* podpis */
.swieca__cap{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:0 4px}
.swieca__intent{font-style:italic;font-size:.84rem;color:#fff;line-height:1.35}
.swieca__name{font-weight:700;font-size:.82rem;color:var(--gold)}
.swieca__time{font-size:.7rem;color:#a98c87}

/* animacje */
@keyframes swieca-flicker{
  0%{transform:rotate(44deg) scaleY(1);filter:brightness(1)}
  50%{transform:rotate(46deg) scaleY(1.07);filter:brightness(1.18)}
  100%{transform:rotate(45deg) scaleY(.96);filter:brightness(1.02)}
}
@keyframes swieca-glow{
  0%{opacity:.5;transform:scale(1)}
  100%{opacity:.85;transform:scale(1.14)}
}
@keyframes swieca-rise{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .swieca__flame,.swieca__glow{animation:none}
}
@media (max-width:600px){
  .lumen-swiece__wall{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:24px 4px}
  .swieca__candle{width:52px;height:86px}
}