/* =========================================
   Osmorph Hub — Components v2
   6-chapter cinematic narrative
   ========================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--fg);
  background: var(--color-ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* ─── PLAYER CONTAINER ───────────────────── */
#player {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--color-ink);
}

/* ─── REEL (horizontal pan stage) ────────── */
#reel {
  display: flex;
  flex-direction: row;
  width: 600vw; /* 6 chapters × 100vw */
  height: 100%;
  /* transform applied via JS each frame, no CSS transition for smoothness */
  will-change: transform;
  position: relative;
  z-index: 1;
}

/* ─── COLOR BLEND OVERLAY (subtle tint) ──── */
#color-blend {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 200ms linear;
}
[data-bg-current="light"] #color-blend {
  mix-blend-mode: multiply;
}

/* ─── STORY THREAD (continuous narrative element) ─── */
#story-thread {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(200, 75, 49);
  pointer-events: none;
  z-index: 60;
  /* JS animates left, top, width, height, border-radius, background, opacity, transform each frame */
  will-change: left, top, width, height, transform, background, opacity;
  transition: opacity 200ms linear;
}
#player[data-finished="true"] #story-thread {
  opacity: 0 !important;
  transition: opacity 600ms var(--ease-standard);
}

/* ─── PROGRESS SEGMENTS (IG STORIES) ──────── */
#progress-segments {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: 4px;
  z-index: 100;
  pointer-events: none;
}
.segment {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.16);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.segment-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-paper);
  border-radius: var(--radius-pill);
  /* updated continuously via RAF, no transition */
}
[data-bg-current="light"] .segment {
  background: rgba(0,0,0,0.12);
}
[data-bg-current="light"] .segment-fill {
  background: var(--color-ink);
}

/* ─── PLAYER CONTROLS (top-right) ─────────── */
.player-controls {
  position: absolute;
  top: var(--space-6);
  right: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 110;
}
.control-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--color-paper);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: background var(--t-micro), transform var(--t-micro);
}
.control-btn:hover, .control-btn:focus-visible {
  background: rgba(255,255,255,0.16);
  outline: none;
  transform: scale(1.05);
}
[data-bg-current="light"] .control-btn {
  background: rgba(0,0,0,0.08);
  color: var(--color-ink);
}
[data-bg-current="light"] .control-btn:hover {
  background: rgba(0,0,0,0.14);
}

/* hide skip/restart on chapter 6 once finished — handled via [data-finished] flag */
#player[data-finished="true"] .skip-button { opacity: 0; pointer-events: none; }

/* ─── HOLD INDICATOR (subtle dim when paused) ─── */
body[data-holding="true"] #player::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
  pointer-events: none;
  animation: dimFade var(--t-quick) var(--ease-standard);
  z-index: 90;
}
@keyframes dimFade { from { opacity: 0; } to { opacity: 1; } }

/* ─── PROGRESS HINT (faint glow during dwell) ─── */
.chapter.active .ch-eyebrow,
.chapter.active .ch-hero {
  opacity: 0;
  animation: heroIn var(--t-hero) var(--ease-standard) 100ms forwards;
}
@keyframes heroIn { to { opacity: 1; } }

/* ─── CHAPTER BASE (flex item in reel) ─────── */
.chapter {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  position: relative;
  overflow: hidden;
}
/* .active is animation trigger only — chapters always laid out (panned via reel transform) */
.chapter[data-bg="dark"]  { background: var(--color-ink);    color: var(--color-paper); }
.chapter[data-bg="light"] { background: var(--color-paper);  color: var(--color-ink); }
.chapter[data-bg="dark"] .ch-detail-muted { color: rgba(255,255,255,0.45); }
.chapter[data-bg="light"] .ch-detail-muted { color: rgba(0,0,0,0.45); }

.ch-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 var(--space-3);
}

.ch-hero {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
  max-width: 520px;
  margin: 0;
}

.ch-stage {
  flex: 1;
  width: 100%;
  max-width: 520px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-8) 0;
}

/* ─── CHAPTER 1 — FIRST CONTACT ──────────── */
.phone-frame {
  width: min(280px, 70vw);
  aspect-ratio: 9/19;
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 36px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.02);
  position: relative;
  opacity: 0;
}
.chapter[data-chapter="1"].active .phone-frame {
  animation: drawIn var(--t-hero) var(--ease-standard) 1500ms forwards;
}
@keyframes drawIn { to { opacity: 1; } }

.phone-notch {
  width: 50%;
  height: 14px;
  background: rgba(255,255,255,0.12);
  border-radius: 0 0 12px 12px;
  margin: 0 auto;
}

.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2) var(--space-2);
  overflow: hidden;
}

.chat-bubble {
  max-width: 80%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 11px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
}
.chat-bubble--user {
  align-self: flex-end;
  background: var(--color-terracotta);
  color: var(--color-paper);
  border-bottom-right-radius: var(--radius-xs);
}
.chat-bubble--ai {
  align-self: flex-start;
  background: var(--color-blue-dim);
  color: var(--color-paper);
  border: 1px solid var(--color-blue);
  border-bottom-left-radius: var(--radius-xs);
}
.chapter[data-chapter="1"].active .chat-bubble--user {
  animation: bubbleIn var(--t-normal) var(--ease-standard) 3000ms forwards;
}
.chapter[data-chapter="1"].active .chat-bubble--ai {
  animation: bubbleIn var(--t-normal) var(--ease-standard) 4500ms forwards;
}
@keyframes bubbleIn {
  to { opacity: 1; transform: translateY(0); }
}

.brief-panel {
  position: absolute;
  right: -10%;
  top: 30%;
  width: 180px;
  background: rgba(250,250,250,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  opacity: 0;
  transform: translateX(20px);
  font-size: 10px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chapter[data-chapter="1"].active .brief-panel {
  animation: briefIn var(--t-hero) var(--ease-standard) 6000ms forwards;
}
@keyframes briefIn {
  to { opacity: 1; transform: translateX(0); }
}
.brief-panel-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: var(--space-3);
}
.brief-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  opacity: 0;
}
.chapter[data-chapter="1"].active .brief-row { animation: rowIn var(--t-quick) var(--ease-standard) forwards; }
.chapter[data-chapter="1"].active .brief-row:nth-child(2) { animation-delay: 6200ms; }
.chapter[data-chapter="1"].active .brief-row:nth-child(3) { animation-delay: 6300ms; }
.chapter[data-chapter="1"].active .brief-row:nth-child(4) { animation-delay: 6400ms; }
.chapter[data-chapter="1"].active .brief-row:nth-child(5) { animation-delay: 6500ms; }
@keyframes rowIn { to { opacity: 1; } }

.brief-row-icon { font-size: 12px; }
.brief-row-pending { color: var(--color-terracotta); }

/* ambient particle dots */
.ambient-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  animation: particleDrift 20s linear infinite;
}
.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 60%; left: 80%; animation-delay: -5s; }
.particle:nth-child(3) { top: 35%; left: 65%; animation-delay: -10s; }
.particle:nth-child(4) { top: 75%; left: 25%; animation-delay: -15s; }
.particle:nth-child(5) { top: 15%; left: 45%; animation-delay: -7s; background: var(--color-terracotta); opacity: 0.3; }
.particle:nth-child(6) { top: 85%; left: 55%; animation-delay: -12s; }
.particle:nth-child(7) { top: 50%; left: 90%; animation-delay: -3s; }
@keyframes particleDrift {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(-30px, -60px); opacity: 0; }
}

/* ─── CHAPTER 2 — DESIGN PROCESS ─────────── */
.design-stage {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* schematic blueprint canvas (drafting lines) */
.blueprint-svg {
  width: min(360px, 80vw);
  aspect-ratio: 1.2/1;
  opacity: 0;
}
.chapter[data-chapter="2"].active .blueprint-svg {
  animation: stageIn var(--t-hero) var(--ease-standard) 800ms forwards;
}
@keyframes stageIn { to { opacity: 1; } }

.blueprint-svg path,
.blueprint-svg line,
.blueprint-svg rect {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2000ms var(--ease-standard) forwards;
}
.chapter[data-chapter="2"].active .blueprint-svg .layer-foundation { animation-delay: 1200ms; }
.chapter[data-chapter="2"].active .blueprint-svg .layer-walls      { animation-delay: 1700ms; }
.chapter[data-chapter="2"].active .blueprint-svg .layer-roof       { animation-delay: 2200ms; }
.chapter[data-chapter="2"].active .blueprint-svg .layer-openings   { animation-delay: 2700ms; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.gps-pin {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-terracotta);
  box-shadow: 0 0 0 0 var(--color-terracotta);
  opacity: 0;
}
.chapter[data-chapter="2"].active .gps-pin {
  animation: pinDrop var(--t-normal) var(--ease-emphasis) 200ms forwards,
             pinPulse 1.6s var(--ease-standard) 700ms infinite;
}
@keyframes pinDrop {
  0% { opacity: 0; transform: translate(-50%, -120%); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes pinPulse {
  0% { box-shadow: 0 0 0 0 var(--color-terracotta-dim); }
  100% { box-shadow: 0 0 0 28px rgba(200,75,49,0); }
}

.site-badge {
  position: absolute;
  top: 18%;
  right: 8%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.chapter[data-chapter="2"].active .site-badge {
  animation: stageIn var(--t-normal) var(--ease-standard) 1100ms forwards;
}

/* 3D massing wireframe (CSS pseudo-3D) */
.massing-3d {
  position: absolute;
  bottom: 12%;
  right: 12%;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  perspective: 400px;
  opacity: 0;
}
.chapter[data-chapter="2"].active .massing-3d {
  animation: stageIn var(--t-hero) var(--ease-standard) 4500ms forwards,
             massingOrbit 3s linear 4500ms infinite;
}
@keyframes massingOrbit {
  to { transform: rotateY(360deg) rotateX(15deg); }
}
.massing-face {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1.5px solid var(--color-ink);
  background: rgba(0,0,0,0.04);
}
.massing-face.top { background: var(--color-terracotta); border-color: var(--color-terracotta); transform: rotateX(90deg) translateZ(40px); }
.massing-face.front { transform: translateZ(40px); }
.massing-face.back { transform: translateZ(-40px); }
.massing-face.left { transform: rotateY(-90deg) translateZ(40px); }
.massing-face.right { transform: rotateY(90deg) translateZ(40px); }
.massing-face.bottom { transform: rotateX(-90deg) translateZ(40px); }

/* placeholder badge — visible for chapters waiting Higgsfield */
.clip-pending {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(74,158,255,0.12);
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
}
.chapter[data-bg="light"] .clip-pending {
  background: rgba(74,158,255,0.10);
}

/* ─── CHAPTER 3 — CONSTRUCTION ───────────── */
.construction-stage {
  width: min(380px, 85vw);
  aspect-ratio: 1/1.2;
  position: relative;
}

.construction-svg {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.chapter[data-chapter="3"].active .construction-svg {
  animation: stageIn var(--t-hero) var(--ease-standard) 600ms forwards;
}

.construction-svg .building-line {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: drawLine 3500ms var(--ease-standard) 1000ms forwards;
}
.construction-svg .scaffolding-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  opacity: 0.5;
  animation: drawLine 2000ms var(--ease-standard) 2200ms forwards;
}
.construction-svg .crane {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawLine 1500ms var(--ease-standard) 1500ms forwards;
}

/* day-night sweep gradient */
.daynight-sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    transparent 30%,
    rgba(228,162,75,0.18) 45%,
    rgba(228,162,75,0.32) 50%,
    rgba(228,162,75,0.18) 55%,
    transparent 70%);
  background-size: 250% 100%;
  background-position: 100% 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.chapter[data-chapter="3"].active .daynight-sweep {
  animation: sweep 3500ms linear 2500ms forwards;
}
@keyframes sweep {
  to { background-position: -50% 50%; }
}

/* construction detail texture squares */
.detail-row {
  position: absolute;
  bottom: -20%;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: 0 var(--space-4);
  opacity: 0;
}
.chapter[data-chapter="3"].active .detail-row {
  animation: stageIn var(--t-normal) var(--ease-standard) 3500ms forwards;
}
.detail-square {
  aspect-ratio: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.detail-square::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg,
    transparent 25%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.05) 50%,
    transparent 50%, transparent 75%, rgba(255,255,255,0.05) 75%);
  background-size: 8px 8px;
}
.detail-square[data-tex="brick"]::after { background-size: 10px 6px; }
.detail-square[data-tex="concrete"]::after { background-size: 12px 12px; }
.detail-square[data-tex="glass"]::after {
  background: linear-gradient(135deg, rgba(74,158,255,0.16), rgba(255,255,255,0.04));
}

/* ─── CHAPTER 4 — ERP DASHBOARD ─────────── */
.tablet-frame {
  width: min(340px, 85vw);
  aspect-ratio: 4/3;
  background: var(--color-graphite);
  border-radius: 12px;
  padding: var(--space-2);
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: rotateY(-5deg) rotateX(2deg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  perspective: 1000px;
}
.chapter[data-chapter="4"].active .tablet-frame {
  animation: tabletIn var(--t-hero) var(--ease-emphasis) 200ms forwards;
}
@keyframes tabletIn {
  to { opacity: 1; transform: rotateY(0deg) rotateX(0deg); }
}

.dashboard {
  width: 100%;
  height: 100%;
  background: var(--color-ink);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: 22px 1fr;
  overflow: hidden;
  position: relative;
}

.dash-top {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dash-top-brand { color: var(--color-blue); }
.dash-top-project { margin-left: var(--space-2); opacity: 0.6; }

.dash-side {
  background: rgba(255,255,255,0.02);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) 0;
  gap: var(--space-2);
}
.dash-side-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  position: relative;
  opacity: 0;
}
.chapter[data-chapter="4"].active .dash-side-icon { animation: iconStagger var(--t-quick) var(--ease-standard) forwards; }
.chapter[data-chapter="4"].active .dash-side-icon:nth-child(1) { animation-delay: 1100ms; }
.chapter[data-chapter="4"].active .dash-side-icon:nth-child(2) { animation-delay: 1250ms; }
.chapter[data-chapter="4"].active .dash-side-icon:nth-child(3) { animation-delay: 1400ms; }
.chapter[data-chapter="4"].active .dash-side-icon:nth-child(4) { animation-delay: 1550ms; }
@keyframes iconStagger { to { opacity: 1; } }
.dash-side-icon::after {
  content: attr(data-status);
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 8px;
}
.dash-side-icon[data-status="✓"]::after { color: var(--color-blue); }
.dash-side-icon[data-status="⏳"]::after { color: var(--color-terracotta); }

.dash-main {
  padding: var(--space-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.dash-progress-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 9px;
  opacity: 0;
}
.chapter[data-chapter="4"].active .dash-progress-row { animation: rowIn var(--t-quick) var(--ease-standard) forwards; }
.chapter[data-chapter="4"].active .dash-progress-row:nth-of-type(1) { animation-delay: 2000ms; }
.chapter[data-chapter="4"].active .dash-progress-row:nth-of-type(2) { animation-delay: 2200ms; }
.chapter[data-chapter="4"].active .dash-progress-row:nth-of-type(3) { animation-delay: 2400ms; }
.chapter[data-chapter="4"].active .dash-progress-row:nth-of-type(4) { animation-delay: 2600ms; }
.dash-progress-label {
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.04em;
}
.dash-progress-label .live {
  color: var(--color-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-progress-label .live::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-blue);
  border-radius: 50%;
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.5); }
}
.dash-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}
.dash-progress-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--color-blue);
  border-radius: var(--radius-pill);
  width: 0%;
}
.chapter[data-chapter="4"].active .dash-progress-bar-fill {
  animation: progressFill 1500ms var(--ease-standard) forwards;
}
.chapter[data-chapter="4"].active .dash-progress-bar-fill[data-pct="100"] { animation-delay: 2200ms; }
.chapter[data-chapter="4"].active .dash-progress-bar-fill[data-pct="67"]  { animation-delay: 2600ms; }
.chapter[data-chapter="4"].active .dash-progress-bar-fill[data-pct="0"]   { animation-delay: 2800ms; }
@keyframes progressFill { to { width: var(--target-pct); } }

.dash-toast {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background: rgba(74,158,255,0.18);
  border: 1px solid var(--color-blue);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 10px;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateX(20px);
  max-width: 70%;
}
.chapter[data-chapter="4"].active .dash-toast {
  animation: toastIn var(--t-normal) var(--ease-emphasis) 4500ms forwards,
             toastOut var(--t-normal) var(--ease-standard) 6500ms forwards;
}
@keyframes toastIn { to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

.dash-online {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
}
.chapter[data-chapter="4"].active .dash-online { animation: rowIn var(--t-quick) var(--ease-standard) 1700ms forwards; }
.dash-online::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-blue);
  border-radius: 50%;
}

/* ─── CHAPTER 5 — PROJECT SHOWREEL ──────── */
.showreel-stage {
  width: min(360px, 85vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.showreel-card {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-graphite), var(--color-ink));
  border: 1px solid rgba(0,0,0,0.06);
  opacity: 0;
}
.chapter[data-chapter="5"].active .showreel-card { animation: stageIn var(--t-normal) var(--ease-emphasis) forwards; }
.chapter[data-chapter="5"].active .showreel-card:nth-of-type(1) { animation-delay: 400ms; }
.chapter[data-chapter="5"].active .showreel-card:nth-of-type(2) { animation-delay: 1200ms; }
.chapter[data-chapter="5"].active .showreel-card:nth-of-type(3) { animation-delay: 2000ms; }

.showreel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--card-gradient, linear-gradient(135deg, var(--color-iron), var(--color-graphite)));
}
.showreel-card[data-project="1"]::before {
  background: linear-gradient(135deg, #4a5b3d, #2a3525);
}
.showreel-card[data-project="2"]::before {
  background: linear-gradient(135deg, #3a4659, #1f2935);
}
.showreel-card[data-project="3"]::before {
  background: linear-gradient(135deg, #5b4a3a, #2f2620);
}
.showreel-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3);
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.7) 100%);
  color: var(--color-paper);
}
.showreel-badge {
  align-self: flex-end;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.showreel-caption {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ─── CHAPTER 6 — HUB REVEAL ─────────────── */
.hub-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  gap: var(--space-6);
}

.hub-brand-block {
  text-align: center;
  opacity: 0;
}
.chapter[data-chapter="6"].active .hub-brand-block {
  animation: stageIn var(--t-hero) var(--ease-standard) 200ms forwards;
}
.hub-logo-img {
  max-width: 160px;
  margin: 0 auto;
}
.hub-eyebrow {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.45;
  margin: var(--space-2) 0 0;
}
.hub-tagline {
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: var(--space-3) 0 0;
}

.hub-hero-line {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0;
  opacity: 0;
}
.chapter[data-chapter="6"].active .hub-hero-line {
  animation: stageIn var(--t-normal) var(--ease-standard) 800ms forwards;
}

.hub-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}
.link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-graphite);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform var(--t-micro) var(--ease-standard), background var(--t-micro);
  text-align: center;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
}
.chapter[data-chapter="6"].active .link-btn { animation: linkIn var(--t-normal) var(--ease-emphasis) forwards; }
.chapter[data-chapter="6"].active .link-btn:nth-of-type(1) { animation-delay: 1500ms; }
.chapter[data-chapter="6"].active .link-btn:nth-of-type(2) { animation-delay: 1650ms; }
.chapter[data-chapter="6"].active .link-btn:nth-of-type(3) { animation-delay: 1800ms; }
.chapter[data-chapter="6"].active .link-btn:nth-of-type(4) { animation-delay: 1950ms; }
.chapter[data-chapter="6"].active .link-btn:nth-of-type(5) { animation-delay: 2100ms; }
@keyframes linkIn { to { opacity: 1; transform: translateY(0) scale(1); } }

.link-btn:hover, .link-btn:focus-visible {
  transform: translateY(-2px);
  background: var(--color-iron);
  outline: none;
}
.link-btn[data-primary="true"] {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: transparent;
}
.link-btn[data-primary="true"][data-accent="terracotta"] {
  background: var(--color-terracotta);
  color: var(--color-paper);
}
.link-btn[data-primary="true"]:hover { background: var(--color-eraser); }
.link-btn[data-primary="true"][data-accent="terracotta"]:hover { background: #b04128; }

.link-btn-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: currentColor;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.link-coming-soon {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16);
  margin-left: var(--space-1);
}
.link-btn[data-primary="true"] .link-coming-soon { background: rgba(0,0,0,0.10); }

.ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-paper);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 100px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  cursor: pointer;
  transition: transform var(--t-micro) var(--ease-standard),
              background var(--t-micro),
              border-color var(--t-micro),
              box-shadow var(--t-micro);
  opacity: 0;
}
.chapter[data-chapter="6"].active .ai-trigger {
  animation: stageIn var(--t-normal) var(--ease-standard) 2400ms forwards,
             aiPulse 2.4s ease-in-out 3000ms infinite;
}
@keyframes aiPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.18); }
  50%      { box-shadow: 0 0 0 10px rgba(255,255,255,0);   }
}
.ai-trigger:hover, .ai-trigger:focus-visible {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
  outline: none;
}
.ai-trigger:active { transform: translateY(0); }
.ai-trigger::before {
  content: '';
  width: 12px;
  height: 12px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zM7 12h.01M12 12h.01M17 12h.01' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0zM7 12h.01M12 12h.01M17 12h.01' stroke='currentColor' stroke-width='2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
}

/* ─── CHATBOT PANEL ─────────────────────── */
#chatbot-panel {
  position: fixed;
  z-index: 200;
  background: var(--color-ink);
  color: var(--color-paper);
  border: 1px solid var(--color-graphite);
  display: flex;
  flex-direction: column;
  bottom: 0; left: 0; right: 0;
  height: 70vh;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
}
@media (min-width: 640px) {
  #chatbot-panel {
    bottom: var(--space-6); right: var(--space-6); left: auto;
    width: 380px; height: 520px;
    border-radius: var(--radius-lg);
  }
}
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-graphite);
}
.chatbot-title { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.chatbot-close {
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-pencil);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.chatbot-close:hover { color: var(--color-paper); background: rgba(255,255,255,0.06); }
.chatbot-log {
  flex: 1; overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.chatbot-msg {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  word-wrap: break-word;
}
.chatbot-msg--user { align-self: flex-end; background: var(--color-paper); color: var(--color-ink); border-bottom-right-radius: var(--radius-sm); }
.chatbot-msg--assistant { align-self: flex-start; background: var(--color-graphite); color: var(--color-paper); border-bottom-left-radius: var(--radius-sm); }
.chatbot-msg--typing { letter-spacing: 0.3em; opacity: 0.6; }
.chatbot-form { display: flex; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-graphite); }
.chatbot-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--color-graphite);
  color: var(--color-paper);
  font-family: inherit;
  font-size: var(--text-sm);
}
.chatbot-input::placeholder { color: var(--color-pencil); }
.chatbot-input:focus { outline: none; border-color: var(--color-paper); }
.chatbot-send {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ─── CONTENT-LOADER VIDEO OVERLAY ──────── */
/* Injected by shared/content-loader.js when chapter media.video resolves.
   When present: video covers the stage, CSS placeholder visuals are hidden. */
.ch-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  z-index: 1;
  pointer-events: none;
  background: var(--color-ink);
}
.ch-clip[data-fit="contain"] { object-fit: contain; }

/* Hide CSS-fallback siblings when a video has been injected & loaded */
.ch-stage[data-has-video] > :not(.ch-clip) { display: none !important; }

/* Chapter 5 — per-card video overlay */
.proj-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.showreel-card[data-has-media] {
  background-size: cover;
  background-position: center;
}
.showreel-card[data-has-media]::before { display: none; }

/* ─── REDUCED MOTION ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .chapter { transition: opacity 0.01ms !important; }
  .particle, .gps-pin, .live::before, .massing-3d {
    animation: none !important;
  }
  .ch-clip, .proj-clip { animation: none !important; }
}