/* =====================================================================
   KrazerrScreener — Premium motion layer
   Scroll reveals · 3D tilt · shine · gradient flow · counters
   Honors prefers-reduced-motion.
   ===================================================================== */

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
 position:fixed;top:0;left:0;height:3px;width:0;
 background:linear-gradient(90deg,var(--blue),#60a5fa,var(--green));
 z-index:300;
 box-shadow:0 0 12px rgba(59,130,246,.6);
 transition:width .1s linear;
}

/* ---------- Nav elevates on scroll ---------- */
.nav{transition:background .3s, box-shadow .3s, border-color .3s}
.nav.scrolled{
 background:rgba(10,18,32,.95);
 box-shadow:0 8px 30px rgba(0,0,0,.4);
 border-bottom-color:var(--line-blue);
}

/* ---------- Scroll reveal ----------
   Hidden state only applies when JS is active (.has-js). Without JS the
   content is fully visible — safe for SEO and no-JS users. */
.has-js [data-reveal]{
 opacity:0;
 transform:translateY(28px);
 transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
 will-change:opacity, transform;
}
[data-reveal].in{opacity:1;transform:none}
.has-js [data-reveal="left"]{transform:translateX(-36px)}
.has-js [data-reveal="right"]{transform:translateX(36px)}
.has-js [data-reveal="zoom"]{transform:scale(.94)}
[data-reveal="left"].in,
[data-reveal="right"].in,
[data-reveal="zoom"].in{transform:none}

/* Staggered children */
.has-js [data-reveal-stagger] > *{
 opacity:0;transform:translateY(24px);
 transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
[data-reveal-stagger].in > *{opacity:1;transform:none}
[data-reveal-stagger].in > *:nth-child(1){transition-delay:.05s}
[data-reveal-stagger].in > *:nth-child(2){transition-delay:.12s}
[data-reveal-stagger].in > *:nth-child(3){transition-delay:.19s}
[data-reveal-stagger].in > *:nth-child(4){transition-delay:.26s}
[data-reveal-stagger].in > *:nth-child(5){transition-delay:.33s}
[data-reveal-stagger].in > *:nth-child(6){transition-delay:.40s}

/* ---------- Hero entrance ---------- */
.hero .kicker{animation:fadeUp .7s .05s both}
.hero h1{animation:fadeUp .8s .12s both}
.hero .hero-sub{animation:fadeUp .8s .22s both}
.hero .status-box,
.hero > div:last-child{animation:fadeUp .8s .32s both}
@keyframes fadeUp{
 from{opacity:0;transform:translateY(26px)}
 to{opacity:1;transform:none}
}

/* gradient sheen sweeping the H1 accent */
h1 span, .ticker-name span, .section-wide h2 span{
 background:linear-gradient(100deg,var(--blue) 20%,#7cb1ff 45%,var(--blue) 70%);
 background-size:200% auto;
 -webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent;
 animation:sheen 5s linear infinite;
}
@keyframes sheen{to{background-position:200% center}}

/* ---------- 3D tilt cards ----------
   JS sets the transform inline and manages its own transition (none while
   moving, smooth on leave) so the tilt never lags behind the cursor.       */
.tilt{will-change:transform}

/* ---------- Shine pass on hover (buttons only) ----------
   NOTE: not applied to .tier-card — it needs overflow:visible so the
   "PIU' SCELTO" badge above the top edge isn't clipped. */
.shine,.btn:not(.ghost){position:relative;overflow:hidden}
.shine::after{
 content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
 transform:skewX(-18deg);
 transition:left .65s ease;
 pointer-events:none;
}
.shine:hover::after{left:140%}

/* ---------- Card lift (only on cards WITHOUT JS tilt) ---------- */
.tr-card,.pf-card,.welcome-card,.step,.sector-box{
 transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s;
}
.tr-card:hover,.pf-card:hover,.welcome-card:hover,.step:hover,.sector-box:hover{
 transform:translateY(-4px);
 border-color:var(--line-blue);
 box-shadow:0 16px 40px rgba(0,0,0,.4);
}
/* tier-card & metric-card & signal-card: hover visuals only (transform owned by JS tilt) */
.tier-card,.metric-card,.signal-card{transition:box-shadow .22s, border-color .22s}
.tier-card:hover,.metric-card:hover,.signal-card:hover{
 border-color:var(--line-blue);
 box-shadow:0 18px 44px rgba(0,0,0,.45);
}

/* glowing top border that appears on hover */
.tr-card::before,.pf-card::before{
 content:"";position:absolute;top:0;left:0;right:0;height:2px;
 background:linear-gradient(90deg,transparent,var(--blue),transparent);
 opacity:0;transition:opacity .25s;
}
.tr-card:hover::before,.pf-card:hover::before{opacity:1}

/* glowing top border that appears on hover */
.metric-card::before,.tr-card::before,.pf-card::before{
 content:"";position:absolute;top:0;left:0;right:0;height:2px;
 background:linear-gradient(90deg,transparent,var(--blue),transparent);
 opacity:0;transition:opacity .25s;
}
.metric-card:hover::before,.tr-card:hover::before,.pf-card:hover::before{opacity:1}

/* ---------- Animated number counters ---------- */
.count[data-count]{font-variant-numeric:tabular-nums}

/* ---------- Button pulse glow ---------- */
.btn:not(.ghost){position:relative;overflow:hidden}
.btn:not(.ghost)::before{
 content:"";position:absolute;inset:0;
 background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.25),transparent 45%);
 opacity:0;transition:opacity .25s;
}
.btn:not(.ghost):hover::before{opacity:1}

/* Featured tier: a steady subtle glow instead of a moving "breath"
   (a floating animation fought the 3D tilt and looked unstable). */
.tier-card.featured{box-shadow:0 0 0 1px var(--blue), 0 20px 50px rgba(37,99,235,.22)}

/* ---------- Signal card glow ring on hover ----------
   NOTE: no overflow:hidden here — it would clip the "ELITE" badge that sits
   above the card's top edge. The glow ring uses inset:0 so it stays inside. */
.signal-card::after{
 content:"";position:absolute;inset:0;border-radius:12px;
 box-shadow:inset 0 0 0 1px transparent;
 transition:box-shadow .25s;pointer-events:none;
}
.signal-card:hover::after{box-shadow:inset 0 0 0 1px var(--line-blue), inset 0 0 40px rgba(59,130,246,.06)}

/* ---------- Conviction badge ring spin on hover ---------- */
.signal-card .conv-badge{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.signal-card:hover .conv-badge{transform:scale(1.08)}

/* ---------- Nav link underline grow ---------- */
.navlinks a:not(.active):not(.logout){position:relative}
.navlinks a:not(.active):not(.logout)::after{
 content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
 background:var(--blue);transform:scaleX(0);transform-origin:left;
 transition:transform .25s ease;
}
.navlinks a:not(.active):not(.logout):hover::after{transform:scaleX(1)}

/* ---------- Table row slide accent ---------- */
tbody tr{transition:background .15s}
tbody tr td:first-child{position:relative}
tbody tr:hover td:first-child::before{
 content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);
}

/* ---------- FAQ open glow ---------- */
.faq-item{transition:border-color .25s, box-shadow .25s}
.faq-item[open]{border-color:var(--line-blue);box-shadow:0 8px 24px rgba(0,0,0,.3)}

/* ---------- Ticker tape pause on hover ---------- */
.ticker:hover span{animation-play-state:paused}

/* ---------- Async content fade-in (AI thesis, news, live quote) ----------
   Applied via JS by adding this class right after a loading spinner is
   replaced with real content, so the swap isn't an abrupt pop-in. */
.fade-in-content{
 animation:fadeUpSmall .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fadeUpSmall{
 from{opacity:0;transform:translateY(6px)}
 to{opacity:1;transform:none}
}

/* ---------- Reduced motion: disable everything ---------- */
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
 }
 [data-reveal],[data-reveal-stagger] > *{opacity:1 !important;transform:none !important}
 h1 span,.ticker-name span,.section-wide h2 span{-webkit-text-fill-color:var(--blue);animation:none}
}