@font-face {
  font-family: "Dela";
  src: url("dela.woff2?v=126e0719") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --night: #07040f;
  --ink: #f4ecff;
  --muted: #a99bc4;
  --pink: #ff2d95;
  --red: #ff3b30;
  --cyan: #00e5ff;
  --yellow: #ffe600;
  --amber: #ffa21a;
  --green: #39ff88;
  --violet: #b14dff;
  --white: #fff3dc;
  --display: "Dela", "Hiragino Kaku Gothic StdN", "Yu Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(70vmax 30vmax at 50% 105%, #ff2d9530, transparent 60%),
    radial-gradient(40vmax 30vmax at 50% -10%, #b14dff26, transparent 60%),
    var(--night);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- the street: two facades receding to the middle ---------- */

.street {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 620px;
  perspective-origin: 50% 46%;
}

.wall {
  position: absolute;
  top: -25vh;
  height: 125vh;               /* bottom edge = street level: no signs below ground */
  width: 120vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 4px 6px;
  padding: 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, #ffffff08 46px 48px),
    repeating-linear-gradient(0deg, transparent 0 60px, #ffffff06 60px 62px),
    linear-gradient(#0b0716, #120a1e);
}
.wall.left  { left: 0;  transform-origin: left center;  transform: rotateY(74deg); }
.wall.right { right: 0; transform-origin: right center; transform: rotateY(-74deg); flex-wrap: wrap-reverse; }

/* the calm middle: darkness behind logo, tagline and contact */
.street::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(48vmax 40vmax at 50% 47%, #07040ff2 40%, #07040fa6 66%, transparent);
}

/* wet street glow at the bottom */
.street::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30vh;
  background: linear-gradient(transparent, #ff2d9518 60%, #00e5ff14);
}

.sign {
  --c: var(--pink);
  position: relative;
  flex: none;
  font-family: var(--display);
  line-height: 1.05;
  color: #fff;
  white-space: nowrap;
  padding: .35em .45em;
  border: 2px solid var(--c);
  border-radius: 4px;
  background: color-mix(in srgb, var(--c) 14%, #0b0614);
  text-shadow: 0 0 3px var(--c), 0 0 12px var(--c);
  box-shadow: 0 0 10px var(--c), inset 0 0 10px color-mix(in srgb, var(--c) 40%, transparent);
  animation: hum 7s linear infinite;
}
.sign.v  { writing-mode: vertical-rl; letter-spacing: .1em; }
.sign.sq { width: 1.6em; height: 1.6em; padding: 0; display: grid; place-items: center; border-radius: 50%; }
/* lit lightboxes, like most real Shinjuku signage */
.sign.box {
  background: var(--c);
  color: #160a1c;
  text-shadow: none;
  border-color: #ffffffaa;
  box-shadow: 0 0 16px var(--c), 0 0 40px color-mix(in srgb, var(--c) 50%, transparent);
}

.pink   { --c: var(--pink); }
.red    { --c: var(--red); }
.cyan   { --c: var(--cyan); }
.yellow { --c: var(--yellow); }
.amber  { --c: var(--amber); }
.green  { --c: var(--green); }
.violet { --c: var(--violet); }
.white  { --c: var(--white); }

.rain {
  position: absolute;
  inset: -20vh 0 0;
  background: repeating-linear-gradient(100deg, transparent 0 22px, #ffffff0d 22px 23px, transparent 23px 61px);
  animation: rain .6s linear infinite;
}

/* ---------- people: silhouettes against the wet, glowing street ---------- */

.sprites { position: absolute; width: 0; height: 0; }

.crowd {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(60vw 22vh at 50% 100%, #ff2d9547, transparent 70%),
    linear-gradient(transparent 68%, #ffa21a14 85%, #00e5ff1f);
}
.person {
  position: absolute;
  aspect-ratio: 2 / 5;
  fill: #040108;
  filter: drop-shadow(0 -1px 1.5px #ff2d9580) drop-shadow(0 0 6px #00e5ff33);
  animation: stroll linear infinite alternate;
}
.person.flip { scale: -1 1; }

/* ---------- foreground: the calm middle ---------- */

main {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1.5rem 1rem;
  max-width: 100%;
}

.kicker {
  font: 700 clamp(11px, 1.6vmin, 14px)/1 system-ui, sans-serif;
  letter-spacing: .4em;
  color: var(--yellow);
  text-shadow: 0 0 10px #ffe60099;
  margin-bottom: 1.2rem;
}

h1 {
  font: clamp(32px, 6.5vmin, 80px)/.95 var(--display);
  letter-spacing: -.02em;
  color: #fff;
  text-shadow:
    0 0 6px var(--pink), 0 0 22px var(--pink), 0 0 60px var(--pink),
    4px 4px 0 #00e5ff55;
  transform: rotate(-2deg);
}
h1 small {
  font-size: .38em;
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan), 0 0 22px var(--cyan);
  margin-left: .1em;
}
.flick { animation: flicker 5s infinite; }

.tagline {
  margin-top: 1.2rem;
  font: clamp(36px, min(10.5vmin, 7.6vw), 128px)/1 var(--display);
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 0 6px var(--amber), 0 0 26px var(--amber), 0 0 70px #ffa21a99;
}
.tagline-jp {
  margin-top: .25em;
  font: clamp(36px, min(9.5vmin, 9vw), 116px)/1.1 var(--display);
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 0 6px var(--red), 0 0 24px var(--red), 0 0 60px #ff3b3099;
  transform: rotate(1deg);
}

.contact {
  display: inline-flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: clamp(1.6rem, 5vh, 3rem);
  padding: 1rem 1.6rem;
  border: 3px solid var(--cyan);
  border-radius: 10px;
  background: #00e5ff14;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 14px var(--cyan), inset 0 0 18px #00e5ff40;
  transform: rotate(1.5deg);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s;
}
.contact:hover, .contact:focus-visible {
  transform: rotate(0) scale(1.04);
  background: #00e5ff26;
  box-shadow: 0 0 26px var(--cyan), 0 0 60px #00e5ff80, inset 0 0 24px #00e5ff66;
  outline: none;
}
.contact:active { transform: scale(.98); }
.contact-label {
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: .3em;
  color: var(--cyan);
}
.contact-mail {
  font: clamp(20px, 4vmin, 34px)/1 var(--display);
  text-shadow: 0 0 6px var(--cyan), 0 0 20px var(--cyan);
}

footer {
  position: fixed;
  bottom: 10px;
  left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .2em;
  color: #ffffffb3;
  text-shadow: 0 0 4px #000, 0 0 10px #000;
  z-index: 3;
}
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid #ffffff4d; }
footer a:hover, footer a:focus-visible { color: var(--cyan); border-color: var(--cyan); outline: none; }

/* ---------- clocks: Vienna + Tokyo (assets/kyoto.js) ---------- */

.clocks {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 5;
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 16px;
  padding: .55rem .8rem;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  background: #07040fb3;
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.clocks time { font-size: 18px; letter-spacing: .04em; font-variant-numeric: tabular-nums; margin-left: .4em; }
.clocks .clock:first-child time { color: var(--cyan); text-shadow: 0 0 8px #00e5ff99; }
.clocks .clock:nth-child(2) time { color: var(--pink); text-shadow: 0 0 8px #ff2d9599; }
.clocks .sun { grid-column: 1 / -1; font-size: 10px; letter-spacing: .12em; text-transform: none; }
.clocks .auto { all: unset; cursor: pointer; color: var(--yellow); border-bottom: 1px solid #ffe60066; }
.clocks .auto:hover, .clocks .auto:focus-visible { color: #fff; }

/* ---------- switch to the zen version ---------- */

.switch {
  position: fixed;
  top: 88px;                   /* below the clocks */
  left: 16px;
  z-index: 5;
  padding: .45rem .8rem;
  font: 700 11px/1 system-ui, sans-serif;
  letter-spacing: .25em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  background: #07040fb3;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.switch:hover, .switch:focus-visible { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px #00e5ff66; outline: none; }

/* ---------- impressum overlay (pure CSS via :target) ---------- */

.legal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  padding: 16px;
  background: #07040fd9;
  backdrop-filter: blur(6px);
}
.legal:target { display: grid; }
.legal-box {
  position: relative;
  width: min(36rem, 100%);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: 1.6rem 1.6rem 1.2rem;
  border: 2px solid var(--violet);
  border-radius: 10px;
  background: #0d0818;
  box-shadow: 0 0 24px #b14dff66;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.legal h2 {
  font: 20px/1.2 var(--display);
  color: var(--ink);
  margin: 1.2rem 0 .5rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal-sub { font-size: 12px; letter-spacing: .05em; margin: -.3rem 0 .6rem; }
.legal p + p { margin-top: .6rem; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--cyan); }
.legal-close {
  position: absolute;
  top: .4rem;
  right: .7rem;
  font-size: 28px;
  line-height: 1;
  color: var(--ink) !important;
  text-decoration: none;
}

/* ---------- motion ---------- */

@keyframes hum {
  0%, 46%, 52%, 100% { opacity: 1; }
  47% { opacity: .35; }
  48% { opacity: .95; }
  50% { opacity: .4; }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .12; }
}
@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .2; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes stroll { to { translate: calc(-50% + var(--walk)) 0; } }
@keyframes rain { to { transform: translateY(20vh); } }

@media (prefers-reduced-motion: reduce) {
  .sign, .flick, .rain, .person { animation: none !important; }
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .street { perspective: 380px; }
  .wall.left  { transform: rotateY(78deg); }
  .wall.right { transform: rotateY(-78deg); }
  .contact { padding: .9rem 1.1rem; }
}