/* ENVOY — title.css
   the title-card video, its veil and its two controls

   One part of a stylesheet split across files. The load order in
   index.html is part of the stylesheet — see css/base.css for the map. */

/* ------------------------------------------------------------ title card */

.card {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.card-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Black for the fade-out, white for the flash back in. Both states are one
   element so the two halves can never overlap or fight for stacking. */
.veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #000;
  opacity: 0;
}

.veil.is-fading {
  opacity: 1;
  transition: opacity var(--fade-out) ease-in;
}

/* Set with no transition so the pop lands on a single frame, then cleared
   on the next tick to let it fall away. */
.veil.is-flash {
  background: #fff;
  opacity: 0.9;
  transition: none;
}

.veil.is-flash.is-clearing {
  opacity: 0;
  transition: opacity var(--flash-out) ease-out;
}

/* ---- title-card controls ---- */

.sound {
  position: absolute;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(18px, 3vh, 34px);
  z-index: 8;
  padding: 7px 14px;
  border: 1px solid rgba(239, 32, 21, 0.55);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--red);
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.sound:hover,
.sound:focus-visible {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 34px);
  z-index: 8;
  width: 34px;
  margin-left: -17px;
  color: var(--red);
  animation: nudge 2.4s ease-in-out infinite;
}

.scroll-cue svg { display: block; width: 100%; height: auto; }

@keyframes nudge {
  0%, 100% { transform: translateY(0);   opacity: 0.55; }
  50%      { transform: translateY(6px); opacity: 1; }
}