/* ==========================================================================
   NESPL Portal — Animations
   Tasteful, premium micro-interactions. Respects reduced-motion.
   ========================================================================== */

/* Scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal="left"].in,[data-reveal="right"].in,[data-reveal="zoom"].in { transform: none; }
[data-delay="1"]{ transition-delay:.08s;} [data-delay="2"]{ transition-delay:.16s;}
[data-delay="3"]{ transition-delay:.24s;} [data-delay="4"]{ transition-delay:.32s;}
[data-delay="5"]{ transition-delay:.4s;} [data-delay="6"]{ transition-delay:.48s;}

@keyframes fadeInUp { from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideUp { from{ opacity:0; transform:translateY(40px);} to{ opacity:1; transform:none;} }
.fade-up { animation: fadeInUp .7s both; }
.fade-in { animation: fadeIn .8s both; }

/* Floating hero art */
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
@keyframes floatSlow { 0%,100%{ transform: translateY(0) rotate(0);} 50%{ transform: translateY(-22px) rotate(2deg);} }
.floating { animation: float 5.5s ease-in-out infinite; }
.floating-slow { animation: floatSlow 8s ease-in-out infinite; }

/* Gradient shimmer for hero blob */
@keyframes blobMove { 0%,100%{ border-radius:42% 58% 63% 37% / 42% 42% 58% 58%; } 50%{ border-radius:58% 42% 37% 63% / 58% 58% 42% 42%; } }
.blob { animation: blobMove 12s ease-in-out infinite; }

/* Marquee carousel */
@keyframes marquee { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.marquee { display:flex; gap:3rem; width:max-content; animation: marquee 26s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }

/* Counter no animation styling handled in JS */
.count { font-variant-numeric: tabular-nums; }

/* Sidebar link stagger on load */
.sidebar__nav .side-link { animation: fadeInUp .5s both; }

/* Card hover shine */
.shine { position:relative; overflow:hidden; }
.shine::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition:.7s; }
.shine:hover::after{ left:140%; }

/* Number ticking pop */
@keyframes pop { 0%{ transform:scale(.6); opacity:0;} 60%{ transform:scale(1.05);} 100%{ transform:scale(1); opacity:1;} }
.pop { animation: pop .5s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   v2 — Richer motion
   ========================================================================== */

/* Animated gradient background (hero, CTA, auth aside) */
@keyframes gradShift { 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.cta-band, .auth__aside, .hero-blob {
  background-size: 200% 200% !important;
  animation: gradShift 14s ease infinite;
}

/* Aurora ambient blobs behind hero */
.aurora { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.aurora span { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; animation: auroraMove 18s ease-in-out infinite; }
.aurora span:nth-child(1){ width:340px; height:340px; background:#93c5fd; top:-60px; left:6%; }
.aurora span:nth-child(2){ width:300px; height:300px; background:#c7d2fe; top:20%; right:8%; animation-delay:-6s; }
.aurora span:nth-child(3){ width:260px; height:260px; background:#bbf7d0; bottom:-40px; left:32%; animation-delay:-11s; }
@keyframes auroraMove { 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(30px,-24px) scale(1.08);} 66%{ transform:translate(-24px,20px) scale(.95);} }

/* Hover tilt */
.tilt { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.tilt:hover { transform: perspective(700px) rotateX(3deg) rotateY(-3deg) translateY(-4px); }

/* Primary button breathing glow */
@keyframes glowPulse { 0%,100%{ box-shadow:0 10px 24px rgba(37,99,235,.30);} 50%{ box-shadow:0 14px 34px rgba(37,99,235,.5);} }
.btn-brand.glow { animation: glowPulse 2.6s ease-in-out infinite; }

/* Active sidebar link sheen */
.side-link.active::after {
  content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  background-size:220% 100%; animation: sheen 3.4s ease-in-out infinite; pointer-events:none;
}
@keyframes sheen { 0%{ background-position:180% 0;} 100%{ background-position:-80% 0;} }

/* Counter finished pop */
.count.done { animation: pop .45s both; }

/* Page entrance stagger for portal content */
.page-in > * { opacity:0; transform:translateY(18px); animation: fadeInUp .6s forwards; }
.page-in > *:nth-child(1){ animation-delay:.05s;} .page-in > *:nth-child(2){ animation-delay:.13s;}
.page-in > *:nth-child(3){ animation-delay:.21s;} .page-in > *:nth-child(4){ animation-delay:.29s;}
.page-in > *:nth-child(5){ animation-delay:.37s;} .page-in > *:nth-child(6){ animation-delay:.45s;}

/* Ring/tracker subtle entrance */
.tracker__dot { animation: pop .5s both; }

@media (prefers-reduced-motion: reduce){
  .cta-band,.auth__aside,.hero-blob,.aurora span,.side-link.active::after,.btn-brand.glow{ animation:none !important; }
  .page-in > *{ opacity:1 !important; transform:none !important; animation:none !important; }
}