/* ============================================================================
   PROJECT FREAKY — motion layer (site wide)
   Additive only. Nothing here touches a page unless:
     - the element opts in with a data-* attribute, or
     - pf-motion.js has put .pf-js on <html>.
   Everything is transform/opacity driven, every effect dies cleanly under
   prefers-reduced-motion, and no selector is allowed to change layout.
   ============================================================================ */
:root{
  --pf-ease:cubic-bezier(.22,1,.36,1);
  --pf-ease-io:cubic-bezier(.65,0,.35,1);
  --pf-spring:cubic-bezier(.34,1.4,.64,1);
  --pf-dur:640ms;
  --pf-scroll:0;
}

/* app.js swaps every .brand for the raster mark — keep it at nav size on the
   pages that do not load style.css (login, register, ban) */
.brand-logo{height:34px;width:auto;max-width:100%;object-fit:contain;display:block}

/* style.css hides the body until JS adds .ready. One failed script would blank
   the entire site, so the shell is always visible here. */
body{opacity:1}
html:not(.pf-js) .reveal,
html:not(.pf-js) [data-reveal]{opacity:1 !important;transform:none !important}

/* ---------- smooth scroll shell ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}

/* ---------- focus + selection ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid #c084fc;
  outline-offset:3px;
  border-radius:6px;
}
.pf-skip{
  position:fixed;left:12px;top:12px;z-index:1000;
  padding:10px 16px;border-radius:10px;
  background:#f5f3ff;color:#12081f;font-size:13px;font-weight:600;
  text-decoration:none;transform:translateY(-180%);
  transition:transform .25s var(--pf-ease);
}
.pf-skip:focus{transform:none}

/* ---------- scroll progress ---------- */
.pf-progress{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:999;
  transform-origin:0 50%;transform:scaleX(var(--pf-scroll));
  background:linear-gradient(90deg,#7c3aed,#c084fc 55%,#e879f9);
  box-shadow:0 0 16px rgba(168,85,247,.5);
  pointer-events:none;will-change:transform;
}

/* ---------- cursor light ---------- */
.pf-glow{
  position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(168,85,247,.16),rgba(168,85,247,.05) 40%,transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .7s ease;
  will-change:transform;
}
.pf-glow.on{opacity:1}

/* ---------- reveal ---------- */
.pf-js [data-reveal]{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--pf-dur) var(--pf-ease),transform var(--pf-dur) var(--pf-ease);
  transition-delay:calc(var(--i,0) * 65ms);
  will-change:transform,opacity;
}
.pf-js [data-reveal="left"]{transform:translate3d(-28px,0,0)}
.pf-js [data-reveal="right"]{transform:translate3d(28px,0,0)}
.pf-js [data-reveal="scale"]{transform:scale(.955)}
.pf-js [data-reveal="blur"]{filter:blur(10px);transform:translate3d(0,14px,0)}
.pf-js [data-reveal].pf-in{
  opacity:1;transform:none;filter:none;will-change:auto;
}

/* ---------- split headline ---------- */
.pf-split .pf-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.12em .04em .26em;margin:-.12em -.04em -.26em;
}
.pf-split .pf-w > span{
  display:inline-block;
  transform:translate3d(0,118%,0) rotate(2.5deg);
  transition:transform .95s var(--pf-ease);
  transition-delay:calc(var(--d,0) * 42ms);
  will-change:transform;
}
.pf-split.pf-in .pf-w > span{transform:none}

/* the same idea, one line at a time — for <br> separated headings */
.pf-lines .pf-l{
  display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em;
}
.pf-lines .pf-l > span{
  display:block;transform:translate3d(0,110%,0);
  transition:transform 1s var(--pf-ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.pf-lines.pf-in .pf-l > span{transform:none}

/* ---------- cards: tilt + light follow ---------- */
[data-tilt]{
  transform-style:preserve-3d;
  transition:transform .5s var(--pf-ease),box-shadow .5s var(--pf-ease);
}
[data-tilt].is-tilting{transition:transform .09s linear}

[data-spot]::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;z-index:1;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
    rgba(192,132,252,.16),transparent 62%);
}
[data-spot]:hover::before{opacity:1}

/* ---------- magnetic ---------- */
[data-magnetic]{
  transform:translate3d(var(--tx,0px),var(--ty,0px),0);
  transition:transform .42s var(--pf-spring);
}
[data-magnetic].is-near{transition:transform .1s linear}

/* ---------- nav states ---------- */
body .nav{transition:transform .5s var(--pf-ease),background .35s ease,box-shadow .35s ease,border-color .35s ease}
body.pf-nav-hidden .nav{transform:translate3d(0,-104%,0)}
body.pf-scrolled .nav{
  background:rgba(5,7,13,.86);
  box-shadow:0 12px 44px rgba(0,0,0,.42);
  border-bottom-color:rgba(255,255,255,.12);
}
html[data-theme="light"] body.pf-scrolled .nav{background:rgba(255,255,255,.9)}

/* ---------- marquee ---------- */
.pf-marquee{overflow:clip}
.pf-marquee-skew{transform:skewX(calc(var(--pf-vel) * -.35deg))}
.pf-marquee-track{
  display:flex;width:max-content;
  animation:pf-marquee 34s linear infinite;
  will-change:transform;
}
.pf-marquee:hover .pf-marquee-track{animation-play-state:paused}
@keyframes pf-marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- underline sweep ---------- */
.pf-link{position:relative;display:inline-block}
.pf-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--pf-ease);
}
.pf-link:hover::after,.pf-link:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ---------- horizontal rail ---------- */
.pf-rail{
  display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  padding:8px clamp(20px,5vw,72px) 44px;
  cursor:grab;
}
.pf-rail::-webkit-scrollbar{display:none}
.pf-rail-track{display:flex;gap:22px;width:max-content}
.pf-rail .pf-card{scroll-snap-align:center;flex:none}
.pf-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.pf-rail.is-dragging *{pointer-events:none}
.pf-rail > *{scroll-snap-align:center;flex:none}
.pf-rail-dots{display:flex;gap:7px;justify-content:center;margin-top:4px}
.pf-rail-dots i{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .3s,transform .3s var(--pf-ease);
}
.pf-rail-dots i.on{background:#fff;transform:scale(1.45)}

/* ---------- sticky expand ---------- */
.pf-expand{position:relative;height:240vh}
.pf-expand-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:clip}
.pf-expand-frame{
  position:relative;overflow:hidden;
  width:calc(44% + (100% - 44%) * var(--expand,0));
  height:calc(58% + (100% - 58%) * var(--expand,0));
  max-width:calc(100% - 32px);
  border-radius:clamp(18px,2vw,34px);
  border:1px solid var(--glass-bd,rgba(255,255,255,.2));
  background:var(--glass,rgba(150,158,178,.12));
  backdrop-filter:blur(42px) saturate(1.4);
  -webkit-backdrop-filter:blur(42px) saturate(1.4);
  will-change:width,height;
}
.pf-expand-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 340px at 84% -10%,rgba(168,85,247,.26),transparent 62%),
    radial-gradient(560px 300px at 6% 110%,rgba(217,70,239,.16),transparent 66%);
}

/* ---------- steps connector ---------- */
.pf-line{
  position:absolute;left:19px;top:8px;bottom:8px;width:2px;overflow:hidden;
  background:rgba(255,255,255,.09);
}
.pf-line > i{
  position:absolute;inset:0;display:block;transform-origin:50% 0;
  transform:scaleY(var(--line,0));
  background:linear-gradient(180deg,#c084fc,#7c3aed);
  box-shadow:0 0 14px rgba(168,85,247,.55);
}

/* ---------- number pop ---------- */
.pf-num{font-variant-numeric:tabular-nums}
.pf-num.pf-tick{animation:pf-tick .45s var(--pf-ease)}
@keyframes pf-tick{
  0%{transform:translateY(0)}
  40%{transform:translateY(-3px);filter:brightness(1.5)}
  100%{transform:translateY(0)}
}

/* ---------- page transition (cross document, Chrome/Edge) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:pf-vt-out .2s var(--pf-ease-io) both}
  ::view-transition-new(root){animation:pf-vt-in .36s var(--pf-ease) both}
}
@keyframes pf-vt-out{to{opacity:0;transform:scale(.988)}}
@keyframes pf-vt-in{from{opacity:0;transform:scale(1.008)}}

/* auth pages keep their own card surface — neo-reskin's glass is too thin over
   the aurora, so the standalone card gets a real floor */
body > .card{
  background:
    linear-gradient(180deg,rgba(26,20,44,.96),rgba(14,11,24,.94)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- reduced motion: everything is already finished ---------- */
@media (prefers-reduced-motion:reduce){
  .pf-js [data-reveal],
  .pf-split .pf-w > span,
  .pf-lines .pf-l > span{
    opacity:1 !important;transform:none !important;filter:none !important;
    transition:none !important;
  }
  .pf-glow{display:none}
  .pf-marquee-track{animation:none}
  .pf-expand{height:auto}
  .pf-expand-stage{position:relative;height:auto;padding:40px 0}
  .pf-expand-frame{width:100%;height:auto;min-height:420px}
}