/* Welon – strona sprzedażowa: nowe sekcje funkcji i animacje.
   Zasada: treść jest zawsze widoczna. Animacje włączają się dopiero, gdy JS doda klasę .anim
   i tylko dla elementów poniżej pierwszego ekranu; bez JS / z ograniczeniem ruchu wszystko stoi. */
:root{--ease-quint:cubic-bezier(.22,1,.36,1);--ease-expo:cubic-bezier(.16,1,.3,1);interpolate-size:allow-keywords}

/* ---------- logo większe ---------- */
.lp-top .lp-brand{font-size:44px}
@media (max-width:760px){.lp-top .lp-brand{font-size:36px}}
/* jednorazowy błysk oczka pierścionka */
.anim .lp-top .wm-ring path{transform-box:fill-box;transform-origin:center;animation:gem 1.4s var(--ease-expo) .9s both}
@keyframes gem{0%{transform:scale(.2) rotate(-45deg);opacity:0}55%{transform:scale(1.35) rotate(8deg);opacity:1;filter:drop-shadow(0 0 6px #fff)}100%{transform:none;filter:none}}

/* ---------- hero: nagłówek wjeżdża linijka po linijce ---------- */
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-h .ln>span{display:inline-block}
.hero-h .acc{color:oklch(0.86 0.06 14)}
.anim .hero-h .ln>span{animation:lineUp .9s var(--ease-expo) both}
.anim .hero-h .ln:nth-child(2)>span{animation-delay:.12s}
.anim .hero-h .ln:nth-child(3)>span{animation-delay:.24s}
@keyframes lineUp{from{transform:translateY(105%)}}
.anim .hero-lead,.anim .hero-cta,.anim .hero-trust,.anim .hero-for{animation:soft .8s var(--ease-quint) both}
.anim .hero-for{animation-delay:0s}.anim .hero-lead{animation-delay:.35s}.anim .hero-cta{animation-delay:.45s}.anim .hero-trust{animation-delay:.55s}
@keyframes soft{from{opacity:0;transform:translateY(14px)}}

/* przyciski: odczuwalne naciśnięcie */
.btn{transition:background-color .2s var(--ease),transform .15s var(--ease),box-shadow .25s var(--ease)}
.btn.peony:hover,.lp .btn:not(.ghost):hover{box-shadow:0 10px 26px oklch(0.69 0.155 14 / .35);transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}

/* ---------- elementy pojawiające się przy przewijaniu (tylko poniżej pierwszego ekranu) ---------- */
.anim .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-quint),transform .7s var(--ease-quint)}
.anim .rv.in{opacity:1;transform:none}
/* karteczki: spadają i przypinają się po kolei */
.anim .notes.rv{opacity:1;transform:none}
.anim .notes.rv .note{opacity:0;translate:0 -30px;transition:opacity .5s var(--ease-quint),translate .6s var(--ease-expo);transition-delay:calc(var(--i,0) * 90ms)}
.anim .notes.rv.in .note{opacity:1;translate:0 0}
/* zrzuty ekranu: delikatne odsłonięcie */
.anim .feat-shot.rv{clip-path:inset(0 0 12% 0 round 18px);transform:translateY(30px)}
.anim .feat-shot.rv.in{clip-path:inset(0 0 0 0 round 18px);transition:opacity .8s var(--ease-quint),transform .9s var(--ease-expo),clip-path 1s var(--ease-expo)}

/* ---------- PAPETERIA ---------- */
.suite{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;background:var(--blush)}
.suite-copy p{font-size:18px;line-height:1.65;color:var(--ink-2);max-width:50ch}
.suite-copy h2{margin-bottom:20px}
.suite-chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 8px}
.suite-chips button{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);background:#fff;border-radius:999px;padding:7px 14px 7px 8px;font-weight:700;font-size:14px;cursor:pointer;transition:border-color .2s,transform .2s var(--ease-quint),box-shadow .2s}
.suite-chips button:hover{transform:translateY(-1px)}
.suite-chips button[aria-selected="true"]{border-color:var(--wine);box-shadow:0 0 0 3px oklch(0.69 0.155 14 / .25)}
.suite-chips i{display:flex}
.suite-chips i b{width:14px;height:14px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 1.5px #fff}
.suite-chips i b:first-child{margin-left:0}
.suite-stage{position:relative;height:clamp(420px,46vw,600px)}
.suite-stage .it{position:absolute;box-shadow:0 18px 40px oklch(0.3 0.06 8 / .18);border-radius:4px;overflow:hidden;transition:opacity .45s var(--ease-quint),transform .6s var(--ease-expo)}
.suite-stage .it .pap{width:100%}
.suite-stage .s-inv{width:46%;left:2%;top:4%;transform:rotate(-4deg)}
.suite-stage .s-board{width:38%;right:1%;top:0;transform:rotate(3deg)}
.suite-stage .s-num{width:21%;right:8%;bottom:2%;transform:rotate(-2deg)}
.suite-stage .s-card1{width:34%;left:30%;bottom:10%;transform:rotate(2deg)}
.suite-stage .s-card2{width:34%;left:6%;bottom:0;transform:rotate(-3deg)}
.suite-stage.swap .it{opacity:0;transform:translateY(16px) rotate(0)}
.suite-stage .it:nth-child(2){transition-delay:40ms}.suite-stage .it:nth-child(3){transition-delay:80ms}.suite-stage .it:nth-child(4){transition-delay:120ms}.suite-stage .it:nth-child(5){transition-delay:160ms}
.suite-stage .it:hover{z-index:5;transform:translateY(-6px) rotate(0) scale(1.02)}

/* ---------- HARMONOGRAM ---------- */
.day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;background:#fff}
.day-copy p{font-size:18px;line-height:1.65;color:var(--ink-2);max-width:50ch}
.day-copy h2{margin-bottom:20px}
.day-note{background:var(--bg);border-radius:16px;padding:16px 18px;font-size:16px!important}
.day-line{list-style:none;margin:0;padding:0 0 0 18px;position:relative;display:grid;gap:18px}
.day-line::before{content:"";position:absolute;left:96px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--c-tasks),var(--wine-600));transform-origin:top}
.day-line li{display:grid;grid-template-columns:62px 1fr;column-gap:40px;position:relative}
.day-line li::before{content:"";position:absolute;left:72px;top:7px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--wine-600)}
.day-line li.key::before{background:var(--peony);border-color:var(--peony);width:16px;height:16px;left:70px;top:5px;box-shadow:0 0 0 6px oklch(0.69 0.155 14 / .18)}
.day-line time{font:24px/1 var(--display);grid-row:span 2;text-align:right;font-variant-numeric:tabular-nums}
.day-line b{font-size:17px}
.day-line small{color:var(--ink-2);font-size:14.5px}
.anim .day-line.rv{opacity:1;transform:none}
.anim .day-line.rv::before{transform:scaleY(0);transition:transform 1.4s var(--ease-quint)}
.anim .day-line.rv.in::before{transform:scaleY(1)}
.anim .day-line.rv li{opacity:0;transform:translateX(-10px);transition:opacity .5s var(--ease-quint),transform .5s var(--ease-quint);transition-delay:calc(var(--i) * 140ms + 150ms)}
.anim .day-line.rv.in li{opacity:1;transform:none}

/* ---------- WELA ---------- */
.wela-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;background:var(--wine-900);color:#fff}
.wela-copy p{font-size:18px;line-height:1.65;color:oklch(0.86 0.03 10);max-width:50ch}
.wela-copy h2{margin-bottom:20px}
.chat{display:grid;gap:14px;max-width:460px;justify-self:center;width:100%}
.chat-face{display:flex;align-items:center;gap:12px}
.chat-face svg{width:64px;height:64px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px oklch(1 0 0 / .12);animation:float 5s ease-in-out infinite}
.chat-face .eyes circle{transform-box:fill-box;transform-origin:center;animation:blink2 4.5s infinite}
.chat-face b{font:28px/1 var(--display);font-weight:400}
@keyframes float{50%{transform:translateY(-4px)}}
@keyframes blink2{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.msg{background:#fff;color:var(--ink);border-radius:20px 20px 20px 6px;padding:14px 16px;display:grid;gap:10px;box-shadow:0 16px 36px oklch(0.1 0.05 8 / .35)}
.msg p{margin:0;font-size:15.5px;line-height:1.45}
.msg span{justify-self:start;background:var(--wine);color:#fff;border-radius:10px;padding:7px 12px;font-weight:700;font-size:13.5px}
.anim .chat.rv{opacity:1;transform:none}
.anim .chat.rv .msg{opacity:0;transform:translateY(14px) scale(.97);transform-origin:left bottom;transition:opacity .45s var(--ease-quint),transform .55s var(--ease-expo);transition-delay:calc(var(--i) * 900ms + 300ms)}
.anim .chat.rv.in .msg{opacity:1;transform:none}

/* ---------- ZAPROSZENIE ONLINE ---------- */
.rsvp-sec{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;background:oklch(0.97 0.015 305)}
.rsvp-copy p{font-size:18px;line-height:1.65;color:var(--ink-2);max-width:50ch}
.rsvp-copy h2{margin-bottom:20px}
.rsvp-copy .btn{background:var(--c-invites)}
.rsvp-copy .btn:hover{background:oklch(0.4 0.12 305)}
.addon{display:inline-block;background:#fff;border:1.5px solid oklch(0.85 0.06 305);color:var(--c-invites);border-radius:999px;padding:5px 12px;font-weight:800;font-size:14px;margin:0 0 16px}
.rsvp-demo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center}
.rd-phone{width:230px;border-radius:38px;background:var(--ink);padding:9px;box-shadow:0 30px 60px oklch(0.2 0.06 305 / .3)}
.rd-screen{position:relative;border-radius:30px;overflow:hidden;background:#fff}
.rd-inv .pap{width:100%}
.rd-btns{display:grid;gap:7px;padding:12px 14px 16px}
.rd-btns span{border:1.5px solid var(--ink);border-radius:999px;padding:8px;font-weight:700;font-size:13px;text-align:center}
.rd-yes{position:relative;overflow:hidden}
.rd-yes::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.rd-tap{position:absolute;width:28px;height:28px;border-radius:50%;background:oklch(0.69 0.155 14 / .5);box-shadow:0 0 0 2px #fff;left:62%;bottom:68px;opacity:0}
.rd-list{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:var(--shadow-2);display:grid;gap:4px;font-size:14px}
.rd-list b{font-size:14px;margin-bottom:6px}
.rd-list>div{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 8px;border-radius:10px;position:relative}
.rd-list em{font-style:normal;font-weight:800;font-size:12px;padding:3px 8px;border-radius:999px}
.rd-list .ok{background:var(--ok-bg);color:var(--ok)}
.rd-list .wait{background:var(--bg);color:var(--ink-2)}
.rd-row .new{position:absolute;right:8px;opacity:0}
/* sekwencja: dotknięcie „Będę” → przycisk się wypełnia → status na liście zmienia się z błyskiem */
.anim .rsvp-demo.rv{opacity:1;transform:none}
.anim .rsvp-demo.rv.in .rd-tap{animation:tap 6s var(--ease-quint) .6s 3 both}
.anim .rsvp-demo.rv.in .rd-yes::after{animation:fillYes 6s var(--ease-quint) .6s 3 both}
.anim .rsvp-demo.rv.in .rd-yes{animation:yesText 6s linear .6s 3 both}
.anim .rsvp-demo.rv.in .rd-row{animation:rowFlash 6s var(--ease-quint) .6s 3 both}
.anim .rsvp-demo.rv.in .rd-row .wait{animation:hideWait 6s linear .6s 3 both}
.anim .rsvp-demo.rv.in .rd-row .new{animation:showNew 6s var(--ease-expo) .6s 3 both}
@keyframes tap{0%{opacity:0;transform:translate(30px,30px) scale(1.4)}12%{opacity:1;transform:translate(0,0) scale(1)}18%{transform:scale(.7)}24%{transform:scale(1);opacity:1}34%,100%{opacity:0}}
@keyframes fillYes{0%,17%{transform:scaleX(0)}27%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes yesText{0%,20%{color:var(--ink)}24%,86%{color:#fff}96%,100%{color:var(--ink)}}
@keyframes rowFlash{0%,30%{background:transparent}38%{background:oklch(0.95 0.05 155)}70%,100%{background:transparent}}
@keyframes hideWait{0%,32%{opacity:1}36%,90%{opacity:0}96%,100%{opacity:1}}
@keyframes showNew{0%,32%{opacity:0;transform:scale(.6)}40%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* ---------- FAQ: płynne rozwijanie ---------- */
.faq details::details-content{height:0;overflow:clip;transition:height .35s var(--ease-quint),content-visibility .35s allow-discrete}
.faq details[open]::details-content{height:auto}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--wine)}

/* pieczęć gwarancji: lekki obrót przy najechaniu */
.seal{transition:transform .6s var(--ease-expo)}
.seal-wrap:hover .seal{transform:rotate(4deg) scale(1.04)}

@media (max-width:1020px){
  .suite,.day,.wela-sec,.rsvp-sec{grid-template-columns:minmax(0,1fr)}
  .rsvp-demo{order:2}
  .suite-stage{height:clamp(380px,90vw,560px)}
}
@media (max-width:560px){
  .rsvp-demo{grid-template-columns:minmax(0,1fr);justify-items:center}
  .day-line::before{left:78px}.day-line li{grid-template-columns:50px 1fr;column-gap:34px}.day-line li::before{left:58px}.day-line li.key::before{left:56px}.day-line time{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .anim .rv,.anim .rv *{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .anim .rsvp-demo .rd-row .new{opacity:0}
  .chat-face svg{animation:none}
}
.suite-stage .s-board .pap{aspect-ratio:420/594}
.suite-stage .s-board .board li{font-size:3.4cqw}
.suite-stage .s-board .board section h3{font-size:5cqw}
.suite-stage .s-board .board .names{font-size:11cqw}

/* Wela (piwonia) na stronie sprzedażowej */
.chat-face .wf-bg{fill:#fff5f6}.chat-face .wf-out{fill:#f3a7b7}.chat-face .wf-in{fill:var(--peony)}.chat-face .wf-face{fill:#fff1e8}
.chat-face .wf-eyes circle{fill:var(--wine-900);transform-box:fill-box;transform-origin:center;animation:blink2 4.5s infinite}
.chat-face .wf-blush{fill:var(--peony);opacity:.35}.chat-face .wf-mouth{fill:none;stroke:var(--wine-900);stroke-width:2.2;stroke-linecap:round}
.chat-face svg{overflow:hidden}