.window {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
}

.window-glass {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 145;
  overflow: hidden;
  clip-path: url(#arch-clip);
  mask-image: linear-gradient(#000 82%, transparent);
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(230, 196, 111, 0.32), transparent 70%),
    radial-gradient(90% 70% at 50% 100%, var(--crimson-glow), transparent 75%),
    linear-gradient(180deg, #2a1424, #120c1a 70%);
}

.window-rays {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 220%;
  aspect-ratio: 1;
  margin-left: -110%;
  margin-top: -110%;
  background: repeating-conic-gradient(from 0deg, rgba(243, 212, 136, 0.16) 0deg 5deg, transparent 5deg 18deg);
  mask-image: radial-gradient(closest-side, #000 20%, transparent 72%);
}

/* 人の見た目の真ん中を窓とロゴの真ん中へ置く */
.window-figure {
  position: absolute;
  left: calc(50% + var(--cast-shift, 0) * 112%);
  bottom: 0;
  width: 112%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 24px rgba(12, 10, 20, 0.6));
}

.window-dust {
  position: absolute;
  inset: 0;
  container-type: size;
  pointer-events: none;
}

.window-dust span {
  position: absolute;
  bottom: -6px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px var(--gold);
  opacity: 0;
}

.window-frame {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  aspect-ratio: 100 / 145;
  overflow: visible;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5px;
  pointer-events: none;
}

.window-frame path {
  vector-effect: non-scaling-stroke;
}

.window-frame-inner {
  stroke: var(--gold-line-strong);
  stroke-width: 1px;
}

.window-frame-rose {
  fill: var(--gold);
  stroke: none;
}

.hero-logo {
  position: relative;
  z-index: 2;
  width: 124%;
  margin: -28% 0 0;
  line-height: 0;
}

.hero-logo img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
}

.hero-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 214, 0.85) 50%, transparent 60%) -150% 0 / 200% 100% no-repeat;
  mask-image: url("../../media/title/logo-960.webp");
  mask-size: 100% 100%;
  opacity: 0;
  pointer-events: none;
}

.window-caption {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: var(--sp-1);
  text-align: center;
}

.window-caption-role {
  color: var(--gold);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.16em;
}