/* Electric Marae: motion CSS (animator-owned). Loaded after styles.css.
   Every rule here sits under a class scene.js adds (.is-armed, .is-pin, .is-built ...), and scene.js never
   runs under prefers-reduced-motion or without IntersectionObserver, so the static layout in styles.css is the
   reduced-motion and no-JS state: full chart, all notes, assembled diagram.
   Animated properties: transform / translate / scale, opacity, clip-path on three small SVGs. */

/* ============================================================ 1. the load spike */

/* ---- pinned scrub (desktop): the stage sticks while a 160vh spacer scrolls past */
@media (min-width: 901px) {
  .em-spike.is-pin .em-spike__track { position: relative; }
  .em-spike.is-pin .em-spike__track::after { content: ""; display: block; height: 160vh; }
  .em-spike.is-pin .em-spike__stage { position: sticky; }
  /* a clipping band ancestor would kill sticky; clip does not create a scroll container */
  .pfw-band:has(.em-spike.is-pin),
  section:has(> .em-spike.is-pin),
  section:has(.em-spike.is-pin) { overflow: clip; overflow-clip-margin: 0; }
}

/* ---- playhead (the build's [data-spike-head], or one scene.js draws): opacity and position are inline */
.em-spike.is-armed [data-spike-head],
.em-spike.is-armed .em-spike__head { display: inline; visibility: visible; pointer-events: none; will-change: transform, opacity; }
.em-spike__head line { stroke: var(--cream, #FFFCF0); stroke-width: 1; opacity: 0.55; vector-effect: non-scaling-stroke; }
.em-spike__head-dot { fill: var(--gold, #f5b731); stroke: var(--deep, #0f2a1e); stroke-width: 2; }

/* ---- frame */
.em-spike.is-armed [data-spike-frame] { will-change: opacity; }

/* ---- peak band: brightens once when the first tangihanga sets the peak (about 0.22 to 0.45 and back) */
.em-spike.is-armed [data-spike-peak].is-flash { animation: em-peak-flash 500ms ease-out 1; }
@keyframes em-peak-flash {
  0%, 100% { filter: none; }
  45% { filter: brightness(2) saturate(1.15); }
}

/* ---- event tags and gold dots: pop as the playhead reaches them */
.em-spike.is-armed [data-spike-tag],
.em-spike.is-armed [data-spike-event] text,
.em-spike.is-armed [data-spike-leader] {
  opacity: 0; transition: opacity 220ms ease-out;
}
.em-spike.is-armed [data-spike-dot],
.em-spike.is-armed [data-spike-event] circle {
  transform-box: fill-box; transform-origin: center;
  transform: scale(0); transition: transform 300ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.em-spike.is-armed [data-spike-tag].is-on,
.em-spike.is-armed [data-spike-event].is-on text,
.em-spike.is-armed [data-spike-leader].is-on { opacity: 1; }
.em-spike.is-armed [data-spike-dot].is-on,
.em-spike.is-armed [data-spike-event].is-on circle { transform: scale(1); }

/* ---- annotation cards over the chart (wide) */
.em-spike.is-armed [data-spike-note] {
  opacity: 0; translate: 0 8px; visibility: hidden;
  transition: opacity 250ms ease-out, translate 250ms ease-out, visibility 0s linear 250ms;
}
.em-spike.is-armed [data-spike-note].is-on {
  opacity: 1; translate: 0 0; visibility: visible;
  transition: opacity 250ms ease-out, translate 300ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s;
}

/* ---- phone caption box: the three notes stack in one cell and crossfade */
@media (max-width: 767px) {
  .em-spike.is-armed [data-spike-caption] { display: grid; }
  .em-spike.is-armed [data-spike-caption] > * { grid-area: 1 / 1; }
}
.em-spike.is-armed [data-spike-caption-note] {
  opacity: 0; visibility: hidden; margin: 0;
  transition: opacity 150ms ease-out, visibility 0s linear 150ms;
}
.em-spike.is-armed [data-spike-caption-note].is-on {
  /* wait for the outgoing note to clear (150ms) so two notes never overlap mid-fade; kept short so the
     box is never blank for long when notes change quickly mid-year */
  opacity: 1; visibility: visible; transition: opacity 150ms ease-out 150ms, visibility 0s;
}

/* ---- closer rises in, toggle fades in at the end */
.em-spike.is-armed [data-spike-closer],
.em-spike.is-armed .em-spike__closer {
  opacity: 0; translate: 0 12px;
  transition: opacity 400ms ease-out, translate 500ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.em-spike.is-armed [data-spike-closer].is-on,
.em-spike.is-armed .em-spike__closer.is-on { opacity: 1; translate: 0 0; }

.em-spike.is-armed [data-spike-toggle-group],
.em-spike.is-armed .em-spike__toggle {
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease-out, visibility 0s linear 300ms;
}
.em-spike.is-armed [data-spike-toggle-group].is-on,
.em-spike.is-armed .em-spike__toggle.is-on { opacity: 1; visibility: visible; transition: opacity 300ms ease-out, visibility 0s; }

/* ---- "Play again" ghost button (play-once mode only) */
.em-spike__replay { display: none; }
.em-spike.is-once .em-spike__replay {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px auto 0; padding: 8px 16px; min-height: 40px;
  font: 600 var(--fs-small, 0.9375rem)/1 var(--font-body, "Rubik", system-ui, sans-serif);
  color: var(--cream, #FFFCF0); background: transparent;
  border: 1.5px solid rgba(255, 252, 240, 0.45); border-radius: 999px; cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity 300ms ease-out, visibility 0s linear 300ms, border-color 200ms ease, background-color 200ms ease;
}
.em-spike.is-once.is-played .em-spike__replay { opacity: 1; visibility: visible; transition: opacity 300ms ease-out 200ms, visibility 0s, border-color 200ms ease, background-color 200ms ease; }
.em-spike__replay::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M10 6a4 4 0 1 1-1.2-2.85' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M9.6 0.8v2.8H6.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M10 6a4 4 0 1 1-1.2-2.85' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M9.6 0.8v2.8H6.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {
  .em-spike__replay:hover { border-color: var(--gold, #f5b731); background-color: rgba(245, 183, 49, 0.12); }
}
.em-spike__replay:focus-visible { outline: 3px solid var(--gold, #f5b731); outline-offset: 3px; }

/* ============================================================ 2. the Electric Marae diagram
   Armed: everything waits hidden. Built: each part plays its keyframes after its own --em-d delay.
   Keyframes drive the individual translate / scale properties with fill `backwards`, so once a part has
   landed the builder's hover transform, .is-dim opacity and transitions take over untouched. */
.em-diagram__stage.is-armed:not(.is-built) .em-anim-wipe,
.em-diagram__stage.is-armed:not(.is-built) .em-anim-split,
.em-diagram__stage.is-armed:not(.is-built) .em-anim-rise,
.em-diagram__stage.is-armed:not(.is-built) .em-anim-drop,
.em-diagram__stage.is-armed:not(.is-built) .em-anim-inset,
.em-diagram__stage.is-armed:not(.is-built) .em-anim-fade { opacity: 0; }
.em-diagram__stage.is-armed:not(.is-built) .em-anim-pop:not(:focus-visible) { scale: 0; }

.em-diagram__stage.is-built .em-anim-wipe {
  animation: em-wipe 700ms cubic-bezier(0.65, 0, 0.35, 1) var(--em-d, 0ms) backwards;
}
.em-diagram__stage.is-built [data-diagram-cable].em-anim-wipe,
.em-diagram__stage.is-built .em-diagram__cable.em-anim-wipe { animation-duration: 500ms; }
.em-diagram__stage.is-built .em-anim-split {
  animation: em-split 500ms cubic-bezier(0.65, 0, 0.35, 1) var(--em-d, 0ms) backwards;
}
.em-diagram__stage.is-built .em-anim-fade {
  animation: em-fade 300ms ease-out var(--em-d, 0ms) backwards;
}
.em-diagram__stage.is-built .em-anim-rise {
  animation: em-rise 700ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) var(--em-d, 0ms) backwards;
}
.em-diagram__stage.is-built .em-anim-drop {
  animation: em-drop 560ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--em-d, 0ms) backwards;
}
.em-diagram__stage.is-built .em-anim-inset {
  transform-origin: 18% 100%;
  animation: em-inset 520ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--em-d, 0ms) backwards;
}
.em-diagram__stage.is-built .em-anim-pop:not(:focus-visible) {
  animation: em-pop 380ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--em-d, 0ms) backwards;
}

@keyframes em-wipe  { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes em-split { from { clip-path: inset(-10% 50% -10% 50%); } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes em-rise  { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes em-drop  {
  0%   { opacity: 0; translate: 0 -18px; }
  40%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes em-inset { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes em-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes em-pop   { from { scale: 0; } to { scale: 1; } }