/* 09 · Halden Aero: dark cinematic, scroll-driven 3D laptop. Overrides token values only. */
:root {
  --bg-primary: #EEF0F5;
  --bg-secondary: #E2E6EE;
  --bg-elevated: #FFFFFF;
  --text-primary: #0B0F1A;
  --text-secondary: #424B61;
  --border-color: #C6CEDD;
  --primary-color: #2D4BC8;
  --primary-contrast: #FFFFFF;
  --accent-color: #6B3FD6;
  --glow-color: #5B7CFF;
  --focus-ring: #2D4BC8;
}
[data-theme="dark"] {
  --bg-primary: #05070B;
  --bg-secondary: #0C1018;
  --bg-elevated: #121826;
  --text-primary: #EEF1F6;
  --text-secondary: #A3ADC0;
  --border-color: #1F2736;
  --primary-color: #8FB4FF;
  --primary-contrast: #05070B;
  --accent-color: #B28CFF;
  --glow-color: #5B7CFF;
  --focus-ring: #B6CCFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #05070B;
    --bg-secondary: #0C1018;
    --bg-elevated: #121826;
    --text-primary: #EEF1F6;
    --text-secondary: #A3ADC0;
    --border-color: #1F2736;
    --primary-color: #8FB4FF;
    --primary-contrast: #05070B;
    --accent-color: #B28CFF;
    --glow-color: #5B7CFF;
    --focus-ring: #B6CCFF;
  }
}

.tag { color: var(--primary-color); letter-spacing: 0.12em; }

/* Scroll stage: a tall track with one pinned viewport inside. */
.showcase { position: relative; height: 420vh; }
.showcase__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 38%, color-mix(in srgb, var(--glow-color) 24%, transparent), transparent 70%), var(--bg-primary);
}
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.showcase__scrim {
  position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bg-primary) 94%, transparent) 62%);
}
.showcase__captions { position: absolute; inset: auto 0 0 0; height: 42%; pointer-events: none; }
.caption {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-16);
  max-width: 36rem; opacity: 0; visibility: hidden; display: grid; gap: var(--space-3); justify-items: start;
}
.caption:first-child { opacity: 1; visibility: visible; } /* before JS runs, and in gallery previews */
.caption a { pointer-events: auto; }
.caption h1, .caption h2 { font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.caption__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 640px) { .caption { left: 0; right: 0; } }


.showcase.no-webgl .showcase__pin { background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--glow-color) 45%, transparent), var(--bg-primary) 70%); }

/* Specs and CTA */
.specs { list-style: none; padding: 0; margin: var(--space-10) 0 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
.spec { background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-2); }
.spec__num { font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1; color: var(--primary-color); letter-spacing: -0.02em; }
.spec__label { color: var(--text-secondary); font-size: var(--text-sm); }
@media (min-width: 768px) { .specs { grid-template-columns: repeat(4, 1fr); } }
.section__title { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem); letter-spacing: -0.02em; max-width: 24ch; }
.section--cta { background: var(--bg-secondary); }
.cta { display: grid; gap: var(--space-4); justify-items: start; }

.site-footer { border-top: 1px solid var(--border-color); padding-block: var(--space-8); }
.footer__legal { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }

/* Reduced motion and previews: a still, open laptop with the captions stacked below. */
@media (prefers-reduced-motion: reduce) {
  .showcase { height: auto; }
  .showcase__pin { position: relative; height: auto; overflow: visible; background: var(--bg-primary); }
  #stage { position: relative; height: 60svh; }
  .showcase__scrim { display: none; }
  .showcase__captions { position: static; height: auto; display: grid; gap: var(--space-8); padding-block: var(--space-8); }
  .caption { position: static; opacity: 1; visibility: visible; transform: none; }
}