/* ===== 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}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.intro video.on{opacity:1}

/* Intro felirat – betűnként jelenik meg a videó fölött */
.intro-title{position:absolute;inset:0;z-index:2;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:.05em .45em;
  padding:0 24px;text-align:center;pointer-events:none;
  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,.55),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)}}

/* ===== 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){.intro{display:none!important}.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)}