:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  cursor: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020304;
}

body {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: -3.5vh -3.5vw;
  background: url("assets/optimized/room_closed_approved.fast.webp") center / cover no-repeat;
  filter: blur(18px) brightness(.28) saturate(.72);
  transform: scale(1.08);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(2,3,4,.02) 40%, rgba(2,3,4,.45) 100%),
    rgba(2,3,4,.18);
  pointer-events: none;
}

.stage {
  position: relative;
  width: min(100vw, calc(100vh * 1670 / 941));
  height: min(100vh, calc(100vw * 941 / 1670));
  aspect-ratio: 1670 / 941;
  overflow: visible;
  background: #030405;
  isolation: isolate;
}

.background,
.writer-desk,
.bear {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.background {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}


.background-open {
  opacity: 0;
  pointer-events: none;
}

.relief-swap {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(50% 0, 67% 8%, 84% 25%, 100% 48%, 100% 100%, 0 100%, 0 48%, 16% 25%, 33% 8%);
}

.relief-swap img {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.relief-swap-lyric-to-first {
  left: 18.45%;
  top: 23.5%;
  width: 10.9%;
  height: 34.7%;
}

.relief-swap-lyric-to-first img {
  left: -247.9167%;
  top: -58.4239%;
  width: 833.3333%;
  height: 271.7391%;
}

.relief-swap-war-to-second {
  left: 29.75%;
  top: 21.5%;
  width: 12%;
  height: 36.8%;
}

.relief-swap-war-to-second img {
  left: -169.2661%;
  top: -67.7233%;
  width: 917.4312%;
  height: 288.1844%;
}

.writer-desk {
  left: 46.7066%;
  top: 41.4453%;
  width: 45.509%;
  height: 58.5547%;
  object-fit: fill;
  z-index: 3;
}

.bear {
  left: 17%;
  top: 56.85%;
  width: 33.55%;
  height: 36.03%;
  object-fit: fill;
  z-index: 4;
  filter:
    brightness(0.61)
    contrast(1.08)
    saturate(0.8)
    drop-shadow(0.45rem 0.7rem 0.48rem rgba(0, 0, 0, 0.72));
}

.bear-shadow {
  position: absolute;
  z-index: 3;
  left: 18.2%;
  top: 83.5%;
  width: 31.5%;
  height: 7.8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.46) 48%, transparent 76%);
  filter: blur(0.45rem);
  pointer-events: none;
}

.hotspot,
.portal {
  position: absolute;
  z-index: 6;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  text-decoration: none;
  outline: none;
}


.door {
  left: 0;
  top: 15.94%;
  width: 14.95%;
  height: 61.64%;
  z-index: 6;
  overflow: visible;
  /* The clickable area follows the wooden door leaf, not the wall/arch rectangle. */
  -webkit-clip-path: polygon(0 14%, 16% 10%, 34% 12%, 49% 18%, 61% 27%, 69% 39%, 72% 48%, 72% 90%, 64% 95%, 0 100%);
  clip-path: polygon(0 14%, 16% 10%, 34% 12%, 49% 18%, 61% 27%, 69% 39%, 72% 48%, 72% 90%, 64% 95%, 0 100%);
}

.door-local-state {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: none;
  transform-origin: 8% 52%;
  transition:
    opacity 220ms ease,
    filter 220ms ease;
  filter: brightness(0.92);
  will-change: opacity;
}

.door-local-open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.stage.is-door-open .door-local-state {
  opacity: 1;
  transform: none;
  filter: brightness(1);
}

.door::before {
  content: "";
  position: absolute;
  left: 4.5%;
  top: 12.5%;
  width: 58%;
  height: 76%;
  clip-path: polygon(50% 0, 67% 5%, 82% 16%, 92% 32%, 96% 50%, 96% 100%, 4% 100%, 4% 50%, 8% 32%, 18% 16%, 33% 5%);
  background: radial-gradient(ellipse at 50% 44%, rgba(255,213,139,.18), rgba(228,162,79,.08) 48%, transparent 76%);
  filter: blur(.42rem);
  opacity: .42;
  transform: scale(.98);
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
  pointer-events: none;
}

.door:hover::before,
.door:focus-visible::before,
.stage.is-door-open .door::before {
  opacity: .92;
  transform: scale(1.025);
  filter: blur(.58rem);
}

.door-sign {
  position: absolute;
  left: 42%;
  top: 55%;
  width: 30%;
  min-height: 7.8%;
  display: grid;
  place-items: center;
  padding: .18em .28em;
  border: 1px solid rgba(190,137,70,.82);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(43,28,15,.97), rgba(11,8,5,.97));
  color: rgba(226,183,112,.98);
  box-shadow: inset 0 0 0 2px rgba(5,4,3,.74), 0 .24rem .48rem rgba(0,0,0,.62);
  font: 400 clamp(10px,.88vw,16px)/1 Georgia,"Times New Roman",serif;
  letter-spacing: .03em;
  text-align: center;
  text-shadow: 0 1px 1px #000;
  transform: translateX(-50%) rotate(7deg);
  transform-origin: 18% 48%;
  transition:
    left 760ms cubic-bezier(.22,.72,.18,1),
    top 760ms cubic-bezier(.22,.72,.18,1),
    width 760ms cubic-bezier(.22,.72,.18,1),
    transform 760ms cubic-bezier(.22,.72,.18,1),
    color 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
  pointer-events: none;
}

.stage.is-door-open .door-sign {
  left: 38.5%;
  top: 54.5%;
  width: 27%;
  transform: translateX(-50%) rotate(11deg);
}

.door:hover .door-sign,
.door:focus-visible .door-sign,
.stage.is-door-open .door-sign {
  color: #efd29b;
  border-color: rgba(232,184,111,.98);
  box-shadow: inset 0 0 0 2px rgba(5,4,3,.74), 0 0 .72rem rgba(216,153,72,.28);
}

.portal {
  top: 18.5%;
  height: 40.5%;
  clip-path: polygon(50% 0, 67% 8%, 84% 25%, 100% 48%, 100% 100%, 0 100%, 0 48%, 16% 25%, 33% 8%);
}

.relief-light {
  position: absolute;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 650ms ease;
}

.relief-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 62% 98% at 50% 0%,
      rgba(255, 207, 133, 0.34) 0%,
      rgba(220, 137, 67, 0.19) 24%,
      rgba(137, 62, 27, 0.08) 53%,
      transparent 78%
    );
  filter: blur(0.38rem);
  mix-blend-mode: screen;
  transform: scaleY(0.92);
  transform-origin: 50% 0;
  transition: transform 900ms ease;
}

.relief-light::after {
  content: "";
  position: absolute;
  left: 27%;
  top: 1.5%;
  width: 46%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 218, 157, 0.4), rgba(177, 91, 37, 0.13) 47%, transparent 73%);
  filter: blur(0.32rem);
}

.portal-war:hover ~ .light-war,
.portal-war:focus-visible ~ .light-war,
.stage.war-projection-engaged .light-war,
.portal-lyric:hover ~ .light-lyric,
.portal-lyric:focus-visible ~ .light-lyric,
.stage.lyric-projection-engaged .light-lyric,
.portal-city:hover ~ .light-city,
.portal-city:focus-visible ~ .light-city,
.stage.city-projection-engaged .light-city,
.portal-other:hover ~ .light-other,
.portal-other:focus-visible ~ .light-other,
.stage.misc-projection-engaged .light-other {
  opacity: 1;
}

.portal-war:hover ~ .light-war::before,
.portal-war:focus-visible ~ .light-war::before,
.stage.war-projection-engaged .light-war::before,
.portal-lyric:hover ~ .light-lyric::before,
.portal-lyric:focus-visible ~ .light-lyric::before,
.stage.lyric-projection-engaged .light-lyric::before,
.portal-city:hover ~ .light-city::before,
.portal-city:focus-visible ~ .light-city::before,
.stage.city-projection-engaged .light-city::before,
.portal-other:hover ~ .light-other::before,
.portal-other:focus-visible ~ .light-other::before,
.stage.misc-projection-engaged .light-other::before {
  transform: scaleY(1);
}

.portal-war {
  left: 29.75%;
  top: 21.5%;
  width: 12%;
  height: 36.8%;
  pointer-events: none;
}

.portal-lyric {
  left: 18.45%;
  top: 23.5%;
  width: 10.9%;
  height: 34.7%;
  pointer-events: none;
}

.portal-tales {
  left: 41.85%;
  width: 19.4%;
  pointer-events: none;
}
.portal-city {
  left: 60.65%;
  width: 12.7%;
  pointer-events: none;
}

.portal-other {
  left: 73.15%;
  width: 11.2%;
  pointer-events: none;
}

.war-projection-system {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    visibility 0s linear 720ms;
}

.war-projection-system.is-hover-sequence,
.war-projection-system.is-hover-final,
.war-projection-system.is-click-transition {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s linear 0s;
}

.war-projection-system.is-hard-reset,
.lyric-projection-system.is-hard-reset,
.tales-projection-system.is-hard-reset,
.city-projection-system.is-hard-reset,
.misc-projection-system.is-hard-reset {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

.war-trigger-hitbox,
.war-projection-hitbox {
  position: absolute;
  z-index: 20;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.war-trigger-hitbox {
  left: 29.75%;
  top: 21.5%;
  width: 12%;
  height: 36.8%;
  clip-path: polygon(50% 0, 67% 8%, 84% 25%, 100% 48%, 100% 100%, 0 100%, 0 48%, 16% 25%, 33% 8%);
}

.war-projection-hitbox {
  inset: 0;
  z-index: 21;
  pointer-events: none;
  clip-path: polygon(
    35.75% 21.5%,
    51.55% 12.725%,
    59.725% 38.75%,
    59.725% 64.775%,
    43.375% 64.775%,
    41.75% 58.3%,
    29.75% 58.3%,
    29.75% 39.2%
  );
}

.stage.war-projection-engaged .war-projection-hitbox {
  pointer-events: auto;
}

.war-projector-cone {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  mix-blend-mode: screen;
}

.war-cone-haze {
  fill: url("#warConeFill");
  filter: url("#warRayBlurFilter");
  opacity: 0;
}

.war-contour-guide {
  fill: none;
  stroke: none;
}

.war-rays {
  fill: none;
  stroke: rgba(222, 216, 207, 0.56);
  stroke-linecap: round;
  stroke-dasharray: 1 5 13 9;
  stroke-dashoffset: 58;
  opacity: 1;
}

.war-rays line {
  opacity: 0;
  animation-delay: var(--ray-delay, 0s);
}

.war-rays-blur {
  stroke-width: 0.9;
  filter: url("#warRaySoft");
}

.war-rays-core {
  stroke-width: 0.3;
  filter: drop-shadow(0 0 1px rgba(236, 231, 222, 0.25));
}

.war-projection-system.is-hover-sequence .war-rays line {
  animation: war-rays-flow 15.04s linear 1 both;
  animation-delay: var(--ray-delay, 0s);
}

.war-projection-system.is-hover-final .war-rays line {
  opacity: 0.14;
  stroke-dashoffset: -95;
}

.war-projection-system.is-click-transition .war-rays line {
  animation: war-rays-click 2.85s linear 1 both;
  animation-delay: calc(var(--ray-delay, 0s) * 0.35);
}

.war-projection-system.is-hover-sequence .war-cone-haze {
  opacity: 1;
  animation: war-cone-breathe 15.04s ease-in-out 1 both;
}

.war-projection-system.is-hover-final .war-cone-haze {
  opacity: 0.28;
}

.war-projection-system.is-click-transition .war-cone-haze {
  animation: war-cone-click 2.85s ease-in-out 1 both;
}

.war-projection-frame {
  position: absolute;
  z-index: 2;
  left: 43.375%;
  top: 12.725%;
  width: 16.35%;
  height: 52.05%;
  display: block;
  opacity: 0;
  transform:
    perspective(70rem)
    translate(-16%, 8%)
    scale(0.7)
    rotateY(-6deg);
  transform-origin: 0% 56%;
  filter:
    drop-shadow(0 0 0.38rem rgba(224, 219, 209, 0.22))
    drop-shadow(0 0 0.9rem rgba(103, 99, 93, 0.26));
}

.war-projection-system.is-hover-sequence .war-projection-frame {
  animation: war-frame-emerge 1.1s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.war-projection-system.is-hover-final .war-projection-frame,
.war-projection-system.is-click-transition .war-projection-frame {
  opacity: 1;
  transform: perspective(70rem) translate(0, 0) scale(1) rotateY(0deg);
}

.war-projection-viewport {
  position: absolute;
  z-index: 1;
  inset: 2.8% 5.7% 2.3%;
  display: block;
  overflow: hidden;
  clip-path: polygon(
    50% 0%,
    62% 3.5%,
    75% 12%,
    88% 27%,
    100% 47%,
    100% 100%,
    0 100%,
    0 47%,
    12% 27%,
    25% 12%,
    38% 3.5%
  );
  background:
    radial-gradient(ellipse at 52% 43%, rgba(208, 204, 196, 0.1), transparent 48%),
    linear-gradient(to bottom, rgba(18, 20, 22, 0.78), rgba(18, 18, 18, 0.62));
  box-shadow: inset 0 0 2.1rem rgba(0, 0, 0, 0.9);
}

.war-hover-video {
  position: absolute;
  z-index: 2;
  left: -8%;
  top: -1%;
  width: 116%;
  height: 106%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter:
    saturate(0.7)
    sepia(0.035)
    brightness(0.91)
    contrast(1.01)
    opacity(0.86)
    drop-shadow(0 0 0.34rem rgba(214, 207, 198, 0.16));
}

.war-projection-system.is-hover-sequence .war-hover-video {
  animation: war-video-reveal 1.1s 0.42s ease-out both;
}

.war-projection-system.is-hover-final .war-hover-video {
  opacity: 0.86;
}

.war-projection-system.is-click-transition .war-hover-video {
  animation: war-hover-image-dismiss 260ms ease-out both;
  opacity: 0.86;
}

.war-click-knight {
  position: absolute;
  z-index: 4;
  left: -5%;
  top: 2%;
  width: 110%;
  height: 104%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  filter:
    grayscale(0.86)
    brightness(1.02)
    contrast(1.02)
    opacity(0.78)
    drop-shadow(0 0 0.5rem rgba(235, 232, 225, 0.3));
  transform: translateY(5%) scale(0.9);
  transform-origin: 51% 61%;
}

.war-click-flash {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  opacity: 0;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(241, 238, 231, 0.72), rgba(185, 180, 170, 0.2) 42%, transparent 73%);
  mix-blend-mode: screen;
}

.war-projection-system.is-click-transition .war-click-knight {
  animation: war-click-charge 2.85s cubic-bezier(0.18, 0.78, 0.14, 1) both;
}

.war-projection-system.is-click-transition .war-click-flash {
  animation: war-click-flash 2.85s ease-in-out both;
}

.war-projection-fog {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  opacity: 0.62;
  background:
    radial-gradient(ellipse at 42% 54%, rgba(218, 215, 207, 0.12), transparent 43%),
    repeating-linear-gradient(
      101deg,
      transparent 0 8%,
      rgba(220, 217, 209, 0.045) 9% 10%,
      transparent 11% 19%
    );
  filter: blur(0.35rem);
}

.war-projection-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  opacity: 0.18;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      rgba(232, 229, 222, 0.07) 4px,
      transparent 5px 8px
    );
}

.war-arch-outline {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.war-arch-shadow {
  fill: none;
  stroke: rgba(7, 5, 5, 0.48);
  stroke-width: 14;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.56));
}

.war-arch-edge,
.war-arch-inner {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.war-arch-edge {
  stroke: rgba(211, 207, 198, 0.23);
  stroke-width: 0.68;
  filter:
    drop-shadow(0 0 2px rgba(231, 227, 218, 0.2))
    drop-shadow(0 0 6px rgba(92, 89, 84, 0.25));
}

.war-arch-inner {
  stroke: rgba(235, 231, 222, 0.08);
  stroke-width: 0.45;
  stroke-dasharray: 7 10;
}

.war-projection-system.is-hover-sequence .war-projection-fog {
  animation: war-fog-drift 15.04s ease-in-out 1 both;
}

.war-projection-system.is-hover-sequence .war-projection-grain {
  animation: war-grain-flicker 1.88s steps(4, end) 8 both;
}

.war-projection-system.is-hover-sequence .war-arch-inner {
  animation: war-arch-flow 15.04s linear 1 both;
}

.war-projection-system.is-hover-final .war-projection-fog {
  opacity: 0.55;
  transform: translateX(-0.5%) scale(1.04);
}

.war-projection-system.is-hover-final .war-projection-grain {
  opacity: 0.14;
  transform: translateY(-1px);
}

.war-projection-system.is-click-transition .war-projection-fog {
  animation: war-fog-click 2.85s ease-in-out 1 both;
}

.war-projection-system.is-click-transition .war-projection-grain {
  animation: war-grain-flicker 0.7s steps(4, end) 4 both;
}

.war-projection-system.is-click-transition .war-arch-inner {
  animation: war-arch-flow 1.1s linear 3 both;
}

@keyframes war-rays-flow {
  0% {
    opacity: 0.07;
    stroke-dashoffset: 95;
  }
  12% {
    opacity: 0.3;
  }
  52% {
    opacity: 0.44;
  }
  100% {
    opacity: 0.17;
    stroke-dashoffset: -95;
  }
}

@keyframes war-rays-click {
  0% {
    opacity: 0.22;
    stroke-dashoffset: -95;
  }
  58% {
    opacity: 0.46;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -235;
  }
}

@keyframes war-cone-breathe {
  0%, 100% { opacity: 0.28; }
  48% { opacity: 0.75; }
  72% { opacity: 0.46; }
}

@keyframes war-cone-click {
  0% { opacity: 0.28; }
  62% { opacity: 0.56; }
  100% { opacity: 0; }
}

@keyframes war-frame-emerge {
  0% {
    opacity: 0;
    transform: perspective(70rem) translate(-16%, 8%) scale(0.7) rotateY(-6deg);
  }
  18% {
    opacity: 0.34;
  }
  56% {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1.018) rotateY(0deg);
  }
  72% {
    transform: perspective(70rem) translate(0, 0) scale(0.995) rotateY(0deg);
  }
  100% {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1) rotateY(0deg);
  }
}

@keyframes war-video-reveal {
  0% { opacity: 0; }
  100% { opacity: 0.82; }
}

@keyframes war-hover-image-dismiss {
  from { opacity: 0.82; }
  to { opacity: 0; }
}

@keyframes war-click-charge {
  0% {
    opacity: 0.08;
    transform: translateY(5%) scale(0.9);
  }
  18% {
    opacity: 0.62;
  }
  58% {
    opacity: 0.82;
    transform: translateY(-1%) scale(1.22);
  }
  82% {
    opacity: 0.9;
    transform: translateY(2%) scale(1.72);
  }
  100% {
    opacity: 0;
    transform: translateY(8%) scale(2.7);
  }
}

@keyframes war-click-flash {
  0%, 48% { opacity: 0; }
  72% { opacity: 0.18; }
  91% { opacity: 0.72; }
  100% { opacity: 0.96; }
}

@keyframes war-fog-drift {
  0% { transform: translateX(-3%) scale(1.03); opacity: 0.44; }
  48% { transform: translateX(3.5%) scale(1.08); opacity: 0.72; }
  75% { transform: translateX(-0.5%) scale(1.04); opacity: 0.55; }
  100% { transform: translateX(-0.5%) scale(1.04); opacity: 0.55; }
}

@keyframes war-fog-click {
  0% { transform: translateX(-0.5%) scale(1.04); opacity: 0.55; }
  54% { transform: translateX(4%) scale(1.12); opacity: 0.76; }
  100% { transform: translateX(9%) scale(1.2); opacity: 0; }
}

@keyframes war-grain-flicker {
  0%, 100% { opacity: 0.11; transform: translateY(0); }
  33% { opacity: 0.21; transform: translateY(2px); }
  66% { opacity: 0.15; transform: translateY(-1px); }
}

@keyframes war-arch-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -68; }
}

.lyric-projection-system {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    visibility 0s linear 720ms;
}

.lyric-projection-system.is-hover-sequence,
.lyric-projection-system.is-hover-final,
.lyric-projection-system.is-click-transition {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s linear 0s;
}

.lyric-trigger-hitbox,
.lyric-projection-hitbox {
  position: absolute;
  z-index: 20;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.lyric-trigger-hitbox {
  left: 18.45%;
  top: 23.5%;
  width: 10.9%;
  height: 34.7%;
  clip-path: polygon(50% 0, 67% 8%, 84% 25%, 100% 48%, 100% 100%, 0 100%, 0 48%, 16% 25%, 33% 8%);
}

.lyric-projection-hitbox {
  inset: 0;
  z-index: 21;
  pointer-events: none;
  clip-path: polygon(
    23.9% 23.5%,
    51.55% 12.725%,
    59.725% 38.75%,
    59.725% 64.775%,
    43.375% 64.775%,
    29.35% 58.2%,
    18.45% 58.2%,
    18.45% 40.8%
  );
}

.stage.lyric-projection-engaged .lyric-projection-hitbox {
  pointer-events: auto;
}

.lyric-projector-cone {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  mix-blend-mode: screen;
}

.lyric-cone-haze {
  fill: url("#lyricConeFill");
  filter: url("#lyricRayBlurFilter");
  opacity: 0;
}

.lyric-contour-guide {
  fill: none;
  stroke: none;
}

.lyric-rays {
  fill: none;
  stroke: rgba(230, 215, 211, 0.56);
  stroke-linecap: round;
  stroke-dasharray: 1 5 13 9;
  stroke-dashoffset: 58;
  opacity: 1;
}

.lyric-rays line {
  opacity: 0;
  animation-delay: var(--ray-delay, 0s);
}

.lyric-rays-blur {
  stroke-width: 0.9;
  filter: url("#lyricRaySoft");
}

.lyric-rays-core {
  stroke-width: 0.3;
  filter: drop-shadow(0 0 1px rgba(244, 228, 223, 0.24));
}

.lyric-projection-system.is-hover-sequence .lyric-rays line {
  animation: war-rays-flow 15s linear 1 both;
  animation-delay: var(--ray-delay, 0s);
}

.lyric-projection-system.is-hover-final .lyric-rays line {
  opacity: 0.14;
  stroke-dashoffset: -95;
}

.lyric-projection-system.is-click-transition .lyric-rays line {
  animation: lyric-rays-click 900ms linear 1 both;
  animation-delay: calc(var(--ray-delay, 0s) * 0.12);
}

.lyric-projection-system.is-hover-sequence .lyric-cone-haze {
  opacity: 1;
  animation: war-cone-breathe 15s ease-in-out 1 both;
}

.lyric-projection-system.is-hover-final .lyric-cone-haze {
  opacity: 0.26;
}

.lyric-projection-system.is-click-transition .lyric-cone-haze {
  animation: lyric-cone-click 900ms ease-in-out 1 both;
}

.lyric-projection-frame {
  position: absolute;
  z-index: 2;
  left: 43.375%;
  top: 12.725%;
  width: 16.35%;
  height: 52.05%;
  display: block;
  opacity: 0;
  transform:
    perspective(70rem)
    translate(-23%, 10%)
    scale(0.66)
    rotateY(-8deg);
  transform-origin: 0% 56%;
  filter:
    drop-shadow(0 0 0.38rem rgba(232, 216, 212, 0.2))
    drop-shadow(0 0 0.9rem rgba(104, 87, 84, 0.24));
}

.lyric-projection-system.is-hover-sequence .lyric-projection-frame {
  animation: lyric-frame-emerge 1.1s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.lyric-projection-system.is-hover-final .lyric-projection-frame {
  opacity: 1;
  transform: perspective(70rem) translate(0, 0) scale(1) rotateY(0deg);
}

.lyric-projection-system.is-click-transition .lyric-projection-frame {
  animation: lyric-frame-click 900ms ease-in both;
}

.lyric-projection-viewport {
  position: absolute;
  z-index: 1;
  inset: 2.8% 5.7% 2.3%;
  display: block;
  overflow: hidden;
  clip-path: polygon(
    50% 0%,
    62% 3.5%,
    75% 12%,
    88% 27%,
    100% 47%,
    100% 100%,
    0 100%,
    0 47%,
    12% 27%,
    25% 12%,
    38% 3.5%
  );
  background:
    radial-gradient(ellipse at 52% 43%, rgba(219, 204, 202, 0.085), transparent 48%),
    linear-gradient(to bottom, rgba(18, 18, 20, 0.74), rgba(17, 16, 18, 0.58));
  box-shadow: inset 0 0 2.1rem rgba(0, 0, 0, 0.88);
}

.lyric-hover-video {
  position: absolute;
  z-index: 2;
  left: -8%;
  top: -1%;
  width: 116%;
  height: 106%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter:
    saturate(0.72)
    sepia(0.045)
    brightness(0.93)
    contrast(1)
    opacity(0.86)
    drop-shadow(0 0 0.34rem rgba(235, 221, 217, 0.16));
}

.lyric-projection-system.is-hover-sequence .lyric-hover-video {
  animation: lyric-video-reveal 1.1s 0.42s ease-out both;
}

.lyric-projection-system.is-hover-final .lyric-hover-video {
  opacity: 0.86;
}

.lyric-projection-system.is-click-transition .lyric-hover-video {
  animation: lyric-video-click 900ms ease-in both;
}

.lyric-click-flash {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  opacity: 0;
  background:
    radial-gradient(ellipse at 52% 48%, rgba(242, 231, 228, 0.68), rgba(188, 158, 153, 0.18) 42%, transparent 73%);
  mix-blend-mode: screen;
}

.lyric-projection-system.is-click-transition .lyric-click-flash {
  animation: lyric-click-flash 900ms ease-in-out both;
}

.lyric-projection-fog {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 48% 54%, rgba(227, 215, 212, 0.1), transparent 45%),
    repeating-linear-gradient(
      101deg,
      transparent 0 8%,
      rgba(230, 216, 212, 0.035) 9% 10%,
      transparent 11% 19%
    );
  filter: blur(0.38rem);
}

.lyric-projection-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  opacity: 0.14;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      rgba(236, 226, 223, 0.055) 4px,
      transparent 5px 8px
    );
}

.lyric-arch-outline {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.lyric-arch-shadow {
  fill: none;
  stroke: rgba(7, 5, 6, 0.42);
  stroke-width: 13;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

.lyric-arch-edge,
.lyric-arch-inner {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lyric-arch-edge {
  stroke: rgba(220, 206, 203, 0.2);
  stroke-width: 0.62;
  filter:
    drop-shadow(0 0 2px rgba(236, 222, 218, 0.18))
    drop-shadow(0 0 6px rgba(94, 82, 80, 0.22));
}

.lyric-arch-inner {
  stroke: rgba(241, 228, 224, 0.07);
  stroke-width: 0.42;
  stroke-dasharray: 7 10;
}

.lyric-projection-system.is-hover-sequence .lyric-projection-fog {
  animation: war-fog-drift 15s ease-in-out 1 both;
}

.lyric-projection-system.is-hover-sequence .lyric-projection-grain {
  animation: war-grain-flicker 1.875s steps(4, end) 8 both;
}

.lyric-projection-system.is-hover-sequence .lyric-arch-inner {
  animation: war-arch-flow 15s linear 1 both;
}

.lyric-projection-system.is-hover-final .lyric-projection-fog {
  opacity: 0.46;
  transform: translateX(-0.5%) scale(1.04);
}

.lyric-projection-system.is-hover-final .lyric-projection-grain {
  opacity: 0.11;
}

@keyframes lyric-rays-click {
  0% { opacity: 0.21; stroke-dashoffset: -95; }
  45% { opacity: 0.44; }
  100% { opacity: 0; stroke-dashoffset: -170; }
}

@keyframes lyric-cone-click {
  0% { opacity: 0.26; }
  50% { opacity: 0.5; }
  100% { opacity: 0; }
}

@keyframes lyric-frame-emerge {
  0% {
    opacity: 0;
    transform: perspective(70rem) translate(-23%, 10%) scale(0.66) rotateY(-8deg);
  }
  56% {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1.014) rotateY(0deg);
  }
  100% {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1) rotateY(0deg);
  }
}

@keyframes lyric-video-reveal {
  0% { opacity: 0; }
  100% { opacity: 0.76; }
}

@keyframes lyric-frame-click {
  0% {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1);
  }
  68% {
    opacity: 1;
    transform: perspective(70rem) translate(0, -1%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: perspective(70rem) translate(0, -3%) scale(1.3);
  }
}

@keyframes lyric-video-click {
  0% { opacity: 0.76; filter: brightness(0.9) opacity(0.76); }
  72% { opacity: 0.9; filter: brightness(1.16) opacity(0.84); }
  100% { opacity: 0; filter: brightness(1.45) opacity(0); }
}

@keyframes lyric-click-flash {
  0%, 48% { opacity: 0; }
  82% { opacity: 0.56; }
  100% { opacity: 0.9; }
}

.tales-projection-system {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    visibility 0s linear 720ms;
}

.tales-projection-system.is-hover-sequence,
.tales-projection-system.is-hover-final {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s linear 0s;
}

.tales-trigger-hitbox,
.tales-projection-hitbox {
  position: absolute;
  z-index: 20;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.tales-trigger-hitbox {
  left: 41.85%;
  top: 18.5%;
  width: 19.4%;
  height: 40.5%;
  clip-path: polygon(50% 0, 67% 8%, 84% 25%, 100% 48%, 100% 100%, 0 100%, 0 48%, 16% 25%, 33% 8%);
}

.tales-projection-hitbox {
  inset: 0;
  z-index: 21;
  pointer-events: none;
  clip-path: polygon(
    51.55% 12.725%,
    59.725% 25%,
    61.25% 43%,
    61.25% 64.775%,
    41.85% 64.775%,
    41.85% 43%,
    43.375% 25%
  );
}

.stage.tales-projection-engaged .tales-projection-hitbox {
  pointer-events: auto;
}

.tales-projector-cone {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  mix-blend-mode: screen;
}

.tales-cone-haze {
  fill: url("#talesConeFill");
  filter: url("#talesRayBlurFilter");
  opacity: 0;
}

.tales-contour-guide {
  fill: none;
  stroke: none;
}

.tales-rays {
  fill: none;
  stroke: rgba(221, 213, 201, 0.55);
  stroke-linecap: round;
  stroke-dasharray: 1 5 13 9;
  stroke-dashoffset: 58;
  opacity: 1;
}

.tales-rays line {
  opacity: 0;
  animation-delay: var(--ray-delay, 0s);
}

.tales-rays-blur {
  stroke-width: 0.9;
  filter: url("#talesRaySoft");
}

.tales-rays-core {
  stroke-width: 0.3;
  filter: drop-shadow(0 0 1px rgba(238, 230, 217, 0.24));
}

.tales-projection-system.is-hover-sequence .tales-rays line {
  animation: war-rays-flow 15.04s linear 1 both;
  animation-delay: var(--ray-delay, 0s);
}

.tales-projection-system.is-hover-final .tales-rays line {
  opacity: 0.14;
  stroke-dashoffset: -95;
}

.tales-projection-system.is-hover-sequence .tales-cone-haze {
  animation: tales-cone-breathe 15.04s ease-in-out 1 both;
}

.tales-projection-system.is-hover-final .tales-cone-haze {
  opacity: 0.22;
}

.tales-projection-frame {
  position: absolute;
  z-index: 2;
  left: 43.375%;
  top: 12.725%;
  width: 16.35%;
  height: 52.05%;
  display: block;
  opacity: 0;
  transform: perspective(70rem) translate(0, 0) scale(0.67);
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 0 0.38rem rgba(224, 216, 204, 0.2))
    drop-shadow(0 0 0.9rem rgba(91, 86, 78, 0.25));
}

.tales-projection-system.is-hover-sequence .tales-projection-frame {
  animation: tales-frame-emerge 1.1s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.tales-projection-system.is-hover-final .tales-projection-frame {
  opacity: 1;
  transform: perspective(70rem) translate(0, 0) scale(1);
}

.tales-projection-viewport {
  position: absolute;
  z-index: 1;
  inset: 2.8% 5.7% 2.3%;
  display: block;
  overflow: hidden;
  clip-path: polygon(
    50% 0%,
    62% 3.5%,
    75% 12%,
    88% 27%,
    100% 47%,
    100% 100%,
    0 100%,
    0 47%,
    12% 27%,
    25% 12%,
    38% 3.5%
  );
  background: #08090a;
  box-shadow: inset 0 0 2.1rem rgba(0, 0, 0, 0.9);
}

.tales-hover-video {
  position: absolute;
  z-index: 2;
  left: -8%;
  top: -1%;
  width: 116%;
  height: 106%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter:
    saturate(0.68)
    sepia(0.04)
    brightness(0.92)
    contrast(1.02)
    opacity(0.86)
    drop-shadow(0 0 0.38rem rgba(228, 218, 204, 0.2));
}

.tales-projection-system.is-hover-sequence .tales-hover-video {
  animation: tales-video-reveal 1.1s 0.42s ease-out both;
}

.tales-projection-system.is-hover-final .tales-hover-video {
  opacity: 0.86;
}

.tales-projection-fog {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  opacity: 0.34;
  background:
    radial-gradient(ellipse at 48% 54%, rgba(216, 207, 194, 0.08), transparent 45%),
    repeating-linear-gradient(
      101deg,
      transparent 0 8%,
      rgba(225, 215, 201, 0.03) 9% 10%,
      transparent 11% 19%
    );
  filter: blur(0.38rem);
}

.tales-projection-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  opacity: 0.12;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      rgba(232, 223, 210, 0.05) 4px,
      transparent 5px 8px
    );
}

.tales-arch-outline {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tales-arch-shadow {
  fill: none;
  stroke: rgba(7, 6, 5, 0.44);
  stroke-width: 13;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.52));
}

.tales-arch-edge,
.tales-arch-inner {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tales-arch-edge {
  stroke: rgba(213, 205, 192, 0.2);
  stroke-width: 0.62;
  filter:
    drop-shadow(0 0 2px rgba(232, 223, 209, 0.18))
    drop-shadow(0 0 6px rgba(88, 84, 77, 0.22));
}

.tales-arch-inner {
  stroke: rgba(238, 229, 215, 0.07);
  stroke-width: 0.42;
  stroke-dasharray: 7 10;
}

.tales-projection-system.is-hover-sequence .tales-projection-fog {
  animation: war-fog-drift 15.04s ease-in-out 1 both;
}

.tales-projection-system.is-hover-sequence .tales-projection-grain {
  animation: war-grain-flicker 1.88s steps(4, end) 8 both;
}

.tales-projection-system.is-hover-sequence .tales-arch-inner {
  animation: war-arch-flow 15.04s linear 1 both;
}

.tales-projection-system.is-hover-final .tales-projection-fog {
  opacity: 0.32;
  transform: translateX(-0.5%) scale(1.04);
}

.tales-projection-system.is-hover-final .tales-projection-grain {
  opacity: 0.1;
}

@keyframes tales-frame-emerge {
  0% {
    opacity: 0;
    transform: perspective(70rem) translate(0, 0) scale(0.67);
  }
  56% {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1.014);
  }
  100% {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1);
  }
}

@keyframes tales-video-reveal {
  0% { opacity: 0; }
  100% { opacity: 0.82; }
}

@keyframes tales-cone-breathe {
  0%, 100% { opacity: 0.18; }
  48% { opacity: 0.5; }
  72% { opacity: 0.32; }
}

.light-war {
  left: 29.75%;
  top: 21.5%;
  width: 12%;
  height: 36.8%;
}

.light-lyric {
  left: 18.45%;
  top: 23.5%;
  width: 10.9%;
  height: 34.7%;
}

.light-city {
  left: 60.65%;
  top: 18.5%;
  width: 12.7%;
  height: 40.5%;
}

.light-other {
  left: 73.15%;
  top: 18.5%;
  width: 11.2%;
  height: 40.5%;
}

.relief-label {
  position: absolute;
  z-index: 19;
  top: 52.55%;
  height: 4.15%;
  display: grid;
  place-items: center;
  padding: 0 0.18rem;
  color: #a7793f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.58rem, 1.02vw, 1.08rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.075em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-shadow:
    0 1px 0 #4c3017,
    0 2px 0 #2a1a0d,
    0 3px 0 rgba(8, 5, 2, 0.82),
    0 0 0.32rem rgba(185, 124, 53, 0.22);
  filter: brightness(0.78) saturate(0.86);
  transition:
    opacity 220ms ease,
    color 220ms ease,
    filter 220ms ease,
    text-shadow 220ms ease;
}

.label-lyric {
  left: 18.45%;
  width: 10.9%;
}

.label-war {
  left: 29.75%;
  width: 12%;
}

.label-tales {
  left: 41.85%;
  width: 19.4%;
  font-size: clamp(0.52rem, 0.9vw, 0.98rem);
  letter-spacing: 0.045em;
}

.label-city {
  left: 60.65%;
  width: 12.7%;
  z-index: 2;
}

.label-misc {
  left: 73.15%;
  width: 11.2%;
}

.stage.lyric-projection-engaged .relief-label,
.stage.war-projection-engaged .relief-label,
.stage.tales-projection-engaged .relief-label,
.stage.city-projection-engaged .relief-label,
.stage.misc-projection-engaged .relief-label {
  opacity: 0;
}

.site-animations-off .lyric-trigger-hitbox:hover ~ .label-lyric,
.site-animations-off .lyric-trigger-hitbox:focus-visible ~ .label-lyric,
.site-animations-off .war-trigger-hitbox:hover ~ .label-war,
.site-animations-off .war-trigger-hitbox:focus-visible ~ .label-war,
.site-animations-off .tales-trigger-hitbox:hover ~ .label-tales,
.site-animations-off .tales-trigger-hitbox:focus-visible ~ .label-tales,
.site-animations-off .city-trigger-hitbox:hover ~ .label-city,
.site-animations-off .city-trigger-hitbox:focus-visible ~ .label-city,
.site-animations-off .misc-trigger-hitbox:hover ~ .label-misc,
.site-animations-off .misc-trigger-hitbox:focus-visible ~ .label-misc {
  color: #e0b56f;
  filter: brightness(1.35) saturate(1.08);
  text-shadow:
    0 1px 0 #67401d,
    0 2px 0 #38200e,
    0 3px 0 rgba(8, 5, 2, 0.72),
    0 0 0.35rem rgba(232, 172, 88, 0.82),
    0 0 0.85rem rgba(180, 105, 37, 0.5);
}

.wall-torch {
  position: absolute;
  z-index: 2;
  top: 25.5%;
  width: 4.8%;
  height: 24%;
  pointer-events: none;
}

.torch-left { left: 27.48%; }
.torch-right { left: 69.85%; }

.torch-holder {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 19%;
  width: 100%;
  height: 81%;
  object-fit: contain;
  filter:
    brightness(0.58)
    contrast(1.22)
    drop-shadow(0.2rem 0.28rem 0.24rem rgba(0, 0, 0, 0.9));
}

.torch-flame {
  position: absolute;
  z-index: 4;
  left: 15%;
  top: -3%;
  width: 70%;
  height: 47%;
  object-fit: fill;
  filter:
    brightness(0.82)
    saturate(0.88)
    drop-shadow(0 0 0.45rem rgba(255, 116, 31, 0.62));
}

.torch-glow {
  position: absolute;
  z-index: 1;
  left: -65%;
  top: -35%;
  width: 230%;
  height: 145%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 125, 42, 0.16), rgba(126, 39, 17, 0.055) 42%, transparent 72%);
  filter: blur(0.8rem);
  animation: torch-light 7.2s ease-in-out infinite;
}

.torch-right .torch-glow {
  animation-delay: -2.9s;
}

@keyframes torch-light {
  0%, 100% { opacity: 0.65; transform: scale(0.96); }
  39% { opacity: 0.86; transform: scale(1.035); }
  72% { opacity: 0.73; transform: scale(0.985); }
}

.central-lamp {
  position: absolute;
  z-index: 5;
  left: 49.35%;
  top: -2%;
  width: 5%;
  height: 25%;
  pointer-events: none;
  transform-origin: 50% 0;
  animation: central-lamp-sway 7.6s ease-in-out infinite;
}

.central-lamp-chain {
  position: absolute;
  z-index: 3;
  left: 38%;
  top: 0;
  width: 24%;
  height: 25%;
  object-fit: fill;
  filter:
    brightness(0.62)
    drop-shadow(0.12rem 0.16rem 0.18rem rgba(0, 0, 0, 0.9));
}

.central-lamp-body {
  position: absolute;
  z-index: 4;
  left: 10%;
  top: 22%;
  width: 80%;
  height: 58%;
  object-fit: contain;
  filter:
    brightness(0.78)
    contrast(1.12)
    drop-shadow(0 0 0.55rem rgba(239, 137, 50, 0.36))
    drop-shadow(0.35rem 0.55rem 0.4rem rgba(0, 0, 0, 0.88));
}

.central-lamp-light {
  position: absolute;
  z-index: 1;
  left: -182%;
  top: 28%;
  width: 450%;
  height: 255%;
  background: radial-gradient(ellipse at 50% 0%, rgba(229, 146, 71, 0.19), rgba(160, 77, 31, 0.06) 42%, transparent 74%);
  filter: blur(0.85rem);
  opacity: 0.56;
  transform: scaleY(0.86);
  transform-origin: 50% 0;
  transition: opacity 750ms ease, transform 950ms ease, filter 750ms ease;
}

.portal-tales:hover ~ .central-lamp .central-lamp-light,
.portal-tales:focus-visible ~ .central-lamp .central-lamp-light,
.stage.tales-projection-engaged .central-lamp-light {
  opacity: 0.96;
  transform: scaleY(1.18);
  filter: blur(0.72rem) brightness(1.28);
}

@keyframes central-lamp-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.guitar {
  position: absolute;
  display: block;
  left: 13.6%;
  top: 39.5%;
  width: 6.8%;
  height: 30.5%;
  z-index: 8;
  pointer-events: none;
  opacity: 0.72;
  filter:
    brightness(0.42)
    contrast(0.96)
    saturate(0.58)
    drop-shadow(0.5rem 0.72rem 0.48rem rgba(0, 0, 0, 0.88));
  transform: perspective(32rem) rotateY(-7deg) rotateZ(-7deg);
  transform-origin: 50% 88%;
}

.guitar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.raven {
  left: 9.22%;
  top: 31.67%;
  width: 5.75%;
  height: 14.88%;
  z-index: 9;
}

.raven video {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter:
    brightness(1.55)
    contrast(1.06)
    drop-shadow(-0.2rem -0.25rem 0.45rem rgba(150, 198, 225, 0.5));
  transition: filter 550ms ease, transform 550ms ease;
}

.window-light {
  position: absolute;
  z-index: 1;
  left: -35%;
  top: -30%;
  width: 150%;
  height: 165%;
  opacity: 0.24;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 15%, rgba(192, 225, 242, 0.75), rgba(94, 138, 169, 0.16) 38%, transparent 72%);
  filter: blur(0.45rem);
  pointer-events: none;
}

.raven:hover video,
.raven:focus-visible video {
  filter:
    brightness(1.9)
    contrast(1.08)
    drop-shadow(-0.2rem -0.25rem 0.55rem rgba(180, 224, 247, 0.72))
    drop-shadow(0 0 0.8rem rgba(101, 154, 188, 0.42));
  transform: scale(1.035);
}

.collection-book {
  left: 77.25%;
  top: 65.2%;
  width: 14.3%;
  height: 16.8%;
  z-index: 10;
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(4% 12%, 83% 0, 100% 29%, 96% 92%, 12% 100%, 0 68%);
  background: transparent;
  filter:
    drop-shadow(0 0 0.2rem rgba(224, 155, 76, 0.48))
    drop-shadow(0 0 0.58rem rgba(139, 66, 27, 0.3));
  transition: filter 500ms ease;
}

.collection-book::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/book_contour_glow.svg") center / 100% 100% no-repeat;
  opacity: 0.22;
  animation: book-reflection 5.8s ease-in-out infinite;
  pointer-events: none;
}

.collection-book:hover,
.collection-book:focus-visible {
  background: transparent;
  filter:
    brightness(1.08)
    drop-shadow(0 0 0.3rem rgba(255, 198, 107, 0.68))
    drop-shadow(0 0 0.76rem rgba(190, 96, 36, 0.5));
}

.collection-book:hover::before,
.collection-book:focus-visible::before {
  opacity: 0.5;
}

.book-effects {
  position: absolute;
  z-index: 11;
  left: 77.25%;
  top: 65.2%;
  width: 14.3%;
  height: 16.8%;
  overflow: visible;
  pointer-events: none;
}

.book-flare {
  position: absolute;
  z-index: 1;
  left: 5%;
  bottom: 67%;
  width: 90%;
  height: 118%;
  transform-origin: 50% 100%;
  border-radius: 46% 54% 38% 42% / 58% 54% 34% 38%;
  background:
    linear-gradient(
      to top,
      rgba(230, 151, 72, 0.16) 0%,
      rgba(188, 100, 42, 0.1) 45%,
      rgba(123, 50, 24, 0.035) 72%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 74% 100% at 50% 100%,
      rgba(242, 176, 91, 0.2) 0%,
      rgba(190, 104, 43, 0.11) 44%,
      transparent 84%
    );
  filter:
    blur(0.48rem)
    drop-shadow(0 0 0.42rem rgba(209, 119, 48, 0.22));
  opacity: 0;
  animation: book-flare-sway 6.8s ease-in-out infinite;
  animation-play-state: paused;
}

.book-flare::after {
  content: "";
  position: absolute;
  left: 8%;
  top: 5%;
  width: 84%;
  height: 94%;
  border-radius: 48%;
  background: linear-gradient(to top, rgba(255, 199, 112, 0.11), rgba(184, 95, 39, 0.045) 58%, transparent 100%);
  filter: blur(0.42rem);
}

.book-spark {
  position: absolute;
  z-index: 3;
  --drift-a: 0.55rem;
  --drift-b: -0.42rem;
  left: 20%;
  top: 28%;
  width: 2.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: #f4c777;
  box-shadow:
    0 0 0.16rem #ffe8ad,
    0 0 0.42rem rgba(207, 119, 47, 0.9);
  animation: book-spark-rise 5.2s ease-out infinite;
  animation-play-state: paused;
  pointer-events: none;
}

.collection-book:hover + .book-effects .book-flare,
.collection-book:focus-visible + .book-effects .book-flare {
  opacity: 0.52;
  animation-play-state: running;
}

.collection-book:hover + .book-effects .book-spark,
.collection-book:focus-visible + .book-effects .book-spark {
  animation-play-state: running;
}

.spark-two {
  --drift-a: -0.48rem;
  --drift-b: 0.38rem;
  left: 32%;
  top: 20%;
  width: 2.1%;
  animation-delay: -2.4s;
  animation-duration: 6.4s;
}

.spark-three {
  --drift-a: 0.42rem;
  --drift-b: -0.56rem;
  left: 44%;
  top: 32%;
  width: 1.8%;
  animation-delay: -4.1s;
  animation-duration: 5.8s;
}

.spark-four {
  --drift-a: -0.6rem;
  --drift-b: 0.46rem;
  left: 56%;
  top: 24%;
  width: 2.3%;
  animation-delay: -1.1s;
  animation-duration: 6.1s;
}

.spark-five {
  --drift-a: 0.5rem;
  --drift-b: -0.36rem;
  left: 68%;
  top: 30%;
  width: 1.9%;
  animation-delay: -3.3s;
  animation-duration: 5.6s;
}

.spark-six {
  --drift-a: -0.4rem;
  --drift-b: 0.58rem;
  left: 80%;
  top: 22%;
  width: 2%;
  animation-delay: -4.8s;
  animation-duration: 6.5s;
}

@keyframes book-flare-sway {
  0%, 100% { opacity: 0.38; transform: translateX(-1.8%) rotate(-1.2deg) scaleX(0.96); }
  34% { opacity: 0.62; transform: translateX(1.6%) rotate(1deg) scaleX(1.03); }
  69% { opacity: 0.47; transform: translateX(-0.7%) rotate(-0.5deg) scaleX(0.99); }
}

@keyframes book-spark-rise {
  0% { opacity: 0; transform: translate(0, 45%) scale(0.62); }
  12% { opacity: 0.74; }
  29% { opacity: 0.4; transform: translate(var(--drift-a), -165%) scale(0.86); }
  50% { opacity: 0.8; transform: translate(var(--drift-b), -340%) scale(0.7); }
  73% { opacity: 0.32; transform: translate(var(--drift-a), -520%) scale(0.46); }
  100% { opacity: 0; transform: translate(var(--drift-b), -720%) scale(0.18); }
}

@keyframes book-reflection {
  0%, 100% { opacity: 0.16; filter: brightness(0.78); }
  43% { opacity: 0.42; filter: brightness(1.12); }
  71% { opacity: 0.24; filter: brightness(0.92); }
}

.candle-flame {
  position: absolute;
  z-index: 9;
  left: 54.67%;
  top: 57.55%;
  width: 1.9%;
  height: 4.8%;
  object-fit: contain;
  pointer-events: none;
  filter: brightness(0.93) drop-shadow(0 0 0.35rem rgba(255, 139, 35, 0.62));
}

.candle-glow {
  position: absolute;
  z-index: 8;
  left: 50.7%;
  top: 50.2%;
  width: 10%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 157, 56, 0.2), rgba(181, 76, 22, 0.065) 39%, transparent 72%);
  filter: blur(0.65rem);
  pointer-events: none;
  animation: candle-light 6.4s ease-in-out infinite;
}

@keyframes candle-light {
  0%, 100% { opacity: 0.68; transform: scale(0.97); }
  34% { opacity: 0.88; transform: scale(1.025); }
  69% { opacity: 0.75; transform: scale(0.99); }
}

.city-projection-system,
.misc-projection-system {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 420ms ease,
    visibility 0s linear 720ms;
}

.city-projection-system.is-hover-sequence,
.city-projection-system.is-hover-final,
.misc-projection-system.is-hover-sequence,
.misc-projection-system.is-hover-final {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s linear 0s;
}

.city-trigger-hitbox,
.city-projection-hitbox,
.misc-trigger-hitbox,
.misc-projection-hitbox {
  position: absolute;
  z-index: 20;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.city-trigger-hitbox {
  left: 60.65%;
  top: 18.5%;
  width: 12.7%;
  height: 40.5%;
  clip-path: polygon(50% 0, 67% 8%, 84% 25%, 100% 48%, 100% 100%, 0 100%, 0 48%, 16% 25%, 33% 8%);
}

.misc-trigger-hitbox {
  left: 73.15%;
  top: 18.5%;
  width: 11.2%;
  height: 40.5%;
  clip-path: polygon(50% 0, 67% 8%, 84% 25%, 100% 48%, 100% 100%, 0 100%, 0 48%, 16% 25%, 33% 8%);
}

.city-projection-hitbox,
.misc-projection-hitbox {
  inset: 0;
  z-index: 21;
  pointer-events: none;
}

.city-projection-hitbox {
  clip-path: polygon(
    43.375% 12.725%,
    59.725% 12.725%,
    67% 18.5%,
    73.35% 39%,
    73.35% 59%,
    59.725% 64.775%,
    43.375% 64.775%
  );
}

.misc-projection-hitbox {
  clip-path: polygon(
    43.375% 12.725%,
    59.725% 12.725%,
    78.75% 18.5%,
    84.35% 39%,
    84.35% 59%,
    59.725% 64.775%,
    43.375% 64.775%
  );
}

.stage.city-projection-engaged .city-projection-hitbox,
.stage.misc-projection-engaged .misc-projection-hitbox {
  pointer-events: auto;
}

.city-projector-cone,
.misc-projector-cone {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  mix-blend-mode: screen;
}

.city-cone-haze {
  fill: url("#cityConeFill");
  filter: url("#cityRayBlurFilter");
  opacity: 0;
}

.misc-cone-haze {
  fill: url("#miscConeFill");
  filter: url("#miscRayBlurFilter");
  opacity: 0;
}

.city-contour-guide,
.misc-contour-guide {
  fill: none;
  stroke: none;
}

.city-rays,
.misc-rays {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1 6 12 10;
  stroke-dashoffset: 58;
  opacity: 1;
}

.city-rays {
  stroke: rgba(202, 211, 213, 0.55);
}

.misc-rays {
  stroke: rgba(209, 211, 207, 0.54);
}

.city-rays line,
.misc-rays line {
  opacity: 0;
  animation-delay: var(--ray-delay, 0s);
}

.city-rays-blur,
.misc-rays-blur {
  stroke-width: 0.9;
}

.city-rays-blur {
  filter: url("#cityRaySoft");
}

.misc-rays-blur {
  filter: url("#miscRaySoft");
}

.city-rays-core,
.misc-rays-core {
  stroke-width: 0.3;
  filter: drop-shadow(0 0 1px rgba(232, 229, 221, 0.24));
}

.city-projection-system.is-hover-sequence .city-rays line,
.misc-projection-system.is-hover-sequence .misc-rays line {
  animation: war-rays-flow 15.04s linear 1 both;
  animation-delay: var(--ray-delay, 0s);
}

.city-projection-system.is-hover-final .city-rays line,
.misc-projection-system.is-hover-final .misc-rays line {
  opacity: 0.14;
  stroke-dashoffset: -95;
}

.city-projection-system.is-hover-sequence .city-cone-haze,
.misc-projection-system.is-hover-sequence .misc-cone-haze {
  animation: tales-cone-breathe 15.04s ease-in-out 1 both;
}

.city-projection-system.is-hover-final .city-cone-haze,
.misc-projection-system.is-hover-final .misc-cone-haze {
  opacity: 0.18;
}

.city-projection-frame,
.misc-projection-frame {
  position: absolute;
  z-index: 2;
  left: 43.375%;
  top: 12.725%;
  width: 16.35%;
  height: 52.05%;
  display: block;
  opacity: 0;
  transform: perspective(70rem) translate(0, 0) scale(0.67);
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 0 0.32rem rgba(217, 215, 208, 0.17))
    drop-shadow(0 0 0.78rem rgba(76, 79, 79, 0.2));
}

.city-projection-system.is-hover-sequence .city-projection-frame,
.misc-projection-system.is-hover-sequence .misc-projection-frame {
  animation: tales-frame-emerge 1.1s cubic-bezier(0.2, 0.76, 0.24, 1) both;
}

.city-projection-system.is-hover-final .city-projection-frame,
.misc-projection-system.is-hover-final .misc-projection-frame {
  opacity: 1;
  transform: perspective(70rem) translate(0, 0) scale(1);
}

.city-projection-viewport,
.misc-projection-viewport {
  position: absolute;
  z-index: 1;
  inset: 2.8% 5.7% 2.3%;
  display: block;
  overflow: hidden;
  clip-path: polygon(
    50% 0%,
    62% 3.5%,
    75% 12%,
    88% 27%,
    100% 47%,
    100% 100%,
    0 100%,
    0 47%,
    12% 27%,
    25% 12%,
    38% 3.5%
  );
  background: #08090a;
  box-shadow: inset 0 0 2.1rem rgba(0, 0, 0, 0.9);
}

.city-hover-video,
.misc-hover-video {
  position: absolute;
  z-index: 2;
  left: -8%;
  top: -1%;
  width: 116%;
  height: 106%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
}

.city-hover-video {
  filter:
    saturate(0.7)
    sepia(0.025)
    brightness(0.91)
    contrast(1.02)
    opacity(0.86)
    drop-shadow(0 0 0.32rem rgba(205, 215, 217, 0.16));
}

.misc-hover-video {
  filter:
    saturate(0.68)
    sepia(0.035)
    brightness(0.92)
    contrast(1.01)
    opacity(0.86)
    drop-shadow(0 0 0.32rem rgba(224, 219, 208, 0.16));
}

.city-projection-system.is-hover-sequence .city-hover-video,
.misc-projection-system.is-hover-sequence .misc-hover-video {
  animation: tales-video-reveal 1.1s 0.42s ease-out both;
}

.city-projection-system.is-hover-final .city-hover-video,
.misc-projection-system.is-hover-final .misc-hover-video {
  opacity: 0.86;
}

.city-projection-fog,
.misc-projection-fog {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  opacity: 0.28;
  background:
    radial-gradient(ellipse at 48% 54%, rgba(210, 211, 207, 0.07), transparent 45%),
    repeating-linear-gradient(
      101deg,
      transparent 0 8%,
      rgba(222, 219, 211, 0.025) 9% 10%,
      transparent 11% 19%
    );
  filter: blur(0.38rem);
}

.city-projection-grain,
.misc-projection-grain {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  opacity: 0.1;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 3px,
      rgba(228, 225, 217, 0.045) 4px,
      transparent 5px 8px
    );
}

.city-arch-outline,
.misc-arch-outline {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.city-arch-shadow,
.misc-arch-shadow {
  fill: none;
  stroke: rgba(7, 7, 7, 0.42);
  stroke-width: 13;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

.city-arch-edge,
.city-arch-inner,
.misc-arch-edge,
.misc-arch-inner {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.city-arch-edge,
.misc-arch-edge {
  stroke: rgba(211, 210, 204, 0.17);
  stroke-width: 0.56;
  filter:
    drop-shadow(0 0 2px rgba(230, 226, 218, 0.14))
    drop-shadow(0 0 5px rgba(82, 83, 80, 0.18));
}

.city-arch-inner,
.misc-arch-inner {
  stroke: rgba(235, 232, 224, 0.06);
  stroke-width: 0.38;
  stroke-dasharray: 7 10;
}

.city-projection-system.is-hover-sequence .city-projection-fog,
.misc-projection-system.is-hover-sequence .misc-projection-fog {
  animation: war-fog-drift 15.04s ease-in-out 1 both;
}

.city-projection-system.is-hover-sequence .city-projection-grain,
.misc-projection-system.is-hover-sequence .misc-projection-grain {
  animation: war-grain-flicker 1.88s steps(4, end) 8 both;
}

.city-projection-system.is-hover-sequence .city-arch-inner,
.misc-projection-system.is-hover-sequence .misc-arch-inner {
  animation: war-arch-flow 15.04s linear 1 both;
}

.city-projection-system.is-hover-final .city-projection-fog,
.misc-projection-system.is-hover-final .misc-projection-fog {
  opacity: 0.27;
  transform: translateX(-0.5%) scale(1.04);
}

.city-projection-system.is-hover-final .city-projection-grain,
.misc-projection-system.is-hover-final .misc-projection-grain {
  opacity: 0.09;
}

@media (prefers-reduced-motion: reduce) {
  .candle-glow,
  .torch-glow,
  .central-lamp,
  .collection-book::before,
  .book-flare,
  .book-spark,
  .war-cone-haze,
  .war-rays,
  .war-rays line,
  .war-projection-frame,
  .war-hover-video,
  .war-projection-fog,
  .war-projection-grain,
  .war-arch-inner,
  .lyric-cone-haze,
  .lyric-rays,
  .lyric-rays line,
  .lyric-projection-frame,
  .lyric-hover-video,
  .lyric-projection-fog,
  .lyric-projection-grain,
  .lyric-arch-inner,
  .tales-cone-haze,
  .tales-rays,
  .tales-rays line,
  .tales-projection-frame,
  .tales-hover-video,
  .tales-projection-fog,
  .tales-projection-grain,
  .tales-arch-inner,
  .city-cone-haze,
  .city-rays,
  .city-rays line,
  .city-projection-frame,
  .city-hover-video,
  .city-projection-fog,
  .city-projection-grain,
  .city-arch-inner,
  .misc-cone-haze,
  .misc-rays,
  .misc-rays line,
  .misc-projection-frame,
  .misc-hover-video,
  .misc-projection-fog,
  .misc-projection-grain,
  .misc-arch-inner {
    animation: none;
  }

  .war-projection-system.is-hover-sequence .war-projection-frame,
  .lyric-projection-system.is-hover-sequence .lyric-projection-frame,
  .tales-projection-system.is-hover-sequence .tales-projection-frame,
  .city-projection-system.is-hover-sequence .city-projection-frame,
  .misc-projection-system.is-hover-sequence .misc-projection-frame {
    opacity: 1;
    transform: perspective(70rem) translate(0, 0) scale(1);
  }

  .war-projection-system.is-hover-sequence .war-hover-video,
  .lyric-projection-system.is-hover-sequence .lyric-hover-video,
  .tales-projection-system.is-hover-sequence .tales-hover-video,
  .city-projection-system.is-hover-sequence .city-hover-video,
  .misc-projection-system.is-hover-sequence .misc-hover-video {
    opacity: 0.86;
  }

  .war-projection-system.is-hover-sequence .war-rays line,
  .lyric-projection-system.is-hover-sequence .lyric-rays line,
  .tales-projection-system.is-hover-sequence .tales-rays line,
  .city-projection-system.is-hover-sequence .city-rays line,
  .misc-projection-system.is-hover-sequence .misc-rays line {
    opacity: 0.14;
  }

  .war-projection-system.is-hover-sequence .war-cone-haze,
  .lyric-projection-system.is-hover-sequence .lyric-cone-haze,
  .tales-projection-system.is-hover-sequence .tales-cone-haze,
  .city-projection-system.is-hover-sequence .city-cone-haze,
  .misc-projection-system.is-hover-sequence .misc-cone-haze {
    opacity: 0.18;
  }
}

/* V41: единый полноэкранный переход центрального промо-барельефа. */
.poetry-transition-overlay {
  position: fixed;
  z-index: 30000;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  background: #000;
  cursor: none !important;
  transition: opacity 45ms linear;
}

.poetry-transition-overlay.is-active {
  opacity: 1;
}

.poetry-transition-overlay.is-complete {
  opacity: 1;
  background: #000;
}

.poetry-transition-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stage.is-poetry-transitioning,
.stage.is-poetry-transitioning * {
  pointer-events: none !important;
}

html.poetry-transition-active,
html.poetry-transition-active body {
  overflow: hidden !important;
}

html.poetry-transition-active .global-service-menu,
html.poetry-transition-active .global-service-drawer,
html.poetry-transition-active .site-service-menu,
html.poetry-transition-active .site-service-drawer,
html.poetry-transition-active .site-guide-button,
html.poetry-transition-active .site-guide-panel,
html.poetry-transition-active .bat-cursor {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

.site-animations-off .poetry-transition-overlay {
  display: none !important;
}

/* Промо «Война!» проявляется непосредственно из полного чёрного после вспышки. */
.war-transition-promo {
  position: fixed;
  z-index: 30010;
  inset: 0;
  overflow: hidden;
  background: #000;
  pointer-events: auto;
  cursor: none !important;
}

.war-transition-promo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: brightness(.58) contrast(1.04) saturate(.78);
  transition: opacity 1050ms ease, filter 1250ms ease;
}

.war-transition-promo.is-visible .war-transition-promo-video {
  opacity: 1;
  filter: brightness(.94) contrast(1.03) saturate(.82);
}

.war-transition-promo-black {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}

.war-transition-promo.is-ending .war-transition-promo-video {
  opacity: 0;
  filter: brightness(.18) contrast(1.08) saturate(.42);
}

.war-transition-promo.is-ending .war-transition-promo-black {
  opacity: 1;
}

.site-animations-off .war-transition-promo {
  display: none !important;
}