/* ─────────────────────────────────────────────────────────────────────────
   Black I — ported from app/globals.css (Next.js build → standalone HTML)
   Tokens, keyframes, cursor, grain, view-transition-flavoured reveals.
   Layout utilities come from Tailwind Play CDN; everything brand-specific
   lives here so colours never depend on Tailwind config.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Color */
  --ink: #0a0a0b;
  --bone: #f5f4f0;
  --bone-2: #efede7;
  --carbon: #1a1a1d;
  --carbon-2: #232328;
  --ash: #8a8a92;
  --fog: #c8c8ce;
  --voltage: #d4ff3a;
  --signal: #ff4d1f;
  --whatsapp: #22c55e;

  /* Glass */
  --glass-dark: rgba(255, 255, 255, 0.04);
  --glass-dark-border: rgba(255, 255, 255, 0.08);
  --glass-dark-hi: rgba(255, 255, 255, 0.14);
  --glass-light: rgba(0, 0, 0, 0.03);
  --glass-light-border: rgba(0, 0, 0, 0.06);

  /* Spacing — strict */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-48: 192px;

  /* Radius */
  --r-card: 12px;
  --r-bento: 24px;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Accent — Signal locked */
  --accent: var(--signal);
  --accent-ink: #ffffff;
  /* Alt orange — warmer amber used for hero washes */
  --accent-alt: #ff8a3d;
  --hero-wash: radial-gradient(125% 88% at 50% -8%, rgba(255,138,61,0.20), rgba(255,138,61,0.06) 38%, var(--s-page) 66%);

  /* ─── Semantic surfaces (theme-aware) — LIGHT defaults ───────────────────
     Surfaces are used in `background:`; text tokens in `color:`. Splitting by
     property is what lets dark mode keep panels dark instead of inverting. */
  --s-page: #f5f4f0;      /* darkest-paper page background           */
  --s-sunken: #efede7;    /* alternate page background               */
  --s-deep: #0a0a0b;      /* "dark section" panel                    */
  --s-panel: #1a1a1d;     /* elevated dark panel                     */
  --s-panel-2: #232328;   /* deeper inset within a dark panel        */
  --text-strong: #0a0a0b; /* primary text on page surfaces           */
  --text-soft: #26262b;   /* body text on page surfaces              */
  --text-inverse: #f5f4f0;/* text on dark panels (light in both)     */
  --text-muted-inv: #c8c8ce;/* muted text on dark panels             */
  --border-soft: #d3d2cc; /* hairline dividers on page surfaces      */
  --border-strong: #0a0a0b;/* strong dividers on page surfaces       */
  --header-glass: rgba(245, 244, 240, 0.85);
  --grain-opacity: 0.035;
  --grain-invert: 0;
  color-scheme: light;

  --font-geist-sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-geist-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Display / headings — cozy humanist grotesque, swap here to restyle all headings */
  --font-display: "Bricolage Grotesque", "Geist", sans-serif;
}

/* Headings adopt the display face; body + .mono keep Geist / Geist Mono */
h1, h2, h3, .bi-display {
  font-family: var(--font-display);
}

/* Hero wash — warm alt-orange glow at the top of every hero, fading to page */
.bi-hero { background: var(--hero-wash) !important; }

/* ─── Dark theme ───────────────────────────────────────────────────────────
   Page goes darkest; "dark section" panels become *elevated* (lighter than
   the page) so the section rhythm reads instead of inverting. Tokens that only
   ever sit on dark panels (text-inverse, text-muted-inv, glass-dark-*) stay
   put — those panels are dark in both themes. */
[data-theme="dark"] {
  --s-page: #0c0c0e;
  --s-sunken: #131316;
  --s-deep: #19191d;
  --s-panel: #1f1f24;
  --s-panel-2: #27272d;
  --text-strong: #f2f1ed;
  --text-soft: #cdccc6;
  --text-inverse: #f5f4f0;
  --text-muted-inv: #c4c4cc;
  --border-soft: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.22);
  --header-glass: rgba(13, 13, 16, 0.82);
  --grain-opacity: 0.05;
  --grain-invert: 1;
  --ash: #9a9aa3;
  --glass-light-border: rgba(255, 255, 255, 0.10);
  --hero-wash: radial-gradient(125% 88% at 50% -8%, rgba(255,138,61,0.16), rgba(255,138,61,0.045) 36%, var(--s-page) 64%);
  color-scheme: dark;
}

/* Smooth the flip (but never animate layout/transform) */
html.bi-theme-anim, html.bi-theme-anim body,
html.bi-theme-anim *:not(.r-reveal):not(.r-blur):not(.bi-mask > span) {
  transition: background-color 280ms var(--ease-out-expo), color 280ms var(--ease-out-expo), border-color 280ms var(--ease-out-expo);
}

/* ─── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--s-page);
  color: var(--text-strong);
  scroll-padding-top: 96px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-geist-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--s-page);
  color: var(--text-strong);
}

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

/* ─── Utility ──────────────────────────────────────────────────────────── */
.mono { font-family: var(--font-geist-mono); letter-spacing: 0; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ─── Keyframes ────────────────────────────────────────────────────────── */
@keyframes bi-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes bi-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}
.bi-dot { animation: bi-pulse 2s ease-in-out infinite; }

@keyframes bi-slide-up {
  0% { transform: translateY(0.6em); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.bi-slide-up { animation: bi-slide-up 1s var(--ease-out-expo) both; }

@keyframes bi-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bi-fade-in { animation: bi-fade-in 800ms var(--ease-out-expo) both; }

/* ─── Custom cursor ────────────────────────────────────────────────────── */
.bi-cursor-dot, .bi-cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 9999px; display: none;
  mix-blend-mode: difference;
  will-change: transform, width, height;
}
.bi-cursor-active .bi-cursor-dot,
.bi-cursor-active .bi-cursor-ring { display: block; }
.bi-cursor-dot { width: 5px; height: 5px; background: #fff; }
.bi-cursor-ring {
  width: 30px; height: 30px; border: 1px solid #fff;
  transition: width 280ms var(--ease-out-expo), height 280ms var(--ease-out-expo),
    background 280ms var(--ease-out-expo), border-color 280ms var(--ease-out-expo);
}
.bi-cursor-ring.bi-cursor-hover { width: 56px; height: 56px; background: rgba(255,255,255,0.06); }
.bi-cursor-ring.bi-cursor-text { width: 3px; height: 22px; border-radius: 2px; border: none; background: #fff; }
.bi-cursor-ring.bi-cursor-with-label { width: 96px; height: 96px; background: rgba(255,255,255,0.04); }
.bi-cursor-label {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000;
  color: #fff; mix-blend-mode: difference;
  font-family: var(--font-geist-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap; transform-origin: center;
  opacity: 0; transform: scale(0.85); will-change: transform, opacity;
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .bi-cursor-dot, .bi-cursor-ring { display: none !important; }
}
.bi-cursor-active, .bi-cursor-active a, .bi-cursor-active button,
.bi-cursor-active [role="button"], .bi-cursor-active [data-cursor="hover"] { cursor: none; }
.bi-cursor-active input, .bi-cursor-active textarea, .bi-cursor-active select { cursor: text; }

/* ─── Ambient orbs (404 / spare) ───────────────────────────────────────── */
.bi-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; will-change: transform; }
@keyframes bi-orb-a { 0%,100% { transform: translate3d(0,0,0) scale(1);} 50% { transform: translate3d(36px,-28px,0) scale(1.05);} }
@keyframes bi-orb-b { 0%,100% { transform: translate3d(0,0,0) scale(1);} 50% { transform: translate3d(-44px,32px,0) scale(1.08);} }
@keyframes bi-orb-c { 0%,100% { transform: translate3d(0,0,0) scale(1);} 50% { transform: translate3d(18px,24px,0) scale(0.95);} }
.bi-orb-a { animation: bi-orb-a 18s ease-in-out infinite; }
.bi-orb-b { animation: bi-orb-b 22s ease-in-out infinite; }
.bi-orb-c { animation: bi-orb-c 26s ease-in-out infinite; }

/* ─── Film grain ───────────────────────────────────────────────────────── */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  opacity: var(--grain-opacity);
  filter: invert(var(--grain-invert));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* ─── Mask reveal (hero "Shipped out.") ────────────────────────────────── */
.bi-mask { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1; }
.bi-mask > span {
  display: inline-block; transform: translateY(105%);
  animation: bi-mask-rise 1.2s var(--ease-out-expo) both;
}
@keyframes bi-mask-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bi-mask > span { transform: translateY(0); animation: none; } }

/* ─── Lift hover for cards ─────────────────────────────────────────────── */
.bi-lift {
  transition: transform 360ms var(--ease-out-expo), border-color 360ms var(--ease-out-expo),
    box-shadow 360ms var(--ease-out-expo);
}
.bi-lift:hover {
  transform: translateY(-6px);
  border-color: var(--glass-dark-hi);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}

/* ─── Selection + focus ────────────────────────────────────────────────── */
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   Motion — vanilla replacements for the GSAP/ScrollTrigger primitives.
   Elements start hidden via these classes; JS adds .is-in on viewport entry.
   ═══════════════════════════════════════════════════════════════════════ */

/* Reveal — fade-up + 6px blur-in, 0.9s expo.out */
.r-reveal {
  opacity: 0; transform: translateY(var(--reveal-y, 24px)); filter: blur(6px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo),
    filter 0.9s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.r-reveal.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Stagger — children fade-up, 80ms apart, set by JS via --i */
.r-stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.r-stagger.is-in > * {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--i, 0) * var(--stagger-gap, 80ms));
}

/* BlurInWord — blur→0 + opacity + slight rise, 1.4s expo.out */
.r-blur {
  display: inline-block; opacity: 0.4; filter: blur(var(--blur, 16px)); transform: translateY(0.15em);
  transition: opacity 1.4s var(--ease-out-expo), filter 1.4s var(--ease-out-expo), transform 1.4s var(--ease-out-expo);
  will-change: filter, transform;
}
.r-blur.is-in { opacity: 1; filter: blur(0); transform: translateY(0); }

/* MaskLines — per-line translateY(110%)→0, expo.out, staggered by JS */
.r-mask-line-wrap { display: block; overflow: hidden; line-height: inherit; }
.r-mask-line {
  display: inline-block; transform: translateY(110%); will-change: transform;
  transition: transform 1s var(--ease-out-expo);
  transition-delay: var(--line-delay, 0ms);
}
.r-mask.is-in .r-mask-line { transform: translateY(0); }

/* Reduced motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .r-reveal, .r-stagger > *, .r-blur, .r-mask-line {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important;
  }
}

/* No-JS fallback — never trap content behind a class that never flips */
.no-js .r-reveal, .no-js .r-stagger > *, .no-js .r-blur, .no-js .r-mask-line {
  opacity: 1 !important; transform: none !important; filter: none !important;
}

/* Print / PDF — always show reveal content regardless of scroll state */
@media print {
  .r-reveal, .r-stagger > *, .r-blur, .r-mask-line {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ─── Theme toggle button ──────────────────────────────────────────────── */
.bi-theme-btn:hover { background: var(--glass-light); border-color: var(--text-strong); }
.bi-ico-sun { display: none; }
.bi-ico-moon { display: block; }
[data-theme="dark"] .bi-ico-sun { display: block; }
[data-theme="dark"] .bi-ico-moon { display: none; }

/* ─── Burger → X ───────────────────────────────────────────────────────── */
.bi-burger.is-open { background: var(--text-strong); color: var(--s-page); border-color: var(--text-strong); }
.bi-burger.is-open .bi-burger-top { top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); }
.bi-burger.is-open .bi-burger-bot { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }

/* ─── BrandReveal — first-visit overlay ────────────────────────────────── */
.bi-brand-reveal {
  display: none; position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center; flex-direction: column;
  background: var(--s-page); opacity: 1; pointer-events: none;
  transition: opacity 600ms var(--ease-out-expo);
}
.bi-brand-reveal.exit { opacity: 0; }
.bi-brand-reveal .brand-row {
  display: flex; align-items: baseline; gap: 18px;
  transform: translateY(0); transition: transform 600ms var(--ease-out-expo);
}
.bi-brand-reveal.exit .brand-row { transform: translateY(-12px); }
.bi-brand-reveal .brand-badge {
  display: grid; place-items: center; border-radius: 6px;
  width: 64px; height: 64px; background: var(--text-strong); color: var(--s-page);
  font-weight: 800; font-size: 44px; letter-spacing: -0.04em;
}
.bi-brand-reveal .brand-word {
  font-weight: 600; font-size: clamp(48px, 9vw, 144px); letter-spacing: -0.04em;
  line-height: 1; filter: blur(8px); opacity: 0;
  transition: filter 700ms var(--ease-out-expo), opacity 600ms var(--ease-out-expo);
}
.bi-brand-reveal.show .brand-word { filter: blur(0); opacity: 1; }
.bi-brand-reveal .brand-tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 48px; font-size: 11px; color: var(--ash); letter-spacing: 0.15em;
  opacity: 0; transition: opacity 600ms var(--ease-out-expo) 150ms;
}
.bi-brand-reveal.show .brand-tag { opacity: 1; }

/* ─── Form fields (dark sections) ──────────────────────────────────────── */
.bi-field {
  width: 100%; background: transparent; color: var(--text-inverse);
  border: 1px solid var(--glass-dark-border); border-radius: 8px;
  padding: 14px 16px; font-size: 16px; font-family: inherit; outline: none;
  transition: border-color 200ms var(--ease-out-expo);
}
.bi-field:focus { border-color: var(--glass-dark-hi); }
.bi-field::placeholder { color: var(--ash); }
.bi-field option { color: #000; }
.bi-field-err { border-color: var(--signal) !important; }
.bi-err { font-size: 12px; color: var(--signal); min-height: 0; }
.bi-err:empty { display: none; }
.bi-step { animation: bi-step-in 0.5s var(--ease-out-expo) both; }
@keyframes bi-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bi-step { animation: none; } }

/* ─── Estimator result reveal ──────────────────────────────────────────── */
.bi-scope-in { animation: bi-scope-in 0.7s var(--ease-out-expo) both; }
@keyframes bi-scope-in { from { opacity: 0; transform: translateY(16px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .bi-scope-in { animation: none; } }