/* ============================================================
   MICLOH website motion, stage 1 (11-10-2026, Tony: "go ahead")
   Every rule below is scoped to html.mx-on. That class is added ONLY by
   /assets/js/motion.js when motion is switched on (or previewed with
   ?motion=preview) and the visitor has not asked for reduced motion.
   With the switch off this file changes nothing on any page.
   Layout, colours, type and content are never changed here: only how
   existing elements arrive. Rollback: remove the <link> and <script>.
   ============================================================ */

/* ── Logo opening (homepage, once per tab session) ─────────────────── */
html.mx-on .mx-logo-svg { display: block; overflow: visible; }
html.mx-on .mx-logo-svg path { transform-box: view-box; transform-origin: 256px 256px; }
html.mx-on .mx-logo-word { display: inline-block; }

/* ── Hero photo depth (desktop only, set by script) ────────────────── */
html.mx-on .hero__mosaic { will-change: auto; }
html.mx-on .hero__mosaic.mx-depth { will-change: transform; }

/* ── Upcoming timeline: the axis draws itself once ─────────────────── */
@media (min-width: 900px) {
  html.mx-on .season.mx-season::before {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.95s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  }
  html.mx-on .season.mx-season.mx-drawn::before { transform: scaleX(1); }
  html.mx-on .season.mx-season .season-node {
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.3s ease;
  }
  html.mx-on .season.mx-season.mx-drawn .season-node { transform: none; opacity: 1; }
  /* the next run is marked once, then rests (it pinged for ever) */
  html.mx-on .season-stop--next .season-node { animation-iteration-count: 2; }
}

/* ── Phones: the timeline's rail draws down, each run slides in from the rail (Tony 11-10: "I use mobile") ── */
@media (max-width: 899px) {
  html.mx-on .season.mx-season::before {
    transform-origin: center top;
    transform: scaleY(0);
    transition: transform 1.2s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  }
  html.mx-on .season.mx-season.mx-drawn::before { transform: scaleY(1); }
  html.mx-on .season.mx-season .season-stop.reveal:not(.is-visible) { transform: translate(-18px, 10px); }
  html.mx-on .season.mx-season .season-stop::before {
    transform: scale(0.3);
    opacity: 0;
    transition: transform 0.45s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) 0.15s, opacity 0.3s ease 0.15s;
  }
  html.mx-on .season.mx-season .season-stop.is-visible::before { transform: none; opacity: 1; }
}

/* ── Stronger arrivals: what already fades in rises from further (40 px, was 24) ── */
html.mx-on .reveal:not(.is-visible) { transform: translateY(40px); }

/* ── Photos open as they are reached (phones and computers). The classes are taken off
      once the photo has opened, so its own hover zoom is exactly today's. ── */
html.mx-on .mx-ph {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 0.85s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 1.1s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}
html.mx-on .mx-ph.mx-in { clip-path: inset(0 0 0 0); transform: none; }

/* ── Keyboard parity: a focused programme card lifts like a hovered one ── */
html.mx-on .degree-card:focus-within { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(11, 36, 71, 0.12); }

/* ── The team-building footage's pause / play button (only where the footage plays) ──
   The one new control in this work: moving video beside text must be stoppable. It sits
   in the hero's lower right, white on the hero's own navy wash, 44 px like every control. */
html.mx-on .mx-video-btn {
  position: absolute; right: 24px; bottom: 24px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(11, 36, 71, 0.45); color: #fff;
  cursor: pointer; transition: background-color 0.18s ease;
}
html.mx-on .mx-video-btn:hover { background: rgba(11, 36, 71, 0.7); }
html.mx-on .mx-video-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Printing or saving as PDF shows everything: nothing waits for a scroll on paper ── */
@media print {
  html.mx-on .mx-ph { clip-path: none; transform: none; }
  html.mx-on .reveal:not(.is-visible) { transform: none; }
  html.mx-on .season.mx-season::before { transform: none; }
  html.mx-on .season.mx-season .season-node, html.mx-on .season.mx-season .season-stop::before { transform: none; opacity: 1; }
}