body.opening-active {
  overflow: hidden;
}

.opening-gate {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  min-width: 320px;
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 24px);
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(180deg, rgba(2, 7, 22, 0.10) 0%, rgba(1, 5, 15, 0.26) 46%, rgba(0, 2, 8, 0.58) 100%),
    url("./opening-winter-sky.jpeg") center center / cover no-repeat,
    linear-gradient(180deg, #050c26 0%, #081638 56%, #10233f 82%, #030712 100%);
  color: #f7f9ff;
  cursor: pointer;
  isolation: isolate;
  opacity: 1;
  touch-action: manipulation;
  transition: opacity 420ms ease, filter 420ms ease;
}

.opening-gate::before,
.opening-gate::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
}

.opening-gate::before {
  z-index: 1;
  background:
    radial-gradient(ellipse at 35% 26%, rgba(255, 160, 82, 0.055), transparent 18%),
    radial-gradient(ellipse at 50% 92%, rgba(104, 150, 196, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(185, 215, 255, 0.020), transparent 48%);
  filter: blur(12px) saturate(1.04);
  opacity: 0.46;
  transform: translate3d(0, 0, 0) scale(1.02);
  animation: openingHazeDrift 18s ease-in-out infinite;
}

.opening-gate::after {
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0 42%, rgba(0, 0, 0, 0.22) 82%),
    linear-gradient(180deg, rgba(2, 5, 18, 0.02), rgba(0, 0, 0, 0.34));
}

.opening-gate-leaving {
  opacity: 0;
  filter: brightness(1.08) blur(4px);
  cursor: default;
}

.opening-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  filter: saturate(1.04) contrast(1.02);
}

.opening-orion {
  --opening-orion-scale: 1;
  --opening-orion-start-scale: 0.96;
  position: absolute;
  top: clamp(250px, 25.8svh, 420px);
  left: calc(35% - 28px);
  z-index: 4;
  width: 148px;
  height: 124px;
  pointer-events: none;
  opacity: 0;
  filter:
    drop-shadow(0 0 18px rgba(255, 147, 83, 0.12))
    drop-shadow(0 0 34px rgba(130, 170, 230, 0.08));
  mix-blend-mode: screen;
  animation: openingOrionIn 1200ms ease 520ms forwards;
}

.opening-orion-star,
.opening-orion-line {
  position: absolute;
  display: block;
}

.opening-orion-star {
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.opening-orion-line {
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 190, 132, 0.26), rgba(214, 232, 255, 0.10));
  filter: blur(0.18px);
  opacity: 0.16;
}

.opening-orion-line-shoulder {
  top: 31px;
  left: 33px;
  width: 86px;
  transform: rotate(9deg);
}

.opening-orion-line-body {
  top: 39px;
  left: 32px;
  width: 76px;
  transform: rotate(52deg);
  opacity: 0.12;
}

.opening-orion-betelgeuse {
  top: 30px;
  left: 28px;
  width: 14px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 42% 38%, #fff9cf 0 7%, #ffd38c 16%, #ff8a42 34%, #c93a22 56%, rgba(120, 21, 16, 0.34) 72%, transparent 80%);
  box-shadow:
    0 0 7px rgba(255, 229, 167, 0.56),
    0 0 17px rgba(255, 122, 62, 0.42),
    0 0 38px rgba(205, 62, 36, 0.22),
    0 0 68px rgba(255, 142, 82, 0.11);
  filter: saturate(1.18) brightness(1.05);
  isolation: isolate;
  animation: betelgeuseBreathe 5s ease-in-out infinite;
}

.opening-orion-betelgeuse::before,
.opening-orion-betelgeuse::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.opening-orion-betelgeuse::before {
  inset: -7px;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(255, 238, 181, 0.55) 0 7%, rgba(255, 132, 64, 0.24) 26%, transparent 70%);
  filter: blur(1.1px);
  opacity: 0.68;
}

.opening-orion-betelgeuse::after {
  inset: -34px;
  background:
    radial-gradient(circle, rgba(255, 137, 72, 0.16) 0 12%, rgba(203, 58, 32, 0.10) 30%, rgba(73, 86, 128, 0.045) 56%, transparent 74%);
  filter: blur(5px);
  opacity: 0.62;
}

.opening-orion-bellatrix {
  top: 44px;
  left: 116px;
  width: 5px;
  aspect-ratio: 1;
  background: #d8e8ff;
  box-shadow: 0 0 12px rgba(202, 228, 255, 0.46);
  opacity: 0.28;
}

.opening-orion-belt {
  top: 98px;
  left: 77px;
  width: 4px;
  aspect-ratio: 1;
  background: #e9f3ff;
  box-shadow: 0 0 10px rgba(218, 237, 255, 0.36);
  opacity: 0.22;
}

.opening-gate-committing .opening-orion-betelgeuse {
  animation: betelgeuseEnterPulse 380ms ease-out 1 both;
}

.opening-gate-committing .opening-orion-betelgeuse::before {
  animation: betelgeuseCorePulse 380ms ease-out 1 both;
}

.opening-gate-committing .opening-orion-betelgeuse::after {
  animation: betelgeuseHaloPulse 380ms ease-out 1 both;
}

.opening-horizon {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 34%;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(2, 6, 16, 0.12) 38%, rgba(0, 2, 8, 0.58) 100%);
  opacity: 0.56;
}

.opening-horizon::before,
.opening-horizon::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  pointer-events: none;
}

.opening-horizon::before {
  display: none;
}

.opening-horizon::after {
  display: none;
}

.opening-copy {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  width: min(100%, 430px);
  padding: 28px 16px 30px;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.48);
  transform: translateY(10px);
  opacity: 0;
  animation: openingCopyIn 900ms ease 260ms forwards;
}

.opening-kicker,
.opening-subtitle,
.opening-tap {
  margin: 0;
  color: rgba(230, 241, 255, 0.76);
  font-size: 0.74rem;
  letter-spacing: 0;
}

.opening-kicker {
  font-weight: 800;
  text-transform: uppercase;
}

.opening-title {
  margin: 14px 0 10px;
  color: #ffffff;
  font-size: 2.55rem;
  line-height: 0.98;
  letter-spacing: 0;
}

.opening-subtitle {
  max-width: 20rem;
  font-size: 0.86rem;
  line-height: 1.75;
}

.opening-tap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 11px 17px;
  border: 1px solid rgba(202, 232, 255, 0.32);
  border-radius: 999px;
  background: rgba(13, 24, 54, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 32px rgba(0, 0, 0, 0.26);
  color: rgba(250, 253, 255, 0.9);
  font-weight: 800;
}

.opening-tap::before {
  content: "";
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dff5ff;
  box-shadow: 0 0 18px rgba(211, 244, 255, 0.8);
  animation: openingPulse 1.5s ease-in-out infinite;
}

.opening-gate:focus-visible .opening-tap {
  outline: 2px solid rgba(223, 245, 255, 0.72);
  outline-offset: 4px;
}

@keyframes openingHazeDrift {
  0%, 100% {
    transform: translate3d(-0.7%, -0.4%, 0) scale(1.02);
    opacity: 0.48;
  }
  50% {
    transform: translate3d(0.7%, 0.5%, 0) scale(1.035);
    opacity: 0.62;
  }
}

@keyframes openingOrionIn {
  from {
    opacity: 0;
    transform: translate3d(-4px, 8px, 0) scale(var(--opening-orion-start-scale));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(var(--opening-orion-scale));
  }
}

@keyframes betelgeuseBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.94);
    filter: brightness(0.96) saturate(1.08);
  }
  48% {
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(1.20) saturate(1.14);
  }
}

@keyframes betelgeuseEnterPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.38);
    filter: brightness(1.62) saturate(1.16);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.04);
    filter: brightness(1.10) saturate(1.10);
  }
}

@keyframes betelgeuseCorePulse {
  0% { opacity: 0.58; transform: scale(0.94); }
  46% { opacity: 0.92; transform: scale(1.20); }
  100% { opacity: 0.70; transform: scale(1.03); }
}

@keyframes betelgeuseHaloPulse {
  0% { opacity: 0.34; transform: scale(0.84); }
  48% { opacity: 0.82; transform: scale(1.34); }
  100% { opacity: 0.48; transform: scale(1.04); }
}

@keyframes openingCopyIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes openingPulse {
  0%, 100% { opacity: 0.44; transform: scale(0.84); }
  50% { opacity: 1; transform: scale(1.18); }
}

@media (max-width: 370px) {
  .opening-orion {
    --opening-orion-scale: 0.86;
    --opening-orion-start-scale: 0.82;
    top: clamp(224px, 25.8svh, 360px);
    left: calc(35% - 24px);
    transform-origin: 0 0;
  }

  .opening-title {
    font-size: 2.08rem;
  }

  .opening-subtitle {
    font-size: 0.79rem;
  }

  .opening-horizon {
    height: 38%;
  }
}

@media (min-width: 560px) {
  .opening-title {
    font-size: 3.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-gate,
  .opening-gate::before,
  .opening-orion,
  .opening-orion-betelgeuse,
  .opening-orion-betelgeuse::before,
  .opening-orion-betelgeuse::after,
  .opening-horizon,
  .opening-copy,
  .opening-tap::before {
    animation: none !important;
    transition: none !important;
  }

  .opening-copy {
    opacity: 1;
    transform: none;
  }

  .opening-orion {
    opacity: 1;
    transform: scale(var(--opening-orion-scale));
  }
}

/* v0.22.6: photograph-free procedural winter sky */
.opening-gate {background:#080d15;}
.opening-gate::before,.opening-gate::after {display:none;}
.opening-canvas {z-index:0;filter:none;pointer-events:none;}
.opening-copy {position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:min(100%,430px);padding:24px 12px;animation:skyCopyIn 1.5s ease both;}
.opening-title {font-size:clamp(1.7rem,6.5vw,2.4rem);font-weight:500;letter-spacing:.08em;line-height:1.4;}
.opening-kicker {font-size:.58rem;letter-spacing:.18em;font-weight:400;color:#adb7c7;}
.opening-subtitle {font-size:.65rem;color:#aeb7c7;max-width:17rem;}
.opening-tap {font-size:.61rem;letter-spacing:.14em;font-weight:400;border:0;background:transparent;box-shadow:none;margin-top:18px;}
.opening-tap::before {width:3px;}
@keyframes skyCopyIn {from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.opening-copy{animation:none;transform:translateX(-50%);opacity:1}}

/* v0.22.8: quiet listening control, above the separate entrance */
.opening-music {margin-top:18px;padding:10px 18px;min-height:44px;border:1px solid #aebfd144;border-radius:999px;background:#101a2880;color:#dce6f3;font:inherit;font-size:.7rem;letter-spacing:.08em;cursor:pointer;}
.opening-music[aria-pressed="true"] {border-color:#c8dce780;color:#fff4d8;}
.opening-track {margin:7px 0 0;font-size:.52rem;letter-spacing:.05em;color:#98a6b9;}
button.opening-tap {cursor:pointer;min-height:44px;font-family:inherit;}
.opening-music:focus-visible,button.opening-tap:focus-visible {outline:2px solid #dce6f3;outline-offset:4px;}