/* Motion only ever touches transform/opacity (plus box-shadow for focus/glow) to stay 60fps. */

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
@keyframes sheenSweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes skeletonPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes statusPulse { 0% { box-shadow: 0 0 0 0 var(--focus-ring); } 70% { box-shadow: 0 0 0 8px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes countTick { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.reveal { opacity: 0; animation: fadeUp var(--dur-slow) var(--ease-out) forwards; }
.reveal-1 { animation-delay: 60ms; } .reveal-2 { animation-delay: 140ms; } .reveal-3 { animation-delay: 220ms; }
.reveal-4 { animation-delay: 300ms; } .reveal-5 { animation-delay: 380ms; }

/* logo draw-in — the hero's primary motion moment */
.hero-hex-stroke { stroke-dasharray: 620; stroke-dashoffset: 620; animation: drawStroke 1.6s var(--ease-out) forwards; }
.hero-hex-stroke.d2 { animation-delay: .3s; }
.hero-hex-stroke.d3 { animation-delay: .6s; }
.hero-wordmark { opacity: 0; animation: fadeIn var(--dur-slower) var(--ease-out) forwards; animation-delay: 1.3s; }

.press { transition: transform var(--dur-fast) var(--ease-out); }
.press:active { transform: scale(0.98); }

.skeleton { background: linear-gradient(90deg, var(--surface-sunken), var(--surface), var(--surface-sunken)); border-radius: var(--radius-sm); animation: skeletonPulse 1.6s ease-in-out infinite; }
.spin { animation: spin 0.9s linear infinite; }
.pop-in { animation: popIn var(--dur-base) var(--ease-spring) forwards; }
.toast-in { animation: toastIn var(--dur-base) var(--ease-out) forwards; }
.status-just-changed { animation: statusPulse 1s var(--ease-out); }
.pulse-dot { animation: pulseDot 1.4s ease-in-out infinite; }
.page-fade { animation: fadeIn var(--dur-base) var(--ease-standard) forwards; }

/* real-artwork reveal: soft fade in, then one gentle gold sheen sweep — no stroke draw-in,
   since the extracted logo is a single clipped gradient fill, not separable stroke paths */
.reveal-sheen {
  display: block;
  opacity: 0;
  animation: fadeIn 900ms var(--ease-out) forwards;
  position: relative;
}
.reveal-sheen::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,247,222,0.55) 50%, transparent 60%);
  background-size: 300% 100%;
  background-position: 150% 0;
  animation: sheenPass 1.4s var(--ease-standard) 500ms forwards;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes sheenPass {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-sheen { opacity: 1; animation: none; }
  .reveal-sheen::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-hex-stroke, .hero-wordmark, .skeleton, .spin, .pop-in, .toast-in, .status-just-changed, .pulse-dot {
    animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important;
  }
  .press:active { transform: none; }
}