/*
 * hero-animations.css – CSS-only illustrations + micro-animations for the hero.
 * No JS, no canvas, no external SVG files.
 */

/* ─── ANIMATED BACKGROUND GRID ─────────────────────────────────────────── */
.hero-v3 {
  background: var(--navy-deepest);
  position: relative;
  overflow: hidden;
}
/* Faint grid lines */
.hero-v3::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: grid-drift 20s linear infinite;
  pointer-events: none;
}
@keyframes grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}
/* Blue radial glow top-right */
.hero-v3::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 65%);
  pointer-events: none;
  animation: glow-pulse 6s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.1); }
}

/* ─── FLOATING PARTICLES ────────────────────────────────────────────────── */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(59,130,246,0.6);
  animation: particle-float linear infinite;
}
.hero-particles span:nth-child(1)  { left:10%; top:20%; animation-duration:8s;  animation-delay:0s;    width:3px; height:3px; }
.hero-particles span:nth-child(2)  { left:25%; top:60%; animation-duration:12s; animation-delay:1s; }
.hero-particles span:nth-child(3)  { left:40%; top:10%; animation-duration:9s;  animation-delay:2s;    width:4px; height:4px; opacity:0.4; }
.hero-particles span:nth-child(4)  { left:60%; top:80%; animation-duration:14s; animation-delay:0.5s; }
.hero-particles span:nth-child(5)  { left:75%; top:35%; animation-duration:10s; animation-delay:3s;    width:3px; height:3px; }
.hero-particles span:nth-child(6)  { left:85%; top:55%; animation-duration:11s; animation-delay:1.5s;  opacity:0.3; }
.hero-particles span:nth-child(7)  { left:15%; top:85%; animation-duration:13s; animation-delay:4s;    width:2px; height:2px; }
.hero-particles span:nth-child(8)  { left:50%; top:45%; animation-duration:7s;  animation-delay:2.5s;  width:4px; height:4px; opacity:0.5; }
@keyframes particle-float {
  0%   { transform: translateY(0)   opacity:0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120px); opacity: 0; }
}

/* ─── HERO CONTENT Z-INDEX ─────────────────────────────────────────────── */
.hero-v3 .hero-grid { position: relative; z-index: 2; }

/* ─── HERO HEADLINE ANIMATION ───────────────────────────────────────────── */
.hero-v3 h1 {
  overflow: hidden;
}
.hero-v3 h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: word-rise 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-v3 h1 .word:nth-child(1) { animation-delay: 0.1s; }
.hero-v3 h1 .word:nth-child(2) { animation-delay: 0.2s; }
.hero-v3 h1 .word:nth-child(3) { animation-delay: 0.3s; }
.hero-v3 h1 .word:nth-child(4) { animation-delay: 0.4s; }
.hero-v3 h1 .word:nth-child(5) { animation-delay: 0.5s; }
.hero-v3 h1 .word:nth-child(6) { animation-delay: 0.6s; }
@keyframes word-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── ANIMATED BOOK ILLUSTRATION ────────────────────────────────────────── */
.book-illustration {
  position: relative;
  width: 280px;
  height: 360px;
  margin: 0 auto;
}
/* Book cover */
.book-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0D1A3A 0%, #162040 100%);
  border-radius: 4px 14px 14px 4px;
  border: 1px solid rgba(59,130,246,0.3);
  box-shadow:
    -8px 0 0 rgba(0,0,0,0.6),
    0 30px 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: book-float 5s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}
/* Spine */
.book-cover::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #050A1E, #0D1A3A, #050A1E);
  border-radius: 4px 0 0 4px;
}
/* Blue horizontal rule on cover */
.book-cover::after {
  content: '';
  position: absolute;
  top: 35%;
  left: 2rem;
  right: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: rule-pulse 3s ease-in-out infinite;
}
@keyframes rule-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes book-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-18px) rotate(-1deg); }
}
.book-cover-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}
.book-cover-sub {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
/* Pages visible on right edge */
.book-pages {
  position: absolute;
  top: 2px; bottom: 2px; right: -4px;
  width: 10px;
  background: repeating-linear-gradient(
    180deg,
    #e8e8e8 0px, #e8e8e8 2px,
    #d0d0d0 2px, #d0d0d0 3px
  );
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 4px rgba(0,0,0,0.3);
  opacity: 0.7;
}

/* ─── ORBITING ICON RING ────────────────────────────────────────────────── */
.orbit-ring {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  border: 1px dashed rgba(59,130,246,0.15);
  animation: ring-spin 20s linear infinite;
}
.orbit-icon {
  position: absolute;
  width: 36px;
  height: 36px;
  background: var(--navy-mid);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--accent);
  counter-animation: ring-spin 20s linear infinite reverse; /* cancel parent rotation */
}
.orbit-icon-1 { top: 0; left: 50%; transform: translate(-50%, -50%); }
.orbit-icon-2 { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.orbit-icon-3 { left: 0; top: 50%; transform: translate(-50%, -50%); }
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Counter-rotate icons so they stay upright */
.orbit-ring .orbit-icon {
  animation: counter-spin 20s linear infinite;
}
@keyframes counter-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}
.orbit-icon-2 { animation: counter-spin-2 20s linear infinite; }
.orbit-icon-3 { animation: counter-spin-3 20s linear infinite; }
@keyframes counter-spin-2 {
  from { transform: translate(-50%, 50%) rotate(0deg); }
  to   { transform: translate(-50%, 50%) rotate(-360deg); }
}
@keyframes counter-spin-3 {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* ─── TYPING CURSOR ON EYEBROW ──────────────────────────────────────────── */
.hero-cursor::after {
  content: '|';
  display: inline-block;
  color: var(--accent);
  animation: blink 1s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── CTA BUTTON PULSE ON LOAD ──────────────────────────────────────────── */
.hero-cta-primary {
  animation: cta-entrance 0.8s cubic-bezier(0.22,1,0.36,1) 0.9s both;
}
@keyframes cta-entrance {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── SECTION FADE-IN LINES (dividers) ──────────────────────────────────── */
.section-divider {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 0 auto 4rem;
  transition: width 1s ease;
}
.section-divider.is-visible { width: 120px; }

/* ─── SCROLL INDICATOR (Hero bottom) ────────────────────────────────────── */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 3rem;
  opacity: 0;
  animation: fade-in-delay 1s ease 1.4s forwards;
}
.scroll-indicator span {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-50);
}
.scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1px solid var(--white-20);
  border-radius: 10px;
  position: relative;
}
.scroll-wheel {
  width: 3px;
  height: 6px;
  background: var(--accent);
  border-radius: 2px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: 0.3; }
}
@keyframes fade-in-delay {
  to { opacity: 1; }
}

/* --- COUNTER DONE POP --- */
.stat-number.counter-done {
  animation: counter-pop 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes counter-pop {
  0%   { transform: scale(1.25); }
  100% { transform: scale(1); }
}