/* ═══════════════════════════════════════════════════════
   KOWLOON NIGHTS · 九龍夜市 — pure CSS 3D neon street
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:#07070F;
  --ink-2:#0C0C18;
  --pink:#FF2E88;
  --cyan:#00E5FF;
  --yellow:#FFE33D;
  --red:#FF3B30;
  --paper:#E8E9F2;
  --dim:#9A9DB8;
  --ease-sign: cubic-bezier(.19,1,.22,1);
  --ease-snap: cubic-bezier(.7,-0.2,.25,1.3);
  --ease-drift: cubic-bezier(.45,0,.55,1);
  --scale: .9;
}

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

html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Chakra Petch', 'Noto Sans JP', sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--pink); color:var(--ink); }

a:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
  border-radius:2px;
}

/* ── custom cursor — a neon dot that trails the pointer over the street ── */
.cursor-glow{
  position:fixed; left:0; top:0;
  width:24px; height:24px;
  margin:-12px 0 0 -12px;
  border-radius:50%;
  border:1.5px solid rgba(0,229,255,.85);
  box-shadow:0 0 10px rgba(0,229,255,.55), inset 0 0 8px rgba(0,229,255,.3);
  pointer-events:none;
  z-index:80;
  opacity:0;
  will-change:transform;
  transition:width .4s var(--ease-sign), height .4s var(--ease-sign),
    margin .4s var(--ease-sign), border-color .4s var(--ease-sign),
    box-shadow .4s var(--ease-sign), opacity .3s var(--ease-drift);
}
.cursor-glow::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:3px; height:3px;
  margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);
}
.cursor-glow.cta{
  width:56px; height:56px; margin:-28px 0 0 -28px;
  border-color:rgba(255,227,61,.9);
  box-shadow:0 0 22px rgba(255,227,61,.6), inset 0 0 14px rgba(255,227,61,.25);
}
.hero.has-cursor{ cursor:none; }
.hero.has-cursor a, .hero.has-cursor [tabindex]{ cursor:none; }
@media (hover:none), (pointer:coarse){
  .cursor-glow{ display:none; }
}

/* ─────────────── HERO ─────────────── */

.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 70% 10%, #101024 0%, var(--ink) 55%),
    var(--ink);
}

.rig{
  position:absolute; inset:0;
  will-change:transform;
}

.tilt{
  position:absolute; inset:0;
  perspective:1500px;
  perspective-origin:52% 38%;
}

.world{
  position:absolute;
  left:52%; top:54%;
  width:1600px; height:1600px;
  margin:-800px 0 0 -800px;
  transform:rotateX(60deg) rotateZ(-45deg) scale(var(--scale));
  transform-style:preserve-3d;
}

/* ground + road live flat on the world plane */
.ground{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 55%, rgba(20,20,40,.9) 0%, rgba(7,7,15,0) 72%),
    linear-gradient(160deg, #0A0A16 0%, #07070F 60%);
}
.road{
  position:absolute; left:-200px; right:-200px;
  top:790px; height:180px;
  background:
    linear-gradient(to bottom,
      rgba(28,28,52,.0) 0%,
      rgba(30,30,58,.85) 14%,
      rgba(24,24,46,.9) 50%,
      rgba(30,30,58,.85) 86%,
      rgba(28,28,52,.0) 100%);
  box-shadow:0 0 60px rgba(0,229,255,.05);
}

/* puddles + neon reflections (flat on ground)
   NOTE: no mix-blend-mode here — a blending child inside a preserve-3d
   context makes Chromium flatten the whole 3D scene. Alpha only. */
.puddle{
  position:absolute;
  border-radius:50%;
  animation:shimmer 5s ease-in-out infinite;
}
.refl{
  position:absolute;
  filter:blur(6px);
  animation:shimmer 4s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{ opacity:.75; transform:scaleX(1); }
  40%    { opacity:1;   transform:scaleX(1.06); }
  62%    { opacity:.6;  transform:scaleX(.97); }
}

/* ── buildings ── */
.bld{
  position:absolute;
  transform-style:preserve-3d;
}
.face{ position:absolute; }

.roof{
  left:0; top:0;
  background:linear-gradient(135deg, #14142A 0%, #0C0C1C 70%);
  border-right:1px solid rgba(0,229,255,.28);
  border-bottom:1px solid rgba(255,46,136,.22);
}
.roof::after{ /* rooftop unit */
  content:"";
  position:absolute; right:14%; top:16%;
  width:26%; height:22%;
  background:#171730;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.5), 0 0 12px rgba(0,229,255,.08);
}

.wa, .wb{
  transform-origin:0 0;
  display:grid;
  gap:6px;
  align-content:center;
  justify-content:center;
  background:linear-gradient(to bottom, #101020 0%, #0A0A18 55%, #121226 100%);
}
.wa{ transform:rotateX(90deg); box-shadow:inset 0 22px 34px rgba(0,0,0,.65); }
.wb{ transform:rotateZ(90deg) rotateX(90deg);
     background:linear-gradient(to bottom, #0B0B18 0%, #08080F 60%, #0E0E1E 100%); }

/* windows */
.win{
  width:12px; height:15px;
  background:var(--w, #FFD9A0);
  opacity:var(--o, .8);
  border-radius:1px;
  box-shadow:0 0 5px var(--w, #FFD9A0);
}
.win.off{ background:#11111f; box-shadow:none; opacity:1; }
.win.flick{ animation:winflick var(--fd,4s) steps(1,end) var(--fl,0s) infinite; }
@keyframes winflick{
  0%   { opacity:var(--o,.8); }
  7%   { opacity:.05; }
  9%   { opacity:var(--o,.8); }
  46%  { opacity:var(--o,.8); }
  49%  { opacity:.1; }
  54%  { opacity:var(--o,.8); }
  81%  { opacity:.2; }
  85%  { opacity:var(--o,.8); }
  100% { opacity:var(--o,.8); }
}

/* ── neon signs (billboarded toward camera) ── */
.sign{
  position:absolute;
  left:0; top:0;
  transform-origin:50% 50%;
  padding:.5em .8em;
  border:2.5px solid currentColor;
  border-radius:10px;
  background:rgba(7,7,15,.72);
  font-weight:700;
  letter-spacing:.08em;
  white-space:nowrap;
  text-align:center;
  line-height:1.15;
  box-shadow:
    0 0 14px currentColor,
    inset 0 0 14px rgba(255,255,255,.06);
  text-shadow:0 0 8px currentColor, 0 0 26px currentColor;
  animation:hum 3.4s ease-in-out infinite, sway 6.5s var(--ease-drift) infinite;
}
.sign small{
  display:block;
  font-size:.42em;
  font-weight:500;
  letter-spacing:.42em;
  opacity:.92;
}
.sign.vert{
  writing-mode:vertical-rl;
  letter-spacing:.28em;
  padding:.85em .42em;
}
.sign .zh{ font-family:'Noto Sans JP', sans-serif; font-weight:900; }
.tone-pink-s  { color:var(--pink); }
.tone-cyan-s  { color:var(--cyan); }
.tone-yellow-s{ color:var(--yellow); }
.tone-red-s   { color:#FF5E54; }

@keyframes hum{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.16); }
}

/* independent rotate/translate compose with the billboard `transform` set
   inline by JS, so a hung sign can tremble on its own wire without fighting
   the 3D placement transform */
@keyframes sway{
  0%,100%{ rotate:0deg; translate: 0 0; }
  32%    { rotate:.55deg; translate: 0 -1.5px; }
  68%    { rotate:-.4deg; translate: 0 .8px; }
}

/* the dying letter — erratic buzz */
.dying{
  display:inline-block;
  animation:dying 3.7s steps(1,end) infinite;
}
@keyframes dying{
  0%   { opacity:1; }
  3%   { opacity:.12; }
  5%   { opacity:.9; }
  6%   { opacity:.08; }
  8%   { opacity:1; }
  41%  { opacity:1; }
  42%  { opacity:.15; }
  43%  { opacity:.85; }
  45%  { opacity:.1; }
  46%  { opacity:.6; }
  48%  { opacity:1; }
  76%  { opacity:1; }
  77%  { opacity:.2; }
  79%  { opacity:1; }
  100% { opacity:1; }
}
.sign .dying{ animation-duration:2.9s; }

/* stall awning stripes */
.awning{
  background:repeating-linear-gradient(90deg,
    var(--pink) 0 18px, #14142A 18px 36px);
  opacity:.9;
  box-shadow:0 0 24px rgba(255,46,136,.35);
}
.stall-glow{
  position:absolute;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,196,90,.55), rgba(255,120,60,.16) 55%, transparent 75%);
  animation:hum 2.6s ease-in-out infinite;
}

/* ── cables ── */
.cables{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.cable{
  fill:none;
  stroke:#05050C;
  stroke-width:2.5;
  filter:drop-shadow(0 1px 0 rgba(0,229,255,.12));
}
.cable.c2{ stroke-width:1.6; }
.cable.c3{ stroke-width:3; }
.lanterns circle{
  fill:var(--yellow);
  filter:drop-shadow(0 0 6px var(--yellow));
  animation:hum 4s ease-in-out infinite;
}
.lanterns circle:nth-child(2n){ fill:var(--pink); filter:drop-shadow(0 0 6px var(--pink)); animation-delay:-1.7s; }

/* ── steam ── */
.steam{ position:absolute; inset:0; pointer-events:none; }
.steam i{
  position:absolute;
  left:var(--sx, 46%); bottom:var(--sb, 24%);
  width:60px; height:60px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(210,220,255,.16), transparent 70%);
  filter:blur(10px);
  opacity:0;
  animation:rise var(--st,7s) linear var(--sl,0s) infinite;
}
@keyframes rise{
  0%  { transform:translate3d(0,0,0) scale(.5); opacity:0; }
  12% { opacity:.85; }
  70% { opacity:.35; }
  100%{ transform:translate3d(26px,-240px,0) scale(1.9); opacity:0; }
}

/* ── atmosphere overlays ── */
.mist{
  position:absolute; inset:-8% -25%;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:screen;
  filter:blur(34px);
  background:
    radial-gradient(38% 26% at 18% 74%, rgba(0,229,255,.10), transparent 65%),
    radial-gradient(34% 22% at 62% 68%, rgba(255,46,136,.09), transparent 60%),
    radial-gradient(30% 20% at 85% 60%, rgba(255,227,61,.07), transparent 62%);
  animation:mistdrift 24s var(--ease-drift) infinite alternate;
}
@keyframes mistdrift{
  0%  { transform:translate3d(-2.5%,0,0) scaleX(1); }
  100%{ transform:translate3d(3%,-1%,0) scaleX(1.04); }
}
#rain{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.grain{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 45%, transparent 52%, rgba(4,4,10,.82) 100%),
    linear-gradient(to bottom, rgba(4,4,10,.5) 0%, transparent 18%, transparent 78%, rgba(4,4,10,.75) 100%);
}

/* ── masthead ── */
.masthead{
  position:absolute;
  left:clamp(1.25rem, 5vw, 5.5rem);
  bottom:clamp(4.5rem, 12vh, 8rem);
  z-index:5;
  max-width:34rem;
}
.masthead::before{ /* wet-glass scrim so type owns its corner */
  content:"";
  position:absolute;
  inset:-4.5rem -6rem -5rem -8rem;
  z-index:-1;
  background:radial-gradient(75% 70% at 38% 58%,
    rgba(4,4,11,.88) 0%, rgba(4,4,11,.62) 48%, rgba(4,4,11,0) 78%);
  pointer-events:none;
}
.mast-over{
  font-size:clamp(.6rem,.8vw,.72rem);
  letter-spacing:.5em;
  color:var(--cyan);
  text-shadow:0 0 10px rgba(0,229,255,.7);
  margin-bottom:1.1rem;
  animation:fadeup 1.2s var(--ease-sign) both .2s;
}
.mast-title{
  font-weight:700;
  line-height:.92;
  animation:fadeup 1.2s var(--ease-sign) both .35s;
}
.line-en{
  display:block;
  font-size:clamp(3rem, 8.5vw, 6.4rem);
  letter-spacing:.02em;
  color:var(--pink);
  text-shadow:
    0 0 10px rgba(255,46,136,.9),
    0 0 42px rgba(255,46,136,.55),
    0 0 90px rgba(255,46,136,.3);
}
.line-en.two{ color:var(--cyan);
  text-shadow:
    0 0 10px rgba(0,229,255,.9),
    0 0 42px rgba(0,229,255,.5),
    0 0 90px rgba(0,229,255,.3);
}
.line-jp{
  display:block;
  margin-top:.55rem;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:900;
  font-size:clamp(1rem, 2vw, 1.45rem);
  letter-spacing:1.1em;
  color:var(--yellow);
  text-shadow:0 0 12px rgba(255,227,61,.75);
}
.mast-tag{
  margin-top:1.4rem;
  font-size:clamp(.85rem, 1.05vw, .98rem);
  font-weight:400;
  line-height:1.65;
  color:var(--dim);
  animation:fadeup 1.2s var(--ease-sign) both .5s;
}
.mast-cta{
  display:inline-block;
  margin-top:1.6rem;
  padding:.72em 1.5em;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.34em;
  color:var(--yellow);
  text-decoration:none;
  border:1.5px solid rgba(255,227,61,.6);
  border-radius:4px;
  text-shadow:0 0 8px rgba(255,227,61,.6);
  box-shadow:0 0 14px rgba(255,227,61,.14), inset 0 0 14px rgba(255,227,61,.06);
  transition:all .45s var(--ease-sign);
  animation:fadeup 1.2s var(--ease-sign) both .65s;
}
.mast-cta:hover{
  color:var(--ink);
  background:var(--yellow);
  box-shadow:0 0 30px rgba(255,227,61,.55);
  text-shadow:none;
  translate:0 -2px;
}
.mast-cta:active{
  translate:0 0;
  transition:translate .15s var(--ease-snap);
}
@keyframes fadeup{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ── LED ticker ── */
.ticker{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:6;
  height:2.6rem;
  display:flex; align-items:center;
  overflow:hidden;
  background:rgba(5,5,12,.92);
  border-top:1px solid rgba(255,227,61,.25);
  box-shadow:0 -8px 30px rgba(0,0,0,.6);
}
.ticker::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,.42) 2px 3px);
  pointer-events:none; z-index:2;
}
.ticker-track{
  display:flex;
  white-space:nowrap;
  animation:marquee 46s linear infinite;
}
.ticker-run{
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.24em;
  color:var(--yellow);
  text-shadow:0 0 7px rgba(255,227,61,.8);
  padding-right:4rem;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ─────────────── DIRECTORY ─────────────── */

.directory{
  position:relative;
  padding:clamp(3.5rem,8vh,6.5rem) clamp(1.25rem,6vw,7rem) clamp(4rem,8vh,6rem);
  background:
    radial-gradient(70% 40% at 20% 0%, rgba(255,46,136,.08), transparent 65%),
    radial-gradient(60% 40% at 90% 30%, rgba(0,229,255,.07), transparent 60%),
    linear-gradient(to bottom, #08081100, #0A0A16 30%, var(--ink));
}
/* seam glow — bridges the ticker into the directory instead of a hard cut */
.directory::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:clamp(6rem,16vh,11rem);
  pointer-events:none;
  background:
    linear-gradient(to right, transparent, rgba(255,227,61,.55) 18%, rgba(255,227,61,.55) 82%, transparent),
    radial-gradient(50% 100% at 24% 0%, rgba(255,46,136,.22), transparent 68%),
    radial-gradient(42% 100% at 82% 0%, rgba(0,229,255,.16), transparent 66%);
  background-repeat:no-repeat;
  background-size:100% 2px, 100% 100%, 100% 100%;
  background-position:top, top, top;
}
.dir-head{ position:relative; max-width:none; margin-bottom:clamp(2.5rem,6vh,4.5rem); }
.dir-head > *:not(.dir-side){ max-width:44rem; }
.dir-title .want{
  font-style:normal;
  color:var(--pink);
  text-shadow:0 0 12px rgba(255,46,136,.8), 0 0 44px rgba(255,46,136,.35);
}
.dir-side{
  position:absolute;
  right:.25rem; top:.4rem;
  writing-mode:vertical-rl;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.62em;
  color:rgba(154,157,184,.55);
  border-right:1px solid rgba(255,46,136,.35);
  padding-right:1rem;
  max-height:16rem;
}
.dir-kicker{
  font-size:.68rem;
  letter-spacing:.52em;
  color:var(--pink);
  text-shadow:0 0 10px rgba(255,46,136,.6);
  margin-bottom:1.2rem;
}
.dir-title{
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  font-weight:600;
  line-height:1.14;
  letter-spacing:.01em;
}
.dir-sub{
  margin-top:1.2rem;
  color:var(--dim);
  font-size:clamp(.85rem,1vw,.95rem);
  line-height:1.7;
  max-width:36rem;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1rem, 2vw, 1.75rem);
}
.card{
  --neon:var(--yellow);
  position:relative;
  padding:1.6rem 1.5rem 1.4rem;
  border:1.5px solid color-mix(in srgb, var(--neon) 24%, rgba(154,157,184,.08));
  border-radius:10px;
  background:linear-gradient(165deg, rgba(20,20,40,.55), rgba(9,9,18,.9));
  overflow:hidden;
  cursor:pointer;
  opacity:0;
  translate:0 30px;
  transition:border-color .5s var(--ease-sign), transform .5s var(--ease-sign),
    box-shadow .5s var(--ease-sign), opacity .8s var(--ease-sign), translate .8s var(--ease-sign);
}
.card.in{ opacity:1; translate:0 0; }
.tone-yellow{ --neon:var(--yellow); }
.tone-cyan  { --neon:var(--cyan); }
.tone-pink  { --neon:var(--pink); }
.tone-red   { --neon:#FF5E54; }

.card-glyph{
  position:absolute;
  right:.6rem; top:.15rem;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:900;
  font-size:4.6rem;
  line-height:1.2;
  color:color-mix(in srgb, var(--neon) 13%, rgba(154,157,184,.05));
  transition:color .45s var(--ease-sign), text-shadow .45s var(--ease-sign);
  pointer-events:none;
}
.card-name{
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--paper);
  transition:color .45s, text-shadow .45s;
}
.card-zh{
  display:block;
  font-family:'Noto Sans JP', sans-serif;
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.5em;
  margin-top:.4rem;
  color:var(--dim);
}
.card-copy{
  margin-top:1rem;
  font-size:.86rem;
  line-height:1.68;
  color:var(--dim);
  min-height:6.2em;
}
.card-meta{
  margin-top:1.15rem;
  font-size:.6rem;
  letter-spacing:.32em;
  color:rgba(154,157,184,.62);
  border-top:1px dashed rgba(154,157,184,.2);
  padding-top:.9rem;
  transition:color .45s;
}

.card:hover, .card:focus-visible, .card.lit{
  border-color:var(--neon);
  transform:translateY(-5px);
  box-shadow:0 0 0 1px var(--neon), 0 0 34px color-mix(in srgb, var(--neon) 32%, transparent), inset 0 0 30px color-mix(in srgb, var(--neon) 7%, transparent);
  animation:ignite .55s steps(1,end) 1;
}
.card.lit{ transform:none; }
.card:active{
  transform:translateY(-2px) scale(.982);
  transition:transform .18s var(--ease-snap);
}
.card:hover .card-name, .card:focus-visible .card-name, .card.lit .card-name{
  color:var(--neon);
  text-shadow:0 0 9px var(--neon), 0 0 30px color-mix(in srgb, var(--neon) 55%, transparent);
}
.card:hover .card-glyph, .card:focus-visible .card-glyph, .card.lit .card-glyph{
  color:color-mix(in srgb, var(--neon) 60%, transparent);
  text-shadow:0 0 18px var(--neon);
}
.card:hover .card-meta, .card:focus-visible .card-meta, .card.lit .card-meta{ color:var(--neon); }
@keyframes ignite{
  0%  { box-shadow:none; border-color:rgba(154,157,184,.16); }
  18% { box-shadow:0 0 24px color-mix(in srgb, var(--neon) 30%, transparent); border-color:var(--neon); }
  27% { box-shadow:none; border-color:rgba(154,157,184,.16); }
  42% { border-color:var(--neon); }
  55% { border-color:rgba(154,157,184,.3); }
  70% { border-color:var(--neon); }
}

.dir-note{
  margin-top:clamp(3rem,7vh,5rem);
  display:flex;
  align-items:center;
  gap:1.8rem;
  max-width:38rem;
}
.dir-note p{
  font-size:.86rem;
  line-height:1.7;
  color:var(--dim);
}
.bowl-sign{ width:84px; flex:0 0 auto; }
.tube path{
  fill:none;
  stroke:var(--cyan);
  stroke-width:3;
  stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--cyan));
}
.tube .wisp{ stroke:var(--pink); filter:drop-shadow(0 0 5px var(--pink)); }
.tube .w1{ animation:wisp 2.8s ease-in-out infinite; }
.tube .w2{ animation:wisp 2.8s ease-in-out -1.4s infinite; }
@keyframes wisp{
  0%,100%{ opacity:.25; }
  50%    { opacity:1; }
}

/* ─────────────── FOOTER ─────────────── */

.footer{
  position:relative;
  padding:2.2rem clamp(1.25rem,6vw,7rem) 2.6rem;
  border-top:1px solid rgba(255,46,136,.22);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  background:#050510;
  overflow:hidden;
}
.footer::before{ /* faint neon rule doubling the border, like a tube under glass */
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,46,136,.7) 15%, rgba(0,229,255,.5) 55%, transparent 92%);
  filter:blur(.5px);
}
.foot-brand{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-size:.68rem;
  letter-spacing:.26em;
  color:var(--dim);
}
.foot-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 6px var(--cyan), 0 0 12px var(--cyan);
  animation:hum 2.6s ease-in-out infinite;
  flex:0 0 auto;
}
.foot-num{ color:var(--yellow); text-shadow:0 0 8px rgba(255,227,61,.5); }
.foot-name{ color:var(--pink); text-shadow:0 0 8px rgba(255,46,136,.5); }
.foot-nav{ display:flex; gap:.9rem; align-items:center; font-size:.68rem; letter-spacing:.26em; color:var(--dim); }
.foot-nav a{
  position:relative;
  color:var(--cyan);
  text-decoration:none;
  text-shadow:0 0 8px rgba(0,229,255,.4);
  transition:color .3s, text-shadow .3s;
}
.foot-nav a:hover{ color:var(--pink); text-shadow:0 0 10px rgba(255,46,136,.7); }
.foot-nav a:focus-visible{ outline-offset:5px; }

/* ─────────────── RESPONSIVE ─────────────── */

@media (max-width:1100px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  :root{ --scale:.52; }
  .world{ left:56%; top:44%; }
  .tilt{ perspective-origin:55% 34%; }
  .cards{ grid-template-columns:1fr; }
  .card-copy{ min-height:0; }
  .dir-side{ display:none; }
  .masthead{ bottom:5rem; right:1.25rem; }
  .line-jp{ letter-spacing:.7em; }
  .ticker-run{ font-size:.68rem; }
  .dir-note{ flex-direction:column; align-items:flex-start; }
  .steam i{ display:none; }
  .steam i:nth-child(-n+2){ display:block; }
  /* the far-right signs fall outside the narrow frame at this scale — one
     (OK Electric) used to render half-cropped against the viewport edge,
     which read as a bug. Drop the ones the crop can't seat cleanly; the
     dying-letter technique still reads on the masthead's N. */
  #sign-electric, #sign-pharmacy, #sign-fortune, #sign-leaf, #sign-keys{ display:none; }
  .mist{ filter:blur(22px); }
}

/* ─────────────── REDUCED MOTION ─────────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .win.flick, .sign, .dying, .lanterns circle, .stall-glow,
  .puddle, .refl, .tube .wisp, .card:hover, .card:focus-visible, .card.lit, .foot-dot, .mist{
    animation:none !important;
  }
  .steam i{ animation:none; opacity:.4; transform:translate3d(10px,-80px,0) scale(1.3); }
  .ticker-track{ animation:none; }
  .masthead > *{ animation:none; opacity:1; transform:none; }
  .masthead, .ticker{ opacity:1 !important; transform:none !important; }
  .card{ opacity:1 !important; translate:0 !important; transition:border-color .5s var(--ease-sign), box-shadow .5s var(--ease-sign) !important; }
  .cursor-glow{ display:none; }
}