/* ─── Aurora Field Background ───────────────────────────────────────────── */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
/* Primary orb layer — cyan top-left, violet bottom-right, teal bottom-center */
.aurora-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 600px at 15% 30%,  rgba(34, 211, 238, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 800px 700px at 82% 72%,  rgba(124, 58, 237, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 55% 90%,  rgba(13, 148, 136, 0.11) 0%, transparent 70%);
  animation: aurora-drift-a 28s ease-in-out infinite alternate;
}
/* Secondary orb layer — violet top-right, cyan bottom-left, teal mid */
.aurora-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 500px at 72% 12%,  rgba(124, 58, 237, 0.09) 0%, transparent 70%),
    radial-gradient(ellipse 700px 600px at 28% 82%,  rgba(34, 211, 238, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 400px at 50% 50%,  rgba(13, 148, 136, 0.05) 0%, transparent 70%);
  animation: aurora-drift-b 22s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-drift-a {
  0%   { transform: translate(0%,  0%)   scale(1);    opacity: 1;    }
  30%  { transform: translate(4%,  6%)   scale(1.06); opacity: 0.9;  }
  60%  { transform: translate(-5%, 3%)   scale(0.96); opacity: 1;    }
  100% { transform: translate(3%,  -5%)  scale(1.04); opacity: 0.85; }
}
@keyframes aurora-drift-b {
  0%   { transform: translate(0%,  0%)   scale(1);    opacity: 0.8;  }
  40%  { transform: translate(-6%, 4%)   scale(1.09); opacity: 1;    }
  100% { transform: translate(5%,  -4%)  scale(0.94); opacity: 0.75; }
}

/* ─── T1: Cursor Spotlight ──────────────────────────────────────────────── */
.cursor-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 800px;
  height: 800px;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  will-change: transform;
}
@media (hover: none) { .cursor-spotlight { display: none; } }

/* ─── T2: Scroll-Triggered Fade-Up ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }

/* ─── T3: Glowing card border — defined in components.css ──────────────── */

/* ─── T4: Grain / Noise Overlay ─────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  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.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.35;
}

/* ─── T5: Typewriter Reveal ─────────────────────────────────────────────── */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--accent-cyan);
  animation: blink-cursor 0.75s step-end infinite;
  max-width: 100%;
}
/* On mobile let the text wrap — no horizontal clipping */
@media (max-width: 768px) {
  .typewriter {
    white-space: normal;
    overflow: visible;
  }
}
@keyframes type-in {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink-cursor {
  0%, 100% { border-color: var(--accent-cyan); }
  50%       { border-color: transparent; }
}
.typewriter.done {
  border-right: none;
  animation: none;
  white-space: normal;
  overflow: visible;
}

/* ─── T6: Parallax Float ────────────────────────────────────────────────── */
.parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ─── T7: Glass-Morphism — see components.css ───────────────────────────── */

/* ─── T8: Magnetic Buttons ──────────────────────────────────────────────── */
.btn--magnetic {
  transition: transform 0.2s var(--ease-out),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  will-change: transform;
}
@media (hover: none) { .btn--magnetic { transform: none !important; } }

/* ─── T9: Animated Circuit-Grid Background ──────────────────────────────── */
.circuit-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* opacity: 1 on the container so SVG opacity values are respected at face value */
.circuit-bg::before {
  content: '';
  position: absolute;
  inset: -100%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%2322D3EE' stroke-width='0.4' opacity='0.15'/%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%2322D3EE' opacity='0.3'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  animation: circuit-drift 20s linear infinite;
  opacity: 1;
}
.circuit-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(34,211,238,0.07) 0%, transparent 60%),
              radial-gradient(ellipse at 100% 100%, rgba(168,85,247,0.04) 0%, transparent 50%);
}
@keyframes circuit-drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* ─── T10: Loading Shimmer ───────────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    rgba(34, 211, 238, 0.1) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@keyframes orb-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* Fade-in stagger for hero content */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.hero__content > * {
  animation: fade-up 0.8s var(--ease-out) both;
}
.hero__content > *:nth-child(1) { animation-delay: 0.2s; }
.hero__content > *:nth-child(2) { animation-delay: 0.35s; }
.hero__content > *:nth-child(3) { animation-delay: 0.5s; }
.hero__content > *:nth-child(4) { animation-delay: 0.65s; }
.hero__content > *:nth-child(5) { animation-delay: 0.8s; }

/* Orb scale-breathe (applied to .orb__inner in components.css) */
@keyframes orb-breathe-scale {
  0%, 100% { transform: scale(1.0); }
  50%       { transform: scale(1.08); }
}

/* Orb ring pulse */
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.3; }
  50%       { transform: scale(1.15); opacity: 0.6; }
}

/* Orb pulse on click */
@keyframes orb-pulse {
  0%   { transform: scale(1);   }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1);   }
}
.orb.pulsing { animation: orb-pulse 0.4s var(--ease-out); }

/* ─── Demo orb wobble (replaces parallax drift) ─────────────────────────── */
@keyframes orb-wobble {
  0%   { transform: translate(0px,  0px);  }
  20%  { transform: translate(4px,  -6px); }
  40%  { transform: translate(-3px, -10px);}
  60%  { transform: translate(-5px, -4px); }
  80%  { transform: translate(3px,  -7px); }
  100% { transform: translate(0px,  0px);  }
}
.demo-orbs .orb-wrapper { animation: orb-wobble 6s ease-in-out infinite; }
.demo-orbs .orb-wrapper:nth-child(2) { animation-duration: 7.5s; animation-delay: -2.5s; }
.demo-orbs .orb-wrapper:nth-child(3) { animation-duration: 5.5s; animation-delay: -4s;   }
.demo-orbs .orb-wrapper:nth-child(4) { animation-duration: 8s;   animation-delay: -1s;   }