/* Ambertone — site styles. Tone, type and spacing follow design/visualizer_homepage_prototype.html. */
:root {
  --ink: #f4f3ef;
  --muted: #aaa9b1;
  --dim: #86838c;
  --line: rgba(255, 255, 255, 0.14);
  --night: #08090e;
  --paper: #f1f0eb;
  --lilac: #a897ff;
  --warm: #ffb36a;
  --pad: clamp(22px, 6vw, 94px);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", Arial, sans-serif;
  /* Japanese pages: Latin in the usual faces first, then IBM Plex Sans JP for
     everything they lack (loaded only in Japanese; see i18n.ts). */
  --sans-ja: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "IBM Plex Sans JP", "Hiragino Sans", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin-top: 0; }
:lang(ja) h2, :lang(ja) h3 { letter-spacing: -0.02em; line-height: 1.15; }
/* Japanese headings: break between phrases, not mid-word, and a size that fits. */
:lang(ja) :is(h2, h3, p) { word-break: auto-phrase; line-break: strict; }
:lang(ja) .big, :lang(ja) .how h2 { font-size: clamp(2.2rem, 4.4vw, 4.8rem); }
/* Upper-casing only turns "Mac" into "MAC" in Japanese labels. */
:lang(ja) :is(.button, .player-own) { text-transform: none; letter-spacing: 0.06em; }
/* The Japanese pinned text is longer than the English title. */
:lang(ja) .stage-title .big { width: min(94vw, 900px); font-size: min(clamp(1.1rem, 2.4vw, 2.2rem), 5.4vw); line-height: 1.6; letter-spacing: 0; }
/* Japanese type: headings in Plex 500, nearly untracked, open leading; body
   400 at 1.8. Only translated headings — English ones on a Japanese page
   (the hero's DON'T JUST LISTEN., "Ambertone for Mac.") keep their look. */
:lang(ja) body { font-family: var(--sans-ja); }
:lang(ja) :is(h1, h2, h3, .big):is([data-i18n], [data-i18n-html]), :lang(ja) .tagline { font-weight: 500; letter-spacing: 0.01em; line-height: 1.5; }
:lang(ja) :is(p, li, dd):is([data-i18n], [data-i18n-html]), :lang(ja) .prose :is(p, li) { font-weight: 400; line-height: 1.8; }
/* The pinned text is set light in both languages — Plex 300 in Japanese,
   the system face's light in English. */
.stage-title .big, :lang(ja) .stage-title .big { font-weight: 300; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 1em; height: 1em; flex: none; }
/* Every block of text and controls sits in this: 1200px at most, centred.
   The outer element keeps its own side padding, so narrow views are as before. */
.container { width: 100%; max-width: 1200px; margin-inline: auto; }

/* Film grain over everything. */
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: 0.07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  background-size: 180px 180px; }

/* --- nav --------------------------------------------------------------- */
.nav { position: absolute; z-index: 10; inset: 0 0 auto;
  padding: 25px clamp(22px, 4vw, 68px); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* The wordmark (design/logo/kit), inline so it takes the text colour. 11px tall: its b
   stands as tall as the capitals of the 15px bold text it replaced. */
.brand { display: block; line-height: 0; }
.brand svg { display: block; height: 11px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 28px; color: rgba(255, 255, 255, 0.77); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }
.lang { display: flex; gap: 2px; font-size: 10px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); }
.lang button { background: none; border: 0; padding: 4px 5px; cursor: pointer; color: inherit; letter-spacing: inherit; }
.lang button[aria-pressed="true"] { color: #fff; }

/* --- buttons ----------------------------------------------------------- */
.button { display: inline-flex; gap: 14px; align-items: center; border: 1px solid rgba(255, 255, 255, 0.56); padding: 14px 18px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  background: rgba(9, 10, 17, 0.26); cursor: pointer; white-space: nowrap; }
.button:hover { background: #f7f6f2; color: #0a0b10; transform: translateY(-2px); }
.button .ic { width: 13px; height: 13px; }
.button.solid { background: #f0eee9; color: #0b0b10; border-color: #f0eee9; }
.button.solid:hover { box-shadow: 0 10px 45px rgba(204, 176, 255, 0.42); }
.button[disabled] { opacity: 0.5; pointer-events: none; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }

.section-label { color: #8f8d96; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 0; }
.big { font-size: clamp(2.7rem, 5.5vw, 6rem); letter-spacing: -0.065em; line-height: 0.92; font-weight: 520; margin: 19px 0 0; }
.big span { color: #85838f; }

/* --- hero -------------------------------------------------------------- */
/* The hero is a track three viewports tall; the stage inside it is sticky.
   Scrolling the first viewport carries the monitor's screen out of the photo
   until it fills the view, the second holds it there, the third scrolls on
   (site/hero/enter.ts). The copy scrolls normally over the first viewport. */
/* The scroll-in's pacing, in viewports of scroll — the one place to change it
   (enter.ts reads these): the zoom into the screen, the hold, and the exit,
   where the stage slides up off the next section, which waits beneath it.
   The track is tall enough to keep the stage pinned through all three, and
   pulls the next section up by one viewport so it is there to be uncovered. */
.hero { --zoom-vh: 1.5; --hold-vh: 0.5; --exit-vh: 0.5;
  position: relative; z-index: 2; height: calc((var(--zoom-vh) + var(--hold-vh) + var(--exit-vh) + 1) * 100svh); margin-bottom: -100svh; }
.hero ~ section { position: relative; z-index: 1; }
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #000; }
.hero-copy-wrap { position: relative; z-index: 3; margin-top: -100svh; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 0 var(--pad) clamp(37px, 7vh, 72px); }
/* The room: a photo, with the slit on its monitor and the monitor's light on
   its wall. All three live in one box of the photo's proportions (2720×1536),
   so they scale and move together (the scroll-in zooms this box). The box
   covers the hero and, when it has to be cropped, keeps the monitor
   (x ≈ 48.1%) centred. */
.backdrop { position: absolute; z-index: -1; inset: 0; overflow: hidden; container-type: size; }
.scene { --w: max(100cqw, 177.08cqh); --h: calc(var(--w) * 0.56471); position: absolute; width: var(--w); height: var(--h);
  left: clamp(calc(100cqw - var(--w)), calc(50cqw - 0.481 * var(--w)), 0px);
  top: clamp(calc(100cqh - var(--h)), calc(50cqh - 0.45 * var(--h)), 0px); }
.photo { position: absolute; inset: 0; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Sized and placed by enter.ts: laid out at the end rectangle's size and
   bent onto the photo's screen by a matrix3d, inside the scene. */
#slit { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block;
  transform-origin: 0 0; mix-blend-mode: screen; will-change: transform; }
.scene { transform-origin: 0 0; will-change: transform; }
.entering #slit { mix-blend-mode: normal; background: #000; }
/* The pinned title: low in the view (its middle 22% up from the bottom), so
   it only crosses the faint tips of the slits, on a full-width dark band
   that fades to nothing above and below — no box edge anywhere. */
.stage-title { position: absolute; z-index: 2; left: 0; right: 0; bottom: 22%; transform: translateY(50%);
  opacity: 0; pointer-events: none; }
.stage-title::before { content: ""; position: absolute; left: 0; right: 0; top: -75%; bottom: -75%; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65) 35%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0)); }
/* Each line fits across a phone: the box takes 94% of the width, and the
   type shrinks only where even that is too narrow ("Whatever you listen to."
   is ≈8.1× the font size wide) — never on desktops. */
.stage-title .big { width: min(94vw, 900px); margin: 0 auto; text-align: center; font-size: min(clamp(2.7rem, 5.5vw, 6rem), 11.4vw); }
.stage-title .big span { color: inherit; }
/* room.ts's LIGHT_BOX over 2720×1536. */
#wall-light { position: absolute; left: 25.735%; top: 0%; width: 44.853%; height: 65.104%; display: block;
  mix-blend-mode: screen; opacity: 0; pointer-events: none; will-change: opacity; }
/* A little shade under the copy, where the lamp and the stool sit behind it.
   It follows the copy, and its gradient fades out (closest-side) before any
   edge of its box, so no edge shows as the copy scrolls away. */
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -40% -55% -30% -45%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 5, 8, 0.55), rgba(6, 5, 8, 0.25) 55%, rgba(6, 5, 8, 0)); }

.hero-copy { position: relative; z-index: 3; max-width: 470px; padding-bottom: 4.5vh; }
.eyebrow { font-size: 10px; letter-spacing: 0.17em; text-transform: uppercase; color: rgba(255, 255, 255, 0.67); margin: 0 0 17px; }
h1 { font-size: clamp(3rem, 6.6vw, 7.1rem); line-height: 0.89; letter-spacing: -0.075em; font-weight: 560; margin-bottom: 24px; }
h1 em { display: block; font-style: normal; color: #c8c6d0; }
/* Japanese only: the one line under the (English) headline. */
.tagline { font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 560; letter-spacing: 0.02em; margin: -6px 0 18px; }
.lede { font-size: 15px; line-height: 1.55; max-width: 340px; color: rgba(255, 255, 255, 0.77); margin-bottom: 27px; }

/* The player: always fixed bottom right, its right edge in line with the
   header's (the 1200px container, or the nav's padding below that); bottom
   centre on phones. Kept under 44px tall so it clears the scroll-in's screen. */
.player { position: fixed; z-index: 40; right: max(clamp(22px, 4vw, 68px), calc((100vw - 1200px) / 2)); bottom: 24px; display: flex; align-items: center; gap: 8px; }
.player-main { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px 0 4px; min-width: 230px;
  background: rgba(8, 9, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); }
.player-toggle { height: 36px; display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0 8px; cursor: pointer;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.player-toggle[aria-pressed="true"] { color: #fff; }
.player-toggle .ic { width: 15px; height: 15px; }
.player-toggle:hover { color: #fff; }
.player-info { display: grid; gap: 7px; flex: 1; min-width: 0; }
.player-title { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar { display: block; height: 1px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.player-bar i { display: block; height: 100%; background: rgba(255, 255, 255, 0.8); transform-origin: 0 0; transform: scaleX(0); }
.tab .player-bar { visibility: hidden; }
.player-own { height: 44px; padding: 0 16px; background: rgba(8, 9, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.player-own:hover { background: #f7f6f2; color: #0a0b10; }
/* Shown once, for three seconds after the page starts moving: where the sound is. */
.player-nudge { position: absolute; right: calc(100% + 14px); top: 50%; transform: translateY(-50%); margin: 0; white-space: nowrap;
  font-size: 12px; color: rgba(255, 255, 255, 0.82); transition: opacity 0.6s ease; }
.player-nudge.gone { opacity: 0; }
.player-hint { position: absolute; right: 0; bottom: calc(100% + 10px); margin: 0; padding: 8px 12px; white-space: nowrap;
  background: rgba(8, 9, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 12px; color: rgba(255, 255, 255, 0.82); }

/* --- sections ---------------------------------------------------------- */
.intro { min-height: 82vh; display: grid; align-content: center;
  padding: clamp(80px, 14vw, 176px) clamp(22px, 10vw, 154px); background: radial-gradient(circle at 82% 39%, rgba(61, 47, 118, 0.19), transparent 27%), #090a10; }
.intro > .container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); gap: min(10vw, 144px); }
.intro .big { max-width: 590px; }
.intro-copy { align-self: end; padding-bottom: 5px; color: #bebcc5; max-width: 370px; font-size: 16px; line-height: 1.65; }
.intro-copy p + p { margin-top: 20px; }

.skins { padding: clamp(84px, 12vw, 160px) var(--pad); background: linear-gradient(180deg, #08090d, #0d0b13 45%, #090a0e); }
.skins.page { padding-top: clamp(130px, 16vw, 200px); min-height: 100vh; }
.skins-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 56px; }
.skins-heading p { margin: 0; max-width: 260px; color: #9996a1; line-height: 1.55; font-size: 13px; }
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.skin { position: relative; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); aspect-ratio: 16 / 10; }
.skin video, .skin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.skin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85)); pointer-events: none; }
.skin-info { position: absolute; z-index: 1; left: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px); bottom: clamp(18px, 2.4vw, 28px);
  display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.skin-info h3 { font-weight: 520; margin: 0 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.6rem); letter-spacing: -0.055em; }
.skin-info p { margin: 0; font-size: 10px; line-height: 1.4; letter-spacing: 0.15em; text-transform: uppercase; color: #c5c1cc; }
.skin-info .button { padding: 11px 14px; }
.buy-error { grid-column: 1 / -1; color: #ffb3a1; font-size: 13px; min-height: 1em; margin: 18px 0 0; }

.how .section-label { color: #66656a; }
.how { padding: clamp(82px, 12vw, 145px) clamp(22px, 10vw, 154px); background: var(--paper); color: #14141a; }
.how h2 { font-size: clamp(2.7rem, 5vw, 5.4rem); letter-spacing: -0.07em; font-weight: 520; max-width: 650px; line-height: 0.92; margin: 19px 0 clamp(70px, 10vw, 125px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #b8b7b2; }
.step { padding: 25px 28px 20px 0; min-height: 206px; border-right: 1px solid #b8b7b2; }
.step:not(:first-child) { padding-left: 28px; }
.step:last-child { border: 0; }
.step span { font-size: 10px; letter-spacing: 0.15em; color: #66656a; }
.step h3 { margin: 44px 0 10px; font-size: 24px; letter-spacing: -0.05em; font-weight: 560; }
.step p { color: #625f67; max-width: 220px; line-height: 1.5; font-size: 13px; }
.how-note { margin: 44px 0 0; color: #625f67; font-size: 15px; }

.cta { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 90px 22px;
  background: radial-gradient(ellipse at 50% 54%, #241d33 0%, #100f1b 33%, #08090d 70%); }
.cta > .container { display: flex; flex-direction: column; align-items: center; }
.cta-body { color: #bebcc5; font-size: 16px; line-height: 1.7; margin: 0 0 32px; }
.cta .big { max-width: 760px; margin: 18px 0 29px; }

/* --- plain pages (success / download / privacy) ------------------------- */
.page-main { min-height: 100vh; padding: clamp(130px, 16vw, 200px) var(--pad) 100px; }
.page-main .big { max-width: 900px; }
.narrow { max-width: 680px; }
.prose { color: #bebcc5; font-size: 15px; line-height: 1.7; }
.prose h2 { color: var(--ink); font-size: 20px; letter-spacing: -0.02em; font-weight: 560; margin: 48px 0 12px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 1.2em; }
.panel { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 32px; }

.key { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(0.95rem, 4.2vw, 2.1rem); letter-spacing: 0.02em;
  padding: 26px 0; white-space: nowrap; user-select: all; }
.key.wait { color: var(--dim); }
.note { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 520px; margin-top: 28px; }

.spec { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; font-size: 13px; color: var(--muted); margin: 36px 0 0; }
.spec dt { text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; color: var(--dim); padding-top: 3px; }
.spec dd { margin: 0; }

footer { background: #08090d; padding: 25px clamp(22px, 4vw, 65px);
  color: var(--dim); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }
footer nav { display: flex; gap: 22px; }
footer a:hover { color: var(--ink); }
.footer-brand { text-transform: none; letter-spacing: 0.04em; }

@media (max-width: 1100px) {
  .skin-grid { grid-template-columns: 1fr; max-width: 760px; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  /* The photo is sized so the monitor spans ~84% of the width and sits near
     the top; the copy starts below it (the monitor's bottom edge is at
     0.304 × the scene's height = 81vw), over the photo faded to night. */
  .hero-copy-wrap { padding-top: calc(81vw + 34px); padding-bottom: 55px; }
  .scene { --w: 472cqw; left: calc(50cqw - 0.481 * var(--w)); top: calc(var(--h) * -0.106); }
  .backdrop::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; opacity: var(--photo, 1);
    background: linear-gradient(180deg, transparent, var(--night) 92%); }
  .hero-copy::before { display: none; }
  .player { right: auto; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100vw - 32px); }
  .player-main { min-width: 0; width: min(320px, calc(100vw - 32px)); }
  .player-nudge { right: 0; top: auto; bottom: calc(100% + 10px); transform: none; }
  .intro { min-height: auto; }
  .intro > .container { grid-template-columns: 1fr; gap: 45px; }
  .skins-heading { display: block; }
  .skins-heading p { margin-top: 23px; }
  .steps { grid-template-columns: 1fr; }
  .step, .step:not(:first-child) { border-right: 0; border-bottom: 1px solid #b8b7b2; padding: 23px 0; min-height: 0; }
  .step h3 { margin: 24px 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* No scroll-in: the hero is one screen, as before. */
  .hero { height: auto; margin-bottom: 0; }
  .hero-stage { position: absolute; inset: 0; height: auto; }
  .hero-copy-wrap { margin-top: 0; }
  .stage-title { display: none; }
  .button { transition: none; }
}