/* Suppress the browser's touch overlay; keep our hover/focus feedback. */
body[data-home-background="wavy-cubes"] {
  -webkit-tap-highlight-color:transparent;
}

/* Dragging the interactive scene or menu should not select nearby labels. */
body[data-home-background="wavy-cubes"] main {
  -webkit-user-select:none;
  user-select:none;
}

body[data-home-background="wavy-cubes"] main :is(input,textarea,[contenteditable]:not([contenteditable="false"])) {
  -webkit-user-select:text;
  user-select:text;
}

body[data-home-background="wavy-cubes"] main :is(a,img) {
  -webkit-user-drag:none;
}

/* The wave keeps its geometry while using the same page theme as the menus. */
body[data-home-background="wavy-cubes"] {
  --home-surface:#fff;
  --home-ink:#171719;
  --home-muted:rgba(23,23,25,.68);
  --home-line:rgba(23,23,25,.22);
}
html[data-theme="dark"] body[data-home-background="wavy-cubes"] {
  --home-surface:#202329;
  --home-ink:#e4e5e3;
  --home-muted:rgba(228,229,227,.78);
  --home-line:rgba(228,229,227,.18);
  background:var(--home-surface);
}
body[data-home-background="wavy-cubes"] .stage-frame,
body[data-home-background="wavy-cubes"] .stage {
  /* A finger can draw waves; browser pinch zoom and the separate menu stay usable. */
  touch-action:pinch-zoom;
  background:var(--home-surface);
}

body[data-home-background="wavy-cubes"] .stage {
  --white:var(--home-ink);
  --muted:var(--home-muted);
  --line:var(--home-line);
  color:var(--white);
}

body[data-home-background="wavy-cubes"] .stage-title-wrap h1 em {
  color:var(--home-ink);
}

body[data-home-background="wavy-cubes"] .stage-visual[data-background="wavy-cubes"] {
  background:#ededed url('./assets/wavy-cubes-fallback.svg?v=20261009-103') center / cover no-repeat;
  filter:none;
}

body[data-home-background="wavy-cubes"] .stage-visual[data-background="wavy-cubes"]::before,
body[data-home-background="wavy-cubes"] .stage-visual[data-background="wavy-cubes"]::after {
  content:none;
  display:none;
  animation:none;
}

body[data-home-background="wavy-cubes"] .stage-visual[data-background="wavy-cubes"] .stage-canvas {
  mix-blend-mode:normal;
  opacity:0;
}

body[data-home-background="wavy-cubes"] .stage-visual[data-background="wavy-cubes"][data-renderer="webgl"] .stage-canvas {
  opacity:1;
}

/* Home text tokens; button colors come from the shared control palette. */
html body[data-home-background="wavy-cubes"]:is(:not(.menu-active),.menu-closing) .stage-header {
  --white:var(--home-ink);
  --muted:var(--home-muted);
  --line:var(--home-line);
  color:var(--white);
}

html.has-custom-cursor body[data-home-background="wavy-cubes"]:is(:not(.menu-active),.menu-closing) .custom-cursor {
  --cursor-color:#171719;
}

/* A single home link with two aligned wordmarks, revealed by the scene edge. */
body[data-home-background="wavy-cubes"] .stage-logo {
  display:grid;
  opacity:1;
  transition:none;
}

body[data-home-background="wavy-cubes"] .stage-logo .brand-layer {
  display:block;
  grid-area:1 / 1;
  pointer-events:none;
  transition:clip-path .95s cubic-bezier(.76,0,.18,1);
}

body[data-home-background="wavy-cubes"] .stage-logo .brand-word-home {
  color:var(--home-ink);
}

body[data-home-background="wavy-cubes"] .stage-logo .brand-word-menu {
  color:#f7f7f4;
}

/* Clip HTML boxes so pixel insets don't use the SVG's 754×224 coordinate space. */
body[data-home-background="wavy-cubes"] .stage-logo .brand-layer-home {
  clip-path:inset(calc(0px - var(--logo-stage-top,0px)) 0 0 0);
}

body[data-home-background="wavy-cubes"] .stage-logo .brand-layer-menu {
  clip-path:inset(0 0 calc(100% + var(--logo-stage-top,0px)) 0);
}

body[data-home-background="wavy-cubes"].menu-active:not(.menu-closing) .brand-layer-home {
  clip-path:inset(calc(var(--logo-aperture-top,88px) - var(--logo-stage-top,0px)) 0 0 0);
}

body[data-home-background="wavy-cubes"].menu-active:not(.menu-closing) .brand-layer-menu {
  clip-path:inset(0 0 calc(100% + var(--logo-stage-top,0px) - var(--logo-aperture-top,88px)) 0);
}

/* Light home and light menu use the same ink; keep one uninterrupted wordmark. */
html[data-menu-theme="light"] body[data-home-background="wavy-cubes"] .stage-logo .brand-word-home {
  color:var(--home-ink);
}

html[data-theme="dark"] body[data-home-background="wavy-cubes"] :is(.stage-header.control-skin-home,.case-rail) {
  --control-ink:#e4e5e3;
  --control-surface:#30343b;
  --control-hover-surface:#272b31;
}

html[data-menu-theme="light"] body[data-home-background="wavy-cubes"] .stage-logo .brand-layer-home {
  clip-path:none;
  transition:none;
}

html[data-menu-theme="light"] body[data-home-background="wavy-cubes"] .stage-logo .brand-word-menu {
  color:#171719;
}

html[data-menu-theme="light"] body[data-home-background="wavy-cubes"] .stage-logo .brand-layer-menu {
  visibility:hidden;
}

@media (prefers-reduced-motion:reduce) {
  body[data-home-background="wavy-cubes"] .stage-logo .brand-layer { transition:none; }
}

/* The resting headline has its own typography; project previews keep theirs. */
body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) .stage-title-wrap {
  left:34%;
  right:7%;
  bottom:max(48px,calc(100% - 100svh + 8svh));
}
body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) [data-case-kicker] { display:none; }
body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) [data-case-title] {
  font-family:'Space Grotesk','PingFang SC','Microsoft YaHei',sans-serif;
  font-size:clamp(48px,6.4vw,104px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.055em;
  color:var(--home-ink);
}
.home-title-line { display:block; white-space:nowrap; }
.home-title-line-emphasis { font-weight:500; }
body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) .stage-intro-text {
  font-size:14px;
  line-height:1.7;
}
@media (max-width:767px), (max-width:1024px) and (max-height:560px) {
  body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) .stage-title-wrap {
    position:relative;
    inset:auto;
    min-height:0;
  }
  body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) [data-case-title] {
    font-size:clamp(32px,9vw,46px);
    line-height:1.28;
    letter-spacing:-.055em;
  }
  body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) .stage-intro-text { font-size:13px; line-height:1.7; }
}
@media (max-width:1024px) and (max-height:560px) {
  body[data-home-background="wavy-cubes"] .stage:not(.has-case-preview) [data-case-title] { font-size:clamp(27px,4vw,36px); line-height:1.16; }
}