/* ==========================================================================
   UNITA — fotó-réteges görgetős sztori-hero (scrollytelling).
   A HERO_PLAYBOOK.md 2.6 pontja szerint portolva az 1x1media scroll-story
   motorból, DE a "világ" itt nem SVG-vászon, hanem teljes-képernyős FOTÓ-réteg:
   a scroll-progresszió cross-fade-eli (opacity) a rétegeket + finom ken-burns
   zoom (transform: scale). Csak transform + opacity animálódik (GPU).
   A tokenek a themes/unita/css/style.css --clr- és --radius- változóira épülnek.
   ========================================================================== */

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

/* A "világ": teljes-képernyős fotó-rétegek egymásra halmozva, a JS crossfade-eli. */
.story-world { position: absolute; inset: 0; }
.story-photo-layer {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; will-change: transform, opacity;
    transform: scale(1);
}
.story-photo-layer::after {
    /* Egységes sötétítő gradiens, hogy a szöveg/felirat mindig olvasható legyen. */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.28) 32%, rgba(10,10,10,.42) 68%, rgba(10,10,10,.80) 100%);
}

/* Nyitó SCRIM: a hero-szoveget olvashatóvá teszi a fotó előtt, majd elhalványul */
.story-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(100deg, rgba(10,10,10,.90) 0%, rgba(10,10,10,.80) 34%, rgba(10,10,10,.35) 62%, rgba(10,10,10,.05) 86%); }

/* Nyitó HERO: a valós hero-szöveg, 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: 660px; }
.story-hero .story-kicker { display: inline-block; color: var(--clr-accent, #00C853); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; }
.story-hero h1 { font-family: var(--font-display); color: var(--clr-text, #FFF); font-size: clamp(32px, 5vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.story-hero h1 .hl { color: var(--clr-accent, #00C853); }
.story-hero-lede { color: var(--clr-text-muted, #A0A0A0); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; margin-top: 20px; max-width: 56ch; }
.story-hero-actions { display: flex; gap: 14px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.story-hero .story-ghost { background: transparent; color: var(--clr-text, #FFF); border: 1px solid rgba(255,255,255,.32); border-radius: var(--radius-sm, 8px); padding: 14px 26px; font-weight: 700; font-size: 14px; }
.story-hero-stat { margin-top: 26px; display: inline-flex; align-items: center; gap: 14px; background: rgba(0,200,83,.12); border: 1px solid rgba(0,200,83,.30); border-radius: var(--radius-md, 16px); padding: 12px 18px; }
.story-hero-stat b { font-size: 24px; font-weight: 800; color: var(--clr-accent, #00C853); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.story-hero-stat span { font-size: 13px; color: var(--clr-text-muted, #A0A0A0); line-height: 1.35; max-width: 24ch; }
@media (max-width: 700px) {
    .story-hero { top: 44%; }
    .story-hero-actions { flex-direction: column; align-items: stretch; }
    .story-hero-actions .btn, .story-hero-actions .story-ghost { width: 100%; justify-content: center; text-align: center; }
    .story-scrim { background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.88) 42%, rgba(10,10,10,.90) 100%); }
}

/* Feliratok: alul, egymásra lapolva, crossfade */
.story-captions { position: absolute; left: 0; right: 0; bottom: max(9vh, calc(env(safe-area-inset-bottom) + 24px)); pointer-events: none; z-index: 3; }
.story-cap {
    position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 8px);
    width: min(92vw, 660px); text-align: center;
    color: var(--clr-text, #FFF); opacity: 0;
}
.story-cap .cap-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--clr-accent, #00C853); margin-bottom: 10px; }
.story-cap p { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.85); }

/* Hőkamera-overlay (2. jelenethez, CSS-only, a fotón) */
.story-thermal { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: none; }
.story-thermal i { position: absolute; width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,90,40,.95) 0%, rgba(255,60,20,.55) 45%, rgba(255,60,20,0) 72%);
    filter: blur(1px); animation: story-thermal-pulse 2.4s ease-in-out infinite; }
.story-thermal i:nth-child(1) { top: 38%; left: 44%; animation-delay: 0s; }
.story-thermal i:nth-child(2) { top: 52%; left: 58%; width: 30px; height: 30px; animation-delay: .6s; }
@keyframes story-thermal-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Záró CTA-overlay (az utolsó jelenetben úszik be) */
.story-final { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; z-index: 3; width: min(92vw, 620px); }
.story-final.on { pointer-events: auto; }
.story-final h2 { font-family: var(--font-display); color: var(--clr-text, #FFF); font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.01em; }
.story-final .flag-stat { color: #fff; font-size: clamp(40px, 5vw, 60px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: block; margin-top: 4px; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.story-final .flag-stat small { display: block; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; color: #fff; letter-spacing: .01em; margin-top: 8px; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.story-final .btn { 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; z-index: 3; }
.story-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .2s ease, transform .2s cubic-bezier(.23, 1, .32, 1); display: block; }
.story-dots i.on { background: var(--clr-accent, #00C853); transform: scale(1.5); }

/* Görgess-jel az elején */
.story-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--clr-text-muted, #A0A0A0); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; opacity: .8; z-index: 3; }
.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: 0; }
html:not(.story-js) .story-world { position: static; }
html:not(.story-js) .story-photo-layer { position: relative; inset: auto; opacity: 1 !important; transform: none !important; height: 56vh; min-height: 340px; margin: 0; }
html:not(.story-js) .story-cap { position: static; transform: none; opacity: 1 !important; margin: 0; padding: 24px 20px; background: var(--clr-surface, #111); }
html:not(.story-js) .story-captions { position: static; }
html:not(.story-js) .story-final { position: static; transform: none; opacity: 1 !important; pointer-events: auto; margin: 0; padding: 40px 20px; width: auto; }
html:not(.story-js) .story-dots, html:not(.story-js) .story-hint, html:not(.story-js) .story-thermal { display: none; }
html:not(.story-js) .story-scrim { display: none; }
html:not(.story-js) .story-hero { position: relative; inset: auto; transform: none; width: auto; max-width: 900px; margin: 0 auto; padding: 64px 20px 40px; text-align: left; }

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