/* ==========================================================================
   1x1 MEDIA — /teszt scroll-story (Apple-stílusú görgetés-vezérelt bemutató)
   A kamera egy nagy SVG-világban utazik; a scrub a scroll-story.js dolga.
   Csak transform + opacity animálódik (GPU), a redesign.css tokenjeire épül.
   ========================================================================== */

.story-track { height: 700vh; position: relative; background: var(--d-bg, #0B1410); }
.story-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* A világ: fix px-vászon, a kamera transformálja (JS számolja) */
.story-world {
    position: absolute; left: 50%; top: 50%;
    width: 1600px; height: 1000px; margin: -500px 0 0 -800px;
    will-change: transform;
}
.story-world svg { width: 100%; height: 100%; display: block; }

/* Nyitó SCRIM: a hero-oldalt olvashatóvá teszi a világ előtt, majd elhalványul.
   A bal-közép zóna (ahol a H1 + lede + CTA van) erősen sötét, a jobb szél (CRM/eredmény)
   átlátszó marad, hogy a szöveg olvasható legyen, de a rendszer-ábra átsejljen mögötte. */
.story-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(100deg, rgba(11,20,16,.97) 0%, rgba(11,20,16,.95) 38%, rgba(11,20,16,.78) 58%, rgba(11,20,16,.28) 80%, rgba(11,20,16,0) 100%); }

/* Záró SCRIM: az utolsó jelenetben (záró CTA + 2,5× szám) úszik be a JS-ből (a
   .story-final opacityjével együtt), és jelentősen sötétíti a világos űrlap-mockupot,
   hogy a záró szöveg olvasható legyen. A közép (a CTA mögött) a legsötétebb. */
.story-endscrim { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0;
    background: radial-gradient(130% 100% at 50% 44%, rgba(11,20,16,.97) 0%, rgba(11,20,16,.92) 46%, rgba(11,20,16,.84) 100%); }

/* Felirat-SCRIM: a köztes jelenetek alsó feliratai ("A kirakat", "A gépház" stb.) a
   világos SVG-elemek (Küldés-gomb, chart-oszlopok) fölött nehezen olvashatók. Ez egy
   alulról felfelé halványuló sötétítés a felirat-zónáig. A JS a feliratok láthatóságával
   ARÁNYOSAN úszatja be (opacity = a legerősebb éppen látszó felirat), így a nyitóképen és
   a jobb-alsó rendszer-ábrán NEM sötétít, csak amikor tényleg van kiírt felirat. */
.story-capscrim { position: absolute; left: 0; right: 0; bottom: 0; height: 65vh; pointer-events: none; z-index: 2; opacity: 0;
    background: linear-gradient(to top, rgba(11,20,16,.95) 0%, rgba(11,20,16,.92) 28%, rgba(11,20,16,.72) 46%, rgba(11,20,16,.30) 68%, rgba(11,20,16,0) 100%); }

/* Nyitó HERO: a valós fooldali hero-szoveg, a scrub halványitja */
.story-hero { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    width: min(92vw, 1160px); }
.story-hero-inner { max-width: 640px; }
.story-hero .rd-eyebrow { color: var(--d-accent, #4FC98E); margin-bottom: 14px; }
.story-hero h1 { color: var(--d-ink, #F1F6F2); font-size: clamp(32px, 5.2vw, 60px); font-weight: 800; letter-spacing: -.03em; line-height: 1.03; text-wrap: balance; }
.story-hero h1 .hl { color: var(--d-accent, #4FC98E); }
.story-hero-lede { color: var(--d-muted, #9DB0A4); font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; margin-top: 20px; max-width: 54ch; }
.story-hero-actions { display: flex; gap: 14px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.story-hero .story-ghost { background: transparent; color: var(--d-ink, #F1F6F2); border: 1px solid rgba(241,246,242,.32); }
.story-hero-stat { margin-top: 28px; display: inline-flex; align-items: center; gap: 14px; background: rgba(79,201,142,.10); border: 1px solid rgba(79,201,142,.28); border-radius: var(--radius-md); padding: 12px 18px; }
.story-hero-stat b { font-size: 26px; font-weight: 800; color: var(--d-accent, #4FC98E); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.story-hero-stat span { font-size: 13px; color: var(--d-muted, #9DB0A4); line-height: 1.35; max-width: 24ch; }
@media (max-width: 700px) {
    .story-hero { top: 46%; }
    .story-hero-actions { flex-direction: column; align-items: stretch; }
    .story-hero-actions .btn-primary, .story-hero-actions .story-ghost { width: 100%; justify-content: center; text-align: center; }
    .story-scrim { background: linear-gradient(180deg, rgba(11,20,16,.72) 0%, rgba(11,20,16,.92) 42%, rgba(11,20,16,.92) 100%); }
}

/* Feliratok: alul, egymásra lapolva, crossfade. z-index a záró-scrim (z:4) FÖLÖTT,
   hogy az utolsó felirat a sötétítésen olvasható maradjon. */
.story-captions { position: absolute; left: 0; right: 0; bottom: max(9vh, calc(env(safe-area-inset-bottom) + 24px)); pointer-events: none; z-index: 6; }
.story-cap {
    position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 8px);
    width: min(92vw, 640px); text-align: center;
    color: var(--d-ink, #F1F6F2); opacity: 0;
    transition: none; /* a scrub állítja, nem transition */
}
.story-cap .cap-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--d-accent, #4FC98E); margin-bottom: 10px; }
.story-cap p { font-size: clamp(19px, 2.6vw, 30px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 18px rgba(11, 20, 16, .85); }

/* Záró CTA-overlay (az utolsó jelenetben úszik be). z-index a záró-scrim (z:4) FÖLÖTT. */
.story-final { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; z-index: 6; }
.story-final.on { pointer-events: auto; }
.story-final .flag-stat { color: var(--d-accent, #4FC98E); font-size: clamp(38px, 5vw, 60px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.story-final .flag-stat small { display: block; font-size: 14px; font-weight: 600; color: var(--d-muted, #9DB0A4); letter-spacing: 0; margin-top: 6px; }
.story-final .btn-primary { margin-top: 22px; }

/* Lépés-jelző pöttyök (jobb szél) */
.story-dots { position: absolute; right: max(14px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.story-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(241, 246, 242, .25); transition: background .2s ease, transform .2s cubic-bezier(.23, 1, .32, 1); }
.story-dots i.on { background: var(--d-accent, #4FC98E); transform: scale(1.5); }

/* Görgess-jel az elején */
.story-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--d-muted, #9DB0A4); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .8; }
.story-hint svg { display: block; margin: 6px auto 0; animation: story-bounce 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes story-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Fallback: JS nélkül vagy reduced-motion mellett statikus, olvasható oldal */
html:not(.story-js) .story-track { height: auto; }
html:not(.story-js) .story-stage { position: static; height: auto; padding: 48px 0; }
html:not(.story-js) .story-world { position: static; width: auto; height: auto; margin: 0; }
html:not(.story-js) .story-world svg { max-width: 1100px; height: auto; margin: 0 auto; }
html:not(.story-js) .story-cap { position: static; transform: none; opacity: 1; margin: 18px auto; }
html:not(.story-js) .story-captions { position: static; }
html:not(.story-js) .story-final { position: static; transform: none; opacity: 1; pointer-events: auto; margin: 28px 0 8px; }
html:not(.story-js) .story-dots, html:not(.story-js) .story-hint { display: none; }
html:not(.story-js) .story-scrim { display: none; }
html:not(.story-js) .story-endscrim { display: none; }
html:not(.story-js) .story-capscrim { display: none; }
html:not(.story-js) .story-hero { position: static; transform: none; width: auto; margin: 0 auto 32px; }

@media (prefers-reduced-motion: reduce) {
    .story-hint svg { animation: none; }
}