/* The cold open is a dark veil sitting on top of the live world canvas.
   Veil opacity = state. Black at start; thins to reveal Crossroads at Dusk;
   line resolves over it; line dissolves; veil falls to zero; world lives.
   It never replaces the canvas — the world is rendering the whole time. */

#cold-open {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: auto;
  overflow: hidden;
  transition: opacity 3s var(--easing-quiet);
}
#cold-open[data-state="released"] {
  opacity: 0;
  pointer-events: none;
}

/* The veil — a multi-stop dark gradient that thins through states. */
.co-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%,
      rgba(5, 3, 2, 0.92) 0%,
      rgba(5, 3, 2, 0.96) 60%,
      rgba(5, 3, 2, 1)    100%);
  transition: opacity 6s var(--easing-quiet),
              backdrop-filter 6s var(--easing-quiet);
  backdrop-filter: blur(0px);
}
#cold-open[data-state="armed"]      .co-veil { opacity: 1;    backdrop-filter: blur(2px); }
#cold-open[data-state="igniting"]   .co-veil { opacity: 0.78; backdrop-filter: blur(1px); }
#cold-open[data-state="speaking"]   .co-veil { opacity: 0.62; backdrop-filter: blur(0px); }
#cold-open[data-state="held"]       .co-veil { opacity: 0.48; }
#cold-open[data-state="releasing"]  .co-veil { opacity: 0;    transition: opacity 4s var(--easing-quiet); }

/* Atmospheric haze — warm color cast that lingers a little longer than the veil.
   Reads as Delta-dust when the Crossroads sky comes through. */
.co-haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 35% at 50% 70%,
      rgba(232, 164, 74, 0.12) 0%,
      rgba(196, 86, 58, 0.08) 40%,
      transparent 75%),
    radial-gradient(ellipse 60% 50% at 50% 100%,
      rgba(196, 86, 58, 0.10) 0%,
      transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 7s var(--easing-quiet);
}
#cold-open[data-state="igniting"]  .co-haze,
#cold-open[data-state="speaking"]  .co-haze,
#cold-open[data-state="held"]      .co-haze { opacity: 1; }
#cold-open[data-state="releasing"] .co-haze { opacity: 0.4; transition: opacity 3s var(--easing-quiet); }

/* Subtle film grain — animated noise. Keeps the dark from feeling digital. */
.co-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  animation: co-grain-shift 0.36s steps(2) infinite;
  mix-blend-mode: overlay;
}
@keyframes co-grain-shift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-1%, 1%); }
  100% { transform: translate(1%, -1%); }
}

/* The line — Playfair italic, resolves slowly at center, holds, dissolves. */
.co-line {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-weight: 400; font-style: italic;
  font-size: clamp(1.8rem, 5.4vw, 4.2rem);
  letter-spacing: -0.005em;
  color: var(--cream);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  filter: blur(8px);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.9);
  transition: opacity 4s var(--easing-quiet),
              filter 4s var(--easing-quiet),
              transform 6s var(--easing-quiet);
  will-change: opacity, filter, transform;
}
.co-line em {
  font-style: italic;
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#cold-open[data-state="speaking"] .co-line,
#cold-open[data-state="held"]     .co-line {
  opacity: 1;
  filter: blur(0);
}
#cold-open[data-state="releasing"] .co-line {
  opacity: 0;
  filter: blur(14px);
  transform: translate(-50%, -54%);
  transition: opacity 3s var(--easing-quiet),
              filter 3s var(--easing-quiet),
              transform 3s var(--easing-quiet);
}

/* The arm — minimal tap-to-enter. Only visible while armed. */
#co-arm {
  position: absolute; left: 50%; bottom: 14vh;
  transform: translateX(-50%);
  background: transparent; border: none; color: inherit;
  display: none;
  flex-direction: column; align-items: center; gap: 1.1rem;
  cursor: pointer;
  opacity: 0;
  animation: co-arm-fade 4s var(--easing-quiet) 1.5s forwards;
}
#cold-open[data-state="armed"] #co-arm { display: flex; }

.co-arm-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 24px rgba(232, 164, 74, 0.6);
  animation: co-arm-pulse 2.4s ease-in-out infinite;
}
.co-arm-label {
  font-family: var(--mono);
  font-size: 0.5rem; letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(242, 232, 217, 0.55);
}

@keyframes co-arm-fade { to { opacity: 1; } }
@keyframes co-arm-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 14px rgba(232, 164, 74, 0.4); }
  50%      { transform: scale(1.35); box-shadow: 0 0 36px rgba(232, 164, 74, 0.7); }
}

/* Lat/lon stamp — quiet, bottom. Disappears with the veil. */
.co-coords {
  position: absolute; left: 50%; bottom: 4vh;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.5rem; letter-spacing: 0.22em;
  color: rgba(242, 232, 217, 0.20);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 2s var(--easing-quiet);
}
#cold-open[data-state="armed"]    .co-coords,
#cold-open[data-state="igniting"] .co-coords,
#cold-open[data-state="speaking"] .co-coords,
#cold-open[data-state="held"]     .co-coords { opacity: 1; transition-delay: 2.2s; }

/* Dome mode: operator triggers, no tap affordance, no coords stamp. */
html[data-mode="dome"] #co-arm,
html[data-mode="dome"] .co-coords { display: none !important; }

/* Phone: line wraps, smaller. Coords abbreviate to fit. */
@media (max-width: 640px) {
  .co-line {
    font-size: clamp(1.5rem, 8vw, 2.8rem);
    white-space: normal;
    padding: 0 2rem;
    line-height: 1.2;
  }
  .co-coords {
    font-size: 0.42rem;
    letter-spacing: 0.18em;
  }
}
@media (max-width: 480px) {
  .co-coords {
    font-size: 0.38rem;
    letter-spacing: 0.14em;
  }
}