/* ═══════════════════════════════════════════════════════════════════════
   MOCK 3 — phone-fx.css
   Phone-only transitions + flourishes. All gated behind the touch query
   so desktop renders identically.
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {

  /* ── 1. vinyl-flip page transition ─────────────────────────────── */
  html.mx-flipping body {
    animation: mxFlipOut 480ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
    transform-origin: center center;
  }
  @keyframes mxFlipOut {
    0%   { transform: scale(1)    rotateZ(0deg);   opacity: 1;    filter: blur(0)    saturate(1);   }
    55%  { transform: scale(0.92) rotateZ(2deg);   opacity: 0.55; filter: blur(4px)  saturate(1.3); }
    100% { transform: scale(0.78) rotateZ(-3deg);  opacity: 0;    filter: blur(10px) saturate(1.6); }
  }

  /* ── 2. arrival — page comes back in with scale + slight rotation */
  html.mx-arriving body {
    opacity: 0;
    transform: scale(1.06) rotateZ(2deg);
    filter: blur(8px) saturate(1.4);
  }
  html.mx-arriving.mx-arrived body {
    transition: opacity 600ms ease,
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
                filter 600ms ease;
    opacity: 1;
    transform: scale(1) rotateZ(0deg);
    filter: blur(0) saturate(1);
  }
  /* During flip, force fixed-position background images to absolute so they
     follow the body's transform instead of re-anchoring (which used to
     create the "glitch from top-right" on arrival). */
  html.mx-flipping .page-bg-img,
  html.mx-arriving .page-bg-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  /* ── 3. hero name letter scatter ──────────────────────────────── */
  .hero-name .mx-letter {
    display: inline-block;
    transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity   480ms ease,
                filter    480ms ease;
    transform-origin: center;
  }
  .hero-name.mx-scattered .mx-letter {
    transform: translate(calc(var(--rx) * 22px), calc(var(--ry) * 16px))
               rotate(calc(var(--rr) * 1deg));
    filter: blur(0.6px);
    transition-duration: 240ms;
  }

  /* ── 4. one-shot glitch on title reveal ───────────────────────── */
  .mx-glitch-once {
    animation: mxTitleGlitch 600ms steps(8) 1;
  }
  @keyframes mxTitleGlitch {
    0%, 100% { text-shadow: none; transform: translate(0, 0); }
    12%      { text-shadow: 1.5px 0 rgba(255,45,146,0.6), -1.5px 0 rgba(43,240,255,0.6); transform: translate(-1px, 0); }
    24%      { text-shadow: -2px 0 rgba(255,45,146,0.7), 2px 0 rgba(43,240,255,0.7);     transform: translate(2px, -1px); }
    36%      { text-shadow: 1px 0 rgba(247,255,0,0.6), -1px 0 rgba(43,240,255,0.6);      transform: translate(-1px, 1px); }
    50%      { text-shadow: 2.5px 0 rgba(255,45,146,0.7), -2.5px 0 rgba(43,240,255,0.7); transform: translate(0, 0); }
    72%      { text-shadow: -1px 0 rgba(247,255,0,0.4); transform: translate(1px, 0); }
  }

  /* tame the glitch on the warm piano side so it stays elegant */
  body[data-orb="piano"] .mx-glitch-once,
  html.page-piano  .mx-glitch-once {
    animation-duration: 420ms;
  }
  body[data-orb="piano"] .mx-glitch-once {
    text-shadow: none !important;
  }
}