/* Architectural frame and interactive leaves. All stone pixels are drawn once. */
.world-visual.gate-mounted {
  aspect-ratio: 440 / 580;
  width: 100%;
  max-width: 490px;
  isolation: isolate;
}
.stone-gate {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  filter: drop-shadow(0 15px 23px #0008);
  transform: scale(1);
  transform-origin: 50% 60%;
  transition: transform 2s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.stone-gate.is-lit {
  transform: scale(1.22);
}
@media (max-width: 700px) {
  .stone-gate.is-lit {
    transform: scale(1.1);
  }
}
.world-visual .gate-masonry {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.gate-aperture {
  position: absolute;
  left: 17.73%;
  top: 12.07%;
  width: 64.54%;
  height: 76.03%;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 32.2% 32.2% 0 0;
  background: #050911;
  perspective: 900px;
  box-shadow: 0 0 35px #ae8f3533;
}
.world-visual .gate-aperture #teaser-caelum {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  transition: opacity 1.5s;
}
.is-open .gate-aperture #teaser-caelum {
  opacity: 1;
}
.gate-star-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.is-open .gate-star-layer {
  pointer-events: auto;
}
.gate-star-target {
  position: absolute;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: crosshair;
}
.gate-star-target::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid #efd38a;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 10px #d4a944;
  transition: opacity 0.18s;
}
.gate-star-target:hover::after,
.gate-star-target:focus-visible::after,
.gate-star-target[aria-pressed="true"]::after {
  opacity: 1;
}
.gate-star-target:focus-visible {
  outline: 1px solid #f4e3b2;
  outline-offset: -7px;
}
.gate-star-card {
  position: absolute;
  width: min(240px, 82%);
  left: 50%;
  bottom: 4%;
  padding: 9px 11px;
  transform: translateX(-50%);
  border: 1px solid #b99a5d73;
  border-radius: 3px;
  background: #070b13e8;
  box-shadow: 0 8px 24px #000b;
  color: #ddd5c4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.gate-star-card.is-visible {
  opacity: 1;
}
.gate-star-card strong,
.gate-star-card span,
.gate-star-card small {
  display: block;
}
.gate-star-card strong {
  color: #edce87;
  font:
    400 clamp(11px, 3.5cqw, 14px) / 1.2 "Cinzel",
    serif;
  letter-spacing: 0.08em;
}
.gate-star-card span {
  margin-top: 3px;
  font-size: clamp(9px, 2.7cqw, 11px);
}
.gate-star-card small {
  margin-top: 2px;
  color: #aaa394;
  font:
    400 clamp(8px, 2.35cqw, 10px) / 1.25 "Roboto Mono",
    monospace;
}
.gate-star-discovery-hint {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 86%;
  transform: translateX(-50%);
  color: #c9b98f;
  font-size: clamp(9px, 2.5cqw, 11px);
  letter-spacing: 0.035em;
  text-align: center;
  text-shadow: 0 1px 5px #000;
  opacity: 0;
  transition: opacity 0.35s 1.5s;
  pointer-events: none;
}
.is-open .gate-star-discovery-hint {
  opacity: 0.82;
}
.gate-star-card.is-visible ~ .gate-star-discovery-hint {
  opacity: 0;
  transition-delay: 0s;
}
.gate-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  overflow: hidden;
  z-index: 2;
  transition:
    transform 1.8s cubic-bezier(0.2, 0.65, 0.2, 1),
    filter 1.8s;
  backface-visibility: hidden;
}
.gate-leaf-left {
  left: 0;
  transform-origin: left center;
  box-shadow: 1px 0 2px #000;
}
.gate-leaf-right {
  right: 0;
  transform-origin: right center;
  box-shadow: -1px 0 2px #000;
}
.gate-carvings {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 198.02%;
  background-size: 100% 100%;
  box-shadow: inset 0 0 35px #0008;
}
.gate-leaf-left .gate-carvings {
  left: 0;
}
.gate-leaf-right .gate-carvings {
  right: 0;
}
.gate-carvings:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: #080705;
  box-shadow: 1px 0 1px #c29f5244;
}
.gate-incisions {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 18%;
  bottom: 7%;
  border: 1px solid #0c0a08aa;
  border-radius: 50% 50% 0 0 / 39% 39% 0 0;
  box-shadow:
    0 1px 0 #a48c5f25,
    inset 0 1px 0 #a48c5f22;
}
.gate-incisions:after {
  content: "";
  position: absolute;
  inset: 15% 13% 2%;
  border: 1px solid #0c0a0899;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  box-shadow: 0 1px 0 #a48c5f22;
}
.gate-carving {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Apple Symbols", "Segoe UI Symbol", serif;
  font-size: calc(var(--glyph-size) * 0.21cqw);
  line-height: 1;
  color: #927957;
  text-shadow:
    0 -1.5px 1px #070603,
    0 1px 0 #c8ad7622;
  transition:
    color 0.45s,
    text-shadow 0.6s;
}
.is-lit .gate-carving {
  color: #edce87;
  text-shadow:
    0 0 8px #e7b85e,
    0 0 22px #b77a3566;
  transition-delay: var(--light-delay);
}
.gate-element-bar {
  position: absolute;
  top: 48%;
  left: 18%;
  width: 64%;
  height: 1px;
  background: currentColor;
}
.is-open .gate-leaf-left {
  transform: rotateY(-82deg);
  filter: brightness(0.55);
}
.is-open .gate-leaf-right {
  transform: rotateY(82deg);
  filter: brightness(0.55);
}
.gate-seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 20%;
  aspect-ratio: 1;
  padding: 5px;
  min-width: 44px;
  border: 1px solid #cdb27a99;
  border-radius: 50%;
  background: linear-gradient(
    140deg,
    #b59c60,
    #4c371c 45%,
    #b49a62 80%,
    #453218
  );
  cursor: pointer;
  box-shadow:
    0 7px 16px #0009,
    0 0 0 6px #aa89571a,
    0 0 0 7px #ac8b593d;
  transition:
    top 1.6s,
    box-shadow 0.4s;
}
.gate-seal:hover {
  box-shadow:
    0 7px 16px #0009,
    0 0 0 6px #aa895730,
    0 0 22px #d9b45f55;
}
.gate-seal:focus-visible {
  outline: 2px solid #f4e3b2;
  outline-offset: 9px;
}
.gate-seal-face {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 20%, #27303d, #090d16 75%);
  border: 1px solid #d0b16c60;
  color: #e5c883;
}
.gate-seal-sun {
  position: absolute;
  left: 15%;
  top: 12%;
  font:
    normal 8cqw/1 "Apple Symbols",
    serif;
}
@keyframes gate-invitation-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px #d4a94420;
  }
  50% {
    transform: scale(1.045);
    box-shadow:
      0 0 26px #e6bd5866,
      0 0 55px #d4a94422;
  }
}
.stone-gate:not(.is-lit) .gate-seal-face {
  animation: gate-invitation-pulse 3.2s ease-in-out infinite;
}
.motion-paused .gate-seal-face {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .stone-gate .gate-seal-face {
    animation: none;
  }
}
.gate-seal-moon {
  position: absolute;
  right: 10%;
  bottom: 8%;
  font:
    normal 7cqw/1 "Apple Symbols",
    serif;
}
.gate-seal-star {
  position: absolute;
  right: 20%;
  top: 12%;
  font-size: 2.5cqw;
}
.is-open .gate-seal {
  top: 90%;
}
.gate-invitation {
  position: absolute;
  top: 79%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: clamp(10px, 2.7cqw, 13px);
  letter-spacing: 0.04em;
  color: #c0ac88;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s;
}
.is-open .gate-invitation {
  opacity: 0;
}
.gate-mounted .visual-caption {
  bottom: -9px;
  color: #aca69b;
}
.stone-gate.is-still,
.stone-gate.is-still *,
.stone-gate.is-still .gate-aperture #teaser-caelum {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .stone-gate,
  .stone-gate *,
  .world-visual .gate-aperture #teaser-caelum {
    transition: none !important;
  }
}