/* ═══════════════════════════════════════════
   Animations — keyframes, transitions, entrance effects
   ═══════════════════════════════════════════ */

/* ─── Cursor effects ─── */

/* Soft glow — trails behind, stretches with speed */
#glow {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: 37.5rem;
  height: 37.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: transform, opacity;
}

#glow.visible {
  opacity: 0.85;
}

/* ─── Aurora background (all themes) ───
   Three huge blurred gradient blobs drifting behind everything.
   Intensity is tuned per theme via --aurora-opacity; the canvas
   starfield above it stays dark-mode only. */

#aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  display: block;
}

.aurora__blob {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(5rem);
  opacity: var(--aurora-opacity);
  will-change: transform;
}

.aurora__blob--1 {
  background: var(--aurora-1);
  top: -22%;
  left: -18%;
  animation: auroraDrift1 38s ease-in-out infinite alternate;
}

.aurora__blob--2 {
  background: var(--aurora-2);
  top: 26%;
  right: -28%;
  animation: auroraDrift2 47s ease-in-out infinite alternate;
}

.aurora__blob--3 {
  background: var(--aurora-3);
  bottom: -30%;
  left: 18%;
  animation: auroraDrift3 56s ease-in-out infinite alternate;
}

@keyframes auroraDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(9vw, 6vh, 0) scale(1.18); }
}

@keyframes auroraDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  100% { transform: translate3d(-8vw, 9vh, 0) scale(0.94); }
}

@keyframes auroraDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(0.96); }
  100% { transform: translate3d(7vw, -7vh, 0) scale(1.15); }
}

/* Softer on small screens */
@media (max-width: 600px) {
  .aurora__blob {
    filter: blur(3.75rem);
    opacity: calc(var(--aurora-opacity) * 0.85);
  }
}

/* ─── Keyframes ─── */

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.5rem); }
}

/* Ball slides down the mouse body, dimming as it goes,
   then rides back up — synced with the container bob (2s) */
@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(0.5625rem); opacity: 0.25; }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(2.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Nav click ripple — span injected by js/nav.js */
@keyframes ripple {
  from { transform: scale(0); opacity: 0.35; }
  to   { transform: scale(1); opacity: 0; }
}

/* Active nav link underline sweep */
@keyframes growX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Theme toggle radar pulse ring */
@keyframes togglePulse {
  0%   { opacity: 0.55; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ─── Applied animations ─── */

.tagline-cursor {
  animation: blink 1s step-end infinite;
}


/* Nav click ripple (element created by js/nav.js) */
.nav .ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  animation: ripple 0.55s ease-out forwards;
}

/* ─── Section entrance — Intersection Observer ─── */

.js .section {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Parked by nav-link navigation (js/scroll.js): hides instantly with
   no exit transition, so the entrance can replay on arrival */
.section--hold {
  transition: none !important;
}

/* Stagger children of a revealed section */
.section.revealed .section__label {
  animation: fadeSlideUp 0.6s 0.15s both cubic-bezier(0.22, 1, 0.36, 1);
}

.section.revealed .section__title {
  animation: fadeSlideUp 0.6s 0.3s both cubic-bezier(0.22, 1, 0.36, 1);
}

.section.revealed .section__body {
  animation: fadeSlideUp 0.6s 0.45s both cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Fast letter fade — typewriter reveal ───
   Text of titles and paragraphs fades in letter by letter,
   very fast (18ms per letter, 0.18s per-letter fade).
   Starts only when the section is revealed. */

@keyframes letterIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.letter-in {
  display: inline-block;
  white-space: pre-wrap;
}

.section.revealed .letter-in {
  animation: letterIn 0.18s both;
}

/* Stagger cards */
.section.revealed .now-item:nth-child(1),
.section.revealed .project-card:nth-child(1) {
  animation: fadeSlideUp 0.6s 0.45s both cubic-bezier(0.22, 1, 0.36, 1);
}

.section.revealed .now-item:nth-child(2),
.section.revealed .project-card:nth-child(2) {
  animation: fadeSlideUp 0.6s 0.6s both cubic-bezier(0.22, 1, 0.36, 1);
}

.section.revealed .now-item:nth-child(3),
.section.revealed .project-card:nth-child(3) {
  animation: fadeSlideUp 0.6s 0.75s both cubic-bezier(0.22, 1, 0.36, 1);
}

.section.revealed .section__inner > .contact-links {
  animation: fadeSlideUp 0.6s 0.45s both cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Hero entrance (on page load) ─── */

.hero__name {
  animation: fadeSlideUp 0.8s 0.1s both cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__tagline {
  animation: fadeSlideUp 0.8s 0.25s both cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__sub {
  animation: fadeSlideUp 0.8s 0.4s both cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__scroll {
  animation: bob 2s ease-in-out infinite, fadeIn 1s 0.8s both;
}

/* ─── Nav entrance ─── */

.nav {
  animation: fadeSlideUp 0.5s 0.05s both cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Footer entrance ─── */

.footer.revealed {
  animation: fadeSlideUp 0.6s 0.2s both cubic-bezier(0.22, 1, 0.36, 1);
}