/* ==========================================================================
   ZERATHEON FOUNDATION — MOTION LAYER
   Ideas mined from rex-theme-wp animations, REBUILT in OUR tokens.
   ~160ms restraint · never seizure · reduced-motion safe.
   ========================================================================== */

/* ── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@keyframes blinkCaret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── Scroll reveal (driven by reveal.js) ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal--scale {
  transform: scale(0.965);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Hero entrance (page load, staggered) ──────────────────────────────── */
.hero-fade {
  opacity: 0;
  animation: fadeInUp var(--dur-slow) var(--ease) forwards;
}
.hero-fade--1 { animation-delay: 120ms; }
.hero-fade--2 { animation-delay: 240ms; }
.hero-fade--3 { animation-delay: 360ms; }
.hero-fade--4 { animation-delay: 480ms; }

/* ── Globe stage aura ──────────────────────────────────────────────────── */
.globe-stage::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(560px, 86vw);
  aspect-ratio: 1;
  transform: translate(-50%, -52%);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 105, 1, 0.20) 0%,
      rgba(74, 42, 13, 0.28) 34%,
      rgba(12, 12, 12, 0) 68%);
  border-radius: 50%;
  pointer-events: none;
  animation: pulseGlow 6s var(--ease) infinite;
  z-index: 0;
}

/* ── "Ordis is listening" live dot ─────────────────────────────────────── */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(232, 182, 76, 0.8);
  animation: pulseGlow 1.6s var(--ease) infinite;
}

/* ── Scroll hint ───────────────────────────────────────────────────────── */
.scroll-hint {
  position: relative;
  width: 22px;
  height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.scroll-hint::after {
  content: "";
  position: absolute;
  inset: 0 50% auto 50%;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
  background: var(--accent);
  animation: scrollHint 1.8s var(--ease) infinite;
}