/* ============================================================
   HYPEHAUS — MOBILE TRANSLATION LAYER
   Activates only under html[data-mobile="1"] (set by perf.js on
   touch devices, or via ?hh=mobile for preview). Desktop never
   sees a single rule here. Same story, same wow moments, built
   for the hand — with device-native interaction surfaces.
   ============================================================ */

/* —————————————————————————————————————————————————————————————
   MOTION ONBOARDING CHIP  (the device becomes the controller)
   ————————————————————————————————————————————————————————————— */
.motion-chip {
  position: fixed;
  left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  z-index: 8600;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 10px; color: var(--w85);
  background: rgba(8,8,10,0.66);
  border: 1px solid var(--w18); border-radius: 100px;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  opacity: 0; cursor: pointer;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.motion-chip.in { opacity: 1; transform: translate(-50%, 0); }
.motion-chip .mc-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 12px 2px rgba(233,30,71,0.7);
  animation: pulseDot 2.6s var(--ease) infinite;
}
.motion-chip.live .mc-dot { background: var(--plum); box-shadow: 0 0 12px 2px rgba(168,85,247,0.7); }
.motion-chip.tapped { transform: translate(-50%, 0) scale(.96); }

/* —————————————————————————————————————————————————————————————
   THE EXPERIENCE GRAPH · MOBILE CINEMA
   Re-pin the section (the desktop media branch un-pinned it) and
   give it a tall scroll runway so the camera can fly through.
   ————————————————————————————————————————————————————————————— */
html[data-mobile="1"] #graph { height: 320vh; padding: 0; }
html[data-mobile="1"] #graph .pin {
  position: sticky; top: 0;
  height: 100svh; min-height: 0;
  display: block; overflow: hidden;
}
html[data-mobile="1"] #graph .pin::before { display: none; }
html[data-mobile="1"] #graph-canvas {
  position: absolute; inset: 0; order: 0;
  width: 100%; height: 100%; z-index: 0;
}
/* hide the desktop side-headline + caption; mobile uses its own overlay */
html[data-mobile="1"] #graph .pin > .wrap,
html[data-mobile="1"] #graph .graph-cap { display: none; }

/* chapter caption overlay */
.gm-overlay {
  position: absolute; inset: 0; z-index: 2;
  padding: calc(96px + env(safe-area-inset-top)) var(--gutter) calc(40px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  pointer-events: none;
  background: linear-gradient(to top, rgba(2,2,2,0.62) 0%, rgba(2,2,2,0.28) 22%, transparent 42%);
}
.gm-eyebrow { display: flex; align-items: center; gap: 14px; }
.gm-eyebrow .gm-ln { flex: 0 0 38px; height: 1px; background: var(--w18); }
.gm-cap {
  margin-top: auto; margin-bottom: 4px;
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.04em; line-height: 0.92;
  font-size: clamp(34px, 11vw, 60px);
  white-space: pre-line;
  text-shadow: 0 2px 40px rgba(0,0,0,0.9);
  opacity: 0;
}
.gm-cap.pop { animation: gmPop 0.62s var(--ease-out) both; }
@keyframes gmPop {
  0%   { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.gm-stat {
  display: flex; gap: 30px; margin-top: 22px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.gm-stat .n {
  font-family: var(--display); font-weight: 900; font-size: clamp(28px, 8vw, 40px);
  letter-spacing: -0.04em; color: var(--white); display: block; line-height: 1;
}
.gm-stat .l { display: block; margin-top: 7px; }
.gm-hint {
  position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  text-align: center; color: var(--w55);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  opacity: 0; transition: opacity .5s var(--ease);
}
.gm-hint::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson); box-shadow: 0 0 10px 1px rgba(233,30,71,0.7);
}

/* tap-to-expand world card */
.gm-card {
  --accent: #E91E47;
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(30px + env(safe-area-inset-bottom));
  z-index: 5;
  padding: 22px 22px 24px;
  background: rgba(7,6,10,0.86);
  border: 1px solid var(--w12);
  border-left: 2px solid var(--accent);
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9);
  opacity: 0; transform: translateY(24px) scale(.98);
  pointer-events: none;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.gm-card.in { opacity: 1; transform: none; pointer-events: auto; }
.gm-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--w06); border: 1px solid var(--w12); color: var(--w70);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gm-card .gm-kicker { color: var(--accent); display: block; }
.gm-card .gm-name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: 30px; line-height: 1; margin: 9px 0 12px;
}
.gm-card .gm-desc { color: var(--w70); font-size: 15px; line-height: 1.5; margin-bottom: 14px; max-width: 40ch; }
.gm-card .gm-sats { color: var(--w40); }

/* —————————————————————————————————————————————————————————————
   TILT-PARALLAX ACCENTS  (gyro depth on flat sections)
   --mx / --my published by the motion bus each frame.
   ————————————————————————————————————————————————————————————— */
html[data-mobile="1"] #arc .phase .ph-idx {
  transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 12px), 0);
  will-change: transform;
}
html[data-mobile="1"] #culture .worlds {
  transform: translate3d(calc(var(--mx, 0) * 7px), calc(var(--my, 0) * 5px), 0);
}
/* giant footer wordmark: size it to fit the phone so HYPEHAUS isn't clipped */
html[data-mobile="1"] .footer__ghost {
  font-size: clamp(40px, 13.5vw, 104px);
  margin-top: 30px;
  letter-spacing: -0.04em;
  transform: translate3d(calc(var(--mx, 0) * 5px), 0, 0);
}
/* NOTE: ticker scroll-inertia removed — translating the marquee by scroll
   velocity made the rows jump left/right on vertical scroll (read as a glitch).
   The marquees keep their smooth CSS auto-scroll from sections.css. */

/* —————————————————————————————————————————————————————————————
   SCALING POLISH — buttons, gaps, type, tap targets
   ————————————————————————————————————————————————————————————— */
html[data-mobile="1"] { --section-pad: clamp(84px, 12vh, 140px); }

/* dead hamburger (no menu wired) → drop it; footer + sticky CTA cover nav */
html[data-mobile="1"] .nav__menu { display: none; }
html[data-mobile="1"] .nav { padding: 16px var(--gutter); }
html[data-mobile="1"] .nav__mark { width: 24px; height: 24px; }
html[data-mobile="1"] .nav__word { font-size: 15px; }

/* primary CTA — comfortable, thumb-sized, never cramped */
html[data-mobile="1"] .cta {
  padding: 17px 28px; font-size: 11px; letter-spacing: 0.18em;
  min-height: 54px; gap: 12px;
}
html[data-mobile="1"] .hero__cta { gap: 12px; width: 100%; max-width: 360px; }
html[data-mobile="1"] .hero__cta .cta { width: 100%; justify-content: center; }
html[data-mobile="1"] #hero { padding: 60px var(--gutter) 120px; }
html[data-mobile="1"] .hero__title { font-size: clamp(54px, 17vw, 96px); }
html[data-mobile="1"] .hero__eyebrow { gap: 10px; flex-wrap: wrap; justify-content: center; row-gap: 4px; }

/* audience picker + capture form — real tap targets, even gaps */
html[data-mobile="1"] .capture { gap: 12px; }
html[data-mobile="1"] .capture input { min-width: 0; width: 100%; min-height: 52px; padding: 16px 18px; }
html[data-mobile="1"] .capture .cta { width: 100%; justify-content: center; }
html[data-mobile="1"] .audience { gap: 10px; }
html[data-mobile="1"] .audience button { padding: 13px 18px; min-height: 46px; font-size: 11px; }

/* mid-scroll + final CTAs breathe */
html[data-mobile="1"] .cta-band { padding: clamp(90px, 18vh, 150px) var(--gutter); }

/* partner cards — tidy 2-up, lighter chips */
html[data-mobile="1"] #signals .partner-cards { gap: 12px; }
html[data-mobile="1"] #signals .pcard { padding: 16px 14px 18px; gap: 8px; }
html[data-mobile="1"] #signals .pcard__chip { height: 104px; padding: 16px; }
html[data-mobile="1"] #signals .open-row { gap: 1px; }
html[data-mobile="1"] #signals .oslot { aspect-ratio: 3/1.7; }

/* audience panels — media first, even rhythm */
html[data-mobile="1"] .panel { gap: 30px; }
html[data-mobile="1"] .panel__copy .lede { margin-bottom: 28px; }
html[data-mobile="1"] .panel__tags { gap: 9px; }
/* make the footage tall & vertical so it fills the screen (no dead space below) */
html[data-mobile="1"] .media-zone {
  aspect-ratio: auto;
  height: min(76svh, 640px);
}

/* arc cards — comfortable internal spacing on a single column */
html[data-mobile="1"] #arc .phase { min-height: clamp(360px, 64vh, 480px); padding: 40px 26px; }

/* engine core sizing on small screens */
html[data-mobile="1"] #engine .core { width: min(420px, 78vw); margin-bottom: 40px; }

/* footer columns even, generous taps */
html[data-mobile="1"] .footer__col a { padding: 9px 0; font-size: 15px; }
html[data-mobile="1"] .footer__grid { gap: 30px 24px; margin-bottom: 64px; }

/* keep the sticky CTA clear of the home-bar */
html[data-mobile="1"] .stickybar { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
html[data-mobile="1"] .stickybar .cta { min-height: 46px; }

@media (prefers-reduced-motion: reduce) {
  html[data-mobile="1"] #arc .phase .ph-idx,
  html[data-mobile="1"] #culture .worlds,
  html[data-mobile="1"] .footer__ghost,
  html[data-mobile="1"] .ticker,
  html[data-mobile="1"] .ticker--rev { transform: none; }
}