/* Shared styles for components reused across all pages
   (navbar glass pill + aurora cosmos background for hero/footer). */

/* Glassmorphic navbar pill — translucent surface, frosted blur with a
   saturation boost so the aurora glows through, hairline border and an
   inner top highlight like light catching the glass edge. */
.nav-glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
              0 8px 32px rgba(5,4,20,0.35);
}

/* ── Aurora cosmos (hero + footer bookends) ──────────────────────────
   A deep-indigo field of drifting brand-blue light, a twinkling halftone
   starfield (echoing the site's dot motif), a slow iridescent sheen and
   fine film grain. The surface stays dark and melts into the rest of the
   page at both ends; blue stays a luminous accent, never a flat fill.
   .aurora        → hero  (light pooled low, fades to --bg at the bottom)
   .aurora--footer→ footer (mirrored: light pooled high, fades up to --bg) */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: radial-gradient(150% 125% at 50% 118%, #1d1858 0%, #140f3c 32%, #0b0926 60%, hsl(var(--bg)) 100%);
}
.aurora--footer {
  background: radial-gradient(150% 125% at 50% -18%, #1d1858 0%, #140f3c 32%, #0b0926 60%, hsl(var(--bg)) 100%);
}

/* Core bloom — the heart of the light, gently breathing */
.aurora__core {
  position: absolute;
  left: 50%; top: 78%;
  width: 128vw; height: 86vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(78,133,191,0.50) 0%, rgba(96,112,212,0.20) 44%, rgba(78,133,191,0) 72%);
  filter: blur(26px);
  mix-blend-mode: screen;
  animation: aurora-breathe 15s ease-in-out infinite;
}
.aurora--footer .aurora__core { top: 30%; }
@keyframes aurora-breathe {
  0%, 100% { opacity: 0.72; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%,-50%) scale(1.07); }
}

/* Drifting accent blobs */
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.aurora__blob--1 {
  width: 46vw; height: 46vw; left: -10vw; bottom: -8vw;
  background: radial-gradient(circle, rgba(137,170,204,0.46) 0%, rgba(137,170,204,0) 66%);
  animation: aurora-1 23s ease-in-out infinite alternate;
}
.aurora__blob--2 {
  width: 42vw; height: 42vw; right: -10vw; bottom: 4vw;
  background: radial-gradient(circle, rgba(78,133,191,0.50) 0%, rgba(78,133,191,0) 66%);
  animation: aurora-2 27s ease-in-out infinite alternate;
}
.aurora--footer .aurora__blob--1 { bottom: auto; top: -8vw; }
.aurora--footer .aurora__blob--2 { bottom: auto; top: 4vw; }
@keyframes aurora-1 { from { transform: translate(0,0) scale(1); }   to { transform: translate(13vw,-8vw) scale(1.22); } }
@keyframes aurora-2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-12vw,-6vw) scale(1); } }

/* Twinkling halftone starfield, masked to pool around the light */
.aurora__stars {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(circle, rgba(196,214,242,0.95) 0.9px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 80%, #000 0%, transparent 68%);
  mask-image: radial-gradient(125% 100% at 50% 80%, #000 0%, transparent 68%);
  opacity: 0.14;
  animation: aurora-twinkle 6.5s ease-in-out infinite, aurora-drift 32s ease-in-out infinite alternate;
}
.aurora--footer .aurora__stars {
  -webkit-mask-image: radial-gradient(125% 100% at 50% 20%, #000 0%, transparent 68%);
  mask-image: radial-gradient(125% 100% at 50% 20%, #000 0%, transparent 68%);
}
@keyframes aurora-twinkle { 0%, 100% { opacity: 0.09; } 50% { opacity: 0.17; } }
@keyframes aurora-drift   { from { transform: translateY(0); } to { transform: translateY(16px); } }

/* Slow iridescent sheen */
.aurora__sheen {
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(78,133,191,0.12) 70deg, transparent 150deg, rgba(137,170,204,0.10) 240deg, transparent 320deg);
  filter: blur(50px);
  mix-blend-mode: screen;
  opacity: 0.6;
  animation: aurora-spin 60s linear infinite;
}
@keyframes aurora-spin { to { transform: rotate(360deg); } }

/* Fine film grain for richness */
.aurora__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.aurora__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 105% at 50% 50%, transparent 46%, rgba(6,5,18,0.55) 100%);
}
.aurora__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26vh;
  background: linear-gradient(to top, hsl(var(--bg)) 0%, transparent 100%);
}
.aurora--footer .aurora__fade {
  bottom: auto; top: 0;
  background: linear-gradient(to bottom, hsl(var(--bg)) 0%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .aurora__core, .aurora__blob, .aurora__stars, .aurora__sheen { animation: none; }
}

/* Career year-rail (about page) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
@keyframes journey-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.journey-fade { animation: journey-in 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .journey-fade { animation: none; }
}

/* Tools marquee (shared between home + about) */
.accent-gradient-anim {
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 50%, #89AACC 100%);
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}
.tool-logo {
  filter: grayscale(100%);
  opacity: 0.72;
  transition: filter 0.35s ease-out, opacity 0.35s ease-out;
}
.tool-tile:hover .tool-logo {
  filter: grayscale(0%);
  opacity: 1;
}
.tools-marquee {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}