/* =========================================================
   職人の手しごと / Shokunin — site styles
   Section 1 (tokens) is shared with the legal pages.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Type */
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif SC", "Songti SC", "Noto Serif Devanagari", serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);   /* 30–44 */
  --fs-3xl: clamp(2.6rem, 1.4rem + 5.4vw, 5.25rem);     /* 42–84 hero */
  --fs-num: clamp(5rem, 2.5rem + 11vw, 10rem);          /* 80–160 */
  --lh-body: 1.8;
  --lh-tight: 1.25;

  /* Space (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --gutter: 16px;
  --container: 1120px;

  /* Shape */
  --radius-sm: 6px; --radius-md: 14px; --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.2, 1.5, 0.4, 1);
  --ease-slam: cubic-bezier(0.5, 0, 0.75, 0);
  --dur-reveal: 0.9s;

  /* Fixed colours (both themes) */
  --c-gold: #c8a24a;  --c-gold-ink: #1a150e;
  --c-shu: #c0402b;   --c-ai: #2c4d8c;
  --c-lantern: #ffb54a; --c-moss: #7d8a3c;
  --c-night: #0d132b; --c-night-2: #141c3e;

  /* Theme: morning washi (light, default) */
  --bg: #f3ede1; --bg-raise: #fbf8f1;
  --ink: #1d1a16; --ink-soft: #5b5347;
  --line: #ddd2bf; --accent: #7d5f17; --focus: #2c4d8c;
  --dawn-1: #2b2346; --dawn-2: #9a6466; --dawn-3: #e2b08a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120f; --bg-raise: #1f1b16;
    --ink: #ece4d3; --ink-soft: #b3a894;
    --line: #3a3128; --accent: #d6b25a; --focus: #f0c46a;
    --dawn-1: #1d1830; --dawn-2: #3a2626; --dawn-3: #261c16;
  }
}
.night {
  --bg: var(--c-night); --bg-raise: var(--c-night-2);
  --ink: #f1ead9; --ink-soft: #bcb6c9; --line: #2a3360;
  --accent: #e2bd62; --focus: #f0c46a;
  background: var(--bg); color: var(--ink);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--c-night); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-body); overflow-x: clip; }
html[lang="ja"] body { word-break: auto-phrase; line-break: strict; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); text-wrap: balance; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--sp-4); top: -100px; z-index: 50; background: var(--c-gold); color: var(--c-gold-ink); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-sm); }
.skip:focus { top: var(--sp-4); }
html:not([lang="ja"]) [data-only="ja"], html[lang="ja"] [data-only="intl"] { display: none !important; }
html.pre-swap body { opacity: 0; animation: unhide 0s 1.2s forwards; }
@keyframes unhide { to { opacity: 1; } }

/* ---------- 3. Header & scroll progress ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 40; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #f0a23a, var(--c-gold)); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 30; color: #f1ead9; transition: background-color 0.4s, backdrop-filter 0.4s; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); }
.scrolled .site-header { background: rgba(13, 19, 43, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; color: inherit; text-decoration: none; opacity: 0; transform: translateY(-6px); transition: opacity 0.4s, transform 0.4s var(--ease-out); pointer-events: none; }
.scrolled .brand { opacity: 1; transform: none; pointer-events: auto; }
.brand:hover { color: inherit; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.brand span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; }
.lang { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 10px; border: 1px solid rgba(241, 234, 217, 0.25); border-radius: var(--radius-pill); background: rgba(13, 19, 43, 0.5); color: #f1ead9; cursor: pointer; }
.lang:hover, .lang:focus-within { border-color: rgba(241, 234, 217, 0.6); }
.lang svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.lang select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: 600 var(--fs-sm)/1 var(--font-body); padding: 10px 14px 10px 0; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 4px center, right 0 center; background-size: 4px 4px; background-repeat: no-repeat; }
.lang select:focus { outline: none; }
.lang:focus-within { outline: 2px solid var(--focus, #f0c46a); outline-offset: 2px; }
.lang option { color: #1d1a16; background: #fbf8f1; }

/* ---------- 4. Buttons ---------- */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.store { position: relative; overflow: hidden; display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; min-width: 176px; padding: var(--sp-2) var(--sp-5); border-radius: 12px; text-decoration: none; line-height: 1.25; text-align: left; }
.store small { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.store b { font-size: var(--fs-md); letter-spacing: 0.02em; }
.store--play { background: var(--c-gold); color: var(--c-gold-ink); box-shadow: 0 10px 30px -12px rgba(200, 162, 74, 0.75); transition: transform 0.25s var(--ease-snap), box-shadow 0.25s; }
.store--play::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 214, 0.7) 50%, transparent 60%); transform: translateX(-130%); animation: glint 5s 2.5s ease-in-out infinite; }
.store--play:hover { color: var(--c-gold-ink); transform: translateY(-2px); }
.store--play:active { transform: scale(0.97); }
.store--soon { border: 1px dashed var(--line); color: var(--ink-soft); }
@keyframes glint { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }

/* ---------- 5. Hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 88px 0 120px; overflow: hidden; isolation: isolate; text-align: center; }
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stars { position: absolute; inset: 0; opacity: 0.9;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 60%, transparent), radial-gradient(1px 1px at 28% 8%, #fff 60%, transparent),
    radial-gradient(1.4px 1.4px at 44% 22%, #fff 60%, transparent), radial-gradient(1px 1px at 63% 12%, #fff 60%, transparent),
    radial-gradient(1.3px 1.3px at 78% 28%, #fff 60%, transparent), radial-gradient(1px 1px at 90% 6%, #fff 60%, transparent),
    radial-gradient(1px 1px at 8% 40%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 35% 44%, #fff 60%, transparent),
    radial-gradient(1px 1px at 56% 36%, #fff 60%, transparent), radial-gradient(1.2px 1.2px at 86% 46%, #fff 60%, transparent);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 0.95; } }
.moon { position: absolute; right: 10%; top: 14%; width: 76px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fbecc2, #d9b779 72%); box-shadow: 0 0 60px 20px rgba(246, 223, 166, 0.18), 0 0 160px 60px rgba(246, 223, 166, 0.07); transform: translateY(calc(var(--hp, 0) * 80px)); }
.ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26%; transform: translateY(calc(var(--hp, 0) * -40px)); }
.embers i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #ffb54a; box-shadow: 0 0 8px 2px rgba(255, 181, 74, 0.7); opacity: 0; animation: ember 9s linear infinite; }
.embers i:nth-child(1)  { left: 8%;  animation-delay: 0s; }
.embers i:nth-child(2)  { left: 17%; animation-delay: -2s; animation-duration: 11s; }
.embers i:nth-child(3)  { left: 26%; animation-delay: -5s; }
.embers i:nth-child(4)  { left: 35%; animation-delay: -7s; animation-duration: 12s; }
.embers i:nth-child(5)  { left: 44%; animation-delay: -1s; }
.embers i:nth-child(6)  { left: 53%; animation-delay: -4s; animation-duration: 10s; }
.embers i:nth-child(7)  { left: 62%; animation-delay: -8s; }
.embers i:nth-child(8)  { left: 70%; animation-delay: -3s; animation-duration: 13s; }
.embers i:nth-child(9)  { left: 78%; animation-delay: -6s; }
.embers i:nth-child(10) { left: 86%; animation-delay: -2.5s; animation-duration: 11s; }
.embers i:nth-child(11) { left: 93%; animation-delay: -9s; }
.embers i:nth-child(12) { left: 50%; animation-delay: -10s; animation-duration: 14s; }
@keyframes ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 10% { opacity: 1; } 50% { transform: translate(24px, -45vh) scale(0.8); } 100% { opacity: 0; transform: translate(-16px, -90vh) scale(0.3); } }

.hero__inner { display: flex; flex-direction: column; align-items: center; transform: translateY(calc(var(--hp, 0) * -70px)); opacity: calc(1 - var(--hp, 0) * 1.4); }
.crest { width: min(84vw, 440px); height: auto; margin-bottom: var(--sp-6); overflow: visible; transform: scale(calc(1 + var(--hp, 0) * 0.25)); }
.crest .motif { transform-box: fill-box; }
.crest .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 0.45s + var(--o, 0s) + 0.25s); }
.crest .motif { --i: 0; }
.crest .motif--bowl .draw { animation-delay: calc(0.45s + var(--o, 0s) + 0.25s); }
.crest .motif--garden .draw { animation-delay: calc(0.9s + var(--o, 0s) + 0.25s); }
.crest .motif__fill { opacity: 0; animation: lanternOn 0.8s 1.4s var(--ease-out) forwards, flicker 3.2s 2.2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255, 181, 74, 0.8)); }
.crest .motif__gold { filter: drop-shadow(0 0 6px rgba(255, 213, 106, 0.9)); animation-delay: 1.6s; }
.crest .motif__stone { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop 0.6s 2s var(--ease-snap) forwards; }
.crest .motif--garden circle.draw { transform-box: fill-box; transform-origin: center; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes lanternOn { to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes flicker { 0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 181, 74, 0.8)) brightness(1); } 45% { filter: drop-shadow(0 0 18px rgba(255, 181, 74, 0.95)) brightness(1.12); } 60% { filter: drop-shadow(0 0 10px rgba(255, 181, 74, 0.7)) brightness(0.95); } }

.hero__title { display: flex; flex-direction: column; align-items: center; }
.hero__ja { font-size: var(--fs-3xl); letter-spacing: 0.08em; }
.hero__en { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--accent); letter-spacing: 0.12em; margin-top: var(--sp-1); }
html:not([lang="ja"]) .hero__title { flex-direction: column-reverse; }
html:not([lang="ja"]) .hero__ja { font-size: var(--fs-xl); color: var(--accent); letter-spacing: 0.2em; font-weight: 500; margin-top: var(--sp-1); }
html:not([lang="ja"]) .hero__en { font-size: var(--fs-3xl); color: var(--ink); font-weight: 700; letter-spacing: 0.04em; margin-top: 0; }
.hero__lead { margin-top: var(--sp-5); max-width: 30em; color: var(--ink-soft); font-size: var(--fs-md); }
.hero .stores { margin-top: var(--sp-6); }
.js .hero__title, .js .hero__lead, .js .hero .stores { animation: rise 1s var(--ease-out) both; }
.js .hero__title { animation-delay: 0.9s; }
.js .hero__lead { animation-delay: 1.15s; }
.js .hero .stores { animation-delay: 1.35s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.cue { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); opacity: calc(1 - var(--hp, 0) * 4); }
.cue i { display: block; width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, var(--accent)); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.dawn { height: 180px; background: linear-gradient(to bottom, var(--c-night) 0%, var(--dawn-1) 30%, var(--dawn-2) 60%, var(--dawn-3) 84%, var(--bg) 100%); }
.dusk { height: 180px; background: linear-gradient(to top, var(--c-night) 0%, var(--dawn-1) 30%, var(--dawn-2) 60%, var(--dawn-3) 84%, var(--bg) 100%); }

/* ---------- 6. Scroll scenes ---------- */
.scene { position: relative; --p: 1; }
.js .scene { height: calc(var(--len) * 1vh); --p: 0; }
.scene__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-3); padding: 68px var(--gutter) var(--sp-5); max-width: 1240px; margin-inline: auto; }
.scene__ghost { position: absolute; z-index: 0; right: -4vw; top: 50%; font-size: min(70vh, 120vw); line-height: 1; color: currentColor; opacity: 0.045; pointer-events: none; white-space: nowrap; transform: translateY(calc(-50% + (0.5 - var(--p)) * 24vh)); }
.scene__text { position: relative; z-index: 1; --t: min(1, calc(var(--p) * 12)); opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 24px)); }
.scene__no { display: block; font-size: var(--fs-xs); letter-spacing: 0.24em; color: var(--accent); font-variant-numeric: tabular-nums; }
.scene__name { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-1); }
.scene__kanji { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); line-height: 1; letter-spacing: 0.04em; }
.scene__roman { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--accent); letter-spacing: 0.06em; }
.scene__line { margin-top: var(--sp-2); font-size: var(--fs-md); line-height: 1.6; }
.scene__bar { margin-top: var(--sp-3); width: 120px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.scene__bar i { display: block; height: 100%; background: var(--c-gold); transform-origin: left; transform: scaleX(var(--p)); }
.scene__art { position: relative; z-index: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.art { width: 100%; height: 100%; max-height: 100%; display: block; overflow: visible; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35)); }
.scene__art.thud { animation: thud 0.4s var(--ease-out); }
@keyframes thud { 0% { transform: none; } 25% { transform: translateY(5px) scale(0.985); } 60% { transform: translateY(-2px); } 100% { transform: none; } }
@media (min-width: 900px) {
  .scene__sticky { grid-template-columns: minmax(280px, 0.8fr) 1.2fr; grid-template-rows: 1fr; align-items: center; gap: var(--sp-8); padding: 72px 48px 32px; }
  .scene__kanji { font-size: clamp(4rem, 2rem + 4vw, 6.5rem); }
  .scene__line { font-size: var(--fs-xl); font-family: var(--font-display); }
  .scene__bar { width: 200px; margin-top: var(--sp-5); }
  .scene__art { height: 100%; padding-block: var(--sp-4); }
  .scene--kintsugi .scene__text { order: 2; }
}
.scene--kintsugi, .scene--karesansui { background: var(--bg); }

/* stamp (all scenes) */
.js .stamp { opacity: 0; }
.js .stamp.on { animation: slam 0.42s var(--ease-slam) forwards, settle 0.28s 0.42s var(--ease-snap) forwards; }
@keyframes slam { 0% { opacity: 0; transform: scale(2.8) rotate(-14deg); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(0.92); } }
@keyframes settle { from { opacity: 1; transform: scale(0.92); } to { opacity: 1; transform: none; } }

/* 灯 */
.art--akari .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fire 0.9s ease-in-out infinite alternate; }
@keyframes fire { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(0.94, 1.08) skewX(3deg); } 100% { transform: scale(1.04, 0.95) skewX(-2deg); } }
.js .ak-l .lantern__lit, .js .ak-l .lantern__halo { opacity: 0; transition: opacity 0.35s ease; }
.js .ak-l.on .lantern__lit, .js .ak-l.on .lantern__halo { opacity: 1; }
.ak-l { transform-box: fill-box; transform-origin: 50% 0; }
.js .ak-l.on { animation: swing 0.9s var(--ease-out); }
@keyframes swing { 0% { transform: rotate(0); } 25% { transform: rotate(7deg) scale(1.08); } 55% { transform: rotate(-4deg); } 100% { transform: none; } }
.mirror__ring { transform-box: fill-box; transform-origin: center; }
.mirror.go .mirror__ring { animation: ringOut 0.6s var(--ease-out); }
@keyframes ringOut { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(1.5); } }
.sky-l { transform-box: fill-box; transform-origin: center; }
.js #akSkyLanterns:not(.up) .sky-l { opacity: 0; transform: translateY(40px); }
.js #akSkyLanterns .sky-l { transition: opacity 1.2s ease, transform 2.4s var(--ease-out); transition-delay: var(--d, 0s); }
#akSkyLanterns.up .sky-l, html:not(.js) .sky-l { animation: drift 5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes drift { from { translate: 0 0; } to { translate: 4px -10px; } }

/* 金継ぎ */
#kPlateWrap { transition: transform 0.8s var(--ease-out); }
#kPlateWrap.lift { transform: translateY(-6px) scale(1.025); }
.shard.go .shard__flash { animation: flash 0.55s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.js #kSparks:not(.on) .spark { opacity: 0; }
#kSparks.on .spark { transform-box: fill-box; animation: sparkle 1.6s var(--d, 0s) ease-out infinite; }
@keyframes sparkle { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1.2); } }

/* 枯山水 */
.leaf { transition: opacity 0.35s ease; }
.ripple { transform-box: fill-box; transform-origin: center; }
.js #zRipples:not(.on) .ripple { opacity: 0; }
#zRipples.on .ripple { animation: ripple 1.6s var(--d, 0s) var(--ease-out) both; }
@keyframes ripple { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

/* ---------- 7. How it works ---------- */
.how { padding-block: var(--sp-9); }
.how__title { font-size: var(--fs-2xl); letter-spacing: 0.06em; text-align: center; }

.cards { margin-top: var(--sp-8); display: grid; gap: var(--sp-4); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-6) var(--sp-5) var(--sp-5); text-align: center; color: var(--ink); }
.card h3 { margin-top: var(--sp-4); font-size: var(--fs-xl); letter-spacing: 0.04em; }
.card p { margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7; }
.card .price { display: inline-block; margin-top: var(--sp-2); color: var(--ink); font-weight: 600; }
.card .price small { display: block; font-weight: 400; color: var(--ink-soft); font-size: var(--fs-xs); }
.pict { width: 100%; max-width: 300px; height: 70px; color: var(--ink); overflow: visible; }

.dot { fill: var(--line); transform-box: fill-box; transform-origin: center; }
.js .card--free.in .dot--on { animation: dotOn 0.45s calc(var(--i) * 0.11s + 0.2s) var(--ease-snap) both; }
html:not(.js) .dot--on, .rm .dot--on { fill: var(--c-gold); }
@keyframes dotOn { from { fill: var(--line); transform: scale(0.4); } to { fill: var(--c-gold); transform: none; filter: drop-shadow(0 0 4px rgba(255, 181, 74, 0.8)); } }

.card--pass .p-ad, .card--pass .p-card, .card--pass .p-x2, .card--pass .p-lock { transform-box: fill-box; transform-origin: center; }
.card--pass .p-arrow { stroke-dasharray: 1; }
.js .card--pass:not(.in) .p-ad, .js .card--pass:not(.in) .p-cards, .js .card--pass:not(.in) .p-lock { opacity: 0; }
.js .card--pass:not(.in) .p-arrow { stroke-dashoffset: 1; }
.js .card--pass.in .p-ad { animation: pop 0.5s 0.15s var(--ease-snap) both; }
.js .card--pass.in .p-arrow { animation: draw 0.45s 0.6s ease-out both; stroke-dashoffset: 1; }
.js .card--pass.in .p-cards { animation: pop 0.5s 1s var(--ease-snap) both; }
.card--pass .p-card--b { transform-origin: 50% 100%; }
.js .card--pass.in .p-card--b { animation: fan 0.5s 1.35s var(--ease-snap) both; }
.js .card--pass.in .p-arrow--2 { animation-delay: 1.6s; }
.js .card--pass.in .p-lock { animation: pop 0.5s 1.9s var(--ease-snap) both; }
.js .card--pass.in .p-shackle { animation: unlock 0.5s 2.4s var(--ease-snap) both; }
.card--pass .p-shackle { transform-box: fill-box; transform-origin: 0% 100%; }
html:not(.js) .p-card--b, .rm .p-card--b { transform: rotate(14deg) translate(10px, -2px); }
@keyframes fan { from { transform: none; } to { transform: rotate(14deg) translate(10px, -2px); } }
@keyframes unlock { from { transform: none; } to { transform: translateY(-5px) rotate(-18deg); stroke: var(--c-gold); } }

.p-inf { stroke-dasharray: 0.22 0.78; }
.js .card--unl.in .p-inf { animation: loop 2.6s linear infinite; }
@keyframes loop { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.chips { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.chips li { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4) 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg-raise); font-size: var(--fs-sm); font-weight: 600; }
.chips svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.js .chips.reveal li { opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity 0.5s, transform 0.6s var(--ease-snap); }
.js .chips.reveal.in li { opacity: 1; transform: none; }
.chips li:nth-child(2) { transition-delay: 0.08s; } .chips li:nth-child(3) { transition-delay: 0.16s; }
.chips li:nth-child(4) { transition-delay: 0.24s; } .chips li:nth-child(5) { transition-delay: 0.32s; }
.footnote { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-xs); color: var(--ink-soft); }

/* ---------- 8. Real screens (marquee) ---------- */
.screens { padding-block: var(--sp-6) var(--sp-9); overflow: hidden; }
.screens__title { text-align: center; font-size: var(--fs-xl); letter-spacing: 0.08em; margin-bottom: var(--sp-6); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: var(--sp-5); width: max-content; animation: marquee 70s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus .marquee__track { animation-play-state: paused; }
.shot { margin: 0; width: 150px; padding: 5px; border-radius: 22px; background: #0a0a0b; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.6); flex: none; }
.shot img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 17px; background: #1a1714; }
@media (min-width: 900px) { .shot { width: 200px; } }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--sp-5) / 2)); } }

/* ---------- 9. Closing ---------- */
.closing { text-align: center; padding-block: var(--sp-8) var(--sp-10); position: relative; overflow: hidden; isolation: isolate; }
.closing::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 20px; translate: -50% 0; width: 680px; height: 560px; background: radial-gradient(closest-side, rgba(240, 162, 58, 0.26), transparent); animation: breathe 6s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: 0.7; transform: scale(0.94); } to { opacity: 1; transform: scale(1.05); } }
.closing__line { font-size: var(--fs-xl); line-height: 1.8; max-width: 22em; margin-inline: auto; }
.closing .stores { margin-top: var(--sp-7); }
.lantern { width: 72px; margin: 0 auto var(--sp-6); transform-origin: 50% -40px; animation: sway 4.5s ease-in-out infinite alternate; }
.lantern::before { content: ""; display: block; width: 1px; height: 30px; margin: 0 auto; background: rgba(241, 234, 217, 0.4); }
.lantern span { display: block; position: relative; width: 72px; height: 94px; border-radius: 46% / 40%;
  background: repeating-linear-gradient(to bottom, transparent 0 10px, rgba(120, 40, 10, 0.35) 10px 11px), radial-gradient(ellipse at 50% 45%, #ffe7a8 0%, #f6b24c 45%, #c85a20 100%);
  box-shadow: 0 0 40px 10px rgba(240, 162, 58, 0.45), 0 0 120px 30px rgba(240, 162, 58, 0.2); animation: lanternFlicker 3.2s ease-in-out infinite; }
.lantern span::before, .lantern span::after { content: ""; position: absolute; left: 50%; translate: -50% 0; width: 38px; height: 8px; border-radius: 2px; background: #2a1a12; }
.lantern span::before { top: -4px; } .lantern span::after { bottom: -4px; }
@keyframes sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes lanternFlicker { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.12); } 55% { filter: brightness(0.95); } 70% { filter: brightness(1.06); } }

/* ---------- 10. Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--sp-7) var(--sp-8); font-size: var(--fs-sm); color: var(--ink-soft); }
.site-footer .wrap { display: grid; gap: var(--sp-6); }
.foot-brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.foot-brand img { width: 40px; height: 40px; border-radius: 10px; }
.foot-brand span { font-size: var(--fs-lg); letter-spacing: 0.06em; }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.site-footer nav a:hover { text-decoration: underline; }
.site-footer dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); }
.site-footer dd { margin: 0; color: var(--ink); }
@media (min-width: 900px) { .site-footer .wrap { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-8); } }

/* ---------- 11. Scroll reveal ---------- */
.js .reveal:not(.chips) { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.cards .card:nth-child(2) { transition-delay: 0.1s; } .cards .card:nth-child(3) { transition-delay: 0.2s; }

/* ---------- 12. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .scene { height: auto; }
  .scene__sticky { position: relative; height: auto; min-height: 100svh; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
  .embers, .store--play::after, .cue { display: none; }
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .js .reveal:not(.chips), .js .chips.reveal li { opacity: 1; transform: none; }
}

/* ---------- 13. Small-screen tweaks ---------- */
.card .price > span { display: block; }
@media (max-width: 899px) {
  .moon { width: 48px; right: 6%; top: 76px; }
}
.scene--kintsugi .scene__ghost { right: auto; left: -4vw; }
@media (min-width: 900px) { .crest { width: 560px; } }


/* ---------- 14. Scene effects: rings, bursts, rays, flows (flat, ukiyo-e; motion does the work) ---------- */
.scene__art.nudge { animation: nudge 0.28s var(--ease-out); }
@keyframes nudge { 0% { transform: none; } 35% { transform: translateY(2px) scale(0.995); } 100% { transform: none; } }

.fx-burst circle { opacity: 0; }
.fx-burst.go circle { animation: fxBurst var(--t, 0.8s) var(--ease-out) forwards; }
@keyframes fxBurst {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(2px) scale(1.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.2); }
}
.fx-shock circle { opacity: 0; vector-effect: non-scaling-stroke; }
.fx-shock.go circle { animation: fxShock 0.75s var(--ease-out) forwards; }
@keyframes fxShock { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(5.5); } }
.fx-flash { pointer-events: none; mix-blend-mode: screen; }
.fx-flash.go { animation: fxFlash 0.8s ease-out; }
@keyframes fxFlash { 0% { opacity: 0.55; } 100% { opacity: 0; } }

.fx-rays { transition: opacity 1.4s ease; }
.fx-rays.on, html:not(.js) .fx-rays { opacity: 1; }
.fx-rays__spin { animation: raySpin 70s linear infinite; }
.fx-rays.on .fx-rays__spin { animation: raySpin 70s linear infinite, rayIn 1.6s var(--ease-out); }
@keyframes raySpin { to { rotate: 360deg; } }
@keyframes rayIn { from { scale: 0.2; } to { scale: 1; } }

.flow { stroke-dasharray: 0.07 0.93; opacity: 0; filter: drop-shadow(0 0 4px #fff2c4); }
#akFlow.on .flow, #kFlow.on .flow { opacity: 1; animation: flowRun 1.5s linear infinite; }
#kFlow.on .flow { animation-duration: 2.2s; }
#akFlow.on .flow:nth-child(2) { animation-delay: -0.5s; } #akFlow.on .flow:nth-child(3) { animation-delay: -1s; }
@keyframes flowRun { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

#akHead { transition: opacity 0.2s; mix-blend-mode: screen; }
#akBoardGlow { transition: opacity 0.8s; }
#akBoardGlow.on { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 217, 138, 0.9)); animation: boardPulse 2.4s ease-in-out infinite alternate; }
@keyframes boardPulse { from { stroke-opacity: 0.5; } to { stroke-opacity: 1; } }
.js .ak-l.on .lantern__halo { animation: haloPulse 2.6s ease-in-out infinite alternate; }
@keyframes haloPulse { from { opacity: 0.75; } to { opacity: 1; } }
.kasumi rect { animation: kasumi 16s ease-in-out infinite alternate; }
.kasumi rect + rect { animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes kasumi { from { translate: -18px 0; } to { translate: 26px 0; } }

#kSheen { opacity: 0; }
#kSheen.go { animation: sheenPass 1.2s 0.1s var(--ease-out); }
@keyframes sheenPass { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 1; translate: 640px 0; } }

#zShimmer.go { animation: shimmer 1.6s ease-out; }
@keyframes shimmer { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 1; translate: 620px 0; } }
#zOrb { mix-blend-mode: screen; }
#zRipples.on .ripple { animation: ripple 1.6s var(--d, 0s) var(--ease-out) both, wave 3.2s calc(var(--d, 0s) + 1.6s) ease-in-out infinite alternate; }
@keyframes wave { from { transform: none; opacity: 1; } to { transform: scale(1.12); opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .fx-burst, .fx-shock, .fx-flash, #akHead, #zOrb, #zTrail { display: none; }
}

html[lang="hi"] .hero__ja, html[lang="zh-Hans"] .hero__ja { letter-spacing: 0.12em; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] .scene__line { line-height: 1.5; }