/* ═══════════════════════════════════════════
   SELF-HOSTED FONTS
   ═══════════════════════════════════════════
   Downloaded from Google Fonts + served from our origin — no
   external requests during first paint.
   Subsets kept: latin + latin-ext (covers English + Portuguese).
   Downloads are unicode-range-scoped, so the browser only fetches
   the files it actually needs based on the page content. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ═══════════════════════════════════════════
   DESIGN SYSTEM — Mercúrio Compósitos
   ═══════════════════════════════════════════ */

:root {
  --void: #0a0a0a;
  --carbon: #141414;
  --graphite: #1e1e1e;
  --ash: #8a8a8a;
  --smoke: #b5b5b5;
  --bone: #e8e6e1;
  --paper: #f5f4f0;
  --white: #fafaf8;

  /* Tokenized text opacity for dark backgrounds */
  --text-on-dark-primary: rgba(255, 255, 255, 0.9);
  --text-on-dark-secondary: rgba(255, 255, 255, 0.6);
  --text-on-dark-tertiary: rgba(255, 255, 255, 0.45);
  --text-on-dark-muted: rgba(255, 255, 255, 0.3);

  /* Tokenized text opacity for light backgrounds */
  --text-on-light-primary: var(--void);
  --text-on-light-secondary: #555;
  --text-on-light-tertiary: var(--ash);
  --text-on-light-body: #5a5a5a;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;

  --max-w: 1100px;
  --px: clamp(1.25rem, 4vw, 2.5rem);

  /* Surface depth hierarchy */
  --surface: #f7f6f2;
  --surface-recessed: #f0efe9;

  /* Border tokens — light */
  --border: rgba(0, 0, 0, 0.07);
  --border-bright: rgba(0, 0, 0, 0.14);

  /* Border tokens — dark */
  --border-on-dark: rgba(255, 255, 255, 0.06);
  --border-on-dark-bright: rgba(255, 255, 255, 0.12);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--void);
  --focus-ring-light: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--paper);
}

body {
  background: var(--paper);
  color: var(--void);
  font-family: var(--font-mono);
  line-height: 1.7;
  overflow-x: hidden;
}

::selection {
  background: var(--void);
  color: var(--white);
}

img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ═══ UTILITY ═══ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}

/* ═══ NAV ═══ */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.5rem var(--px);
  transition: padding 0.4s ease;
}
nav.scrolled .nav-brand {
  opacity: 1;
  pointer-events: auto;
}
nav.scrolled {
  /* background, backdrop-filter, border driven by JS for seamless blending */
  border-bottom: none;
  padding: 1rem var(--px);
  pointer-events: auto;
}
.nav-inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.nav-brand-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.nav-brand-text {
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  font-weight: 500;
  color: var(--void);
  transition: color 0.4s;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.3s;
  text-decoration: none;
}
.nav-links a:hover {
  color: var(--void);
}
nav.scrolled .nav-links a {
  color: var(--ash);
}
nav.scrolled .nav-links a:hover {
  color: var(--void);
}

/* Nav starts hidden, fades in via JS scroll progress */
nav {
  opacity: 0;
  pointer-events: none;
  transition: pointer-events 0s;
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 110;
}
.nav-hamburger .bar {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--void);
  transition: all 0.3s;
}
.nav-hamburger .bar + .bar {
  margin-top: 5px;
}

/* Open state */
.nav-hamburger.open .bar:nth-child(1) {
  transform: rotate(45deg) translate(2px, 3px);
}
.nav-hamburger.open .bar:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open .bar:nth-child(3) {
  transform: rotate(-45deg) translate(2px, -3px);
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10, 10, 10, 0.97);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  list-style: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav a {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-on-dark-secondary);
  transition: color 0.3s;
  letter-spacing: -0.02em;
}
.mobile-nav a:hover {
  color: var(--white);
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: block;
  }
  .mobile-nav {
    display: flex;
  }
}

/* ═══ HERO — Image as absolutely positioned element on paper ═══ */
.hero {
  position: relative;
  background: var(--paper);
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.hero picture {
  display: block;
}
.hero picture img,
.hero noscript img {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 82%;
  display: block;
  box-shadow:
    0 8px 30px -12px rgba(30, 25, 15, 0.12),
    0 2px 8px -2px rgba(30, 25, 15, 0.06);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
@media (max-aspect-ratio: 4/5) {
  .hero picture img,
  .hero noscript img {
    top: 4.5svh;
    left: 50%;
    translate: -50% 0;
    /* width = smaller of: 92vw OR the width that keeps image within available height */
    width: min(92vw, calc((100svh - 9svh) * 9 / 16));
    max-width: 92vw;
    max-height: none;
    aspect-ratio: 9 / 16;
  }
}
@keyframes hero-nudge {
  0% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  }
  40% {
    transform: translateY(-24px);
    opacity: 0.88;
    animation-timing-function: linear;
  }
  48% {
    transform: translateY(-24px);
    opacity: 0.88;
    animation-timing-function: cubic-bezier(0.33, 0, 0.35, 1);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.hero picture img.wiggle {
  animation: hero-nudge 1.1s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero picture img.wiggle {
    animation: none;
  }
}

/* Scroll hint — hidden by default, revealed after 2nd image tap */
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: max(2.5svh, 1.25rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--ash);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 2;
}
.hero-scroll-hint.visible {
  opacity: 0.7;
}
.hero-scroll-hint-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-scroll-hint-arrow {
  animation: hero-hint-bob 1.6s ease-in-out infinite;
}
@keyframes hero-hint-bob {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(5px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint-arrow {
    animation: none;
  }
}

/* ═══ CAD TEASER — SVG DRAW + 3D FLIP ═══ */
.cad-teaser-scroll {
  position: relative;
  /* 3500px animation + 700px tail hold so the subtitle lingers before release */
  height: calc(4200px + 100vh);
  background: var(--void);
}
.cad-teaser {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  box-sizing: border-box;
  perspective: 1200px;
  overflow: hidden;
  background: var(--paper);
  transition: background 0s;
}

/* Layered: photo behind, SVG on top, both visible */

/* SVG wireframe — on top, JS fades it out at the end */
.flip-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* Product photo — sized by height to match SVG, black bg fills gaps */
.flip-back {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  overflow: hidden;
  background: #080a0e;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;
  box-sizing: border-box;
}
.flip-back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(8, 12, 20, 0.85) 100%);
  pointer-events: none;
  z-index: 2;
}
.flip-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #1c2d40;
  mix-blend-mode: color;
  opacity: 0.35;
  pointer-events: none;
  z-index: 3;
}
.flip-back img {
  position: relative;
  z-index: 1;
  height: 102vh;
  width: auto;
  max-width: none;
}

.cad-teaser-svg {
  height: 65vh;
  width: auto;
  overflow: visible;
  transform: rotate(180deg);
  opacity: 0.8;
}
.cad-teaser-svg .draw-path {
  fill: none;
  stroke: #5d6c7a;
  stroke-width: 0.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Primary paths — bolder, slightly darker (outer contour + major structure) */
.cad-teaser-svg .draw-path.primary {
  stroke: #3d4d5c;
  stroke-width: 0.4;
}
/* Secondary paths — quieter, thinner (structural detail) */
.cad-teaser-svg .draw-path.secondary {
  stroke: #728190;
  stroke-width: 0.28;
}

/* Measured field — subtle technical grid behind SVG.
   Fills the full viewport while keeping grid cells at the original
   scale (slice mode ensures the viewBox fully covers the screen at
   any aspect ratio). Radial mask fades the grid softly near the edges. */
.measured-field-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 55% 48% at center,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 0.7) 60%,
    rgba(0, 0, 0, 0.25) 85%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse 55% 48% at center,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 0.7) 60%,
    rgba(0, 0, 0, 0.25) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}
.measured-field-svg .grid-line {
  stroke: #cdd1d6;
  stroke-width: 0.18;
}
.measured-field-svg .datum-line {
  stroke: #b8bec5;
  stroke-width: 0.22;
  stroke-dasharray: 1.5 3;
}
.measured-field-svg .registration-mark line {
  stroke: #666d74;
  stroke-width: 0.25;
}

/* Text below the card (absolute positioned, separate from flip) */
.cad-teaser-text {
  position: absolute;
  bottom: clamp(3rem, 6vh, 5rem);
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 var(--px);
  z-index: 6;
}
.cad-teaser-label {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a5a6a;
}
.cad-label-part {
  opacity: 0;
  margin: 0 0.15em;
}
.mobile-break {
  display: none;
}
@media (max-width: 680px) {
  .mobile-break {
    display: block;
  }
  .cad-teaser-label {
    line-height: 2.2;
  }
}
.cad-teaser-spec {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a9bad;
  opacity: 0;
}
.cad-reveal-text {
  bottom: clamp(3rem, 6vh, 5rem);
}
/* Title inside .cad-reveal-text — lighter color + weight, starts hidden */
#reveal-title {
  color: #c8d0d9;
  font-weight: 500;
  opacity: 0;
}
/* Corner-positioned catalog tag — top-right on desktop, top-center on mobile */
.cad-teaser-tag {
  position: absolute;
  top: clamp(1rem, 3vh, 1.75rem);
  right: clamp(1rem, 3vw, 2rem);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #8a9bad;
  opacity: 0;
  z-index: 6;
}
.cad-reveal-sub {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a9bad;
  opacity: 0;
}
@media (max-width: 720px) {
  .cad-teaser-tag {
    top: clamp(0.75rem, 2.5vh, 1.25rem);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
  }
}

/* SVG and saddle photo share the same flip container and must read at the
   same on-screen size for the flip illusion to work. Defaults (SVG 65vh,
   photo 102vh) already align on wide and narrow viewports — no override
   needed at tablet widths. */
@media (max-width: 600px) {
  .cad-teaser-svg {
    height: 55vh;
  }
  .flip-back img {
    height: 88vh;
  }
}
@media (max-width: 400px) {
  .cad-teaser-svg {
    height: 50vh;
  }
  .flip-back img {
    height: 76vh;
  }
}

/* ═══ DISIPA INTERFACE (3D section) ═══ */
.disipa-scroll {
  position: relative;
  z-index: 2;
}
.disipa-section {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
#disipa-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0; /* hidden until disipa pin starts; JS reveals via onEnter */
}
.disipa-text-overlay {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  pointer-events: none;
  max-width: 520px;
  width: 90%;
}
.disipa-label {
  display: none; /* hidden globally — trama eyebrow chip serves this role */
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 1.5rem;
}
.disipa-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--void);
  margin-bottom: 1.5rem;
}
.disipa-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-on-light-body);
}
.disipa-detail {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ash);
}
/* ═══ TRAMA INTERLAMINAR ═══ */
.trama-scroll {
  position: relative;
  z-index: 2;
}
.trama-sticky {
  /* Horizon shared with .trama-grid-half and the stacked micro-labels. */
  --trama-horizon: 50%;
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--paper);
}
.trama-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.trama-cnt-hover-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  height: 30%;
  z-index: 1;
  pointer-events: auto;
}
#trama-cloud-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* width/height:100% are load-bearing — <canvas> is a replaced element, so
     without explicit size its intrinsic (pixel-buffer) dimensions win over
     inset:0. On DPR>1 displays, Three.js's DPR-scaled buffer would cause the
     canvas to overflow the stage. No z-index: DOM order places canvas above
     grids and below labels/text/preview-tag. */
}
.trama-preview-tag {
  position: absolute;
  top: clamp(1.5rem, 4vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid transparent;
  background: transparent;
  z-index: 10;
  opacity: 0.25;
  transition:
    border-color 0.3s,
    background 0.3s,
    -webkit-backdrop-filter 0.3s,
    backdrop-filter 0.3s;
}
.trama-preview-tag.blink {
  animation: tagPulse 1.8s ease-in-out infinite;
}
.trama-preview-tag.solid {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* No opacity override — .blink animation keeps driving opacity so the tag
     continues pulsing even while solid. */
}
@keyframes tagPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.trama-grid-half {
  /* Horizon position: where the top and bottom halves meet. 50% puts
     the parting line on the vertical middle of the section. */
  --trama-horizon: 50%;
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  perspective: 600px;
  z-index: 0;
  pointer-events: auto;
}
.trama-grid-half.bottom {
  top: var(--trama-horizon);
  height: calc(100% - var(--trama-horizon));
  perspective-origin: center top;
  /* Two masks composited with INTERSECT so the grid fades at all four edges
     (horizon + outer vertical edge + left/right). */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 28%, #000 50%, transparent 95%),
    linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 28%, #000 50%, transparent 95%),
    linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.trama-grid-half.top {
  top: 0;
  height: var(--trama-horizon);
  perspective-origin: center bottom;
  -webkit-mask-image:
    linear-gradient(to top, transparent 0%, #000 28%, #000 50%, transparent 95%),
    linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to top, transparent 0%, #000 28%, #000 50%, transparent 95%),
    linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.trama-grid {
  position: absolute;
  width: 200%;
  height: 250%;
  left: -50%;
  opacity: 1;
  clip-path: circle(0% at 50% 50%);
  /* Grid rendered as CSS background-image (two crossed linear-gradients) so
     the bold state can swap color/width/opacity — which SVG pattern strokes
     inside <defs> do not reliably allow. */
  --grid-color: rgba(30, 30, 30, 0.28);
  --grid-line: 0.5px;
  background-image:
    linear-gradient(to right, var(--grid-color) var(--grid-line), transparent var(--grid-line)),
    linear-gradient(to bottom, var(--grid-color) var(--grid-line), transparent var(--grid-line));
  background-size: 20px 20px;
  transition: background-image 160ms ease;
}
.trama-grid.bold {
  --grid-color: rgba(0, 0, 0, 0.55);
  --grid-line: 0.7px;
}
.trama-grid svg {
  width: 100%;
  height: 100%;
}
#trama-grid-a {
  top: 0;
  transform-origin: center top;
  transform: rotateX(62deg);
  /* Bottom half: rect's top edge (y=0%) is at the horizon, so that's where
     the bright zone should be centered. Shorter y-radius than the top half
     so the grid fades out sooner as it extends toward the viewer. */
  -webkit-mask-image: radial-gradient(
    ellipse 30% 40% at 50% 0%,
    rgba(0, 0, 0, 0.85) 18%,
    rgba(0, 0, 0, 0.6) 45%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse 30% 40% at 50% 0%,
    rgba(0, 0, 0, 0.85) 18%,
    rgba(0, 0, 0, 0.6) 45%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}
#trama-grid-b {
  bottom: 0;
  transform-origin: center bottom;
  transform: rotateX(-62deg);
  /* Top half: rect's bottom edge (y=100%) is at the horizon. */
  -webkit-mask-image: radial-gradient(
    ellipse 30% 55% at 50% 100%,
    rgba(0, 0, 0, 0.85) 18%,
    rgba(0, 0, 0, 0.62) 45%,
    rgba(0, 0, 0, 0.22) 75%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse 30% 55% at 50% 100%,
    rgba(0, 0, 0, 0.85) 18%,
    rgba(0, 0, 0, 0.62) 45%,
    rgba(0, 0, 0, 0.22) 75%,
    rgba(0, 0, 0, 0) 100%
  );
}
.trama-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Above the cloud canvas (z-index:1) so the pill backgrounds occlude the
     dots — no particles render on top of any label text. */
  z-index: 3;
}
.trama-label {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: 1;
  white-space: nowrap;
  transition:
    color 220ms ease,
    letter-spacing 220ms ease,
    font-weight 220ms ease,
    background 220ms ease;
}
.trama-label-text {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: rgba(245, 244, 240, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1px;
}
/* Stacked on the horizon: CNT Zone on the cloud, Exterior above, Structural below. */
#trama-label-exterior {
  top: calc(var(--trama-horizon) - 8%);
}
#trama-label-cnt {
  top: var(--trama-horizon);
  /* Always visible, painted ABOVE the cloud canvas, and pickable for hover. */
  opacity: 1 !important;
  z-index: 2;
  pointer-events: auto;
}
#trama-label-structural {
  top: calc(var(--trama-horizon) + 8%);
}
.trama-label.bold {
  color: var(--void);
  font-weight: 700;
  letter-spacing: 0.28em;
}
.trama-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 1;
  /* Mobile / default: original padding so text positions match the pre-cloud
     layout. Desktop bumps the bottom padding (see media query below) to give
     the cloud a clear visual band above the headline. */
  padding: clamp(2rem, 4vh, 4rem) var(--px) clamp(2.5rem, 5vh, 4.5rem);
  z-index: 5;
}
@media (min-width: 601px) {
  .trama-text {
    padding-bottom: clamp(6rem, 12vh, 10rem);
  }
}

/* ═══ DESKTOP SPLIT: text left, grid/cloud right ═══ */
@media (min-width: 901px) {
  .trama-text {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 50%;
    transform: translateY(-50%);
    text-align: left;
    padding: clamp(2rem, 4vh, 4rem) clamp(2rem, 5vw, 4.5rem);
  }
  .trama-text .trama-title,
  .trama-text .trama-body,
  .trama-text .trama-footnote {
    margin-left: 0;
    margin-right: 0;
    max-width: 560px;
  }
  .trama-text .trama-stats-header,
  .trama-text .trama-stats-sub,
  .trama-text .trama-stats-row,
  .trama-text .trama-stats-note {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: 560px;
  }

  .trama-grid-half {
    left: 50%;
    width: 50%;
  }
  #trama-cloud-canvas {
    left: 50%;
    width: 50%;
  }
  /* Labels span the full viewport on desktop so CNT band can sit in the
     left column while Surface Layer / Structural Layer stay in the right. */
  .trama-labels {
    inset: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
  /* All three callouts sit in the right column, centered on their respective
     cross-section layers. No leader lines — the bold pulse on each label is
     the visual link to its anchor (top grid / cloud / bottom grid). */
  #trama-label-exterior,
  #trama-label-cnt,
  #trama-label-structural {
    left: 75%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  /* Desktop Y positions — Surface 14% above horizon, CNT on horizon, Structural
     14% below. Keeps the vertical spacing constant even though CNT now lives in
     the left column. */
  #trama-label-exterior {
    top: calc(var(--trama-horizon) - 14%);
  }
  #trama-label-cnt {
    top: var(--trama-horizon);
  }
  #trama-label-structural {
    top: calc(var(--trama-horizon) + 14%);
  }
}
.trama-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--void);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border);
  padding: 0.55rem 1.15rem;
  margin-bottom: 1.75rem;
}
.trama-title {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 3.4vw, 2.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--void);
  margin-bottom: 1.25rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.trama-body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-on-light-body);
  max-width: 440px;
  margin: 0 auto 1.5rem;
}
.trama-footnote {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: var(--ash);
  max-width: 400px;
  margin: 0 auto;
}
.trama-stats-header {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--void);
  margin: 1.75rem auto 0.35rem;
  max-width: 720px;
  text-align: center;
}
.trama-stats-sub {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: var(--text-on-light-tertiary);
  margin: 0 auto 0.85rem;
  max-width: 720px;
  text-align: center;
}
.trama-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  max-width: 720px;
  margin: 0 auto;
}
.trama-stat-box {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-bright);
  padding: 0.75rem 0.8rem 0.85rem;
  text-align: left;
  font-family: var(--font-mono);
  color: var(--text-on-light-secondary);
  display: flex;
  flex-direction: column;
  min-height: 130px;
}
.trama-stat-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: #2a2a2a;
  pointer-events: none;
}
.trama-stat-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.trama-stat-title {
  color: var(--text-on-light-secondary);
}
.trama-stat-code {
  color: #7a9fd6;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.trama-stat-value {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--void);
  margin: 0.4rem 0 0.55rem;
  transition: color 0.2s;
}
.trama-stat-pct {
  font-size: 0.65em;
  vertical-align: super;
  margin-left: 0.05em;
}
.trama-stat-arrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-bottom: 0.55rem;
  height: 1px;
}
.trama-stat-line {
  flex: 1;
  height: 1px;
  background: var(--void);
  opacity: 0.75;
}
.trama-stat-tip {
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid var(--void);
  opacity: 0.75;
  margin-left: -1px;
}
.trama-stat-label {
  position: relative;
  z-index: 1;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-on-light-secondary);
  margin-top: auto;
}
.trama-stat-box.filled {
  background: #2a2a2a;
  border-color: #2a2a2a;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}
.trama-stat-box.filled:hover {
  background: var(--void);
  border-color: var(--void);
}
.trama-stat-box.filled .trama-stat-title,
.trama-stat-box.filled .trama-stat-value,
.trama-stat-box.filled .trama-stat-label {
  color: var(--paper);
}
.trama-stat-box.filled .trama-stat-line {
  background: var(--paper);
  opacity: 0.9;
}
.trama-stat-box.filled .trama-stat-tip {
  border-left-color: var(--paper);
  opacity: 0.9;
}

.trama-stats-note {
  font-family: var(--font-mono);
  margin-top: 0.85rem;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-light-tertiary);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (max-width: 600px) {
  .trama-stats-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══ MOBILE/TABLET STACKED LAYOUT (<901px) ═══
   On narrow viewports, animation occupies a bounded top region and the
   text/stats flow below in normal document order. The pin is also disabled
   on mobile (see animations.js) because the sticky is taller than viewport. */
@media (max-width: 900px) {
  /* Shorter CAD pin on mobile: matches the 3600px total in animations.js
     (3400 anim + 200 tail), cutting the Structured-Against-Disorder hold
     from two swipes to ~one. */
  .cad-teaser-scroll {
    height: calc(3600px + 100vh);
  }
  /* Native CSS scroll-snap: proximity mode so it only nudges near section
     boundaries and never fights iOS touch momentum. */
  html {
    scroll-snap-type: y proximity;
  }
  #cad-teaser-scroll,
  #trama-scroll,
  #disipa-scroll {
    scroll-snap-align: start;
  }

  .trama-sticky {
    height: auto;
    min-height: auto;
    display: block;
    padding-top: 0;
    position: relative;
  }
  /* Stage crops the full-size animation. Horizon anchored to stage center
     so the cloud, CNT label, and grid vanishing line all coincide. */
  .trama-stage {
    position: relative;
    width: 100%;
    height: 30vh;
    min-height: 210px;
    max-height: 270px;
  }
  /* Grid halves fill the stage (top half = stage top → horizon, bottom half
     = horizon → stage bottom). Mobile gets narrower edge fades so the grid
     visibly begins at the section top and extends almost to the bottom —
     just a soft vignette at each outer edge, not a long empty gradient. */
  .trama-grid-half.top {
    top: 0;
    bottom: auto;
    height: 50%;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 92%, rgba(0, 0, 0, 0.55) 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 92%, rgba(0, 0, 0, 0.55) 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .trama-grid-half.bottom {
    top: 50%;
    height: 50%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 92%, rgba(0, 0, 0, 0.55) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 92%, rgba(0, 0, 0, 0.55) 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  #trama-cloud-canvas {
    inset: auto 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100vh;
  }
  .trama-labels {
    inset: auto 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100vh;
  }
  /* CNT label: fully opaque pill with soft shadow so it reads clearly as
     sitting ON TOP of the cloud, not blended into the particle field. */
  #trama-label-cnt {
    color: var(--void);
  }
  #trama-label-cnt .trama-label-text {
    background: #f5f4f0;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  }
  /* Tighter vertical spread so Surface (above) and Structural (below)
     both stay inside the cropped stage rather than being clipped. */
  #trama-label-exterior {
    top: calc(var(--trama-horizon) - 5%);
  }
  #trama-label-structural {
    top: calc(var(--trama-horizon) + 5%);
  }
  /* Preview tag lives ABOVE the stage on mobile (anchored to sticky, not
     stage) so it no longer collides with Surface Layer inside the crop. */
  .trama-preview-tag {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
  }
  .trama-text {
    position: static;
    transform: none;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    padding: 0 var(--px) 1.25rem;
  }
  /* Proportionally smaller text so the whole section fits a single mobile
     viewport (no scroll required to see all four stat boxes). */
  .trama-text .trama-eyebrow {
    font-size: 0.7rem;
    padding: 0.35rem 0.75rem;
    margin-bottom: 0.6rem;
  }
  .trama-text .trama-title {
    font-size: clamp(1.25rem, 4.6vw, 1.5rem);
    line-height: 1.15;
    margin-bottom: 0.55rem;
  }
  .trama-text .trama-body {
    font-size: 0.92rem;
    line-height: 1.45;
    margin-bottom: 0.75rem;
  }
  .trama-text .trama-stats-header {
    font-size: 0.55rem;
    margin-top: 0.6rem;
  }
  .trama-text .trama-stats-sub {
    font-size: 0.48rem;
  }
  .trama-stat-box {
    min-height: 76px;
    padding: 0.45rem 0.55rem 0.5rem;
  }
  .trama-stat-value {
    font-size: 1.05rem;
  }
}

/* ═══ PRE-ORDER FORM (shared, used inside CTA) ═══ */
.preorder-form {
  display: flex;
  gap: 0;
  max-width: 380px;
  margin: 0 auto;
}
.preorder-form input {
  flex: 1;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-bright);
  border-right: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--void);
  outline: none;
  transition: border-color 0.3s;
}
.preorder-form input:focus {
  border-color: var(--void);
}
.preorder-form input::placeholder {
  color: var(--smoke);
}
.preorder-form button {
  padding: 0.875rem 1.5rem;
  background: var(--void);
  color: var(--white);
  border: 1px solid var(--void);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}
.preorder-form button:hover {
  background: var(--carbon);
}
.preorder-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--ash);
}
.preorder-contact {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.preorder-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
  transition: color 0.3s;
}
.preorder-contact-link:hover {
  color: var(--void);
}

/* ═══ CTA SECTION ═══ */
.cta-section {
  position: relative;
  z-index: 2;
  background: var(--void);
  color: var(--white);
  padding: clamp(5rem, 12vh, 8rem) 0;
  text-align: center;
}
.cta-inner {
  max-width: 440px;
  margin: 0 auto;
}
.cta-title {
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 2rem;
}
.cta-sub {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 2.5rem;
  line-height: 1.75;
}
.cta-section .preorder-form input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--white);
}
.cta-section .preorder-form input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.cta-section .preorder-form input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}
.cta-section .preorder-form button {
  background: var(--paper);
  color: var(--void);
}
.cta-section .preorder-form button:hover {
  background: var(--paper);
}
.cta-section .preorder-note {
  color: rgba(255, 255, 255, 0.4);
}
.cta-section .preorder-contact {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.cta-section .preorder-contact-link {
  color: rgba(255, 255, 255, 0.5);
}
.cta-section .preorder-contact-link:hover {
  color: var(--white);
}
@media (max-width: 768px) {
  .cta-section .preorder-form input {
    font-size: 16px;
  }
}

/* ═══ FOOTER ═══ */
footer {
  position: relative;
  z-index: 2;
  background: var(--void);
  padding: 4rem 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.footer-brand-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-on-dark-bright);
}
.footer-brand-text {
  font-size: 0.5625rem;
  letter-spacing: 0.25em;
  color: var(--text-on-dark-muted);
}
.footer-provenance {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
}
.footer-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.footer-links a {
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  color: var(--text-on-dark-tertiary);
  text-transform: uppercase;
  transition: color 0.3s;
}
.footer-links a:hover {
  color: var(--text-on-dark-secondary);
}
.footer-legal {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  color: var(--text-on-dark-muted);
}

/* ═══ SCROLL REVEAL CONVENTIONS ═══
   Two scroll-driven patterns, by design:

   1. SCRUB (continuous) — animation progress is bound 1:1 to scroll position.
      Used for: SVG path draws, the Entropia CAD scan/resolve, camera pans.
      Implemented ad-hoc with GSAP ScrollTrigger { scrub: true } or
      manual progress callbacks. No class needed — these are bespoke.

   2. STEP (distance-gated + cascade) — elements reveal once, one at a time,
      when they cross a trigger line near the bottom of the viewport. If a
      fast scroll crosses several .step elements at once, they cascade in
      sequence (~180ms apart) instead of all flashing together.
      Marker class: .step — GSAP wires up each element individually below. */

/* ═══ PASSWORD GATE ═══ */
.pw-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.4s ease;
}
.pw-gate.hidden {
  opacity: 0;
  pointer-events: none;
}
.pw-inner {
  width: 100%;
  max-width: 360px;
}
.pw-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.5rem;
}
.pw-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  object-fit: cover;
}
.pw-brand {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--void);
  margin: 0;
}
.pw-sub {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--ash);
  margin-top: 0.5rem;
}
.pw-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 0.5rem;
}
.pw-field {
  position: relative;
  margin-bottom: 1rem;
}
.pw-input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  border: 1px solid var(--bone);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--void);
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.pw-input::placeholder {
  color: var(--smoke);
}
.pw-input:focus {
  border-color: var(--void);
}
/* iOS Safari auto-zooms into any input whose font-size is <16px on focus,
   and the zoom persists after blur — offsetting pinned sections like the
   hero. Force 16px on mobile only so desktop typography is unchanged. */
@media (max-width: 768px) {
  .pw-input,
  .preorder-form input {
    font-size: 16px;
  }
}
.pw-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ash);
  padding: 4px;
  display: flex;
  align-items: center;
}
.pw-toggle:hover {
  color: var(--void);
}
.pw-error {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: #dc2626;
  margin-bottom: 0.75rem;
  display: none;
}
.pw-error.show {
  display: block;
}
.pw-submit {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: var(--void);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.pw-submit:hover {
  opacity: 0.9;
}
.pw-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pw-footer {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--ash);
  margin-top: 2rem;
}