/* =====================================================================
   „JEDNA NOC” — propozycja Claude dla strony świątecznej 2026
   Ładowany jako ostatni (po christmas-details.css). Dotyczy tylko strony
   głównej (body.home-page) + kilku elementów wspólnych (fonty, okładka).
   Cała strona to jedna noc przed Mikołajkami: im niżej, tym cieplej.
   ===================================================================== */

/* ---------- Fraunces (OFL) — akcenty szeryfowe zamiast systemowego Georgia ---------- */
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;src:url(./assets/fonts/fraunces-latin-normal.woff2) format("woff2-variations");unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026}
@font-face{font-family:"Fraunces";font-style:normal;font-display:swap;font-weight:100 900;src:url(./assets/fonts/fraunces-pl-normal.woff2) format("woff2-variations");unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;src:url(./assets/fonts/fraunces-latin-italic.woff2) format("woff2-variations");unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026}
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:100 900;src:url(./assets/fonts/fraunces-pl-italic.woff2) format("woff2-variations");unicode-range:U+0104-0107,U+0118-0119,U+0141-0144,U+015A-015B,U+0179-017C}

body[data-season="christmas"] h1 em,
body[data-season="christmas"] h2 em,
body[data-season="christmas"] h3 em,
body[data-season="christmas"] .cover-note p,
body[data-season="christmas"] .game-title-art em,
body[data-season="christmas"] .audio-title em,
body[data-season="christmas"] .cover-title,
body[data-season="christmas"] .phone-complete strong{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:380;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;letter-spacing:-.035em
}

/* ---------- Paleta nocy ---------- */
.home-page{
  --p:0;                      /* postęp nocy 0 → 1 (ustawia noc.js) */
  --n-ink:#f6ecd6; --n-soft:#d9d6c6; --n-muted:#aab3a6;
  --n-gold:#efd193; --n-ember:#eaa47f; --n-line:#f6ecd61f;
  --n-glass:#ffffff09; --n-glass-2:#ffffff12;
  background:#081a21;color:var(--n-ink)
}

/* Niebo za całą stroną. Kolor przechodzi od chłodnej zorzy do ciepła świec. */
.night-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 65% at 50% 112%, color-mix(in oklab,#d08445 calc(var(--p) * 42%),transparent), transparent 70%),
    radial-gradient(80% 55% at 85% -8%, color-mix(in oklab,#2a7a72 calc((1 - var(--p)) * 30%),transparent), transparent 70%),
    radial-gradient(70% 50% at 8% 30%, color-mix(in oklab,#3c6d8a calc((1 - var(--p)) * 16%),transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab,#081a22,#1c1410 calc(var(--p) * 100%)), color-mix(in oklab,#0b1f1c,#2a1910 calc(var(--p) * 100%)));
}
.night-sky-snow,.night-sky-embers{position:absolute;inset:-120px 0 0}
.night-sky-snow{opacity:calc(.32 - var(--p) * .2);background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 63% 72%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 37% 44%,#fff 0 .8px,transparent 1.4px),radial-gradient(circle at 88% 31%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 24% 90%,#fff 0 .9px,transparent 1.5px);background-size:420px 460px;animation:night-snow 34s linear infinite}
.night-sky-embers{opacity:calc(var(--p) * .9);background-image:radial-gradient(circle at 18% 70%,#ffcf8a55 0 2px,transparent 9px),radial-gradient(circle at 74% 82%,#ffb36a44 0 2px,transparent 11px),radial-gradient(circle at 46% 58%,#ffd79c33 0 1px,transparent 8px),radial-gradient(circle at 90% 64%,#ffc27a3a 0 2px,transparent 10px);background-size:520px 600px;filter:blur(1px);animation:night-embers 40s linear infinite}
@keyframes night-snow{to{transform:translateY(120px)}}
@keyframes night-embers{to{transform:translateY(-120px)}}

/* Wszystkie sekcje strony głównej stają się przezroczyste i ciemne. */
.home-page main>section,.home-page main>.previous-christmas{background:transparent;color:var(--n-ink);border-color:var(--n-line)}
.home-page main .eyebrow{color:var(--n-gold)}
.home-page main h2{color:var(--n-ink)}
.home-page main h2 em{color:var(--n-gold)}
.home-page main .section-top>p{color:var(--n-muted)}
.home-page .text-button{color:var(--n-ink);border-bottom-color:#f6ecd655}
.home-page .text-button:hover{border-bottom-color:var(--n-gold)}
.home-page .site-footer{background:#100c09;border-top:1px solid #f6ecd614}

/* Łagodne wejście treści (wyłączane przy reduced motion). */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}

/* =====================================================================
   HERO
   ===================================================================== */
.home-page .experience-hero{background:transparent}
.home-page .experience-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,transparent,#081a21);pointer-events:none;z-index:-1}
.experience-copy h1 em{font-weight:340}

/* Uderzenie nosem Iskrzyka w ekran */
.tv-device.is-impact .tv-frame{animation:tv-bump .62s cubic-bezier(.3,1.6,.4,1)}
.tv-device.is-impact .tv-screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,#fff6dd 0,#fff6dd00 60%);mix-blend-mode:screen;animation:tv-flash .5s ease-out forwards}
@keyframes tv-bump{0%{transform:none}18%{transform:translate3d(0,-3px,0) scale(1.018) rotate(-.35deg)}42%{transform:translate3d(0,2px,0) scale(.995) rotate(.2deg)}70%{transform:translate3d(0,-1px,0)}100%{transform:none}}
@keyframes tv-flash{from{opacity:.55}to{opacity:0}}
.impact-snow{position:absolute;left:3%;right:10%;top:40px;height:220px;z-index:3;pointer-events:none;overflow:visible}
.impact-snow i{position:absolute;top:0;width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:#fffaf0;box-shadow:0 0 6px #fff8;opacity:0;animation:impact-fall var(--d,1.6s) cubic-bezier(.3,.2,.6,1) var(--delay,0s) forwards}
@keyframes impact-fall{0%{opacity:0;transform:translate3d(0,-4px,0)}12%{opacity:.95}100%{opacity:0;transform:translate3d(var(--x,0px),var(--y,160px),0)}}

/* Telefon dzwoni → pokój przygasa, telefon świeci. */
.experience-world,.experience-hero .tv-device{transition:filter .9s ease}
.experience-hero[data-experience-state="loading"] .experience-world,
.experience-hero[data-experience-state="greeting"] .experience-world,
.experience-hero[data-experience-state="ready"] .experience-world{filter:brightness(.48) saturate(.8)}
.experience-hero[data-experience-state="ready"] .tv-device{filter:drop-shadow(0 30px 27px #020d17a6) brightness(.8)}
.experience-hero .phone-device::after{content:"";position:absolute;inset:-30% -60%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,#ffd99a3a,#ffd99a00);opacity:0;transition:opacity .9s ease;pointer-events:none}
.experience-hero[data-experience-state="loading"] .phone-device::after,
.experience-hero[data-experience-state="greeting"] .phone-device::after,
.experience-hero[data-experience-state="ready"] .phone-device::after{opacity:1}

/* Mobile: najpierw obietnica + urządzenia, cena i CTA tuż pod nimi. */
@media(max-width:900px){
  .home-page .experience-layout{gap:0}
  .home-page .experience-copy{display:contents}
  .home-page .experience-eyebrow{order:1;margin-bottom:14px}
  .home-page .experience-copy h1{order:2;margin-bottom:22px}
  .home-page .experience-presentation{order:3;margin-bottom:26px}
  .home-page .experience-cta{order:4}
  .home-page .experience-price-note{order:5;margin-bottom:22px}
  .home-page .experience-intro{order:6}
  .home-page .experience-family{order:7}
  .home-page .experience-package{order:8}
  .home-page .experience-layout{padding-top:96px}
}
@media(max-width:600px){
  .home-page .experience-copy h1{font-size:clamp(38px,10.4vw,46px);line-height:1.04}
  .home-page .experience-stage-footer{margin-top:14px;padding-top:12px}
  .home-page .experience-cta{flex-wrap:nowrap}
  .home-page .experience-cta .button{flex:1;justify-content:center;min-height:52px}
  .home-page .experience-intro{font-size:14px}
}

/* =====================================================================
   FILM + OKŁADKA Z IMIENIEM
   ===================================================================== */
.home-page .christmas-film{padding-block:110px 100px}
.home-page .christmas-film .quality-copy>p:not(.eyebrow){color:var(--n-soft)}
.home-page .christmas-film .quality-copy h2 em{color:var(--n-gold)}

.trailer-screen{container-type:inline-size}
.trailer-screen{box-shadow:0 0 0 1px #f6ecd61a,0 50px 120px -40px #e7b06a55,0 30px 60px -30px #000c}

/* Play na ciemnym, lewym dolnym rogu — nie zasłania dziecka ani tytułu. */
.home-page .trailer-start{left:5.5%;top:auto;bottom:9%;transform:none;width:84px;height:84px}
.home-page .trailer-start:hover{transform:scale(1.06)}
.home-page .trailer-start-label{top:50%;left:calc(100% + 18px);transform:translateY(-50%);text-align:left;background:#0d1d1ae6;backdrop-filter:blur(8px)}
.home-page .trailer-screen:has(.trailer-start:not([hidden]))::after{background:linear-gradient(20deg,#06141acc 0%,#06141a55 22%,transparent 45%)}

.home-page .cover-note{margin-top:30px}
.home-page .cover-note p{font-weight:340}
.home-page .film-notes span{color:var(--n-soft)}

/* Tryb kina: odtwarzanie trailera gasi stronę wokół. */
.cinema-veil{position:fixed;inset:0;z-index:45;background:#020608;opacity:0;transition:opacity .8s ease;cursor:pointer}
.cinema-mode .cinema-veil{opacity:.86}
.cinema-mode .santa-trailer-player{position:relative;z-index:46}

/* =====================================================================
   RODZEŃSTWO
   ===================================================================== */
.home-page .family-adventure{padding-block:110px 120px}
.home-page .family-image{border-radius:18px;box-shadow:0 0 0 1px #f6ecd61a,0 60px 120px -50px #f0b25e66}
.home-page .family-image img{transform:scale(1.04);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.home-page .family-image.is-in img{transform:scale(1)}
.home-page .family-copy .eyebrow{color:var(--n-ember)}
.home-page .family-copy h2 em{color:var(--n-ember)}
.home-page .family-copy>p:not(.eyebrow){color:var(--n-soft)}
.home-page .family-copy .family-price{color:var(--n-ink)!important;border-left-color:var(--n-ember)}
.home-page .family-copy .family-price-date{color:var(--n-muted)}

/* =====================================================================
   4000+ — WIOSKA, KTÓRA SIĘ ZAPALA
   ===================================================================== */
.home-page .previous-christmas{position:relative;isolation:isolate;padding-block:130px 110px;border:0}
.village{position:absolute;inset:0 0 auto;height:640px;z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 55%,transparent 100%)}
.village img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:blur(7px) brightness(.32) saturate(.9);transform:scale(1.08)}
.village-lights{position:absolute;inset:0}
.village-lights i{position:absolute;width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:#ffd38a;box-shadow:0 0 calc(var(--s) * 3) calc(var(--s) * .8) #ffb4554d,0 0 2px #fff4d6;opacity:0;transform:scale(.4);transition:opacity .9s ease calc(var(--i) * 70ms),transform .9s ease calc(var(--i) * 70ms)}
.previous-christmas.is-lit .village-lights i{opacity:.9;transform:none;animation:village-flicker 4s ease-in-out calc(2s + var(--i) * 170ms) infinite alternate}
@keyframes village-flicker{to{opacity:.55}}
.home-page .children-count>strong{font-family:"Fraunces",Georgia,serif;font-weight:300;font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.05em;font-variant-numeric:lining-nums tabular-nums;
  background:linear-gradient(180deg,#fff3cf,#efc574 60%,#c98a3a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 40px #f2b55f40)}
.home-page .children-count>strong b{font-weight:inherit}
.home-page .children-count>strong>span{color:#efc574;-webkit-text-fill-color:#efc574}
.home-page .children-count>span{color:var(--n-soft)}
.home-page .previous-christmas-copy .eyebrow{color:var(--n-gold)}
.home-page .previous-christmas-copy h2 em{color:var(--n-ember)}
.home-page .previous-christmas-copy>p:not(.eyebrow){color:var(--n-soft)}

/* Opinie: jedna duża + reszta swobodnie, bez pustych dołów kart. */
.home-page .reviews-heading{border-top-color:var(--n-line)}
.home-page .reviews-heading p{color:var(--n-muted)}
.home-page .parent-reviews{display:block;columns:3;column-gap:22px;margin-top:34px}
.home-page .parent-review{break-inside:avoid;min-height:0;margin:0 0 22px;padding:26px 26px 22px;background:var(--n-glass);border:1px solid var(--n-line);border-radius:14px;color:var(--n-ink);backdrop-filter:blur(4px)}
.home-page .parent-review blockquote{font-size:16px;line-height:1.75;color:var(--n-ink)}
.home-page .parent-review figcaption{margin-top:18px}
.home-page .parent-review figcaption strong{color:var(--n-gold);font-weight:650}
.home-page .parent-review figcaption>span:last-child{color:var(--n-muted)}
.home-page .review-rule{background:var(--n-ember)}
.home-page .parent-review.is-featured{column-span:all;display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px 60px;margin-bottom:34px;padding:44px 48px;background:radial-gradient(120% 140% at 0% 0%,#f0b25e1f,transparent 60%),var(--n-glass);border-color:#efd19333}
.home-page .parent-review.is-featured blockquote{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:340;font-variation-settings:"SOFT" 100,"opsz" 72;font-size:clamp(22px,2.3vw,32px);line-height:1.38;letter-spacing:-.02em;max-width:900px}
.home-page .parent-review.is-featured figcaption{margin:0;white-space:nowrap}

/* =====================================================================
   PERSONALIZACJA, OFERTA, JAK TO DZIAŁA, PORADNIK
   ===================================================================== */
.home-page .christmas-personalization{border-bottom:0}
.home-page .holiday-personal-grid article{border-top-color:var(--n-line)}
.home-page .holiday-personal-grid h3{color:var(--n-ink)}
.home-page .holiday-personal-grid p{color:var(--n-muted)}
.home-page .feature-index{color:var(--n-gold)}

.home-page .product-card{background:var(--n-glass);border:1px solid var(--n-line);color:var(--n-ink);box-shadow:0 40px 80px -60px #000}
.home-page .product-card:hover{transform:translateY(-6px);border-color:#efd19355;box-shadow:0 40px 90px -50px #f0b25e55}
.home-page .product-card .product-art{background:#0e1d1b}
.home-page .product-card h3,.home-page .product-card h3 a{color:var(--n-ink)}
.home-page .product-kind{color:var(--n-gold)}
.home-page .product-copy>p{color:var(--n-soft)}
.home-page .product-bottom{border-top-color:var(--n-line)}
.home-page .product-bottom>span{color:var(--n-muted)}
.home-page .round-link{border-color:#f6ecd655;color:var(--n-ink)}
.home-page .round-link:hover{background:var(--n-gold);color:#19251f;border-color:var(--n-gold)}
.home-page .card-tag{background:#0d1d1ae0;color:var(--n-gold);border:1px solid #efd19344;backdrop-filter:blur(6px)}
.home-page .product-card.red .card-tag{background:#a8473d;color:#fff4e6;border-color:transparent}
.home-page .coming-soon{border-color:#f6ecd644;color:var(--n-soft)}
/* Audiobook: ta sama noc zamiast fioletu, złota fala dźwięku. */
.home-page .audio-art{background:radial-gradient(80% 80% at 85% 90%,#f0b25e2e,transparent 70%),radial-gradient(70% 70% at 0% 0%,#2c5b5a40,transparent 70%),#0f1f1d;color:var(--n-ink)}
.home-page .audio-art .wave{opacity:.55}
.home-page .audio-art .wave i{background:linear-gradient(180deg,#ffe3a6,#d9953f)}
.home-page .audio-art .audio-title em{color:var(--n-gold)}
.home-page .game-art{background:radial-gradient(80% 80% at 90% 85%,#f0b25e26,transparent 65%),#0f1f1d}

/* Jak to działa: oś czasu z prawdziwymi datami. */
.home-page .christmas-how{border-top:0}
.home-page .steps-timeline{position:relative;padding-top:42px}
.home-page .steps-timeline::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:linear-gradient(90deg,var(--n-gold),#efd19366 60%,#efd19311)}
.home-page .steps-timeline article{position:relative;border-top:0;padding-top:0}
.home-page .steps-timeline article::before{content:"";position:absolute;top:-33px;left:0;width:11px;height:11px;border-radius:50%;background:var(--n-gold);box-shadow:0 0 0 5px #efd19322,0 0 22px #efd193aa}
.home-page .step-num{font-family:"Fraunces",Georgia,serif;color:var(--n-gold);font-variation-settings:"SOFT" 100,"WONK" 1}
.step-date{display:inline-block;margin-left:14px;vertical-align:middle;font-size:10px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:#19251f;background:var(--n-gold,#efd193);padding:5px 10px;border-radius:30px}
.home-page .steps h3{color:var(--n-ink)}
.home-page .steps p{color:var(--n-muted)}

.home-page .journal-teaser{padding-block:80px 90px}
.home-page .journal-teaser h2{font-size:clamp(28px,2.6vw,38px)}
.home-page .journal-card-copy h3,.home-page .journal-card-copy h3 a{color:var(--n-ink);font-size:19px}
.home-page .journal-card-copy>p:not(.journal-meta){color:var(--n-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-page .journal-meta{color:var(--n-gold)}
.home-page .journal-card-art{aspect-ratio:2.1;background:#0e1d1b}
.home-page .journal-read{color:var(--n-ink)}

/* =====================================================================
   FINAŁ — lot nad krainą za napisem
   ===================================================================== */
.home-page .holiday-finale{position:relative;isolation:isolate;overflow:hidden;padding-block:170px 150px;background:transparent}
.finale-film{position:absolute;inset:0;z-index:-1}
.finale-film video{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.9)}
.finale-film::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 55%,#1a120c55,#1a120cee 80%),linear-gradient(180deg,#1b130e 0%,transparent 25%,transparent 70%,#100c09 100%)}
.home-page .holiday-finale h2{font-size:clamp(44px,5.6vw,84px);text-shadow:0 4px 40px #000a}
.home-page .holiday-finale h2 em{color:var(--n-gold)}
.home-page .holiday-finale .button{box-shadow:0 0 0 8px #efd19318,0 20px 60px -10px #efd19366}

/* =====================================================================
   LEPKI PASEK CTA
   ===================================================================== */
.sticky-cta{position:fixed;z-index:35;left:50%;bottom:18px;display:flex;align-items:center;gap:22px;padding:9px 9px 9px 22px;border-radius:14px;background:#0c1a18e8;border:1px solid #efd19340;color:#f6ecd6;box-shadow:0 20px 50px -10px #000b;backdrop-filter:blur(14px);transform:translate(-50%,140%);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;pointer-events:none}
.sticky-cta.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.sticky-cta strong{display:block;font-size:13px;font-weight:750}
.sticky-cta span{font-size:11px;color:#c9cdbd}
.sticky-cta .button{min-height:44px;padding:10px 18px;font-size:12px;gap:10px;border-radius:9px;white-space:nowrap}
@media(max-width:600px){
  .sticky-cta{left:10px;right:10px;bottom:10px;transform:translateY(140%);gap:12px;padding:8px 8px 8px 14px;justify-content:space-between}
  .sticky-cta.is-visible{transform:none}
  .sticky-cta strong{font-size:12px}.sticky-cta span{font-size:10px}
}

/* =====================================================================
   RESPONSYWNOŚĆ
   ===================================================================== */
@media(max-width:900px){
  .home-page .parent-reviews{columns:2}
  .home-page .parent-review.is-featured{grid-template-columns:1fr;padding:34px}
  .home-page .steps-timeline{grid-template-columns:1fr;gap:36px;padding-top:0;padding-left:34px}
  .home-page .steps-timeline::before{top:6px;bottom:6px;left:5px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--n-gold),#efd19311)}
  .home-page .steps-timeline article{display:block}
  .home-page .steps-timeline article::before{top:12px;left:-34px}
}
@media(max-width:600px){
  .home-page .christmas-film{padding-block:70px 64px}
  .home-page .trailer-start{width:60px;height:60px;left:5%;bottom:8%}
  .home-page .trailer-start-label{left:calc(100% + 10px);font-size:10px;padding:5px 9px}
  .home-page .family-adventure{padding-block:64px 70px}
  .home-page .previous-christmas{padding-block:80px 64px}
  .village{height:440px}
  .home-page .parent-reviews{display:grid;columns:auto}
  .home-page .parent-review.is-featured{padding:26px 24px}
  .home-page .parent-review.is-featured blockquote{font-size:21px}
  .home-page .parent-review{margin:0}
  .home-page .steps-timeline article{display:block}
  .home-page .steps-timeline .step-num{font-size:26px}
  .home-page .steps h3{margin-top:12px}
  .home-page .family-image img{aspect-ratio:4/3}
  .home-page .holiday-finale{padding-block:110px 100px}
  .home-page .journal-card-art{aspect-ratio:1.15}
}
@media(prefers-reduced-motion:reduce){
  .night-sky-snow,.night-sky-embers,.village-lights i,.previous-christmas.is-lit .village-lights i{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .tv-device.is-impact .tv-frame,.tv-device.is-impact .tv-screen::after{animation:none}
  .finale-film video{display:none}
  .finale-film{background:url(./assets/hero-2026/adventure-flight.webp) center/cover}
  .sticky-cta,.cinema-veil{transition:none}
}

/* =====================================================================
   HERO „ROZDROŻE” — telefon steruje bajką (dwa odtwarzacze TV, napisy)
   ===================================================================== */
.tv-screen .tv-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;z-index:1}
.tv-screen .tv-layer.is-front{opacity:1}
.tv-screen .tv-fallback{z-index:0}
.tv-screen.is-still .tv-fallback{z-index:2}
.tv-screen.is-still .tv-layer{opacity:0}
.tv-screen .tv-vignette{z-index:3}.tv-screen .tv-caption{z-index:4}.tv-screen .tv-glass{z-index:6}

.tv-titles{position:absolute;inset:0;z-index:5;pointer-events:none;display:grid;place-items:end start;padding:0 0 7% 6%}
.tv-title{display:flex;flex-direction:column;align-items:flex-start;gap:.35em;max-width:78%;color:#fff6df;animation:title-in .55s cubic-bezier(.2,.8,.2,1) both;text-shadow:0 2px 14px #000c,0 0 2px #000}
.tv-title.is-out{animation:title-out .38s ease forwards}
.tv-title strong{font-family:"Fraunces",Georgia,serif;font-weight:700;font-variation-settings:"SOFT" 100,"opsz" 96;font-size:clamp(15px,3.4cqi,30px);line-height:1.08;letter-spacing:-.02em}
.tv-title.is-small strong{font-weight:500;font-style:italic;font-size:clamp(13px,2.7cqi,24px)}
.tv-title-kicker{font:800 clamp(7px,1.15cqi,10px)/1.2 Manrope,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#1b1206;background:#efd193;padding:.45em .8em;border-radius:3px;text-shadow:none}
.tv-title-sub{font:600 clamp(8px,1.5cqi,13px)/1.4 Manrope,Arial,sans-serif;color:#f1e7cf}
.tv-screen{container-type:inline-size}
.tv-titles::before{content:"";position:absolute;inset:0;background:linear-gradient(20deg,#000a 0%,#0005 30%,transparent 60%);opacity:0;transition:opacity .4s}
.tv-titles:has(.tv-title:not(.is-out))::before{opacity:1}
@keyframes title-in{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes title-out{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
.tv-choice-badge{position:absolute;z-index:5;top:6%;right:4%;display:inline-flex;align-items:center;gap:.5em;font:750 clamp(7px,1.3cqi,11px)/1 Manrope,Arial,sans-serif;letter-spacing:.04em;color:#102420;background:#b4d8a2;padding:.6em .9em;border-radius:30px;box-shadow:0 4px 18px #0007;animation:title-in .5s ease both}
.tv-choice-badge::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#1d5a33;box-shadow:0 0 0 .25em #1d5a3333}

/* Telefon: wybór drogi */
.phone-choice,.phone-chosen{position:absolute;inset:44px 10px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.choice-question{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:17px;line-height:1.15;letter-spacing:-.02em;margin:2px 0 14px}
.choice-buttons{display:grid;gap:7px;width:100%}
.choice-buttons button{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:36px;border-radius:30px;border:1px solid #b3d29788;background:#ffffff12;color:#f6f2de;font:750 11px Manrope,Arial,sans-serif;transition:background .2s,transform .2s}
.choice-buttons button svg{width:14px;height:14px}
.choice-buttons button:hover,.choice-buttons button:focus-visible{background:#b4d8a2;color:#1d3524}
.choice-buttons button.is-ghost-pressed,.phone-action.is-ghost-pressed{background:#d1edbd;color:#1d3524;transform:scale(.96)}
.choice-buttons button[data-path="prosto"]{animation:choice-hint 2.4s ease-in-out 1s infinite}
@keyframes choice-hint{0%,100%{box-shadow:0 0 0 0 #b4d8a200}50%{box-shadow:0 0 0 5px #b4d8a233}}
.choice-note{margin-top:auto;font-size:8px;color:#c9d6ba;letter-spacing:.02em}
.phone-chosen{justify-content:center}
.phone-chosen strong{font-family:"Fraunces",Georgia,serif;font-size:28px;font-weight:600;letter-spacing:-.03em;margin:8px 0 6px;color:#f6ecd6}
.chosen-hint{font-size:9px;color:#d4dec7}
.chosen-arrow{width:22px;height:22px;margin-top:14px;border-left:2px solid #b4d8a2;border-top:2px solid #b4d8a2;transform:rotate(-45deg);animation:chosen-point 1.4s ease-in-out infinite}
@keyframes chosen-point{0%,100%{translate:0 0}50%{translate:-5px 0}}

/* „Duch palca” — pokazuje tapnięcie, gdy nikt nie klika */
.ghost-tap{position:absolute;z-index:9;left:50%;top:80%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle,#ffffffcc 0 30%,#ffffff55 31% 55%,transparent 56%);opacity:0;pointer-events:none}
.ghost-tap.is-tapping{animation:ghost-tap 1.1s ease forwards}
@keyframes ghost-tap{0%{opacity:0;transform:translate(14px,22px) scale(1.2)}35%{opacity:1;transform:none scale(1)}55%{opacity:1;transform:scale(.72)}70%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

/* Stany sceny */
.experience-hero[data-experience-state="calling"] .experience-world{filter:brightness(.48) saturate(.8)}
.experience-hero[data-experience-state="calling"] .tv-device{transform:rotateY(-7deg) scale(.96) translateX(-1%);filter:drop-shadow(0 30px 27px #020d17a6) brightness(.7)}
.experience-hero[data-experience-state="calling"] .phone-device,.experience-hero[data-experience-state="choice"] .phone-device{transform:rotateY(-2deg) rotateZ(1deg) scale(1.06) translateZ(70px)}
.experience-hero[data-experience-state="calling"] .phone-device::after,.experience-hero[data-experience-state="choice"] .phone-device::after{opacity:1}
.experience-hero[data-experience-state="choice"] .experience-world{filter:brightness(.62)}
.experience-hero[data-experience-state="path"] .tv-device{transform:rotateY(-2deg) scale(1.04) translateX(-1%)}
.experience-hero[data-experience-state="path"] .phone-device{transform:rotateY(-6deg) rotateZ(7deg) translateY(9px) translateX(8px) translateZ(60px)}
.experience-hero[data-experience-state="path"] .tv-device .tv-frame{box-shadow:inset 0 0 0 2px #0b0f14,0 0 0 1px #071820,0 0 70px #f2c77a33}

@media(max-width:600px){
  .home-page .phone-device{width:132px}
  .phone-choice,.phone-chosen{inset:34px 7px 16px}
  .choice-question{font-size:12px;margin-bottom:8px}
  .choice-buttons{gap:5px}
  .choice-buttons button{min-height:27px;font-size:9px;gap:5px}
  .choice-buttons button::after{content:"";position:absolute;inset:-3px -6px}
  .choice-buttons button svg{width:11px;height:11px}
  .phone-kicker{margin-bottom:8px!important}
  .choice-note{font-size:6px}
  .phone-chosen strong{font-size:20px}
  .chosen-hint{font-size:7px}
  .ghost-tap{width:26px;height:26px;margin:-13px 0 0 -13px}
  .experience-hero[data-experience-state="path"] .phone-device,.experience-hero[data-experience-state="complete"] .phone-device{transform:translateY(34px) translateX(10px) rotateZ(6deg) scale(.8)}
  /* Leave room for the phone even when reduced motion removes its transform. */
  .tv-title{max-width:min(60%,calc(100% - 112px))}
  .tv-choice-badge{top:5%;left:4%;right:auto}
}
@media(prefers-reduced-motion:reduce){.tv-title,.tv-title.is-out,.tv-choice-badge,.ghost-tap,.chosen-arrow,.choice-buttons button[data-path="prosto"]{animation:none!important}.tv-screen .tv-layer{transition:none}}

/* Rotujące okładki (przykładowe, fikcyjne dzieci) */
.cover-rotator{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none}
.cover-rotator img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity 1.1s ease,transform 6s ease-out}
.cover-rotator img.is-current{opacity:1;transform:scale(1)}
.cover-dots{position:absolute;right:3.5%;bottom:6%;display:flex;gap:6px}
.cover-dots i{width:7px;height:7px;border-radius:50%;background:#fff6;box-shadow:0 1px 4px #0008;transition:background .4s,width .4s}
.cover-dots i.is-current{background:#fff3cf;width:20px;border-radius:5px}
.trailer-screen:has([data-trailer-started="true"]) .cover-rotator{display:none}
.trailer-screen .trailer-start{z-index:3}
@media(prefers-reduced-motion:reduce){.cover-rotator img{transition:none;transform:none}}

/* =====================================================================
   TAK TO DZIAŁA + ZWIASTUN (zastępuje sekcję rodzeństwa)
   ===================================================================== */
.how-trailer{padding-block:110px 110px;color:var(--n-ink,#f6ecd6)}
.how-trailer-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:64px;align-items:center}
.how-trailer-copy h2{font-size:clamp(32px,3.2vw,48px);line-height:1.1;letter-spacing:-.045em;margin-bottom:34px}
.how-steps{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:22px;position:relative}
.how-steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:1px;background:linear-gradient(180deg,var(--n-gold,#efd193),#efd19322)}
.how-steps li{display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;position:relative}
.how-step-num{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#0d1d1a;border:1px solid #efd19366;color:var(--n-gold,#efd193);font:600 18px "Fraunces",Georgia,serif;box-shadow:0 0 22px #efd19322}
.how-steps h3{font-size:18px;letter-spacing:-.02em;margin:6px 0 6px;color:var(--n-ink,#f6ecd6)}
.how-steps p{font-size:13.5px;line-height:1.75;color:var(--n-soft,#d9d6c6);margin:0}
.siblings-callout{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;padding:14px 18px 14px 14px;border-radius:14px;border:1px solid #eaa47f55;background:linear-gradient(110deg,#eaa47f1f,#ffffff08 60%);margin-bottom:28px}
.siblings-callout img{width:120px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;box-shadow:0 10px 24px -8px #000a}
.siblings-tag{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1b1206;background:var(--n-ember,#eaa47f);padding:4px 8px;border-radius:3px;margin-bottom:6px}
.siblings-callout strong{display:block;font-size:16px;letter-spacing:-.02em;margin-bottom:3px}
.siblings-callout p{font-size:12.5px;line-height:1.6;color:var(--n-soft,#d9d6c6);margin:0}
.how-cta{border-radius:7px;min-height:52px;padding:14px 22px;gap:14px}
.how-note{font-size:10px;color:var(--n-muted,#aab3a6);margin:12px 0 0}
.how-trailer-player .trailer-screen{border-radius:16px}
.home-page .how-trailer-player .trailer-start{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:96px;height:96px}
.home-page .how-trailer-player .trailer-start:hover{transform:translate(-50%,-50%) scale(1.06)}
.home-page .how-trailer-player .trailer-start-label{left:50%;top:calc(100% + 18px);transform:translateX(-50%);text-align:center}
.home-page .how-trailer-player .trailer-screen:has(.trailer-start:not([hidden]))::after{background:radial-gradient(circle at 50% 50%,transparent 30%,#06141a66)}

/* Okładki bez odtwarzacza */
.cover-showcase{margin:0}
.cover-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px #f6ecd61a,0 50px 120px -40px #e7b06a55,0 30px 60px -30px #000c}
.cover-frame .cover-rotator{border-radius:16px}
.cover-showcase figcaption{font-size:11px;color:#c8cebd;margin-top:11px}

/* Awaryjny podgląd hero (JS nie ruszył albo błąd) */
.tv-fallback-cta{position:absolute;inset:0;z-index:7;display:none;align-items:flex-end;justify-content:flex-start;gap:12px;padding:6%;color:#fff6df;background:linear-gradient(20deg,#000b,transparent 60%);font:750 clamp(11px,2cqi,16px)/1.3 Manrope,Arial,sans-serif;text-decoration:none}
.tv-fallback-cta small{display:block;font-weight:500;font-size:.72em;opacity:.8;margin-top:3px}
.tv-fallback-play{width:clamp(34px,7cqi,58px);height:clamp(34px,7cqi,58px);border-radius:50%;display:grid;place-items:center;background:#fff1c9;color:#19251f;flex-shrink:0}
.tv-fallback-play svg{width:45%;height:45%;margin-left:8%}
.experience-hero.is-fallback .tv-fallback-cta,.experience-hero:not(.is-live) .tv-fallback-cta{display:flex}
.experience-hero:not(.is-live):not(.is-fallback) .tv-fallback-cta{animation:fallback-wait 3s step-end both}
@keyframes fallback-wait{from{visibility:hidden}to{visibility:visible}}
.experience-hero.is-fallback .phone-action-area,.experience-hero.is-fallback .experience-stage-actions button{display:none}
.experience-hero.is-fallback .caller-note::after{content:" · zobacz zwiastun poniżej"}

/* FAQ na stronie głównej */
.home-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:60px;align-items:start;padding-block:90px}
.home-faq-head h2{font-size:clamp(30px,2.9vw,44px);line-height:1.12;letter-spacing:-.045em;margin-bottom:18px}
.home-faq-head p:not(.eyebrow){font-size:13px;color:var(--n-muted,#aab3a6)}
.home-faq-head a{color:var(--n-gold,#efd193);text-decoration:underline;text-underline-offset:3px}
.home-faq-list details{border-bottom:1px solid var(--n-line,#f6ecd61f)}
.home-faq-list details:first-child{border-top:1px solid var(--n-line,#f6ecd61f)}
.home-faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--n-ink,#f6ecd6)}
.home-faq-list summary::-webkit-details-marker{display:none}
.home-faq-list summary::after{content:"";flex-shrink:0;width:9px;height:9px;border-right:1.5px solid var(--n-gold,#efd193);border-bottom:1.5px solid var(--n-gold,#efd193);transform:rotate(45deg) translateY(-3px);transition:transform .3s}
.home-faq-list details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.home-faq-list details p{margin:-4px 0 22px;font-size:14px;line-height:1.8;color:var(--n-soft,#d9d6c6);max-width:680px}

.checkout-placeholder{text-align:center;max-width:640px;padding-block:120px}
.checkout-placeholder h1{font-size:44px;margin-bottom:16px}

@media(max-width:900px){
  .how-trailer-layout{grid-template-columns:1fr;gap:40px}
  .how-trailer-player{order:-1}
  .home-faq{grid-template-columns:1fr;gap:28px}
}
@media(max-width:600px){
  .how-trailer{padding-block:64px 70px}
  .how-trailer-player .trailer-screen.is-portrait{max-width:300px}
  .home-page .how-trailer-player .trailer-start{width:68px;height:68px}
  .siblings-callout{grid-template-columns:92px 1fr;gap:12px}
  .siblings-callout img{width:92px}
  .how-cta{width:100%;justify-content:center}
  .home-faq{padding-block:60px}
  .home-faq-list summary{font-size:15px;padding:17px 0}
}

/* Pakiety */
.bundles{padding-block:100px}
.bundles-head{max-width:640px;margin-bottom:44px}
.bundles-head h2{font-size:clamp(32px,3.2vw,48px);line-height:1.1;letter-spacing:-.045em;margin-bottom:18px}
.bundles-head p:not(.eyebrow){font-size:14px;line-height:1.85;color:var(--n-soft,#d9d6c6)}
.bundle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.bundle{position:relative;display:flex;flex-direction:column;padding:32px 28px 28px;border-radius:16px;border:1px solid var(--n-line,#f6ecd61f);background:var(--n-glass,#ffffff09);color:var(--n-ink,#f6ecd6)}
.bundle.is-featured{border-color:#efd19366;background:radial-gradient(120% 90% at 50% 0%,#f0b25e26,transparent 60%),#ffffff0d;box-shadow:0 40px 90px -50px #f0b25e88;transform:translateY(-10px)}
.bundle-flag{position:absolute;top:-12px;left:28px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--n-gold,#efd193);color:#19251f;padding:5px 11px;border-radius:30px}
.bundle h3{font-size:18px;letter-spacing:-.02em;margin:0 0 10px;color:var(--n-ink,#f6ecd6)}
.bundle-price{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.bundle-price strong{font:400 48px/1 "Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100,"opsz" 144;letter-spacing:-.04em;color:var(--n-gold,#efd193)}
.bundle-price span{font-size:12px;color:var(--n-muted,#aab3a6)}
.bundle-who{font-size:13.5px;line-height:1.7;color:var(--n-soft,#d9d6c6);margin:0 0 18px;min-height:3.4em}
.bundle ul{list-style:none;margin:0 0 26px;padding:16px 0 0;border-top:1px solid var(--n-line,#f6ecd61f);display:grid;gap:8px;font-size:12.5px;color:var(--n-soft,#d9d6c6)}
.bundle li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--n-gold,#efd193);margin-right:10px;vertical-align:middle}
.bundle .button{margin-top:auto;justify-content:center;border-radius:8px;min-height:50px;gap:12px}
.bundle-button{background:transparent;color:var(--n-ink,#f6ecd6);border:1px solid #f6ecd666}
.bundle-button:hover{background:#f6ecd61a;border-color:var(--n-gold,#efd193)}
.bundles-note{font-size:11.5px;color:var(--n-muted,#aab3a6);margin:26px 0 0;max-width:720px}
@media(max-width:900px){.bundle-grid{grid-template-columns:1fr;max-width:460px}.bundle.is-featured{transform:none;order:-1}}
@media(max-width:600px){.bundles{padding-block:64px}.bundle{padding:28px 22px 22px}.bundle-price strong{font-size:42px}}

/* Keep the mobile review rail quiet against the night background. */
.parent-reviews { scrollbar-width: thin; scrollbar-color: #b99a6055 transparent; }
.parent-reviews::-webkit-scrollbar { height: 5px; }
.parent-reviews::-webkit-scrollbar-track { background: transparent; }
.parent-reviews::-webkit-scrollbar-thumb { background: #b99a6055; border-radius: 8px; }