/* Motion — mirrors the app onboarding (Effects.tsx, BootScene.tsx, Typewriter.tsx,
   ProgressRail.tsx). Respects prefers-reduced-motion throughout. */

@media (prefers-reduced-motion: no-preference) {
  .dot-grid {
    animation: dot-drift 70s linear infinite;
  }
}
@keyframes dot-drift {
  from { background-position: 0 0; }
  to { background-position: -440px -220px; }
}

/* ─── Hero boot scene ─── */
.boot-scene { position: relative; width: 100%; height: 100%; }
.boot-scene svg { width: 100%; height: 100%; overflow: visible; }

.boot-ring {
  transform-origin: 100px 100px;
  stroke-dasharray: 502.4;
  stroke-dashoffset: 502.4;
  animation: ring-draw 1.4s var(--ease-out) 0.15s forwards;
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }

.boot-ticks, .boot-labels { opacity: 0; animation: fade-in 0.8s var(--ease-out) 1.1s forwards; }
@keyframes fade-in { to { opacity: 1; } }

.boot-wedge {
  transform-origin: 100px 100px;
  animation: wedge-spin 4s linear infinite;
  opacity: 0;
  animation: wedge-spin 4s linear infinite, fade-in 0.6s var(--ease-out) 0.9s forwards;
}
@keyframes wedge-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.boot-globe { transform-origin: 100px 100px; opacity: 0; animation: fade-in 1s var(--ease-out) 0.5s forwards; }
.boot-globe .merid { animation: globe-spin 14s linear infinite; transform-origin: 100px 100px; }
.boot-globe .merid.m2 { animation-delay: -4.6s; }
.boot-globe .merid.m3 { animation-delay: -9.2s; }
@keyframes globe-spin {
  from { transform: scaleX(1) rotate(0deg); }
  25%  { transform: scaleX(0.15) rotate(0deg); }
  50%  { transform: scaleX(1) rotate(0deg); }
  75%  { transform: scaleX(0.15) rotate(0deg); }
  to   { transform: scaleX(1) rotate(0deg); }
}

.boot-blip { opacity: 0; animation: blip-pulse 2.6s ease-in-out infinite; }
.boot-blip.b1 { animation-delay: 0.2s; }
.boot-blip.b2 { animation-delay: 1s; }
.boot-blip.b3 { animation-delay: 1.8s; }
@keyframes blip-pulse {
  0%   { opacity: 0; r: 1.2; }
  8%   { opacity: 1; r: 3.4; }
  30%  { opacity: 0.15; r: 1.4; }
  100% { opacity: 0.15; r: 1.4; }
}

.boot-scan {
  animation: scan-fall 5.2s linear infinite;
  opacity: 0.5;
}
@keyframes scan-fall {
  0%   { transform: translateY(-20px); opacity: 0; }
  6%   { opacity: 0.5; }
  70%  { opacity: 0.5; }
  78%  { opacity: 0; }
  100% { transform: translateY(220px); opacity: 0; }
}

.boot-star { animation: star-twinkle 3.4s ease-in-out infinite; }
@keyframes star-twinkle {
  0%, 100% { opacity: var(--s-op, 0.5); }
  50% { opacity: calc(var(--s-op, 0.5) * 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .boot-ring { stroke-dashoffset: 0; animation: none; }
  .boot-ticks, .boot-labels, .boot-wedge, .boot-globe { opacity: 1; animation: none; }
  .boot-globe .merid { animation: none; }
  .boot-blip { opacity: 0.5; animation: none; }
  .boot-scan { display: none; }
  .boot-star { animation: none; }
}

/* ─── Typewriter title (Typewriter.tsx) ─── */
.type-cursor { animation: caret-blink 1.06s step-end infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .type-cursor { animation: none; }
}

/* ─── Section scene mini-visuals ─── */
@media (prefers-reduced-motion: no-preference) {
  .spin-slow { animation: spin 36s linear infinite; transform-origin: center; }
  .spin-slow-rev { animation: spin-rev 42s linear infinite; transform-origin: center; }
  .pulse-soft { animation: pulse-soft 3.2s ease-in-out infinite; }
  .drift-y { animation: drift-y 5.5s ease-in-out infinite; }
  .sweep-line { animation: sweep-move 3.6s ease-in-out infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes pulse-soft { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes drift-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sweep-move { 0% { transform: translateX(-30%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }

/* ─── Warp micro-interaction on the primary CTA (WarpOverlay.tsx, toned down) ─── */
@media (prefers-reduced-motion: no-preference) {
  .btn-solid { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
  .btn-solid:hover { box-shadow: 0 0 22px rgba(255,255,255,0.7); }
}