/* OPENING EXPERIENCE v0.1 — cinematic overlay styles.
   The overlay never repaints the town: the real adopted town image
   stays underneath and is revealed by fading the backdrop and parting
   two CSS cloud panels. All overlay children except the controls have
   pointer-events: none; the overlay itself blocks town input only
   while the cinematic is on screen. */

#opening-overlay {
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  background: transparent; color: #f3ecd9;
  font-family: inherit;
}
#opening-overlay .op-backdrop {
  position: absolute; inset: 0; background: #05070f;
  opacity: 1; transition: opacity 2.8s ease; pointer-events: none;
}
#opening-overlay.op-phase-clouds .op-backdrop,
#opening-overlay.op-phase-focus .op-backdrop,
#opening-overlay.op-phase-avatar-or-explore .op-backdrop { opacity: 0; }

/* Cloud panels: soft layered gradients, dark before the reveal. */
#opening-overlay .op-cloud {
  position: absolute; top: -12%; height: 124%; width: 68%;
  pointer-events: none; opacity: 1;
  filter: brightness(0.22) saturate(0.45);
  transition: transform 5.6s ease-in-out, filter 1.4s ease, opacity 1.2s ease;
  background:
    radial-gradient(ellipse 55% 34% at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 50% 40% at 65% 55%, rgba(232,224,255,0.9), rgba(232,224,255,0) 70%),
    radial-gradient(ellipse 60% 30% at 45% 78%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #cfd6f5 0%, #aab4e8 55%, #8b96d6 100%);
}
#opening-overlay .op-cloud-left { left: -6%; border-radius: 0 50% 50% 0 / 0 40% 60% 0; }
#opening-overlay .op-cloud-right { right: -6%; border-radius: 50% 0 0 50% / 40% 0 0 60%; }
#opening-overlay.op-phase-clouds .op-cloud,
#opening-overlay.op-phase-focus .op-cloud,
#opening-overlay.op-phase-avatar-or-explore .op-cloud { filter: brightness(1) saturate(1); }
#opening-overlay.op-phase-clouds .op-cloud-left,
#opening-overlay.op-phase-focus .op-cloud-left,
#opening-overlay.op-phase-avatar-or-explore .op-cloud-left { transform: translateX(-118%); }
#opening-overlay.op-phase-clouds .op-cloud-right,
#opening-overlay.op-phase-focus .op-cloud-right,
#opening-overlay.op-phase-avatar-or-explore .op-cloud-right { transform: translateX(118%); }
#opening-overlay.op-phase-focus .op-cloud,
#opening-overlay.op-phase-avatar-or-explore .op-cloud { opacity: 0; }

/* Gag line */
#opening-overlay .op-gag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.6rem, 6vw, 3rem); font-weight: 700; letter-spacing: 0.14em;
  opacity: 0; transition: opacity 0.7s ease; pointer-events: none; text-align: center;
}
#opening-overlay.op-phase-gag .op-gag { opacity: 1; }

/* Title */
#opening-overlay .op-title {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.6rem;
  opacity: 0; transition: opacity 0.9s ease; pointer-events: none; text-align: center;
  padding: 0 1rem;
}
#opening-overlay.op-phase-title .op-title { opacity: 1; }
#opening-overlay .op-title-main {
  font-size: clamp(3rem, 13vw, 7.5rem); font-weight: 800; letter-spacing: 0.12em;
  line-height: 1.15; color: #f7f1de;
  text-shadow: 0 0 18px rgba(255, 214, 120, 0.28), 0 2px 10px rgba(0,0,0,0.55);
}
#opening-overlay .op-title-sub {
  font-size: clamp(0.7rem, 2.4vw, 1rem); letter-spacing: 0.5em; color: #cdbd8a;
}

/* Controls (skip / audio): the only interactive overlay elements. */
#opening-overlay .op-controls {
  position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 3;
}
#opening-overlay .op-controls button {
  background: rgba(13, 20, 40, 0.72); color: #e8e2cf; border: 1px solid rgba(232,226,207,0.4);
  border-radius: 999px; padding: 8px 16px; font-size: 0.9rem; cursor: pointer;
}
#opening-overlay .op-controls button:hover,
#opening-overlay .op-controls button:focus-visible { background: rgba(35, 48, 84, 0.9); outline: 2px solid #ffd166; outline-offset: 2px; }
#opening-overlay .op-controls button[aria-pressed="true"] { background: rgba(88, 68, 16, 0.85); }

/* Focus zoom applied to the existing town frame (host sets origin). */
.town-frame.op-zoom { transition: transform 2.2s ease; transform: scale(1.35); }

/* One-shot input shield used right after the overlay closes. */
#opening-shield { position: fixed; inset: 0; z-index: 190; background: transparent; }

/* Replay entry placed next to the existing avatar button by the host. */
#opening-replay { margin-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  #opening-overlay .op-backdrop,
  #opening-overlay .op-cloud,
  #opening-overlay .op-gag,
  #opening-overlay .op-title,
  .town-frame.op-zoom { transition: none; }
}