/* ==========================================================================
   FOUR ONE FIVE VISUALS — fog theme
   Inverted "sky / cloud / fog" skin scoped to body.theme-fog: near-white
   atmosphere, graphite type, steel-blue accent, liquid-glass graphite tiles.
   Loads AFTER style.css, only on pages that opt in via the body class —
   most of the inversion happens by redefining the palette variables.
   ========================================================================== */

body.theme-fog {
  --black: #eef1f5;      /* page base — was near-black */
  --ink: #e4e9ef;        /* deeper section wash — now a shade of mist */
  --panel: rgba(255, 255, 255, 0.72);
  --fog-dark: #a7b0ba;   /* borders / dividers */
  --fog: #5a646f;        /* secondary text */
  --fog-light: #39424c;  /* body text */
  --paper: #1c2127;      /* headings — graphite */
  --amber: #5e87ab;      /* accent — steel blue */
  --amber-bright: #4a749a;
  --amber-dim: rgba(94, 135, 171, 0.16);
  background: var(--black);
  color: var(--fog-light);
}
body.theme-fog ::selection { background: #5e87ab; color: #fff; }

/* --------------------------------------------------------------------------
   Nav — frosted white glass
   -------------------------------------------------------------------------- */
body.theme-fog .nav {
  background: linear-gradient(to bottom, rgba(244, 247, 250, 0.92), rgba(244, 247, 250, 0.72));
  border-bottom: 1px solid rgba(90, 100, 111, 0.14);
}
body.theme-fog .nav-toggle { border-color: rgba(90, 100, 111, 0.3); }

/* Custom cursor — graphite-black ring and dot instead of the amber set
   (the trail's orange was hardcoded in style.css, not var-driven). */
body.theme-fog .cursor-ring { border-color: #1c2127; }
body.theme-fog .cursor-ring::after { background: #1c2127; }
body.theme-fog .cursor-trail { border-color: rgba(28, 33, 39, 0.32); }
@media (max-width: 860px) {
  body.theme-fog .nav-links {
    background: rgba(244, 247, 250, 0.98);
    border-bottom: 1px solid rgba(90, 100, 111, 0.15);
  }
}

/* --------------------------------------------------------------------------
   Fog hero — pinned scroll stage, same skeleton as the homepage hero: a
   tall scroll track with a sticky viewport-height stage. The mark holds
   alone over the drifting clouds, lifts and fades on scroll while the
   tagline follows it up, reveals, then fades out before the next panel.
   Ambient cloud drift is pure CSS; the choreography (and the future
   background-clip scrub) lives in the fogLoop block in js/main.js.
   -------------------------------------------------------------------------- */
.fog-hero { position: relative; height: 380vh; }
.fog-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #d9e3ee 0%, #e9eef4 55%, #eef1f5 100%);
}
/* Background clip slot — sits under the cloud layers so the fog drifts
   over the footage. Empty until the hero video lands; js/main.js scrubs
   it against scroll automatically once a video exists here. */
.fog-media { position: absolute; inset: 0; }
.fog-media video { width: 100%; height: 100%; object-fit: cover; }
/* Misty white veil over the (dark) footage so the inverted sky/fog theme
   and the graphite copy keep their contrast. --veil is driven by the
   fogLoop: 1 at rest, thinning as the mark lifts so the footage comes
   into view. */
.fog-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(217,227,238,0.6) 0%, rgba(233,238,244,0.38) 45%, rgba(238,241,245,0.6) 100%);
  opacity: var(--veil, 1);
}
.fog-sky { position: absolute; inset: -22%; will-change: transform; }
.fog-layer {
  position: absolute;
  inset: 0;
  filter: blur(55px);
  will-change: transform;
}
.fog-a {
  background:
    radial-gradient(42% 30% at 22% 38%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(35% 26% at 75% 30%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0) 70%);
  animation: fog-drift-a 52s ease-in-out infinite alternate;
}
.fog-b {
  background:
    radial-gradient(48% 34% at 68% 62%, rgba(211, 224, 238, 0.9) 0%, rgba(211, 224, 238, 0) 72%),
    radial-gradient(30% 22% at 30% 70%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 70%);
  animation: fog-drift-b 74s ease-in-out infinite alternate;
}
.fog-c {
  background:
    radial-gradient(60% 40% at 50% 85%, rgba(233, 238, 244, 0.96) 0%, rgba(233, 238, 244, 0) 75%),
    radial-gradient(26% 20% at 12% 20%, rgba(196, 212, 228, 0.65) 0%, rgba(196, 212, 228, 0) 70%);
  animation: fog-drift-c 96s ease-in-out infinite alternate;
}
@keyframes fog-drift-a { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(5%, 3%, 0) scale(1.08); } }
@keyframes fog-drift-b { from { transform: translate3d(3%, 2%, 0) scale(1.05); } to { transform: translate3d(-5%, -3%, 0) scale(1); } }
@keyframes fog-drift-c { from { transform: translate3d(-2%, 3%, 0) scale(1.02); } to { transform: translate3d(4%, -2%, 0) scale(1.1); } }
body.reduced-motion .fog-layer { animation: none; }

.fog-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 1.5rem;
}
.fog-logo { will-change: transform, opacity; }
.fog-logo img {
  width: min(70vw, 520px);
  height: auto;
  filter: drop-shadow(0 18px 45px rgba(51, 64, 80, 0.28));
}
.fog-tag {
  /* Out of flow so the mark alone sits dead-center in the stage; the
     line anchors just below it and the fogLoop lifts it from there. */
  position: absolute;
  top: calc(100% + 1.4rem);
  left: 0;
  right: 0;
  width: fit-content;
  margin-inline: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  /* Tighter than the body's 1.65 — the two lines read as one mark. */
  line-height: 1.18;
  text-transform: capitalize;
  /* Mist-white with a dark drop shadow to carry it over the footage. */
  color: #eef1f5;
  text-shadow: 0 2px 14px rgba(16, 19, 23, 0.85), 0 1px 4px rgba(16, 19, 23, 0.9);
  /* Hidden at rest — the fogLoop drives opacity/transform against scroll. */
  opacity: 0;
  transform: translateY(44px);
  will-change: transform, opacity;
}
.fog-hero .hero-scroll-hint { color: var(--fog); }

/* Reduced motion: no pin, no choreography — one calm viewport, all resting. */
body.reduced-motion .fog-hero { height: 100vh; height: 100svh; }
body.reduced-motion .fog-tag { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Liquid-glass graphite tiles — service cards keep their dark identity as
   smoked glass floating on the fog. No overflow:hidden here: the expandable
   carousel hangs below the tile's box (see .svc-carousel in style.css).
   -------------------------------------------------------------------------- */
body.theme-fog .svc {
  /* Near-opaque graphite reads as smoked glass on its own; backdrop-filter
     is deliberately absent — it makes these tiles paint blank in Chrome's
     compositor (verified live), and at this opacity blur adds nothing. */
  background: linear-gradient(150deg, rgba(44, 49, 57, 0.9), rgba(26, 30, 36, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow:
    0 24px 55px rgba(45, 58, 72, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  position: relative;
}
body.theme-fog .svc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 28%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
body.theme-fog .svc h3 { color: #f4f6f9; }
body.theme-fog .svc p { color: #b8c0c9; }
body.theme-fog .svc:hover { border-color: rgba(122, 166, 201, 0.6); }
body.theme-fog .svc--expandable.svc-is-expanded {
  border-color: rgba(122, 166, 201, 0.65);
  box-shadow:
    0 30px 70px rgba(45, 58, 72, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body.theme-fog .svc-card {
  border-color: rgba(255, 255, 255, 0.28);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 12px, transparent 12px 24px);
}
body.theme-fog .svc-card .ph-label { color: #c9d2db; }
body.theme-fog .svc-card .ph-sub { color: #8b95a0; }
body.theme-fog .svc-carousel-arrow {
  background: rgba(28, 32, 38, 0.8);
  border-color: rgba(122, 166, 201, 0.55);
  color: #e8edf2;
}

/* --------------------------------------------------------------------------
   Portfolio tiles — thumbnails in polished glass frames, labels as graphite
   glass chips.
   -------------------------------------------------------------------------- */
body.theme-fog .portfolio-tile {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 45px rgba(45, 58, 72, 0.2);
}
body.theme-fog .tile-label {
  right: auto;
  padding: 0.42rem 0.75rem;
  background: rgba(24, 28, 33, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #f4f6f9;
}

/* Modal — foggy white backdrop, player stays dark */
body.theme-fog .portfolio-modal-backdrop { background: rgba(238, 241, 245, 0.92); }
body.theme-fog .portfolio-modal-container {
  background: #101215;
  box-shadow: 0 30px 80px rgba(45, 58, 72, 0.4);
}
body.theme-fog .portfolio-modal-video { background: #101215; }
body.theme-fog .portfolio-modal-close {
  background: rgba(28, 32, 38, 0.85);
  border-color: rgba(255, 255, 255, 0.3);
  color: #f4f6f9;
}

/* --------------------------------------------------------------------------
   Process steps — light glass over the fog
   -------------------------------------------------------------------------- */
body.theme-fog .process-step {
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 34px rgba(45, 58, 72, 0.12);
}

/* Buttons — steel accent needs white text when filled */
body.theme-fog .btn-primary { color: #fff; }
body.theme-fog .btn-primary:hover,
body.theme-fog .btn-primary:focus-visible { color: #fff; }