/* ============================================================
   AMJ — FX layer: 3D cursor depth, tilt, media reel
   ============================================================ */

/* ---------- Media frames (real imagery replaces striped .ph) ---------- */
.media { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame { position: relative; overflow: hidden; }
.ph-badge {
  position: absolute; left: 14px; bottom: 12px; z-index: 4;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: oklch(0.95 0.01 250 / 0.9);
  background: oklch(0.10 0.02 250 / 0.55); padding: 5px 9px; border-radius: 5px;
  backdrop-filter: blur(4px); border: 1px solid oklch(1 0 0 / 0.12);
}

/* slow cinematic drift for image-led motion */
.kenburns { animation: kenburns 26s var(--ease) infinite alternate; }
@keyframes kenburns {
  0%   { transform: scale(1.06) translate(0, 0); }
  100% { transform: scale(1.16) translate(-2.5%, -2%); }
}
:root[data-motion="off"] .kenburns { animation: none; }

/* ---------- HERO cinematic backdrop (dark in both themes) ---------- */
.hero { perspective: 1300px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #080706; will-change: transform; }
.hero-bg-cursor { position: absolute; inset: -6%; transform: none !important; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.42) brightness(0.24);
  opacity: 0.025;
  animation: none !important;
  transform: none !important;
}
/* legibility scrim + page handoff (theme-aware bottom fade) */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 78%,
    color-mix(in oklch, var(--bg), transparent 55%) 90%,
    color-mix(in oklch, var(--bg), transparent 12%) 97%,
    var(--bg) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(72% 46% at 50% 50%, oklch(0.015 0.02 258 / 0.16), transparent 74%),
    linear-gradient(180deg,
      oklch(0.022 0.02 258 / 0.24) 0%,
      transparent 28%,
      transparent 62%,
      oklch(0.22 0.045 242 / 0.08) 82%,
      transparent 100%);
}

.hero-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
}
.hero-grid {
  opacity: 0.035;
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.13) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.11) 1px, transparent 1px);
}
.hero-particles { display: none; }

.hero-floaters { display: none; }

/* ---------- Scroll-linked margin truck ---------- */
.truck-track { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 24; pointer-events: none; }
.truck-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.truck-road { fill: none; stroke: none; }
.truck { opacity: 0; transform-box: fill-box; transform-origin: center; transition: transform 0.35s ease; }
.floater {
  position: absolute; display: block; will-change: transform;
  background: linear-gradient(160deg, oklch(0.72 0.10 244 / 0.55), oklch(0.55 0.12 244 / 0.12));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  filter: blur(0.4px);
  box-shadow: 0 20px 60px oklch(0.20 0.08 244 / 0.4);
}
.floater.f1 { width: 130px; height: 150px; top: 24%; right: 16%; opacity: 0.7; }
.floater.f2 { width: 78px;  height: 92px;  top: 58%; right: 30%; opacity: 0.5; transform: rotate(18deg); }
.floater.f3 { width: 200px; height: 230px; top: 40%; right: 6%;  opacity: 0.32; }

/* hero foreground is always light (sits on dark cinematic bg) */
.hero .est {
  color: oklch(0.82 0.025 68 / 0.86);
  letter-spacing: 0.26em;
  text-shadow: 0 1px 18px oklch(0 0 0 / 0.55);
}
.hero h1 {
  font-family: "Cormorant Garamond", var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  font-size: clamp(30px, 4vw, 58px);
  text-align: center;
  color: oklch(0.98 0.010 78);
  text-shadow: 0 2px 22px oklch(0 0 0 / 0.55), 0 0 1px oklch(0.93 0.055 72 / 0.70);
}
.hero-tagline {
  text-align: center;
  margin: clamp(16px, 2.4vh, 26px) auto 0;
  max-width: 30ch;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: clamp(15px, 1.45vw, 19px);
  font-weight: 400; letter-spacing: 0.005em; line-height: 1.5;
  color: oklch(0.90 0.018 240 / 0.82);
}
.hero-tagline em { font-style: normal; color: oklch(0.78 0.075 238); }
.hero h1 .num { margin-left: 0.1em; }
.hero .accent-text {
  color: oklch(0.78 0.045 72);
  text-shadow: 0 0 26px oklch(0.74 0.075 235 / 0.32);
}
.hero em.it { color: oklch(0.84 0.028 72 / 0.90); }
.hero .lede {
  color: oklch(0.88 0.020 72 / 0.88);
  text-shadow: 0 1px 18px oklch(0 0 0 / 0.50);
}
.hero .scroll-cue { color: oklch(0.78 0.026 72 / 0.72); }
.hero .btn-primary {
  background: linear-gradient(135deg, oklch(0.56 0.095 68), oklch(0.37 0.065 58));
  color: oklch(0.985 0.010 72);
  box-shadow: 0 20px 54px oklch(0.12 0.02 42 / 0.42), inset 0 1px 0 oklch(1 0 0 / 0.22);
}
.hero .btn-primary:hover { background: linear-gradient(135deg, oklch(0.62 0.105 70), oklch(0.43 0.075 58)); }
.hero .btn-ghost { border-color: oklch(0.78 0.055 70 / 0.45); color: oklch(0.98 0.010 72); }
.hero .btn-ghost::after { background: oklch(0.88 0.045 72); }
.hero .btn-ghost:hover { color: oklch(0.15 0.018 42); border-color: oklch(0.88 0.045 72); }
.hero-flow {
  width: min(100%, 620px);
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.78 0.030 72 / 0.76);
}
.hero-flow i {
  width: clamp(28px, 5vw, 72px);
  height: 1px;
  position: relative;
  overflow: hidden;
  background: oklch(0.82 0.045 72 / 0.24);
}
.hero-flow i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, oklch(0.74 0.095 70), transparent);
  animation: laneFlow 2.6s linear infinite;
}
.hero-flow i:nth-of-type(2)::after { animation-delay: 0.5s; }
.hero-flow i:nth-of-type(3)::after { animation-delay: 1s; }
@keyframes laneFlow {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

/* ---------- NAV over the dark hero (transparent state) ---------- */
.nav:not(.solid) .nav-links a { color: oklch(0.92 0.02 250 / 0.82); }
.nav:not(.solid) .nav-cta { color: oklch(0.99 0.005 250); border-color: oklch(1 0 0 / 0.4); }
/* logo: white knockout while over hero / in dark theme; navy when solid+light */
.brand .logo-dark { display: none; }
.nav:not(.solid) .brand .logo-light { display: none; }
.nav:not(.solid) .brand .logo-dark { display: block; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }

/* ---------- Division dropdown (desktop nav) ---------- */
.nav-dd { position: relative; display: inline-flex; align-items: center; }
.nav-dd-toggle {
  font-family: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  transition: color 0.35s var(--ease);
}
.nav-dd-caret { font-size: 0.6em; opacity: 0.65; transition: transform 0.3s var(--ease); }
.nav-dd:hover .nav-dd-toggle, .nav-dd:focus-within .nav-dd-toggle, .nav-dd.is-active .nav-dd-toggle { color: var(--ink); }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); }
.nav:not(.solid) .nav-dd-toggle { color: oklch(0.92 0.02 250 / 0.82); }
.nav:not(.solid) .nav-dd:hover .nav-dd-toggle,
.nav:not(.solid) .nav-dd:focus-within .nav-dd-toggle,
.nav:not(.solid) .nav-dd.is-active .nav-dd-toggle { color: oklch(0.99 0.005 250); }
.nav-dd-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 258px; padding: 8px; margin-top: 8px;
  background: color-mix(in oklch, var(--bg), transparent 6%);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 26px 64px oklch(0.10 0.02 250 / 0.40);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
  z-index: 60;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dd-menu a { display: block; padding: 11px 14px; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: background 0.3s var(--ease); }
.nav:not(.solid) .nav-dd-menu a { color: var(--ink); }
.nav-dd-menu a::before { display: none; }
.nav-dd-menu a small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.nav-dd-menu a:hover { background: color-mix(in oklch, var(--accent), transparent 86%); color: var(--ink); }
.nav-dd-menu a.is-active { background: color-mix(in oklch, var(--accent), transparent 80%); }

/* ---------- 3D tilt-on-cursor ---------- */
[data-tilt] {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}
[data-tilt].tilting { transition: transform 0.08s linear; }
.glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), oklch(1 0 0 / 0.22), transparent 46%);
  transition: opacity 0.5s var(--ease);
}
[data-tilt].tilting .glare { opacity: 1; }
:root[data-motion="off"] [data-tilt] { transform: none !important; }

/* lift brand cells / news cards into 3D on tilt */
.brand-cell, .news-card { position: relative; }
.brand-cell[data-tilt] .name { transform: translateZ(30px); }
.news-card .media { transition: transform 0.8s var(--ease); }
.news-card:hover .media { transform: scale(1.06); }

/* ---------- REAL MEDIA OPERATIONS REEL ---------- */
.home-infra { padding-bottom: clamp(56px, 7vw, 98px); }
.showreel-sect { padding-top: clamp(60px, 8vw, 110px); }
.showreel-sect .sect-head { margin-bottom: clamp(28px, 3vw, 38px); }
.ops-reel {
  position: relative; border-radius: 8px; overflow: hidden;
  aspect-ratio: 21 / 9; border: 0;
  box-shadow: 0 40px 110px oklch(0.20 0.05 250 / 0.22);
}
.ops-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.9s var(--ease), transform 7s linear;
}
.ops-frame.active { opacity: 1; transform: scale(1.1); }
.ops-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(110deg, oklch(0.10 0.03 250 / 0.78) 0%, oklch(0.10 0.03 250 / 0.35) 45%, transparent 80%),
              linear-gradient(0deg, oklch(0.10 0.03 250 / 0.5), transparent 50%);
}
.ops-reel::before {
  content: ""; position: absolute; z-index: 3; inset: 18px;
  border-block: 1px solid oklch(1 0 0 / 0.16);
  pointer-events: none;
}
.ops-reel::after {
  content: ""; position: absolute; z-index: 3; inset: 0;
  background:
    linear-gradient(90deg, transparent 0 58%, oklch(1 0 0 / 0.12) 58% 58.25%, transparent 58.25%),
    repeating-linear-gradient(90deg, transparent 0 88px, oklch(1 0 0 / 0.055) 89px, transparent 90px);
  mix-blend-mode: screen; opacity: 0.45; pointer-events: none;
  animation: scanDrift 9s linear infinite;
}
@keyframes scanDrift { to { transform: translateX(90px); } }
.ops-meta {
  position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(104px, 9vw, 132px); z-index: 4;
  display: flex; flex-direction: column; gap: 14px; max-width: min(520px, calc(100% - 48px));
}
.ops-meta p { color: oklch(0.92 0.012 250 / 0.86); font-size: 15px; line-height: 1.55; max-width: 46ch; }
.ops-steps {
  position: absolute; left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px); bottom: clamp(24px, 3.4vw, 42px); z-index: 4;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding-top: 12px; border-top: 1px solid oklch(1 0 0 / 0.22);
}
.ops-steps button {
  position: relative; overflow: hidden; text-align: left;
  border: 0; background: transparent;
  color: oklch(0.96 0.006 250); padding: 0 0 12px;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.ops-steps button::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent); opacity: 0.95;
}
.ops-steps button { opacity: 0.66; }
.ops-steps button.active { opacity: 1; }
.ops-steps button.active::after { animation: reelProgress 4.8s linear both; }
.ops-steps button:hover { transform: translateY(-2px); }
.ops-steps b {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: oklch(0.86 0.04 244); margin-bottom: 4px;
}
.ops-steps span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes reelProgress { to { width: 100%; } }

@media (max-width: 700px) {
  .ops-reel { aspect-ratio: 4 / 3; }
  .ops-meta { bottom: 136px; }
  .ops-meta p { display: none; }
  .ops-steps { grid-template-columns: 1fr; }
  .ops-steps button { padding: 10px 12px; }
  .ops-steps button:not(.active) { display: none; }
  .ops-reel .ph-badge { display: none; }
  .floater.f3 { display: none; }
  .hero-3d { opacity: 1; }
  .hero-flow { gap: 8px; font-size: 9.5px; letter-spacing: 0.06em; max-width: 330px; }
  .hero-flow i { width: 24px; }
}