/* premium-site-craft kit — base layer. Load BEFORE your site.css; override the tokens there.
   Nothing here decides the look of your site except neutral defaults: the art direction lives in
   site.css (colours, type, layout). This file makes the machinery (GL canvas, cursor, curtain,
   menu, marquee, opening counter, reduced motion) behave. */

:root {
  /* colour — replace all of these in site.css */
  --bg: #0c0c0d;
  --fg: #ecEAe4;
  --mute: rgb(236 234 228 / .56);
  --line: rgb(236 234 228 / .14);
  --accent: #f0461f;
  --curtain-a: var(--accent);
  --curtain-b: var(--bg);

  /* type — site.css sets these to the families from assets/fonts/fonts.css */
  --f-display: Georgia, serif;
  --f-body: system-ui, sans-serif;
  --f-mono: ui-monospace, Menlo, monospace;
  --f-jp: "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-jp-serif: "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* space + motion */
  --pad: clamp(20px, 3.6vw, 64px);          /* page gutter */
  --gap: clamp(16px, 2vw, 32px);            /* grid gap */
  --section: clamp(120px, 16vw, 260px);     /* vertical rhythm between sections */
  --ease: cubic-bezier(.19, 1, .22, 1);     /* expo.out — arrivals */
  --ease-io: cubic-bezier(.76, 0, .24, 1);  /* wipes, curtains */
  --hdr: 80px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }            /* author CSS display:flex would otherwise beat the hidden attribute */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg);
  font-family: var(--f-body); line-height: 1.8; font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;                                /* clip, not hidden: hidden breaks position:sticky */
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--bg); }

/* Japanese typesetting defaults: proportional kana spacing, strict line breaking, no orphans */
:lang(ja) body, body:lang(ja) { line-break: strict; word-break: normal; overflow-wrap: anywhere; }
.k-palt { font-feature-settings: "palt" 1; }
.k-balance { text-wrap: balance; }
.k-pretty { text-wrap: pretty; }
.k-nowrap { white-space: nowrap; }
/* vertical writing (縦書き). Put <br> where columns must break; nowrap keeps columns intact */
.k-tate { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; font-feature-settings: "vpal" 1; }
.k-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- motion states ---------- */
/* SplitText wrappers */
.k-line { display: block; }
/* the opening only exists with JS; its own display (grid/flex) is up to site.css */
html:not(.js) [data-opening] { display: none; }
[data-opening] { position: fixed; inset: 0; z-index: 300; }
.is-ready [data-opening], .kit-failsafe [data-opening] { pointer-events: none; }
.kit-failsafe [data-opening], .kit-failsafe .k-curtain { display: none; }
.kit-failsafe body { overflow: auto; }
.is-locked body { overflow: clip; }

/* ---------- WebGL stage ---------- */
.k-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* content sits above the canvas (a fixed header already has its own z-index) */
.gl-on main, .gl-on footer { position: relative; z-index: 1; }
/* a figure whose plane is ready hides its <img>; if the texture failed the img stays */
.gl-on [data-gl]:not(.gl-fail) img { opacity: 0; }
.gl-on [data-plate] { color: transparent; }                   /* the glass layer draws plate text itself */
/* layout helpers for GL figures: give them a real box (aspect-ratio) so rects exist before load */
[data-gl] { position: relative; }
[data-gl] img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- cursor (created by ui.js) ---------- */
.k-cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; opacity: 0; transition: opacity .4s; }
.k-cursor.is-live { opacity: 1; }
.k-cursor__ring { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); mix-blend-mode: difference; display: grid; place-items: center; transition: width .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease); }
.k-cursor__label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .4s var(--ease); white-space: nowrap; }
.k-cursor__dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); }
.k-cursor.is-hover .k-cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.k-cursor.is-label .k-cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: #fff; box-shadow: none; }
.k-cursor.is-label .k-cursor__label { opacity: 1; }
.k-cursor.is-label .k-cursor__dot { opacity: 0; }
.k-cursor.is-down .k-cursor__ring { scale: .85; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }

/* ---------- page curtain (transition.js) ---------- */
.k-curtain { position: fixed; inset: 0; z-index: 500; pointer-events: none; visibility: hidden; }
.k-curtain__a, .k-curtain__b { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); }
.k-curtain__a { background: var(--curtain-a); }
.k-curtain__b { background: var(--curtain-b); }
.is-entering .k-curtain { visibility: visible; }
.is-entering .k-curtain__a, .is-entering .k-curtain__b { clip-path: inset(0 0 0 0); }

/* ---------- header behaviour (initHeader) ---------- */
[data-header] { transition: transform .8s var(--ease), background-color .6s var(--ease), color .8s var(--ease); }
[data-header].is-hidden { transform: translateY(-100%); }

/* ---------- full-screen menu (initMenu) ---------- */
.k-menu { position: fixed; inset: 0; z-index: 90; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-io); }
.k-menu.is-open { clip-path: inset(0 0 0 0); }

/* ---------- marquee ---------- */
[data-marquee] { overflow: hidden; }
[data-marquee] > * { display: flex; width: max-content; will-change: transform; }

/* ---------- horizontal gallery (pin.js horizontal) ---------- */
.k-hscroll { overflow: hidden; }
.k-hscroll__track { display: flex; width: max-content; gap: var(--gap); padding: 0 var(--pad); will-change: transform; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  /* phones, and reduced motion (no pin): a column, every panel whole, read by the page's own scroll. (Not a
     swipe row: a row leaves a photo cut at the screen's edge, and a page shown inside a frame — a window on
     another site — cannot be swiped sideways at all.) Size the panels for it in the site's own styles. */
  .k-hscroll { overflow: visible; }
  .k-hscroll__track { flex-direction: column; align-items: stretch; width: auto; }
}

/* ---------- sticky steps (pin.js steps) ---------- */
.k-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.k-steps__media { position: sticky; top: calc(50vh - min(40vh, 22vw)); height: min(80vh, 44vw); align-self: start; }
@media (max-width: 900px) { .k-steps { grid-template-columns: 1fr; } .k-steps__media { position: relative; top: 0; height: auto; aspect-ratio: 4 / 3; } }

/* ---------- tabs ---------- */
[data-tabs] [role="tablist"] { position: relative; display: flex; }
.k-tabs__bar { position: absolute; left: 0; bottom: 0; height: 1px; background: currentColor; transition: transform .7s var(--ease), width .7s var(--ease); }

/* ---------- opening counter (opening.js odometer) ---------- */
.k-odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.k-odo__d { display: block; height: 1em; overflow: hidden; line-height: 1; }
.k-odo__strip { display: flex; flex-direction: column; will-change: transform; }
.k-odo__strip span { display: block; width: .62em; height: 1em; line-height: 1; text-align: center; }

/* ---------- toast ---------- */
.k-toast { position: fixed; left: 50%; bottom: 28px; z-index: 450; translate: -50% 24px; opacity: 0; padding: 12px 20px; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: 13px; letter-spacing: .04em; pointer-events: none; transition: opacity .5s var(--ease), translate .6s var(--ease); }
.k-toast.is-show { opacity: 1; translate: -50% 0; }

/* ---------- film grain overlay (optional): <div class="k-grain" aria-hidden="true"></div> ---------- */
.k-grain { position: fixed; inset: -50%; z-index: 250; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: k-grain 1s steps(6) infinite; }
@keyframes k-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 4%); } 40% { transform: translate(6%, -6%); } 60% { transform: translate(-4%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); } }

/* ---------- reduced motion: show final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .k-grain { display: none; }
}