/* ============================================================
   AQIL — The Next Chapter · ENHANCE LAYER
   Neon accents (same palette) + motion / "wow" details.
   Loaded AFTER style.css so it augments the base.
   ============================================================ */

/* ---------- ambient motion for ALL sections (light + dark) ---------- */
.section .container { position: relative; z-index: 2; }   /* keep content above decor */

.section-light::after,
.section-dark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  animation: driftBg 20s ease-in-out infinite alternate;
}
.section-light::after {
  background:
    radial-gradient(42% 52% at 10% 6%, rgba(142,27,33,0.10), transparent 62%),
    radial-gradient(46% 56% at 90% 94%, rgba(180,154,98,0.18), transparent 62%);
}
.section-dark::after {
  background:
    radial-gradient(42% 52% at 8% 6%, rgba(142,27,33,0.20), transparent 60%),
    radial-gradient(48% 58% at 92% 94%, rgba(180,154,98,0.10), transparent 60%);
}
@keyframes driftBg { from { transform: translate(0,0) scale(1); } to { transform: translate(26px,-18px) scale(1.06); } }

/* floating drift on the handwritten map labels */
.map-label { animation: floaty 4.5s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* sparkle layer (JS adds this to light sections, mirroring the hero particles) */
.spark-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.spark-layer i {
  position: absolute; bottom: -8px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); opacity: 0.25; box-shadow: 0 0 8px rgba(180,154,98,0.5);
  animation: rise linear infinite;
}

/* light-section cards now lift + glow like the dark cards */
.info-block, .skill-group { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.info-block:hover { transform: translateY(-5px); border-left-color: var(--crimson); box-shadow: 0 20px 38px rgba(142,27,33,0.12); }
.skill-group:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(142,27,33,0.10); }
.skill-group h3::before { transition: width 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.skill-group:hover h3::before { width: 36px; box-shadow: 0 0 12px var(--glow-gold); }
.ach-icon { transition: transform 0.35s var(--ease); }
.ach-card:hover .ach-icon { transform: scale(1.15) rotate(-8deg); }

/* ---------- scroll-progress "ball" rolling the route ---------- */
.route-progress span { position: relative; box-shadow: 0 0 12px var(--glow-crimson); }
.route-progress span::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 11px; height: 11px;
  border-radius: 50%; transform: translateY(-50%); background: #fff;
  box-shadow: 0 0 14px var(--glow-gold), 0 0 6px #fff;
}

/* ---------- neon on section numbers / titles ---------- */
.section-no { text-shadow: 0 0 22px var(--glow-crimson); }
.section-dark .section-no,
.section-contact .section-no { text-shadow: 0 0 30px var(--glow-crimson); }
.map-label { filter: drop-shadow(0 0 10px rgba(231,203,134,0.25)); }
.compass { filter: drop-shadow(0 0 10px var(--glow-gold)); }

/* ---------- hero: animated aurora + particles + glowing title ---------- */
.hero-aurora {
  position: absolute; z-index: 1; width: 60vw; max-width: 720px; aspect-ratio: 1;
  left: -12%; top: 2%; pointer-events: none; filter: blur(46px);
  background: radial-gradient(circle at 50% 50%, rgba(142,27,33,0.42), transparent 60%);
  animation: floatA 13s ease-in-out infinite;
}
.hero-aurora.two {
  left: auto; right: -12%; top: auto; bottom: -6%; max-width: 620px;
  background: radial-gradient(circle at 50% 50%, rgba(180,154,98,0.26), transparent 62%);
  animation: floatB 17s ease-in-out infinite;
}
@keyframes floatA { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(34px,-22px) scale(1.08);} }
@keyframes floatB { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-28px,18px) scale(1.1);} }

.particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.particles i {
  position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-soft); box-shadow: 0 0 8px var(--glow-gold);
  animation: rise linear infinite;
}
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-96vh); opacity: 0; }
}

.hero-title .accent {
  background: linear-gradient(100deg, var(--crimson-neon), var(--gold-neon) 55%, var(--crimson-neon));
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 24px var(--glow-crimson));
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }

/* pulsing status dots */
.dot { animation: pulseDot 2.2s ease-in-out infinite; }
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 4px rgba(226,59,69,0.18); }
  50% { box-shadow: 0 0 0 7px rgba(226,59,69,0.04), 0 0 16px var(--glow-crimson); }
}

/* ---------- buttons: neon lift ---------- */
.btn { will-change: transform; }
.btn-primary { box-shadow: 0 8px 22px rgba(142,27,33,0.35); }
.btn-primary:hover { box-shadow: 0 12px 32px rgba(142,27,33,0.5), 0 0 26px var(--glow-crimson); }
.btn-ghost:hover { box-shadow: 0 0 24px var(--glow-gold); }
.nav-link.active::after { box-shadow: 0 0 12px var(--glow-crimson); }

/* ---------- stat band (scoreboard) ---------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px;
}
.stat-tile {
  position: relative; text-align: center; padding: 30px 16px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(160deg, #1a1210, #241a1c);
  border: 1px solid rgba(180,154,98,0.25);
  box-shadow: 0 18px 36px rgba(0,0,0,0.12);
}
.stat-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
}
.stat-tile .num {
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem); color: var(--crimson-neon);
  text-shadow: 0 0 22px var(--glow-crimson);
}
.stat-tile .lbl {
  margin-top: 10px; font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 2px; font-size: 0.72rem; color: var(--gold-soft);
}

/* ---------- stadium ticker ---------- */
.ticker {
  background: var(--charcoal); overflow: hidden; padding: 15px 0;
  border-top: 1px solid rgba(180,154,98,0.22); border-bottom: 1px solid rgba(180,154,98,0.22);
}
.ticker-track { display: flex; align-items: center; width: max-content; animation: ticker 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  display: inline-flex; align-items: center; gap: 34px; padding-left: 34px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 3px;
  font-size: 0.95rem; color: var(--gold-soft); white-space: nowrap;
}
.ticker-track span::before {
  content: "◆"; color: var(--crimson-neon); font-size: 0.55rem;
  filter: drop-shadow(0 0 6px var(--glow-crimson));
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- project cards: neon glow + tilt base ---------- */
.project-card { transform-style: preserve-3d; will-change: transform; }
.project-card:hover {
  box-shadow: 0 26px 48px rgba(0,0,0,0.5), 0 0 30px rgba(226,59,69,0.14), inset 0 0 0 1px rgba(231,203,134,0.14);
}
.pj-stats b { text-shadow: 0 0 16px var(--glow-crimson); }
.pj-mission { transition: box-shadow 0.3s var(--ease), color 0.3s var(--ease); }
.project-card:hover .pj-mission { box-shadow: 0 0 18px rgba(226,59,69,0.35); color: var(--gold-neon); }

/* skill chips glow */
.chips .s3 { box-shadow: 0 4px 14px rgba(142,27,33,0.28); }
.chips .s3:hover { box-shadow: 0 6px 20px var(--glow-crimson); }

/* timeline: pulsing current + glowing dots on reveal */
.tl-item.current .tl-dot { animation: pulseDot 2.2s ease-in-out infinite; }
.tl-item:hover .tl-dot { box-shadow: 0 0 16px var(--glow-crimson); }
.teamwork-note { box-shadow: 0 20px 44px rgba(0,0,0,0.12), inset 0 0 40px rgba(226,59,69,0.04); }

/* ---------- extra reveal directions + stagger ---------- */
.reveal-l { opacity: 0; transform: translateX(-42px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-r { opacity: 0; transform: translateX(42px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-s { opacity: 0; transform: scale(0.9); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-l.in-view, .reveal-r.in-view, .reveal-s.in-view { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-aurora, .particles, .ticker-track, .hero-title .accent, .dot,
  .tl-item.current .tl-dot, .compass, .map-label,
  .section-light::after, .section-dark::after, .spark-layer i { animation: none !important; }
  .spark-layer { display: none !important; }
  .reveal-l, .reveal-r, .reveal-s { opacity: 1 !important; transform: none !important; }
}