/* ==========================================================================
   LAUNCH — the opening ceremony
   --------------------------------------------------------------------------
   Two states live in one page:

     .gate      the still screen with the golden-cross button
     .ceremony  the fifteen-second sequence that follows the press

   The whole ceremony is driven by a single 15s timeline. Every animated
   element runs one 15s keyframe animation with percentage stops, so the acts
   stay in step with each other and with the audio no matter how slow the
   device is. Timings in comments are given in seconds of that 15s.
   ========================================================================== */

:root {
  /* Ken Burns scale factors — flattened to 1 under reduced motion. */
  --ken-in: 1.13;
  --ken-mid: 1.05;
  --ken-out: 1;
}

html,
body {
  height: 100%;
}

body.launch-body {
  margin: 0;
  overflow: hidden;
  background: #0b0705;
  color: #f4ece0;
  font-family: var(--font-text);
}

/* ==========================================================================
   STAGE
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Ground: a deep sanctuary dark with a gilded dawn behind it ---------- */

.stage__ground {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 50% 42%, #3a1b15 0%, #1a0c09 48%, #0b0705 100%),
    linear-gradient(180deg, #170b08, #0b0705);
}

/* A very slow sunburst of gilded rays behind the button. */
.stage__rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190vmax;
  height: 190vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(201, 162, 77, 0.14) 0deg 4deg,
    transparent 4deg 18deg,
    rgba(201, 162, 77, 0.09) 18deg 21deg,
    transparent 21deg 36deg
  );
  mask-image: radial-gradient(closest-side, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 72%);
  animation: rayTurn 160s linear infinite;
  opacity: 0.85;
}

@keyframes rayTurn {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* A warm pool of light at the centre. */
.stage__glow {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(1100px, 130vw);
  height: min(1100px, 130vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(232, 182, 90, 0.26) 0%,
    rgba(166, 76, 40, 0.1) 34%,
    transparent 66%
  );
  animation: breathe 9s var(--e-in-out) infinite;
  pointer-events: none;
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

/* The canvas that rose petals and gold motes are drawn onto. */
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

/* ==========================================================================
   GATE — the screen before the press
   ========================================================================== */

.gate {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--gutter);
  text-align: center;
}

.gate__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(232, 182, 90, 0.9);
  margin-bottom: var(--s-5);
  animation: riseIn 1.2s var(--e-sacred) 0.1s both;
}

.gate__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fdf6e8;
  margin: 0;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
  animation: riseIn 1.3s var(--e-sacred) 0.22s both;
}

.gate__rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  color: rgba(232, 182, 90, 0.8);
  animation: riseIn 1.3s var(--e-sacred) 0.34s both;
}

.gate__rule::before,
.gate__rule::after {
  content: "";
  width: clamp(40px, 9vw, 86px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 182, 90, 0.75), transparent);
}

.gate__rule span {
  font-size: 0.625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.gate__sub {
  max-width: 44ch;
  margin: var(--s-6) auto 0;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
  line-height: 1.85;
  color: rgba(244, 236, 224, 0.62);
  animation: riseIn 1.3s var(--e-sacred) 0.46s both;
}

.gate__press {
  margin-top: var(--s-6);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(232, 182, 90, 0.72);
  animation: riseIn 1.3s var(--e-sacred) 1.5s both, softPulse 3.4s ease-in-out 2.8s infinite;
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes softPulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.95;
  }
}

/* ==========================================================================
   THE LAUNCH BUTTON
   ========================================================================== */

.launch-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(252px, 42vw, 384px);
  aspect-ratio: 1;
  margin-block: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  isolation: isolate;
  animation: riseIn 1.4s var(--e-sacred) 0.7s both;
  transition: transform var(--d-slow) var(--e-sacred);
}

.launch-btn:hover {
  transform: scale(1.035);
}

.launch-btn:active {
  transform: scale(0.985);
}

.launch-btn > * {
  grid-area: 1 / 1;
}

/* ---- Halo: a soft gold bloom that breathes ------------------------------ */

.launch-btn__halo {
  width: 150%;
  height: 150%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(232, 182, 90, 0.4) 0%,
    rgba(232, 182, 90, 0.14) 38%,
    transparent 66%
  );
  animation: haloPulse 4.2s var(--e-in-out) infinite;
  pointer-events: none;
}

@keyframes haloPulse {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* ---- Rotating gilded ring ---------------------------------------------- */

.launch-btn__ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #6b4a1a 0deg,
    #f3dfa2 48deg,
    #a8781f 96deg,
    #ffeec2 158deg,
    #7a5620 214deg,
    #f0d894 286deg,
    #6b4a1a 360deg
  );
  animation: ringTurn 14s linear infinite;
  box-shadow: 0 18px 70px rgba(176, 120, 36, 0.45);
  pointer-events: none;
}

@keyframes ringTurn {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Dashed orbit, turning the other way -------------------------------- */

.launch-btn__orbit {
  width: 118%;
  height: 118%;
  border-radius: 50%;
  border: 1px dashed rgba(232, 182, 90, 0.42);
  animation: orbitTurn 34s linear infinite reverse;
  pointer-events: none;
}

@keyframes orbitTurn {
  to {
    transform: rotate(360deg);
  }
}

/* ---- The face: a dark glass disc inside the ring ------------------------ */

.launch-btn__face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.35rem);
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border-radius: 50%;
  background:
    radial-gradient(70% 60% at 50% 26%, rgba(255, 229, 173, 0.2), transparent 62%),
    linear-gradient(170deg, #2a1509 0%, #190c06 54%, #120806 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 230, 170, 0.28),
    inset 0 -18px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

/* A slow sheen travelling across the glass. */
.launch-btn__face::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 238, 199, 0.14) 48%,
    transparent 58%
  );
  animation: sheen 6.5s var(--e-in-out) infinite;
  pointer-events: none;
}

@keyframes sheen {
  0% {
    transform: translateX(-55%);
  }
  55%,
  100% {
    transform: translateX(55%);
  }
}

/* ---- The golden cross --------------------------------------------------- */

.launch-btn__cross {
  position: relative;
  width: clamp(76px, 15vw, 124px);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(240, 200, 110, 0.55))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  animation: crossGlow 4.2s var(--e-in-out) infinite;
}

@keyframes crossGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 14px rgba(240, 200, 110, 0.4))
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(255, 219, 140, 0.8))
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  }
}

.launch-btn__label {
  position: relative;
  font-size: clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: rgba(248, 230, 190, 0.92);
}

.launch-btn:focus-visible {
  outline: 2px solid #f3dfa2;
  outline-offset: 10px;
}

/* ==========================================================================
   GATE EXIT — the button blooms open and the gate dissolves
   ========================================================================== */

.stage.is-playing .gate {
  animation: gateOut 1.25s var(--e-sacred) forwards;
  pointer-events: none;
}

@keyframes gateOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
    filter: blur(14px);
  }
}

/* A ring of light thrown outward at the moment of the press. */
.shockwave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(252px, 42vw, 384px);
  aspect-ratio: 1;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 226, 160, 0.85);
  opacity: 0;
  z-index: 35;
  pointer-events: none;
}

.stage.is-playing .shockwave {
  animation: shockwave 1.8s var(--e-out) forwards;
}

.stage.is-playing .shockwave--late {
  animation-delay: 0.32s;
}

@keyframes shockwave {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.6);
    border-width: 3px;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(5.5);
    border-width: 0.5px;
  }
}

/* ==========================================================================
   CEREMONY — the fifteen seconds
   ========================================================================== */

.ceremony {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
}

.stage.is-playing .ceremony {
  opacity: 1;
  visibility: visible;
}

/* ---- The sacred images -------------------------------------------------- */

/* The frame shrinks to fit its image. Both sacred images are portraits, so
   they are bounded by height first — otherwise a tall picture on a short
   screen runs under the caption. */
.ceremony__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.ceremony__frame img {
  width: auto;
  height: auto;
  max-height: 60vh;
  max-width: 84vw;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(232, 182, 90, 0.42),
    0 0 90px rgba(236, 176, 86, 0.3),
    0 40px 120px rgba(0, 0, 0, 0.75);
}

/* The radiance that pools around each image. */
.ceremony__frame::before {
  content: "";
  position: absolute;
  inset: -22%;
  background: radial-gradient(
    circle,
    rgba(255, 214, 140, 0.3) 0%,
    rgba(255, 196, 110, 0.1) 40%,
    transparent 68%
  );
  pointer-events: none;
  z-index: -1;
}

.stage.is-playing .ceremony__frame--one {
  animation: actOne 15s linear forwards;
}

.stage.is-playing .ceremony__frame--two {
  animation: actTwo 15s linear forwards;
}

/* 0.6s in · held to 5.1s · gone by 6.0s */
@keyframes actOne {
  0%,
  4% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--ken-in));
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--ken-mid));
  }
  34% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--ken-out));
  }
  40%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--ken-out));
  }
}

/* 5.1s in · held to 9.9s · gone by 10.8s */
@keyframes actTwo {
  0%,
  34% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--ken-in));
  }
  44% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--ken-mid));
  }
  66% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--ken-out));
  }
  72%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--ken-out));
  }
}

/* ---- Captions beneath the images ---------------------------------------- */

.ceremony__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(5rem, 11vh, 8.5rem);
  width: min(620px, 86vw);
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.9rem + 1.3vw, 1.95rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: #fbf1dd;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.85);
  opacity: 0;
}

.stage.is-playing .ceremony__caption--one {
  animation: captionOne 15s linear forwards;
}

.stage.is-playing .ceremony__caption--two {
  animation: captionTwo 15s linear forwards;
}

@keyframes captionOne {
  0%,
  8% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  16%,
  32% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  38%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes captionTwo {
  0%,
  40% {
    opacity: 0;
    transform: translateX(-50%) translateY(14px);
  }
  48%,
  64% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---- Finale: the name, in gold ----------------------------------------- */

.ceremony__finale {
  position: relative;
  z-index: 2;
  width: min(900px, 90vw);
  text-align: center;
  opacity: 0;
}

.stage.is-playing .ceremony__finale {
  animation: finale 15s linear forwards;
}

/* 10.5s in · held to 13.8s · out by 14.6s */
@keyframes finale {
  0%,
  70% {
    opacity: 0;
    transform: translateY(22px);
  }
  78%,
  92% {
    opacity: 1;
    transform: translateY(0);
  }
  98%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

.ceremony__finale-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(232, 182, 90, 0.95);
  margin-bottom: var(--s-5);
}

.ceremony__finale-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 1.2rem + 4.4vw, 5rem);
  line-height: 1.04;
  margin: 0;
  background: linear-gradient(170deg, #fff6e2 0%, #f0d08a 44%, #c79a3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 60px rgba(0, 0, 0, 0.5);
}

.ceremony__finale-sub {
  margin-top: var(--s-6);
  font-size: clamp(0.78rem, 0.72rem + 0.3vw, 0.95rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 236, 224, 0.7);
}

.ceremony__finale-cross {
  width: 34px;
  height: 34px;
  margin: 0 auto var(--s-6);
  color: #e8b65a;
  filter: drop-shadow(0 0 16px rgba(232, 182, 90, 0.7));
}

/* ---- The final wash of light -------------------------------------------- */

.ceremony__flash {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: radial-gradient(circle at 50% 50%, #fffaf0 0%, #f6e3bb 42%, #e8c489 100%);
  opacity: 0;
  pointer-events: none;
}

.stage.is-playing .ceremony__flash {
  animation: finalFlash 15s linear forwards;
}

@keyframes finalFlash {
  0%,
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ==========================================================================
   CONTROLS — skip, sound, progress
   ========================================================================== */

.controls {
  position: absolute;
  top: clamp(1rem, 3vh, 2rem);
  right: clamp(1rem, 3vw, 2.25rem);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-slow) var(--e-out), visibility var(--d-slow);
}

.stage.is-playing .controls {
  opacity: 1;
  visibility: visible;
  transition-delay: 1.1s;
}

.control {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 40px;
  padding-inline: 1rem;
  border: 1px solid rgba(232, 182, 90, 0.34);
  border-radius: var(--r-pill);
  background: rgba(16, 9, 6, 0.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(244, 236, 224, 0.82);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}

.control:hover {
  border-color: #e8b65a;
  color: #fbe9c6;
  background: rgba(40, 22, 10, 0.7);
}

.control svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.control--icon {
  width: 40px;
  padding: 0;
  justify-content: center;
}

/* ---- Progress hairline -------------------------------------------------- */

.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  height: 2px;
  background: rgba(232, 182, 90, 0.14);
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out);
}

.stage.is-playing .progress {
  opacity: 1;
}

.progress__bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #a8781f, #f3dfa2, #e8b65a);
  box-shadow: 0 0 12px rgba(232, 182, 90, 0.7);
}

.stage.is-playing .progress__bar {
  animation: progress 15s linear forwards;
}

@keyframes progress {
  to {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 680px) {
  .gate__sub {
    display: none;
  }

  .ceremony__frame img {
    max-height: 52vh;
    max-width: 88vw;
  }

  .control span {
    display: none;
  }

  .control {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-height: 640px) {
  .launch-btn {
    width: clamp(190px, 30vh, 250px);
    margin-block: var(--s-5);
  }

  .gate__sub {
    display: none;
  }
}

/* ==========================================================================
   REDUCED MOTION
   --------------------------------------------------------------------------
   base.css disables animation globally for this preference. The ceremony is
   the page's entire content, so it is re-enabled here — but flattened: no
   Ken Burns drift, no petals, no rotating ornament. Cross-fades only.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ken-in: 1;
    --ken-mid: 1;
    --ken-out: 1;
  }

  .stage.is-playing .ceremony__frame--one,
  .stage.is-playing .ceremony__frame--two,
  .stage.is-playing .ceremony__caption--one,
  .stage.is-playing .ceremony__caption--two,
  .stage.is-playing .ceremony__finale,
  .stage.is-playing .ceremony__flash,
  .stage.is-playing .progress__bar {
    animation-duration: 15s !important;
  }

  .stage.is-playing .gate {
    animation-duration: 1.25s !important;
  }

  .stage__rays,
  .stage__glow,
  .launch-btn__halo,
  .launch-btn__ring,
  .launch-btn__orbit,
  .launch-btn__face::after,
  .launch-btn__cross {
    animation: none !important;
  }

  .launch-btn__ring {
    background: linear-gradient(140deg, #f3dfa2, #a8781f 48%, #f0d894);
  }
}