/* from 6d618326 */

.fig{ display:block; overflow:visible; }
.fig.glow{ filter:drop-shadow(0 0 7px var(--rimglow,rgba(240,220,165,.5))); }
.fig .rim{ fill:none; stroke:var(--rim,#f0dca5); stroke-width:1.4; opacity:.85; stroke-linejoin:round; }
.fig .body{ fill:url(#figGrad); }
.fig .hair{ fill:#120c09; }
.fig .skin{ fill:#caa079; }
.fig .accent{ fill:var(--acc,#c9a961); }
.fig .leg-a,.fig .leg-b,.fig .arm-a,.fig .arm-b{ will-change:transform; }
.fig .leg-a{ animation:fig-stride .68s ease-in-out infinite; animation-delay:var(--ph,0s); }
.fig .leg-b{ animation:fig-stride .68s ease-in-out infinite; animation-delay:calc(var(--ph,0s) - .34s); }
.fig .arm-a{ animation:fig-swing .68s ease-in-out infinite; animation-delay:calc(var(--ph,0s) - .34s); }
.fig .arm-b{ animation:fig-swing .68s ease-in-out infinite; animation-delay:var(--ph,0s); }
@keyframes fig-stride{ 0%,100%{transform:rotate(18deg)} 50%{transform:rotate(-18deg)} }
@keyframes fig-swing{ 0%,100%{transform:rotate(-13deg)} 50%{transform:rotate(13deg)} }
@media (prefers-reduced-motion: reduce){ .fig *{ animation:none !important; } }

/* from 98e22416 */

.mascot{ display:block; overflow:visible; pointer-events:none; }
.mascot.glowy{ filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,90,160,.55)); }
.mascot .ms-tail{ transform-origin:170px 118px; animation:ms-tail 2.2s ease-in-out infinite; }
@keyframes ms-tail{ 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(15deg)} }
.mascot .ms-hair-l{ transform-origin:64px 52px; animation:ms-sway 3.4s ease-in-out infinite; }
.mascot .ms-hair-r{ transform-origin:140px 52px; animation:ms-sway 3.4s ease-in-out infinite reverse; }
@keyframes ms-sway{ 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3.5deg)} }
.mascot .ms-eyes{ transform-origin:center 70px; animation:ms-blink 5.2s steps(1,end) infinite; }
@keyframes ms-blink{ 0%,94%,100%{transform:scaleY(1)} 96%{transform:scaleY(.12)} }
.mascot .ms-float{ animation:ms-float 4.6s ease-in-out infinite; }
@keyframes ms-float{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-7px) rotate(1deg)} }
.mascot .ms-leg{ transform-origin:120px 70px; animation:ms-kick 3s ease-in-out infinite; }
@keyframes ms-kick{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-5deg)} }
@media (prefers-reduced-motion: reduce){ .mascot *{ animation:none !important; } }

/* from d60e3674 */

.mb-hero { position:relative; width:100%; height:460px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(201,169,97,.14), transparent 46%),
    radial-gradient(90% 80% at 18% 0%, rgba(122,41,53,.30), transparent 52%),
    linear-gradient(#120b10 0%, #160d10 38%, #0c0908 70%, #0a0908 100%);
  border-bottom:1px solid var(--border); isolation:isolate; }
@media (max-width:768px){ .mb-hero{ height:380px; } }

/* stars / grain */
.mb-stars{ position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1px 1px at 20% 18%, #fff, transparent),
    radial-gradient(1px 1px at 62% 12%, #f3ece1, transparent),
    radial-gradient(1px 1px at 82% 26%, #c9a961, transparent),
    radial-gradient(1px 1px at 40% 30%, #fff, transparent),
    radial-gradient(1px 1px at 8% 36%, #c9a961, transparent);
  animation:mb-twinkle 5s ease-in-out infinite; }
@keyframes mb-twinkle{ 0%,100%{opacity:.35} 50%{opacity:.7} }

.mb-moon{ position:absolute; top:46px; right:14%; width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #f6ecd6, #d8c188 60%, #b89a52);
  box-shadow:0 0 50px 12px rgba(201,169,97,.30); }

/* parallax skyline layers */
.mb-layer{ position:absolute; left:0; bottom:34%; display:flex; align-items:flex-end; gap:0;
  height:46%; width:200%; will-change:transform; }
.mb-layer.far{ bottom:36%; height:38%; opacity:.55; filter:brightness(.7); animation:mb-drift 90s linear infinite; }
.mb-layer.near{ bottom:34%; height:50%; animation:mb-drift 60s linear infinite; }
@keyframes mb-drift{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.mb-bldg{ flex:0 0 auto; background:linear-gradient(#1d1411,#100b0a); border-top:1px solid #2a201a;
  position:relative; }
.mb-bldg::before{ content:''; position:absolute; inset:6px 5px auto 5px; height:60%;
  background-image:
    linear-gradient(90deg, transparent 35%, rgba(201,169,97,.0) 0),
    repeating-linear-gradient(90deg, rgba(201,169,97,.55) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(0deg, rgba(201,169,97,.5) 0 3px, transparent 3px 10px);
  background-blend-mode:multiply; opacity:.5; }

/* Tsutenkaku tower */
.mb-tower{ position:absolute; bottom:34%; left:9%; width:64px; height:46%; z-index:2;
  display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 0 18px rgba(201,169,97,.25)); }
.mb-tower .tip{ width:3px; height:26px; background:linear-gradient(#f6e6b8,#c9a961); border-radius:2px;
  box-shadow:0 0 12px 3px rgba(201,169,97,.8); animation:mb-beacon 2.4s ease-in-out infinite; }
@keyframes mb-beacon{ 0%,100%{opacity:.55} 50%{opacity:1} }
.mb-tower .body{ width:34px; flex:1; clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);
  background:linear-gradient(#241813,#15100c);
  border-left:1px solid rgba(201,169,97,.18); border-right:1px solid rgba(201,169,97,.18); position:relative; }
.mb-tower .ring{ position:absolute; left:-7px; right:-7px; height:4px; border-radius:3px;
  background:rgba(201,169,97,.45); box-shadow:0 0 8px rgba(201,169,97,.6); }
.mb-tower .ring.r1{ bottom:62%; } .mb-tower .ring.r2{ bottom:40%; left:-11px; right:-11px; }
.mb-tower .ring.r3{ bottom:18%; left:-15px; right:-15px; }
.mb-tower .base{ width:58px; height:14px; background:linear-gradient(#241813,#120c09);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); }

/* neon billboards */
.mb-neon{ position:absolute; z-index:2; border-radius:5px; opacity:.92;
  animation:mb-flicker 4s steps(1) infinite; }
@keyframes mb-flicker{ 0%,93%,100%{opacity:.92} 94%{opacity:.5} 96%{opacity:.95} 97%{opacity:.6} }
.mb-neon.b1{ top:40%; left:18%; width:88px; height:28px;
  background:linear-gradient(120deg,#ff2f8e,#ff97c4); box-shadow:0 0 32px 8px rgba(255,80,160,.75); }
.mb-neon.b2{ top:15%; left:58%; width:64px; height:46px;
  background:linear-gradient(120deg,#16a0d8,#7ee9ff); box-shadow:0 0 32px 8px rgba(80,215,255,.7); }
.mb-neon.b3{ top:40%; left:74%; width:76px; height:26px;
  background:linear-gradient(120deg,#c9a961,#ffe6a8); box-shadow:0 0 32px 8px rgba(201,169,97,.75); }
.mb-neon.b4{ top:20%; left:34%; width:42px; height:42px; border-radius:50%;
  background:radial-gradient(circle,#ff97c4,#ff2f8e); box-shadow:0 0 30px 9px rgba(255,80,160,.65); }
.mb-neon.b5{ top:47%; left:47%; width:54px; height:22px;
  background:linear-gradient(120deg,#b06bff,#e6b8ff); box-shadow:0 0 28px 7px rgba(176,107,255,.62); }
.mb-neon.b6{ top:12%; left:11%; width:48px; height:32px;
  background:linear-gradient(120deg,#ff5f6d,#ffd16d); box-shadow:0 0 28px 7px rgba(255,95,109,.6); }

/* floating hearts + kira-kira sparkles */
.mb-heart{ position:absolute; z-index:3; font-size:18px; line-height:1; color:#ff4f9e; opacity:0;
  text-shadow:0 0 10px rgba(255,80,160,.95),0 0 22px rgba(255,80,160,.55); pointer-events:none;
  animation:mb-rise 7s ease-in infinite; }
@keyframes mb-rise{ 0%{transform:translateY(0) scale(.55); opacity:0}
  14%{opacity:.95} 78%{opacity:.85} 100%{transform:translateY(-300px) scale(1.15); opacity:0} }
.mb-spark{ position:absolute; z-index:3; color:#ffe6a8; font-size:14px; line-height:1; pointer-events:none;
  text-shadow:0 0 9px rgba(255,224,160,.95),0 0 18px rgba(255,160,210,.6);
  animation:mb-kira 2.6s ease-in-out infinite; }
@keyframes mb-kira{ 0%,100%{opacity:0; transform:scale(.3) rotate(0)} 50%{opacity:1; transform:scale(1) rotate(60deg)} }

/* mascot placement */
.mb-mascot-peek{ position:absolute; z-index:7; top:24px; left:calc(50% - 452px); pointer-events:none; }
.mb-mascot-recline{ position:absolute; z-index:7; right:1%; bottom:23%; pointer-events:none; }
@media (max-width:1100px){ .mb-mascot-peek{ left:2%; } }
@media (max-width:768px){
  .mb-mascot-peek{ top:10px; left:1%; transform:scale(.7); transform-origin:top left; }
  .mb-mascot-recline{ right:-3%; bottom:30%; transform:scale(.62); transform-origin:bottom right; }
}

/* legibility scrim behind copy */
.mb-scrim{ position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(130% 78% at 50% 26%, rgba(10,9,8,.62), rgba(10,9,8,.12) 52%, transparent 68%); }

/* Dotonbori canal */
.mb-canal{ position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(#0e0a0c 0%, #120a10 40%, #0a0808 100%);
  border-top:1px solid rgba(201,169,97,.10); overflow:hidden; }
.mb-canal::before{ content:''; position:absolute; left:0; right:0; top:0; height:62%;
  background:repeating-linear-gradient(90deg,
    rgba(200,164,160,.0) 0 26px, rgba(200,164,160,.16) 28px 31px, rgba(201,169,97,.0) 33px 64px,
    rgba(58,160,201,.14) 66px 70px, rgba(201,169,97,.18) 96px 100px);
  filter:blur(1.2px); animation:mb-ripple 6s ease-in-out infinite; transform-origin:center; }
@keyframes mb-ripple{ 0%,100%{transform:scaleY(1) translateX(0); opacity:.8} 50%{transform:scaleY(1.18) translateX(6px); opacity:1} }
.mb-bridge{ position:absolute; left:0; right:0; top:-1px; height:2px; background:rgba(201,169,97,.35);
  box-shadow:0 6px 16px rgba(0,0,0,.5); }
.mb-railing{ position:absolute; left:0; right:0; top:1px; height:9px;
  background:repeating-linear-gradient(90deg, rgba(201,169,97,.30) 0 1px, transparent 1px 16px); }

/* strolling visitors */
.mb-street{ position:absolute; left:0; right:0; bottom:0; height:34%; z-index:5; }
.mb-track{ position:absolute; bottom:8%; left:0; display:flex; align-items:flex-end; gap:clamp(20px,6vw,80px);
  padding-left:14%; will-change:transform; animation:mb-walk 34s linear infinite; }
@keyframes mb-walk{ from{transform:translateX(8%)} to{transform:translateX(-44%)} }
.mb-figure{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:mb-bob .68s ease-in-out infinite; }
@keyframes mb-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.mb-figure image-slot{ display:block; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
.mb-figure .shadow{ position:absolute; bottom:-12px; width:64%; height:12px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); }
.mb-flag{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  background:rgba(10,9,8,.62); border:1px solid rgba(201,169,97,.35); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:var(--display-en); font-style:italic; font-size:11px; letter-spacing:.12em; color:var(--gold); white-space:nowrap; }

/* overlay copy */
.mb-copy{ position:absolute; z-index:6; left:0; right:0; top:46px; text-align:center; padding:0 24px; pointer-events:none; }
.mb-eyebrow{ font-family:var(--display-en); font-style:italic; font-size:16px; color:var(--gold);
  letter-spacing:.34em; text-transform:uppercase; }
.mb-title{ font-family:var(--serif-jp); font-weight:300; font-size:clamp(30px,5.2vw,56px);
  letter-spacing:.12em; color:var(--text); margin-top:14px; line-height:1.18; text-shadow:0 2px 24px rgba(0,0,0,.6); }
.mb-title em{ font-family:var(--display-en); font-style:italic; color:var(--gold); font-weight:400; }
.mb-rule{ width:60px; height:1px; background:var(--gold); margin:20px auto 16px; }
.mb-tag{ font-size:13px; color:var(--text-mute); letter-spacing:.2em; }
@media (max-width:768px){ .mb-copy{ top:30px; } .mb-eyebrow{ font-size:13px; } }

.mb-hero[data-paused="true"] *{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){ .mb-hero *{ animation:none !important; } }