/* Crest scroll hero (home page, above .hero). Built by the crest build session 2026-10-26.
   Opens on the front video (cogs turning); scrolling takes the 3D crest apart and puts it back
   together (canvas frames), then hands off to the spin video. crest.js drives it; without JS or
   with reduced motion it stays a plain, unpinned stage. */
.crest-stage {
  --crest-glow: #0a1329;                 /* deep azure centre, melting into the page black */
  --crest-side: min(100vw, calc(100svh - 8.5rem));   /* the square the crest lives in; room for the caption */
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: radial-gradient(ellipse 60% 55% at 50% 45%, var(--crest-glow), var(--bg) 78%);
}
.crest-stage.is-live { height: 450vh; }
.crest-pin {
  position: relative;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  overflow: hidden;
}
.crest-stage.is-live .crest-pin { position: sticky; top: 0; }
.crest-media {
  position: relative;
  width: var(--crest-side);
  height: var(--crest-side);
}
.crest-media > video,
.crest-media > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* the videos have a wall behind the crest: feather their edges into the stage (the portrait video
   fills the middle 75% of the square, so the side fades sit just inside 12.5% / 87.5%) */
.crest-media > video {
  -webkit-mask-image: linear-gradient(to right, transparent 12.5%, #000 15.5%, #000 84.5%, transparent 87.5%),
    linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 12.5%, #000 15.5%, #000 84.5%, transparent 87.5%),
    linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}
.crest-canvas, .crest-spin { opacity: 0; }
.crest-stage:not(.is-live) .crest-canvas,
.crest-stage:not(.is-live) .crest-spin { display: none; }
.crest-caption {
  width: min(40rem, calc(100vw - 2rem));
  margin: 0;
  text-align: center;
  font: 500 0.85rem/1.5 var(--font-mono);
  color: var(--muted);
}
.crest-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font: 700 0.62rem/1 var(--font-mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cyan);
  transition: opacity 0.3s;
}
.crest-cue::after {
  content: '';
  width: 1px;
  height: 1.6rem;
  background: linear-gradient(var(--cyan), transparent);
  animation: crest-cue 1.6s ease-in-out infinite;
}
@keyframes crest-cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.crest-stage:not(.is-live) .crest-cue { display: none; }

/* reduced motion: no pin, no scrub - the two stills and the spin video with a play button */
.crest-calm { display: none; }
@media (prefers-reduced-motion: reduce) {
  .crest-stage .crest-pin { display: none; }
  .crest-calm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    max-width: 72rem;
    margin-inline: auto;
    padding: 2rem clamp(1rem, 4vw, 2.5rem);
  }
  .crest-calm figure { margin: 0; }
  .crest-calm img, .crest-calm video { width: 100%; height: auto; display: block; }
  .crest-calm figcaption { font: 500 0.75rem/1.5 var(--font-mono); color: var(--muted); margin-top: 0.4rem; }
  .crest-cue::after { animation: none; }
}
@media (max-width: 767px) {
  .crest-stage.is-live { height: 380vh; }
  /* phones: a bigger square, cropped at the sides; every frame's crest stays inside the middle 84% */
  .crest-stage { --crest-side: min(125vw, calc(100svh - 8.5rem)); }
}