/* ============================================================
   Academy Wyld — motion layer
   Additive, loads AFTER academy-wyld.css. Calm, premium ambient
   motion + the hero portrait placeholder styling. Every animation
   is fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ── Hero portrait placeholder (until a real photo is dropped in) ── */
.portrait-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; user-select: none;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(46,110,104,0.10), transparent 60%),
    var(--paper);
}
.portrait-ph .ph-mono {
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-size: clamp(48px, 9vw, 76px); letter-spacing: -1px;
  color: var(--accent); opacity: 0.42;
}
.portrait-ph .ph-hint { font-size: 13px; color: var(--faint); letter-spacing: 0.3px; }

/* ── "tap a word" hint chip (look stays consistent in both motion modes) ── */
.tap-word { padding: 0 3px; border-radius: 4px; }

/* ============================================================
   AMBIENT MOTION — only when the user is OK with motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* 1 · background glow slowly drifts (the only blur in Sable v5) */
  .bg-field::before { animation: glowDriftA 26s ease-in-out infinite alternate; }
  .bg-field::after  { animation: glowDriftB 32s ease-in-out infinite alternate; }
  @keyframes glowDriftA {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(-46px,40px,0) scale(1.08); }
  }
  @keyframes glowDriftB {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(44px,-32px,0) scale(1.10); }
  }

  /* 2 · the whole hero composition (portrait + caption + note) floats as one,
        but only after it has revealed — so the reveal slide isn't fought */
  .portrait-wrap.in { animation: floatY 7s ease-in-out infinite; will-change: transform; }
  @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* 3 · program phone mockups float with depth (offset phase = parallax) */
  .program-shots.in .phone.front { animation: floatFront 6.5s ease-in-out infinite; will-change: transform; }
  .program-shots.in .phone.back  { animation: floatBack 7.5s ease-in-out infinite; will-change: transform; }
  @keyframes floatFront { 0%,100% { transform: translateY(0); }                 50% { transform: translateY(-12px); } }
  @keyframes floatBack  { 0%,100% { transform: rotate(-6deg) translateY(0); }    50% { transform: rotate(-6deg) translateY(-7px); } }

  /* 4 · brand dot — soft outward pulse */
  .brand .dot { animation: dotPulse 3.2s ease-in-out infinite; }
  @keyframes dotPulse {
    0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); }
    50%     { box-shadow: 0 0 0 5px rgba(46,110,104,0); }
  }

  /* 5 · "tap a word" — gentle invitation pulse on the dotted underline */
  .tap-word { animation: tapHint 2.8s ease-in-out infinite; }
  @keyframes tapHint {
    0%,100% { border-bottom-color: var(--accent);      background: transparent; }
    50%     { border-bottom-color: var(--accent-deep); background: var(--accent-soft); }
  }

  /* 6 · final-CTA accent glow breathes */
  .final-card::before { animation: ctaGlow 9s ease-in-out infinite alternate; }
  @keyframes ctaGlow {
    from { transform: translate(0,0) scale(1);     opacity: 0.18; }
    to   { transform: translate(-30px,20px) scale(1.12); opacity: 0.26; }
  }

  /* 7 · reveal gets a hair of scale for a softer, more premium settle */
  .reveal { transform: translateY(20px) scale(0.992); }
  .reveal.in { transform: none; }
}