/* One native-ratio plane keeps the photograph and every lamp registered.
   Cover the viewport, anchor the right edge, crop the left on portrait screens.
   Landscape framing favors the eyes, mouth and chin (64% vertical anchor). */
.night-world {
  z-index: 1;
  visibility: hidden;
  background: #030304;
  color: #f5eee0;
}
.camera {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.photo-plane {
  position: absolute;
  width: max(100%, calc(100dvh * 1392 / 1698));
  height: max(100%, calc(100vw * 1698 / 1392));
  right: 0;
  top: calc((100% - max(100%, 100vw * 1698 / 1392)) * 0.64);
  isolation: isolate;
}
.city-photo,
.city-lighting {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.city-photo {
  object-fit: fill;
  opacity: 0;
}
.city-lighting {
  pointer-events: none;
}
/* He waits in the dark while the city comes up behind him, then the city's own
   light crosses him from the left — the side he is actually lit from. At every
   moment each part of him is either black or correctly exposed; he is never
   half-lit, which is what made a plain fade read as an apparition. The sweep
   ends completely clear of the figure, so the final frame is the untouched
   photograph and the soft matte edge never shows. */
.figure-shade {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url('../TokyoNight/tokyo-next/public/figure-matte.png');
  mask-image: url('../TokyoNight/tokyo-next/public/figure-matte.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.figure-shade i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  width: 300%;
  background: linear-gradient(
    112deg,
    #05060a00 30%,
    #05060ad1 46%,
    #05060a 60%
  );
  transform: translate3d(50%, 0, 0);
}
.shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      #02030655,
      transparent 16%,
      transparent 65%,
      #020306b3
    ),
    linear-gradient(90deg, #03040665, transparent 46%);
}
.night-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.night-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(24px + env(safe-area-inset-top)) clamp(24px, 4vw, 72px)
    calc(24px + env(safe-area-inset-bottom));
  opacity: 0;
}
.night-title {
  margin-top: auto;
  padding-bottom: 32px;
  text-shadow: 0 2px 22px #09090680;
}
.night-title .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d3c5ad;
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.19em;
}
.chapter-line {
  width: 21px;
  height: 1px;
  background: #c7ad85;
}
.night-title h2 {
  font-family: 'Songti SC', 'Noto Serif CJK SC', 'STSong', serif;
  font-size: clamp(42px, 5.7vw, 88px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
}
.night-title h2 > span:first-child {
  font-size: 0.48em;
  letter-spacing: 0.12em;
  line-height: 2;
}
.title-stop {
  color: #cbae7f;
}
.night-copy {
  font-size: 14px;
  line-height: 1.95;
  color: #ded3bf;
  letter-spacing: 0.18em;
  margin: 0;
}

/* Replay TokyoNight’s button-triggered opening before the permanent scene. */
#nightWorld { position: fixed; inset: 0; z-index: 50; visibility: hidden; opacity: 0; transition: opacity 1s ease-in; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
#nightWorld.active { visibility: visible; opacity: 1; }
#nightWorld:focus { outline: none; }
#nightWorld.transition .city-photo {
  animation: photo-develop 5s 3.8s cubic-bezier(0.33, 0, 0.25, 1) both;
}
#nightWorld.transition .figure-shade i {
  animation: figure-light 3.3s 7.6s cubic-bezier(0.4, 0, 0.25, 1) both;
}
#nightWorld.transition .night-ui {
  animation: ui-enter 1.7s 9.3s ease-out both;
}
#nightWorld.night .city-photo, #nightWorld.night .night-ui { opacity: 1; }
body.night-on { overflow: hidden; background: #030304; }
.night-countdown { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 18px; z-index: 35; width: 76px; height: 84px; pointer-events: none; }
.alarm-clock { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px #57456320); }
.clock-hour, .clock-minute { transform-origin: 40px 44px; animation: clock-spin 1.8s linear infinite; }
.clock-minute { animation-duration: .6s; }
.night-countdown.warning .alarm-clock { animation: clock-wiggle .28s ease-in-out infinite alternate; }
@keyframes clock-spin { to { transform: rotate(360deg); } }
@keyframes clock-wiggle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.night-notice { position: fixed; left: 50%; bottom: max(110px, 16vh); transform: translate(-50%, 12px); width: min(320px, calc(100% - 40px)); padding: 19px 24px; z-index: 40; background: linear-gradient(130deg, #191528f5, #101422f5); color: #eee6ff; border: 1px solid #ad95d580; border-radius: 4px; box-shadow: 0 12px 48px #21143344, inset 0 0 28px #a88dd410; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, transform .35s, visibility .35s; }
.night-notice.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.night-notice small { color: #bfa5dc; letter-spacing: .22em; font: 12px ui-monospace, monospace; }
.night-notice p { margin: 8px 0 13px; font: 18px 'Noto Sans SC', sans-serif; letter-spacing: .16em; }
.night-notice-track { height: 2px; background: #ffffff18; }
.night-notice-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8c75bb, #e9c8e9); }
.night-on .night-countdown, .night-on .night-notice { display: none; }
@media (max-width: 600px) { #nightWorld .night-title { padding-bottom: 22px; } #nightWorld .night-title h2 { font-size: 44px; margin-bottom: 12px; } #nightWorld .night-title .eyebrow { margin-bottom: 10px; letter-spacing: .12em; } .night-countdown { top: calc(10px + env(safe-area-inset-top)); right: 10px; width: 62px; height: 69px; } }
@media (max-height: 440px) and (orientation: landscape) { #nightWorld .night-copy, #nightWorld .eyebrow { display: none; } #nightWorld .night-title h2 { font-size: 32px; } #nightWorld .night-title { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { #nightWorld, .night-notice, .night-countdown { transition: none; } }

@keyframes photo-develop {
  0% {
    opacity: 0;
    filter: brightness(0.25) saturate(0.7);
  }
  35% {
    opacity: 0.25;
    filter: brightness(0.48) saturate(0.82);
  }
  72% {
    opacity: 0.76;
    filter: brightness(0.85) saturate(0.95);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
}
@keyframes figure-light {
  from {
    transform: translate3d(-10%, 0, 0);
  }
  to {
    transform: translate3d(50%, 0, 0);
  }
}
@keyframes ui-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) { .clock-hour, .clock-minute, .night-countdown.warning .alarm-clock { animation: none; } }