/* ═══════════════════════════════════════════════════════════════
   Cryptonic — Premium FX Layer
   Loaded AFTER main.css. Purely additive visual enhancement.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --fx-a:  #16A34A;
  --fx-b:  #4ADE80;
  --fx-c:  #0EA5E9;
  --ease:  cubic-bezier(.2,.8,.2,1);
}

/* ── Motion safety ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .aurora,.aurora span,.marquee-track,.orb,.fx-shimmer::after,
  .glow-line::after,.hero-title-fx{
    animation:none !important;
  }
}

/* ═══ 1. AURORA BACKGROUND — slow drifting colour blobs ═══════ */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; filter:blur(90px); opacity:.5;
}
.aurora span{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen;
}
.aurora span:nth-child(1){
  width:46vw; height:46vw; left:-8vw; top:-10vw;
  background:radial-gradient(circle,rgba(22,163,74,.5),transparent 68%);
  animation:auroraA 26s ease-in-out infinite;
}
.aurora span:nth-child(2){
  width:38vw; height:38vw; right:-6vw; top:12vh;
  background:radial-gradient(circle,rgba(74,222,128,.36),transparent 68%);
  animation:auroraB 32s ease-in-out infinite;
}
.aurora span:nth-child(3){
  width:44vw; height:44vw; left:24vw; bottom:-16vw;
  background:radial-gradient(circle,rgba(14,165,233,.22),transparent 68%);
  animation:auroraC 38s ease-in-out infinite;
}
@keyframes auroraA{
  0%,100%{transform:translate(0,0) scale(1);}
  33%    {transform:translate(14vw,8vh) scale(1.18);}
  66%    {transform:translate(-6vw,16vh) scale(.92);}
}
@keyframes auroraB{
  0%,100%{transform:translate(0,0) scale(1);}
  50%    {transform:translate(-16vw,14vh) scale(1.22);}
}
@keyframes auroraC{
  0%,100%{transform:translate(0,0) scale(1);}
  40%    {transform:translate(10vw,-12vh) scale(1.15);}
  75%    {transform:translate(-12vw,-4vh) scale(.9);}
}

/* ═══ 2. FILM GRAIN / NOISE ═══════════════════════════════════ */
.noise{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ 3. SPOTLIGHT CARDS — cursor-follow glow ═════════════════ */
.fc, .pc, .hiw-step{
  --mx:50%; --my:50%;
}
.fc::after, .pc::after, .hiw-step::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx) var(--my),
             rgba(74,222,128,.13), transparent 62%);
  opacity:0; transition:opacity .35s var(--ease); z-index:0;
}
.fc:hover::after, .pc:hover::after, .hiw-step:hover::after{opacity:1;}
.fc > *, .pc > *, .hiw-step > *{position:relative; z-index:1;}

/* ═══ 4. GRADIENT BORDER GLOW on hover ═══════════════════════ */
.fc, .pc, .hiw-step{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             background .35s, border-color .35s;
}
.fc:hover{
  box-shadow:0 18px 44px rgba(0,0,0,.5),
             0 0 0 1px rgba(74,222,128,.22),
             0 0 34px rgba(22,163,74,.16);
}
.pc:hover{
  box-shadow:0 24px 56px rgba(0,0,0,.55),
             0 0 0 1px rgba(74,222,128,.28),
             0 0 44px rgba(22,163,74,.2);
}

/* ═══ 5. 3D TILT ══════════════════════════════════════════════ */
.tilt-wrap{perspective:1100px;}
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
  will-change:transform;
}

/* ═══ 6. HERO — animated gradient title ══════════════════════ */
.hero-title-fx{
  position:relative; display:inline-block;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,var(--fx-b) 52%,var(--fx-a) 68%,#fff 88%);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titleSweep 7s ease-in-out infinite;
}
@keyframes titleSweep{
  0%,100%{background-position:0% 50%;}
  50%    {background-position:100% 50%;}
}

/* Floating orbs behind hero */
.orbs{position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.orb{
  position:absolute; border-radius:50%;
  border:1px solid rgba(22,163,74,.16);
  background:radial-gradient(circle at 30% 30%,rgba(22,163,74,.1),transparent 70%);
}
.orb.o1{width:120px;height:120px; left:8%;  top:24%;  animation:orbFloat 14s ease-in-out infinite;}
.orb.o2{width:64px; height:64px;  right:12%;top:32%;  animation:orbFloat 11s ease-in-out infinite reverse;}
.orb.o3{width:170px;height:170px; right:6%; bottom:14%;animation:orbFloat 18s ease-in-out infinite;}
.orb.o4{width:44px; height:44px;  left:18%; bottom:22%;animation:orbFloat 9s  ease-in-out infinite reverse;}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  50%    {transform:translate(18px,-26px) rotate(180deg);}
}

/* Stat tiles upgrade */
.hs{position:relative; overflow:hidden;}
.hs::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(22,163,74,.1),transparent);
  opacity:0; transition:opacity .3s;
}
.hs:hover::before{opacity:1;}
.hs-num{transition:text-shadow .3s;}
.hs:hover .hs-num{text-shadow:0 0 26px rgba(74,222,128,.6);}

/* ═══ 7. SCROLL REVEAL ════════════════════════════════════════ */
.rv{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.rv.in{opacity:1; transform:none;}
.rv-d1{transition-delay:.07s;}
.rv-d2{transition-delay:.14s;}
.rv-d3{transition-delay:.21s;}

.rv-stagger > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.rv-stagger.in > *{opacity:1; transform:none;}
.rv-stagger.in > *:nth-child(1){transition-delay:.05s;}
.rv-stagger.in > *:nth-child(2){transition-delay:.10s;}
.rv-stagger.in > *:nth-child(3){transition-delay:.15s;}
.rv-stagger.in > *:nth-child(4){transition-delay:.20s;}
.rv-stagger.in > *:nth-child(5){transition-delay:.25s;}
.rv-stagger.in > *:nth-child(6){transition-delay:.30s;}
.rv-stagger.in > *:nth-child(7){transition-delay:.35s;}
.rv-stagger.in > *:nth-child(8){transition-delay:.40s;}
.rv-stagger.in > *:nth-child(9){transition-delay:.45s;}
.rv-stagger.in > *:nth-child(10){transition-delay:.50s;}
.rv-stagger.in > *:nth-child(11){transition-delay:.55s;}

/* ═══ 8. MARQUEE / TICKER STRIP ═══════════════════════════════ */
.marquee{
  position:relative; overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(22,163,74,.03);
  padding:13px 0; z-index:4;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex; gap:44px; width:max-content;
  animation:marqueeScroll 34s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.34); white-space:nowrap;
}
.marquee-item b{color:var(--fx-b); font-weight:700;}
.marquee-item::before{
  content:'\25C6'; font-size:7px; color:rgba(22,163,74,.5);
}
@keyframes marqueeScroll{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}

/* ═══ 9. GLOW DIVIDER LINE ════════════════════════════════════ */
.glow-line{
  position:relative; height:1px; border:none;
  background:linear-gradient(90deg,transparent,rgba(22,163,74,.35),transparent);
  overflow:visible; margin:0;
}
.glow-line::after{
  content:''; position:absolute; top:-1px; left:0;
  width:130px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--fx-b),transparent);
  filter:blur(1px);
  animation:lineSweep 6s ease-in-out infinite;
}
@keyframes lineSweep{
  0%,100%{left:-10%; opacity:0;}
  25%,75%{opacity:1;}
  50%    {left:calc(100% - 120px); opacity:1;}
}

/* ═══ 10. SHIMMER SWEEP UTILITY ═══════════════════════════════ */
.fx-shimmer{position:relative; overflow:hidden;}
.fx-shimmer::after{
  content:''; position:absolute; top:0; bottom:0; width:45%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-18deg);
  animation:shimmerSweep 5.5s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%      {left:-60%;}
  60%,100%{left:130%;}
}

/* ═══ 11. NAV — glass + gradient underline ════════════════════ */
nav{
  background:rgba(3,3,6,.72) !important;
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
}
nav::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,163,74,.5),transparent);
  opacity:0; transition:opacity .4s;
}
nav.scrolled::after{opacity:1;}
nav.scrolled{
  background:rgba(2,2,4,.86) !important;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

/* ═══ 12. FOOTER polish ═══════════════════════════════════════ */
footer{position:relative; overflow:hidden;}
footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,163,74,.4),transparent);
}

/* ═══ 13. SCROLL PROGRESS BAR ═════════════════════════════════ */
.scroll-prog{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--fx-a),var(--fx-b));
  box-shadow:0 0 12px rgba(74,222,128,.6);
  z-index:200; transition:width .1s linear;
}

/* ═══ 14. RESPONSIVE ══════════════════════════════════════════ */
@media (max-width:768px){
  .aurora{filter:blur(60px); opacity:.38;}
  .orbs{display:none;}
  .marquee-item{font-size:9px; letter-spacing:.14em;}
}

/* ═══ 15. NAV LOGIN LINK (secondary to Get Access CTA) ═══════ */
.nav-login{
  padding:7px 14px; margin-right:8px;
  font-size:10px; letter-spacing:.1em; font-weight:500;
  text-transform:uppercase; text-decoration:none;
  color:rgba(255,255,255,.5);
  font-family:'JetBrains Mono',monospace;
  border:1px solid transparent; border-radius:4px;
  transition:color .2s, border-color .2s, background .2s;
  display:inline-block; white-space:nowrap;
}
.nav-login:hover{
  color:var(--fx-b);
  border-color:rgba(22,163,74,.3);
  background:rgba(22,163,74,.06);
}
.mobile-nav-login{
  display:block; padding:12px 20px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.6); text-decoration:none;
  border-top:1px solid var(--border);
  transition:color .2s, background .2s;
}
.mobile-nav-login:hover{color:var(--fx-b); background:rgba(22,163,74,.06);}

@media (max-width:768px){
  .nav-login{display:none;}
}