/* ============================================================
   Level. — Data Center & Server Room HVAC
   Design tokens + shared components (reusable across this
   project's future pages — keep header/button/token rules here,
   put page-specific scene layout in a page-level stylesheet or
   a <style> block in that page).
   ============================================================ */

:root {
  /* --- Brand tokens (carried over from the parent brand system) --- */
  --bg: #0a0a08;
  --bg-alt: #100f0b;
  --cream: #f2ede2;
  --cream-dim: #cfc9ba;
  --gold: #c9a227;
  --gold-light: #d9bb5a;
  --ink: #0a0a08; /* text-on-gold */

  /* Secondary accent — technical graphics ONLY (Scene 2 chart). Gold stays
     the dominant accent everywhere else. */
  --steel: #8a97a3;
  --steel-dim: #4b555f;

  --border: #2a271f;
  --radius: 4px;

  --font-serif: "Playfair Display", "Georgia", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Swap point for real hero photography once a licensed asset exists.
     Layout does not need to change — only this variable. */
  --hero-photo: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html {
  /* Scales the whole rem-based type system up on larger viewports so
     the page doesn't read as small/cramped on wide desktop displays. */
  font-size: clamp(16px, 0.9vw + 12px, 19px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

/* Faint gold-tinted grid texture, used as a fixed backdrop layer */
.grid-texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 1.25rem;
}

em, .em {
  font-style: italic;
  color: var(--gold-light);
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: scale(1.02);
}
.btn-primary .arrow {
  transition: transform 0.18s ease;
}
.btn-primary:hover .arrow {
  transform: translateX(3px);
}

.btn-secondary {
  background: transparent;
  color: var(--cream);
  border-color: rgba(242, 237, 226, 0.35);
}
.btn-secondary:hover {
  border-color: var(--cream);
  background: rgba(242, 237, 226, 0.06);
}

/* ---------------- Header ---------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(to bottom, rgba(10, 10, 8, 0.92), rgba(10, 10, 8, 0));
  backdrop-filter: blur(6px);
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.logo .dot { color: var(--gold); }

.site-header .btn {
  font-size: 0.85rem;
  padding: 0.7em 1.3em;
}

/* ---------------- Layout primitives ---------------- */

.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem clamp(1.5rem, 6vw, 6rem);
  overflow: hidden;
}

.scene-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  width: 100%;
}
.scene-inner.wide { max-width: 1080px; }

.scene h1, .scene h2, .scene h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}

.scene p {
  color: var(--cream-dim);
  max-width: 60ch;
  font-size: 1.05rem;
}

.parallax-layer {
  position: absolute;
  inset: -20% -5%;
  z-index: 0;
  will-change: transform;
}

/* Split-panel scene: a real image panel beside a solid text panel, instead
   of a photo sitting dimmed behind everything. The image panel shows the
   photo prominently (light treatment, not a heavy dark wash) — the text
   panel is where the near-black brand background and gold accents live.
   On desktop the photo is allowed to physically bleed past its own panel —
   over the scene's top/bottom edge (no more hard seam line between scenes)
   and sideways into the text column, sitting ABOVE the text in stacking
   order. Combined with the two panels' independent scroll speeds (see
   scroll-reveal.js), the amount of that overlap keeps changing as you
   scroll, so text is genuinely covered and then uncovered — not just a
   static crop. Mobile stays fully contained (no bleed) for legibility. */
.scene.split {
  padding: 0;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 900px) {
  .scene.split { flex-direction: row; align-items: stretch; overflow: visible; }
  .scene.split.reverse { flex-direction: row-reverse; }
}
.scene.split .text-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 6.5rem clamp(1.5rem, 5vw, 3.5rem) 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px) {
  .scene.split .text-panel { width: 44%; flex: 0 0 44%; }
}
.scene.split .photo-panel {
  position: relative;
  z-index: 3;
  overflow: hidden;
  min-height: 46vh;
}
@media (min-width: 900px) {
  .scene.split .photo-panel { overflow: visible; min-height: auto; flex: 1 1 56%; }
}
.scene.split .photo-panel .scene-photo {
  position: absolute;
  inset: 0;
}
@media (min-width: 900px) {
  /* Bleeds past the scene's vertical edges either way; horizontally it
     reaches toward whichever side the text panel is on. A mask fades the
     image out toward that inner edge so it dissolves into the text panel
     rather than slicing across it with a hard line. */
  .scene-photo.overlap-left {
    inset: -12% -3% -12% -24%;
    -webkit-mask-image: linear-gradient(to left, black 58%, transparent 100%);
    mask-image: linear-gradient(to left, black 58%, transparent 100%);
  }
  .scene-photo.overlap-right {
    inset: -12% -24% -12% -3%;
    -webkit-mask-image: linear-gradient(to right, black 58%, transparent 100%);
    mask-image: linear-gradient(to right, black 58%, transparent 100%);
  }
}
.scene.split .photo-panel::after {
  /* Seam blend only — fades the panel's outer (non-overlap) edge toward
     the page background so it reads as framed, not a harsh photo/black cut. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(10, 10, 8, 0.4), transparent 12%, transparent 88%, rgba(10, 10, 8, 0.4));
}
.scene.split .scene-inner { max-width: none; }

/* Reusable soft radial glow for per-scene parallax backgrounds. Position/
   size/intensity are set per instance via custom properties. */
.bg-glow {
  position: absolute;
  width: var(--glow-size, 800px);
  height: var(--glow-size, 800px);
  top: var(--glow-top, 50%);
  left: var(--glow-left, 50%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201, 162, 39, var(--glow-alpha, 0.08)) 0%, rgba(201, 162, 39, 0) 60%);
}

/* Photo panel — shown prominently, not as dimmed backdrop texture. Light
   grade only (a small contrast/saturation nudge toward the brand palette),
   plus a thin edge vignette so it reads as a deliberately framed panel. */
.scene-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.05);
}
.scene-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 8, 0) 60%, rgba(10, 10, 8, 0.35) 100%);
}
.scene-photo.dim::after {
  background: linear-gradient(to bottom, rgba(10, 10, 8, 0.1), rgba(10, 10, 8, 0.4));
}

/* Oversized ghost numeral — the page's dominant moving graphic. One per
   scene, each on its own fast-moving parallax layer so it reads as the
   main visual event of the scroll, not a decoration. */
.bg-numeral {
  position: absolute;
  top: var(--num-top, 50%);
  left: var(--num-left, 50%);
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: var(--num-size, 32rem);
  line-height: 1;
  color: var(--num-color, var(--gold));
  opacity: var(--num-alpha, 0.06);
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 900px) {
  .bg-numeral { font-size: calc(var(--num-size, 32rem) * 0.55); }
}

/* ---------------- Scroll reveal (see scroll-reveal.js) ----------------
   Progressive enhancement: content is only hidden pending reveal when
   `html.js` is present (set by an inline script in <head>, before first
   paint). If JS is blocked/disabled, .reveal elements are just plain,
   visible content — never permanently hidden. */

html.js .reveal {
  opacity: 0;
  transform: translateY(52px) scale(0.94);
  transition: opacity 0.7s ease-out,
    transform 0.85s cubic-bezier(0.22, 1.4, 0.36, 1); /* overshoot "pop" */
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    transition: opacity 0.4s ease;
    transform: none;
  }
  .parallax-layer {
    transform: none !important;
  }
}

footer.site-footer {
  position: relative;
  z-index: 1;
  padding: 3rem clamp(1.5rem, 6vw, 6rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  color: var(--cream-dim);
  font-size: 0.85rem;
}
footer.site-footer .logo { font-size: 1.1rem; }

@media (max-width: 640px) {
  .scene { padding: 6rem 1.5rem; }
}