/* ============================================================
   Naylalabs — fp.css  (fullpage / snap mode)
   html.fullpage → each section snaps like a page; per-section
   signature entrances replay on every visit (.fp-in toggled by
   fp.js). Flow mode (tweak) leaves everything untouched.
   ============================================================ */

html.fullpage{scroll-snap-type:y mandatory}
html.fullpage .fp-sec{scroll-snap-align:start;scroll-snap-stop:always}
html.fullpage .fp-end{scroll-snap-align:end}
html.fullpage .fp-fit{min-height:100svh;display:flex;flex-direction:column;justify-content:safe center;box-sizing:border-box;padding-top:86px;padding-bottom:36px}
html.fullpage .hero.fp-fit{padding-top:0;padding-bottom:0}
/* first page: hero copy centers in the free space, client marquee sits on the bottom edge */
html.fullpage .hero.fp-fit>.wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
html.fullpage .hero.fp-fit .marquee{flex:none;margin-top:0}

/* old one-shot reveals: neutral in fullpage (fp system takes over) */
html.fullpage .reveal{opacity:1;transform:none;transition:none}

/* ---------- dot rail ---------- */
.fprail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:70;display:none;flex-direction:column;gap:12px}
html.fullpage .fprail{display:flex}
.fprail button{width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;padding:0;transition:.25s;position:relative}
.fprail button:hover{border-color:var(--orange)}
.fprail button.on{background:var(--orange);border-color:var(--orange);transform:scale(1.25)}
.fprail button::after{content:attr(data-l);position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;opacity:0;transition:.2s;pointer-events:none}
.fprail button:hover::after{opacity:1}
@media(max-width:700px){.fprail{right:8px}}

/* ============================================================
   Per-section entrances — only fullpage + anim, replay on visit
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

/* HERO — eyebrow/sub/cta rise (headline has split/decode already) */
html.fullpage.fp-anim .hero:not(.fp-in) .hero__eyebrow,
html.fullpage.fp-anim .hero:not(.fp-in) .hero__sub,
html.fullpage.fp-anim .hero:not(.fp-in) .hero__cta{opacity:0;transform:translateY(26px)}
html.fullpage.fp-anim .hero .hero__eyebrow{transition:.7s cubic-bezier(.19,.8,.22,1) .05s}
html.fullpage.fp-anim .hero .hero__sub{transition:.7s cubic-bezier(.19,.8,.22,1) .18s}
html.fullpage.fp-anim .hero .hero__cta{transition:.7s cubic-bezier(.19,.8,.22,1) .3s}

/* SERVICES — rows sweep in from the left with a slight skew */
html.fullpage.fp-anim #services:not(.fp-in) > *{opacity:0;transform:translateX(-46px) skewX(-3deg)}
html.fullpage.fp-anim #services > *{transition:.65s cubic-bezier(.19,.8,.22,1)}
html.fullpage.fp-anim #services > *:nth-child(2){transition-delay:.07s}
html.fullpage.fp-anim #services > *:nth-child(3){transition-delay:.14s}
html.fullpage.fp-anim #services > *:nth-child(4){transition-delay:.21s}
html.fullpage.fp-anim #services > *:nth-child(5){transition-delay:.28s}
html.fullpage.fp-anim #services > *:nth-child(6){transition-delay:.35s}
html.fullpage.fp-anim #services > *:nth-child(7){transition-delay:.42s}

/* AI — copy from left, terminal 3D-flips up */
html.fullpage.fp-anim #ai:not(.fp-in) .ai__grid > :first-child{opacity:0;transform:translateX(-44px)}
html.fullpage.fp-anim #ai:not(.fp-in) .term{opacity:0;transform:perspective(900px) rotateX(26deg) translateY(36px)}
html.fullpage.fp-anim #ai .ai__grid > :first-child{transition:.7s cubic-bezier(.19,.8,.22,1) .05s}
html.fullpage.fp-anim #ai .term{transition:.85s cubic-bezier(.19,.8,.22,1) .18s}

/* WHY — copy left, git-diff panel slides from the right */
html.fullpage.fp-anim #why:not(.fp-in) .why__grid > :first-child{opacity:0;transform:translateX(-44px)}
html.fullpage.fp-anim #why:not(.fp-in) .term{opacity:0;transform:translateX(64px) rotate(1.2deg)}
html.fullpage.fp-anim #why .why__grid > :first-child{transition:.7s cubic-bezier(.19,.8,.22,1) .05s}
html.fullpage.fp-anim #why .term{transition:.8s cubic-bezier(.19,.8,.22,1) .16s}

/* PRODUCTS — rows unclip upward, watermarks rotate in */
html.fullpage.fp-anim #products:not(.fp-in) .pitem{opacity:0;transform:translateY(54px);clip-path:inset(0 0 100% 0)}
html.fullpage.fp-anim #products:not(.fp-in) .pwm{transform:translateY(-50%) rotate(-22deg) scale(.82)}
html.fullpage.fp-anim #products:not(.fp-in) .lab__top{opacity:0;transform:translateY(28px)}
html.fullpage.fp-anim #products .lab__top{transition:.6s cubic-bezier(.19,.8,.22,1)}
html.fullpage.fp-anim #products .pitem{transition:opacity .7s cubic-bezier(.19,.8,.22,1),transform .7s cubic-bezier(.19,.8,.22,1),clip-path .8s cubic-bezier(.19,.8,.22,1),background .3s}
html.fullpage.fp-anim #products .pitem:nth-child(2){transition-delay:.12s}
html.fullpage.fp-anim #products .pitem:nth-child(3){transition-delay:.24s}

/* AGENTS — panels scale-fade in, orb blooms */
html.fullpage.fp-anim #agent:not(.fp-in) .agent__grid > *{opacity:0;transform:scale(.94) translateY(26px)}
html.fullpage.fp-anim #agent:not(.fp-in) .orb{opacity:0}
html.fullpage.fp-anim #agent .agent__grid > *{transition:.7s cubic-bezier(.19,.8,.22,1)}
html.fullpage.fp-anim #agent .agent__grid > :nth-child(2){transition-delay:.14s}
html.fullpage.fp-anim #agent .orb{transition:opacity 1.1s ease .2s}

/* JOURNEY — header fades (the scrollytelling is the show) */
html.fullpage.fp-anim #process:not(.fp-in) .jhead{opacity:0;transform:translateY(-18px)}
html.fullpage.fp-anim #process .jhead{transition:.6s cubic-bezier(.19,.8,.22,1) .1s}

/* CONTACT — columns approach from opposite sides */
html.fullpage.fp-anim #contact:not(.fp-in) .contact__grid > :nth-child(odd){opacity:0;transform:translateX(-52px)}
html.fullpage.fp-anim #contact:not(.fp-in) .contact__grid > :nth-child(even){opacity:0;transform:translateX(52px)}
html.fullpage.fp-anim #contact .contact__grid > *{transition:.75s cubic-bezier(.19,.8,.22,1) .06s}

/* CTA — brief panels rise, bot pops with a spring */
html.fullpage.fp-anim .cta:not(.fp-in) .pb-col{opacity:0;transform:translateY(44px)}
html.fullpage.fp-anim .cta:not(.fp-in) #pbBot{opacity:0;transform:scale(.55)}
html.fullpage.fp-anim .cta .pb-col{transition:.7s cubic-bezier(.19,.8,.22,1)}
html.fullpage.fp-anim .cta .pb-col:nth-child(2){transition-delay:.14s}
html.fullpage.fp-anim .cta #pbBot{transition:.85s cubic-bezier(.3,1.5,.45,1) .3s}

}/* end reduced-motion gate */

html.motion-off .fprail{display:none}
html.motion-off.fullpage{scroll-snap-type:y proximity}
@media print{.fprail{display:none!important}}