/* ===== Fortune Roleplay – smooth görgetés + videó intro stílusok ===== */

/* Lenis alapok */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ===== Intro ===== */
html:not(.intro-lock) .intro:not(.done){display:none}
html.intro-lock,html.intro-lock body{overflow:hidden}
:root{--intro-ease:cubic-bezier(.76,0,.2,1);--intro-time:1.35s}
.intro{position:fixed;inset:0;z-index:1000;background:#000;color:#fff;display:grid;place-items:center;overflow:hidden;
  transition:transform var(--intro-time) var(--intro-ease);will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.intro.done{transform:translate3d(0,-100%,0)}
/* lágy árnyék az intro alsó élén, ahogy felcsúszik */
.intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;pointer-events:none;opacity:0;
  background:linear-gradient(transparent,rgba(0,0,0,.55));transition:opacity .4s}
.intro.done::after{opacity:1}

/* Az oldal alulról "emelkedik fel" az intro alatt – csak transform (GPU-n fut, nem terheli a layoutot) */
html{scrollbar-gutter:stable}   /* ne ugorjon az oldal, amikor a görgetősáv visszajön az intro végén */
#site-header{display:contents}   /* így a sticky fejléc az egész oldalhoz képest tapad */
#site-header .topbar,main,#site-footer{transition:transform var(--intro-time) var(--intro-ease);transform-origin:50% 0}
html.intro-lock #site-header .topbar,html.intro-lock main,html.intro-lock #site-footer{transform:translate3d(0,14vh,0)}
html.intro-anim main{will-change:transform}
/* az intro alatt a drága (blur) háttér-animáció áll, hogy ne akadjon a felcsúszás */
html.intro-anim .hero::before,html.intro-anim .hero::after{animation-play-state:paused}
/* ===== JS intro (canvas warp + betűnkénti felirat) ===== */
.intro{background:radial-gradient(ellipse at 50% 50%,rgba(255,45,63,.22) 0%,rgba(120,10,25,.12) 32%,#050508 70%),#050508}
.intro::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.intro-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2vw,22px);
  padding:0 24px;text-align:center;pointer-events:none}
.intro-title{display:flex;flex-wrap:wrap;justify-content:center;gap:.05em .45em;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(2.4rem,9vw,7.5rem);line-height:1.05;letter-spacing:.06em;color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.55)}
.intro-title .w{display:inline-flex;white-space:nowrap}
.intro-title .w.red{color:#fcfcfc;text-shadow:0 0 50px rgba(255,45,63,.65),0 4px 40px rgba(0,0,0,.5)}
.intro-title .ch{display:inline-block;opacity:0;transform:translateY(60%) scale(.9);filter:blur(10px)}
.intro.go .intro-title .ch{animation:introLetter .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.5s + var(--i)*.085s)}
@keyframes introLetter{to{opacity:1;transform:none;filter:blur(0)}}
.intro-sub{font:600 clamp(.7rem,1.6vw,1.05rem)/1 'Inter',sans-serif;letter-spacing:.5em;text-transform:uppercase;color:rgba(255,255,255,.62);
  opacity:0;transform:translateY(8px);padding-left:.5em}
.intro.go .intro-sub{animation:introSub .9s ease forwards;animation-delay:1.9s}
@keyframes introSub{to{opacity:1;transform:none}}
.intro-bar{position:absolute;z-index:2;left:50%;bottom:calc(11vh + env(safe-area-inset-bottom,0px));width:min(320px,62vw);height:3px;border-radius:3px;
  background:rgba(255,255,255,.12);overflow:hidden;transform:translateX(-50%)}
.intro-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;border-radius:inherit;
  background:linear-gradient(90deg,#ff2d3f,#ff7a45);box-shadow:0 0 14px rgba(255,45,63,.8)}
.intro.go .intro-bar i{animation:introBar var(--dur,3.9s) cubic-bezier(.35,.1,.25,1) forwards}
@keyframes introBar{to{transform:scaleX(1)}}
.intro-skip{position:absolute;z-index:2;left:0;right:0;bottom:calc(4vh + env(safe-area-inset-bottom,0px));text-align:center;
  font:500 .72rem/1 'Inter',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.35)}
/* záró villanás */
.intro-flashfx{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,#fff 0%,rgba(255,90,100,.85) 28%,rgba(255,45,63,0) 70%)}
.intro.flash .intro-flashfx{animation:introFlash .55s ease-out forwards}
@keyframes introFlash{0%{opacity:0}35%{opacity:.95}100%{opacity:0}}
.intro.flash .intro-title{animation:introPunch .5s ease-out}
@keyframes introPunch{50%{transform:scale(1.045)}}
/* kevesebb mozgás: rövid, nyugodt változat (az intro így is lejátszódik) */
.intro.calm .intro-title .ch{filter:none;transform:none;animation:calmIn .6s ease forwards!important;animation-delay:0s!important}
.intro.calm .intro-sub{animation:calmIn .6s ease forwards!important;animation-delay:.2s!important;transform:none}
@keyframes calmIn{to{opacity:1}}

/* ===== Hero belépő animáció (intro után indul) ===== */
.hero-stagger>*{opacity:0;transform:translateY(34px);will-change:transform,opacity}
.hero-play .hero-stagger>*{animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*.11s)}
.hero-stagger>*:nth-child(1){--i:0}.hero-stagger>*:nth-child(2){--i:1}.hero-stagger>*:nth-child(3){--i:2}
.hero-stagger>*:nth-child(4){--i:3}.hero-stagger>*:nth-child(5){--i:4}
@keyframes rise{to{opacity:1;transform:none}}

/* Finomabb scroll-reveal */
.reveal{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.hero-grid{will-change:transform}

/* Betűnkénti scroll animáció */
.w{display:inline-block;white-space:nowrap}
.l{display:inline-block;will-change:opacity,transform}

@media(prefers-reduced-motion:reduce){.hero-stagger>*{opacity:1;transform:none}}

/* Lábléc – jogi linkek */
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin:20px 0 10px}
.foot-legal a{color:var(--muted);font-size:.86rem;transition:color .2s}
.foot-legal a:hover{color:var(--text)}