/* ---------------------------------------------------------------------------
   glow-clip-page (2026-10-07): the clip's load-in, and the shell an export
   draws its progress on. Dan: "make a fun transition into the clip, like
   'loading the clip' or something, that makes it look really epic."

   THE BEATS (clip-intro.js drives the classes; reduced motion holds each as a
   still, no transitions):
     .is-on      the map card fades up out of Cistern black and settles; the
                 reason word rises and its tracking closes; the sharer's line
                 and the jade progress line follow.
     --p         the line fills as the clip's bytes, then the art, arrive.
     .is-cut     the Blink: a four-point star crosses the word and a white
                 shimmer runs the line; then the shell is removed in the same
                 frame the replay's first frame is already on the canvas.
     [data-gone] "This moment has faded" with PLAY GLOW gold, no load at all.
     .is-making  the shell back over a held frame while an export runs.

   Menu law: moss/brass tokens, 11 px floor, gold only on PLAY GLOW, the
   middle dot as the separator, no em dashes in copy.
   ------------------------------------------------------------------------- */

#clip-intro {
  --ci-ink: #f2e6bd;
  --ci-dim: #c9bda4;
  --ci-jade: #65c8cd;
  --ci-white: #fff7e6;
  --ci-black: #05070a;
  --p: 0;
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ci-black);
  color: var(--ci-ink);
  font-family: "Glow Caps", "DejaVu Sans", "Helvetica Neue", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
#clip-intro[hidden] { display: none; }

/* The map card, cover-fitted, dimmed, under a vignette that keeps the centre
   readable and the corners black. */
.ci-poster {
  position: absolute;
  inset: -2%;
  background: var(--ci-black) center / cover no-repeat;
  opacity: 0;
  transform: scale(1.07);
  filter: brightness(.62) saturate(.9);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform 1.6s cubic-bezier(.16, .8, .2, 1);
}
.ci-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 62% at 50% 52%, rgba(5, 7, 10, .18), rgba(5, 7, 10, .82) 78%, var(--ci-black)),
    linear-gradient(180deg, rgba(5, 7, 10, .5), rgba(5, 7, 10, 0) 30%, rgba(5, 7, 10, 0) 66%, rgba(5, 7, 10, .75));
}
#clip-intro.is-on .ci-poster { opacity: 1; transform: scale(1); }

.ci-mark {
  position: absolute;
  top: 22px;
  left: 26px;
  display: grid;
  gap: 3px;
  opacity: 0;
  transition: opacity .5s ease .25s;
}
.ci-mark i { font: 400 11px/1 "Glow Caps", "DejaVu Sans", sans-serif; letter-spacing: .42em; font-style: normal; color: var(--ci-dim); }
.ci-mark b { font: 700 26px/1 "Glow Serif", "PT Serif", Georgia, serif; letter-spacing: .12em; color: var(--ci-ink); }
#clip-intro.is-on .ci-mark { opacity: .92; }

.ci-center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(880px, calc(100vw - 32px));
  text-align: center;
}
.ci-tag {
  font: 400 12px/1 "Glow Caps", "DejaVu Sans", sans-serif;
  letter-spacing: .5em;
  padding-left: .5em;
  color: var(--ci-jade);
  opacity: 0;
  transition: opacity .4s ease .1s;
}
.ci-reason {
  margin: 0;
  font: 700 clamp(38px, 7.2vw, 104px)/1 "Glow Serif", "PT Serif", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ci-ink);
  text-shadow: 0 0 28px rgba(101, 200, 205, .22), 0 3px 18px rgba(0, 0, 0, .8);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease .12s, transform .8s cubic-bezier(.16, .8, .2, 1) .12s, letter-spacing 1.1s cubic-bezier(.16, .8, .2, 1) .12s, padding-left 1.1s cubic-bezier(.16, .8, .2, 1) .12s;
}
#clip-intro.is-on .ci-reason { opacity: 1; transform: none; letter-spacing: .07em; padding-left: .07em; }
.ci-reason:empty { display: none; }
.ci-by {
  margin: 0;
  font: 400 clamp(15px, 1.5vw, 19px)/1.2 "Glow Serif", "PT Serif", Georgia, serif;
  letter-spacing: .06em;
  color: var(--ci-dim);
  opacity: 0;
  transition: opacity .5s ease .38s;
}
.ci-by:empty { display: none; }
#clip-intro.is-on .ci-tag, #clip-intro.is-on .ci-by { opacity: 1; }

/* The jade line: a brass hairline track, the fill with a bright head. */
.ci-line {
  position: relative;
  width: min(420px, 62vw);
  height: 2px;
  margin-top: 10px;
  background: rgba(169, 120, 66, .32);
  opacity: 0;
  transition: opacity .4s ease .3s;
}
.ci-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  background: linear-gradient(90deg, rgba(101, 200, 205, .25), var(--ci-jade));
  box-shadow: 0 0 10px rgba(101, 200, 205, .55);
}
.ci-line i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ci-white);
  box-shadow: 0 0 10px 3px rgba(101, 200, 205, .8);
  opacity: calc(min(1, var(--p) * 40));
}
#clip-intro.is-on .ci-line { opacity: 1; }

.ci-note {
  margin: 0;
  font: 400 12px/1.3 "Glow Caps", "DejaVu Sans", sans-serif;
  letter-spacing: .2em;
  color: var(--ci-dim);
}
.ci-note:empty { display: none; }
#clip-intro .ci-play {
  min-width: min(260px, 100%);
  margin-top: 8px;
  text-decoration: none;
  /* The gold call to action, stated here: the token sheet's gold lives on #hold. */
  color: #22170e;
  background: linear-gradient(180deg, #f1d27d, #c99443);
  box-shadow: inset 0 0 0 1px #7a5f38;
}
#clip-intro .ci-play b { font: 700 16px/1.1 "Glow Serif", "PT Serif", Georgia, serif; letter-spacing: .16em; }

/* The Blink: the star crosses the word, the line flashes white. */
.ci-star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  fill: var(--ci-white);
  filter: drop-shadow(0 0 10px var(--ci-jade)) drop-shadow(0 0 24px rgba(101, 200, 205, .7));
  opacity: 0;
  pointer-events: none;
}
#clip-intro.is-cut .ci-star { animation: ci-blink .26s cubic-bezier(.5, 0, .9, .4) forwards; }
#clip-intro.is-cut .ci-line i { background: var(--ci-white); box-shadow: 0 0 18px 2px var(--ci-jade); }
#clip-intro.is-cut .ci-reason { text-shadow: 0 0 34px rgba(101, 200, 205, .7), 0 0 6px rgba(255, 247, 230, .9); }
@keyframes ci-blink {
  0%   { opacity: 0; transform: translateX(-38vw) scale(.4) rotate(0deg); }
  30%  { opacity: 1; }
  70%  { opacity: 1; transform: translateX(10vw) scale(1.5) rotate(45deg); }
  100% { opacity: 0; transform: translateX(38vw) scale(.3) rotate(90deg); }
}

/* "This moment has faded": the same shell, the word gone quiet. */
#clip-intro[data-gone] .ci-line, #clip-intro[data-gone] .ci-tag, #clip-intro[data-gone] .ci-by { display: none; }
#clip-intro[data-gone] .ci-reason { white-space: normal; font-size: clamp(28px, 5vw, 64px); color: var(--ci-dim); letter-spacing: .05em; padding-left: .05em; text-transform: none; }
#clip-intro[data-gone] .ci-poster { filter: brightness(.38) saturate(.4) grayscale(.5); }
#clip-intro[data-gone] .ci-play[hidden] { display: flex; }

/* An export in progress: the shell over the held frame, see-through. */
#clip-intro.is-making { background: rgba(5, 7, 10, .72); }
#clip-intro.is-making .ci-poster, #clip-intro.is-making .ci-mark { display: none; }
#clip-intro.is-making .ci-reason { font-size: clamp(28px, 4.4vw, 60px); }

/* Reduced motion: the same beats, held as stills. */
#clip-intro[data-still], #clip-intro[data-still] * { transition: none !important; animation: none !important; }
#clip-intro[data-still] .ci-star { display: none; }

/* Tap for sound: muted until the first interaction, then gone. */
#clip-sound {
  position: fixed;
  z-index: 61;
  left: 50%;
  top: 20px;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 2px;
  background: rgba(15, 24, 19, .78);
  box-shadow: inset 0 0 0 1px rgba(169, 120, 66, .8);
  color: #f2e6bd;
  font: 400 11px/1 "Glow Caps", "DejaVu Sans", sans-serif;
  letter-spacing: .24em;
  cursor: pointer;
}
#clip-sound[hidden] { display: none; }
#clip-sound i { font-style: normal; }
#clip-sound svg { width: 16px; height: 16px; fill: #f2e6bd; stroke: #f2e6bd; stroke-width: 1.6; stroke-linecap: round; }
#clip-sound .cs-off { fill: none; }

@media (max-width: 720px) {
  .ci-mark { top: 16px; left: 16px; }
  .ci-mark b { font-size: 22px; }
  #clip-sound { left: auto; right: 16px; top: 14px; translate: none; }
  .ci-reason { font-size: clamp(26px, 8.2vw, 48px); letter-spacing: .16em; padding-left: .16em; }
}