/* PVNTISS — Motion System
   Cinematic, subtle, performance-friendly. No libraries required. */
:root{--pv-motion-fast:180ms;--pv-motion-med:420ms;--pv-motion-slow:680ms;--pv-ease:cubic-bezier(.16,1,.3,1);--pv-purple:139,92,246;}

html{scroll-behavior:smooth}
body{position:relative;isolation:isolate;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20%;z-index:-3;pointer-events:none;background:radial-gradient(600px 500px at var(--pv-mx,50%) var(--pv-my,35%),rgba(var(--pv-purple),.075),transparent 68%),radial-gradient(800px 500px at 85% 10%,rgba(124,58,237,.055),transparent 72%);animation:pvAmbient 18s ease-in-out infinite alternate;will-change:transform}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
@keyframes pvAmbient{from{transform:translate3d(-1.5%,0,0) scale(1)}to{transform:translate3d(1.5%,1%,0) scale(1.03)}}

/* Branded first-paint veil + page transitions */
#pv-page-veil{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#07060d;pointer-events:none;opacity:1;transition:opacity .58s var(--pv-ease)}
#pv-page-veil.is-ready{opacity:0}
.pv-veil-inner{display:flex;flex-direction:column;align-items:center;gap:16px;transform:translateY(8px);animation:pvVeilIn .65s var(--pv-ease) both}
.pv-veil-mark{width:92px;height:34px;object-fit:contain;filter:drop-shadow(0 0 15px rgba(139,92,246,.42))}
.pv-veil-line{width:92px;height:1px;background:rgba(255,255,255,.08);overflow:hidden}
.pv-veil-line::after{content:"";display:block;width:45%;height:100%;background:rgba(203,182,255,.8);animation:pvLoadLine .9s var(--pv-ease) infinite}
@keyframes pvVeilIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pvLoadLine{from{transform:translateX(-130%)}to{transform:translateX(300%)}}

/* Mouse spotlight */
.pv-cursor-spotlight{position:fixed;z-index:-1;width:360px;height:360px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);left:var(--pv-mx,50%);top:var(--pv-my,35%);background:radial-gradient(circle,rgba(139,92,246,.075),rgba(139,92,246,.025) 35%,transparent 70%);filter:blur(8px);opacity:.8;transition:left .12s ease-out,top .12s ease-out;will-change:left,top}

/* Scroll reveals — fail open so a JS/observer failure can never blank the page. */
.pv-reveal{opacity:1;transform:none;filter:none;transition:opacity .72s var(--pv-ease),transform .72s var(--pv-ease),filter .72s var(--pv-ease)}
.pv-motion-ready .pv-reveal{opacity:0;transform:translate3d(0,24px,0);filter:blur(4px)}
.pv-reveal.pv-visible{opacity:1;transform:none;filter:none}
.pv-stagger > .pv-reveal:nth-child(2){transition-delay:60ms}.pv-stagger > .pv-reveal:nth-child(3){transition-delay:120ms}.pv-stagger > .pv-reveal:nth-child(4){transition-delay:180ms}.pv-stagger > .pv-reveal:nth-child(5){transition-delay:240ms}.pv-stagger > .pv-reveal:nth-child(6){transition-delay:300ms}

/* Navigation polish */
.navbar-island{transition:transform .35s var(--pv-ease),background .35s ease,border-color .35s ease,box-shadow .35s ease}
.navbar-island.is-scrolled{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.navbar-link{position:relative;transition:color .25s ease,transform .25s var(--pv-ease)}
/* This is the single source of truth for the underline — it fully owns
   width, position AND transform on every state so it can't be fought by
   the older rule in style.css (that's what caused the underline to jump
   off-center on hover instead of growing evenly from the middle). */
.navbar-link::after{content:"";position:absolute;left:50%;bottom:-7px;width:0;height:1px;border-radius:9px;background:rgba(203,182,255,.8);box-shadow:0 0 10px rgba(139,92,246,.45);transform:translateX(-50%);transition:width .28s var(--pv-ease),transform .28s var(--pv-ease)}
.navbar-link:hover{transform:translateY(-1px)}
.navbar-link:hover::after,.navbar-link.active::after{width:16px;transform:translateX(-50%)}

/* Universal interactive lift */
.btn-primary,.btn-secondary,.choice-card,.discover-card,.stat-card,.resource-card,.library-card,.catalog-card,.drop-card,.faq-card,.owner-card,.guide-card,.item-card,.status-card,.feature-card{transition:transform .4s var(--pv-ease),box-shadow .4s var(--pv-ease),border-color .35s ease,background .35s ease,filter .35s ease}
.choice-card:hover,.discover-card:hover,.resource-card:hover,.library-card:hover,.catalog-card:hover,.drop-card:hover,.faq-card:hover,.owner-card:hover,.guide-card:hover,.item-card:hover,.status-card:hover,.feature-card:hover{transform:translateY(-6px)}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}

/* Card sheen + image movement where applicable */
.choice-card,.discover-card,.resource-card,.library-card,.catalog-card,.drop-card,.faq-card,.owner-card,.guide-card,.item-card,.status-card,.feature-card{position:relative;overflow:hidden}
.choice-card::after,.discover-card::after,.resource-card::after,.library-card::after,.catalog-card::after,.drop-card::after,.faq-card::after,.owner-card::after,.guide-card::after,.item-card::after,.status-card::after,.feature-card::after{content:"";position:absolute;inset:-80% auto auto -30%;width:35%;height:260%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.055),transparent);transform:rotate(12deg) translateX(-220%);transition:transform .85s var(--pv-ease)}
.choice-card:hover::after,.discover-card:hover::after,.resource-card:hover::after,.library-card:hover::after,.catalog-card:hover::after,.drop-card:hover::after,.faq-card:hover::after,.owner-card:hover::after,.guide-card:hover::after,.item-card:hover::after,.status-card:hover::after,.feature-card:hover::after{transform:rotate(12deg) translateX(620%)}

/* Cursor-follow tilt gets applied only to elements with this class */
.pv-tilt{transform:perspective(900px) rotateX(var(--pv-ry,0deg)) rotateY(var(--pv-rx,0deg)) translateY(var(--pv-lift,0));transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .35s ease}
.pv-tilt:hover{--pv-lift:-5px}

/* Better buttons */
.btn-primary,.btn-secondary{position:relative;overflow:hidden}
.btn-primary::before,.btn-secondary::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.08) 48%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--pv-ease);pointer-events:none}
.btn-primary:hover::before,.btn-secondary:hover::before{transform:translateX(130%)}

/* Hero atmosphere without changing the hero composition */
.hero-orb{animation:pvOrb 10s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes pvOrb{from{transform:translate3d(-2%,-1%,0) scale(.98);opacity:.75}to{transform:translate3d(3%,2%,0) scale(1.04);opacity:1}}

/* Modal / dropdown smoothing */
.modal,.dropdown,.menu-panel,.auth-menu,[role="dialog"]{animation:pvPanelIn .32s var(--pv-ease) both}
@keyframes pvPanelIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* Hero entrance stagger — these classes existed in the markup already but
   had no matching CSS, so the badge/title/subtitle/buttons used to just
   pop in instantly with no animation at all. anim-4 is intentionally left
   out here since those sections are already handled by the scroll-reveal
   system (.pv-reveal) further up; animating both at once caused a flash.
   Note: .hero-inner itself, and the below-the-fold sections, are NOT
   given a matching entrance animation here on purpose — see the removed
   ".hero-inner,.choice-grid,.home-stats-section,.discover-section"
   rule that used to live below. Those elements' children already run
   their own entrance transitions (anim-0..3, or .pv-reveal added by
   pvntiss-motion.js), so giving the parent a second, independently
   timed fade+translate on top compounded into a stuttery, mistimed
   entrance — and for the below-the-fold sections it was worse: their
   fade played out on a page-load timer instead of on scroll, so by the
   time you actually scrolled to them they'd already forced themselves
   fully visible and the scroll-reveal never got to do anything. */
.anim-0,.anim-1,.anim-2,.anim-3{opacity:0;transform:translateY(18px);animation:pvHeroIn .75s var(--pv-ease) both;will-change:transform,opacity}
.anim-0{animation-delay:.05s}
.anim-1{animation-delay:.13s}
.anim-2{animation-delay:.21s}
.anim-3{animation-delay:.29s}
@keyframes pvHeroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Homepage hero title — swoosh ring echoing the logo mark, without
   copying it outright. Sits behind the solid title (z-index below it)
   so it peeks out around the letters instead of covering them. Sized to
   sweep well past the word itself (up around the eyebrow badge, down
   past the baseline) the way it does on the wordmark; the eyebrow badge
   is lifted onto its own stacking context below so the ring tucks behind
   its pill instead of drawing a stray line across the text. */
.eyebrow-badge{position:relative;z-index:2}
.hero-title-orbit{position:absolute;left:50%;top:50%;width:min(720px,115%);height:auto;transform:translate(-50%,-50%) rotate(-6deg);transform-origin:50% 50%;pointer-events:none;z-index:0;opacity:.95;filter:drop-shadow(0 0 14px rgba(139,92,246,.3));animation:pvOrbitDrift 9s ease-in-out infinite alternate}
@keyframes pvOrbitDrift{from{transform:translate(-50%,-50%) rotate(-7deg) scale(1)}to{transform:translate(-50%,-50%) rotate(-5deg) scale(1.015)}}
.hero-title-spark{position:absolute;z-index:0;color:var(--purple-bright,#cbb6ff);font-size:13px;line-height:1;pointer-events:none;text-shadow:0 0 10px rgba(139,92,246,.6);animation:pvSparkPulse 2.6s ease-in-out infinite}
.hero-title-spark-a{top:-14%;right:4%;animation-delay:.3s}
.hero-title-spark-b{bottom:-4%;left:3%;font-size:10px;animation-delay:1.1s}
@keyframes pvSparkPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:600px){.hero-title-orbit,.hero-title-spark{display:none}}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 .pv-reveal{opacity:1!important;transform:none!important;filter:none!important}
 #pv-page-veil{display:none}
 .pv-cursor-spotlight{display:none}
 .hero-title-orbit,.hero-title-spark{animation:none!important}
}
@media(max-width:700px){.pv-cursor-spotlight{display:none}.pv-tilt{transform:none!important}.pv-motion-ready .pv-reveal{transform:translateY(16px)}}
