/* The light belongs below the reading surface, never above text or controls. */
:root[data-motion-direction] { --scene-light: 222, 182, 112; }
:root[data-motion-concept="focus-pull"] { --scene-light: 213, 193, 153; }
:root[data-motion-concept="red-chapter"] { --scene-light: 192, 105, 94; }
.direction-stage::before { z-index: 3; background: linear-gradient(90deg, #070907 0%, rgba(7,9,7,.96) 25%, rgba(7,9,7,.66) 39%, rgba(7,9,7,.08) 56%, transparent 72%); }
.content-panel { width: min(48vw, 46rem); background: linear-gradient(90deg, rgba(7,9,7,.99) 0%, rgba(7,9,7,.93) 80%, transparent); }
.stage-light-bridge, .chapter-spotlight { position: absolute; z-index: 2; top: calc(var(--header-height) + env(safe-area-inset-top)); bottom: 0; pointer-events: none; }
.stage-light-bridge { left: 30%; width: 49%; opacity: 1; transition: opacity 240ms ease; }
.bridge-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 68% 58%, rgba(var(--scene-light),.23), rgba(var(--scene-light),.11) 32%, transparent 70%); opacity: .72; }
.bridge-reflection { position: absolute; display: none; inset: 60% 0 0; background: radial-gradient(ellipse at 58% 65%, rgba(232,189,122,.22), transparent 66%); opacity: .6; }
:root[data-motion-concept="wet-road"] .bridge-reflection, :root[data-motion-concept="red-chapter"] .bridge-reflection { display: block; }
:root.is-playing .bridge-glow { animation: bridge-breathe 16s ease-in-out 1.6s infinite alternate; }
.chapter-spotlight { left: 28%; width: 61%; opacity: .4; background: linear-gradient(112deg, transparent 13%, rgba(var(--scene-light),.08) 26%, rgba(var(--scene-light),.32) 43%, rgba(255,231,190,.14) 55%, transparent 73%); mask-image: radial-gradient(ellipse at 58% 46%, #000 18%, transparent 73%); }
:root.is-playing .chapter-spotlight { animation: chapter-spotlight 2.4s cubic-bezier(.22,.8,.22,1) .2s both; }
:root.is-form-active .stage-light-bridge { opacity: .6; }

/* One clear entrance, then the existing local candle/lamp/reflection. */
:root.is-playing .fx-reveal-light, :root.is-playing .fx-headlight-sweep,
:root.is-playing .fx-type-sweep, :root.is-playing .fx-shadow-wipe,
:root.is-playing .fx-focus-line, :root.is-playing .focus-copy,
:root.is-playing .fx-focus-vignette { animation-iteration-count: 1 !important; animation-fill-mode: forwards !important; }
:root.is-playing[data-motion-concept="red-chapter"] .fx-signal-red { animation: none; opacity: .48; }
:root.is-playing[data-motion-concept="focus-pull"] .focus-copy,
:root.is-playing[data-motion-concept="focus-pull"] .fx-focus-vignette { animation-duration: 2.2s; }
@keyframes focus-copy-cycle { from { opacity: .42; } 45% { opacity: .1; } to { opacity: 0; } }
@keyframes focus-vignette-cycle { from { opacity: .38; } to { opacity: .08; } }
:root[data-motion-direction] .motion-control-dot,
:root[data-motion-direction] .motion-state i,
:root[data-motion-direction] .primary-button::before { animation: none; }
:root:not(.is-ready) [data-animate] { opacity: 1; transform: none; }
/* Avoid repeated paint-heavy background-position motion. */
@keyframes road-reflections {
  0%, 100% { opacity: .46; transform: scaleX(.98); }
  45% { opacity: .8; transform: scaleX(1.02); }
}
@keyframes bridge-breathe { from { opacity: .6; transform: translate3d(-1%,0,0); } to { opacity: .92; transform: translate3d(1%,0,0); } }
@keyframes chapter-spotlight { 0% { opacity: .2; transform: translate3d(15%,0,0); } 30%, 58% { opacity: 1; } 100% { opacity: .45; transform: translate3d(-6%,0,0); } }
@keyframes local-light { 0% { opacity: .25; } 32%, 60% { opacity: 1; } 100% { opacity: .5; } }
@keyframes phone-ambient { 0%,100% { opacity: .46; } 48% { opacity: .84; } }

/* Laboratory: each chapter is lit once when it enters the reading area. */
body.lab-page.editorial-lab .lab-orbit { top: 50%; width: min(32vw, 400px); opacity: .82; background: radial-gradient(circle, rgba(217,177,111,.15), transparent 68%); }
body.lab-page.editorial-lab .lab-orbit::after { background: #d1b480; box-shadow: 0 0 50px 12px rgba(209,180,128,.16); }
.lab-page .tool-card, .lab-page .lab-final, .lab-page .lab-hero { position: relative; isolation: isolate; }
/* Moving light stays inside its chapter and cannot create a horizontal scrollbar. */
.lab-page .tool-card, .lab-page .lab-final { overflow: clip; }
.section-spotlight { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .5; background: linear-gradient(111deg, transparent 4%, rgba(221,181,111,.06) 28%, rgba(221,181,111,.29) 46%, rgba(221,181,111,.09) 63%, transparent 85%); mask-image: radial-gradient(ellipse at 45% 45%, #000 16%, transparent 75%); }
.lab-final .section-spotlight { background: linear-gradient(111deg, transparent 8%, rgba(173,117,43,.15) 48%, transparent 85%); }
.lab-page .is-lit > .section-spotlight { animation: section-light 2.4s cubic-bezier(.22,.8,.22,1) both; }
.lab-page .tool-card.reveal-on-scroll { opacity: 1; transform: none; transition: none; }
.lab-page .lab-final .reveal-on-scroll { opacity: 1; transform: none; }
.lab-page .tool-card.is-lit .tool-index, .lab-page .tool-card.is-lit .tool-label,
.lab-page .tool-card.is-lit .tool-copy h2, .lab-page .tool-card.is-lit .tool-promise,
.lab-page .tool-card.is-lit blockquote, .lab-page .tool-card.is-lit .tool-format,
.lab-page .tool-card.is-lit .tool-copy > a { animation: light-copy .48s ease-out var(--light-delay,0s) backwards; }
.lab-page .tool-card .tool-index { --light-delay: .12s; }
.lab-page .tool-card .tool-label { --light-delay: .16s; }
.lab-page .tool-card h2 { --light-delay: .21s; }
.lab-page .tool-card .tool-promise { --light-delay: .32s; }
.lab-page .tool-card blockquote { --light-delay: .42s; }
.lab-page .tool-card .tool-format { --light-delay: .5s; }
.lab-page .tool-card .tool-copy > a { --light-delay: .65s; }
.lab-page .lab-hero-inner, .lab-page .tool-copy { position: relative; }
.lab-page .tool-copy::before { content: ""; position: absolute; z-index: -1; inset: -12px -24px; pointer-events: none; background: radial-gradient(ellipse at 38% 45%, rgba(12,25,21,.45), transparent 80%); }
.light-pause { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(248,241,229,.28); border-radius: 999px; color: #f8f1e5; background: rgba(7,14,12,.72); font: inherit; font-size: 12px; cursor: pointer; }
.light-pause:focus-visible { outline: 2px solid #dcb86f; outline-offset: 3px; }
@keyframes section-light { 0% { opacity: .22; transform: translate3d(19%,0,0); } 30%, 58% { opacity: 1; } 100% { opacity: .55; transform: translate3d(-6%,0,0); } }
@keyframes light-copy { from { opacity: .42; } to { opacity: 1; } }

@media (max-width: 1180px) and (min-width: 901px) { .content-panel { width: 49vw; } }
@media (max-width: 900px) and (min-width: 681px) { .content-panel { width: 56vw; } }
@media (max-width: 680px), (pointer: coarse) {
  /* Touch phones remain touch phones in landscape, even above the width breakpoint. */
  .direction-header { backdrop-filter: none; }
  .field-row input { min-height: 48px; font-size: 16px; }
  .field-row label { font-size: .65rem; }
  .legal-consents label { min-height: 30px; font-size: .66rem; gap: .6rem; align-items: center; }
  .legal-consents input { width: 20px; height: 20px; }
  :root[data-motion-direction] .motion-control,
  :root[data-motion-direction] .replay-button { min-width: 44px; min-height: 44px; }
  .screen-switcher a { min-height: 44px; }
  .concept-switcher a { min-height: 44px; }
  :root.is-playing .chapter-spotlight { animation: local-light 1.2s ease-out .2s both; transform: none; }
  .lab-page .is-lit > .section-spotlight { animation: local-light 1.2s ease-out both; background: radial-gradient(ellipse at 42% 28%, rgba(221,181,111,.24), transparent 70%); }
  :root[data-motion-direction] .motion-effects .fx,
  :root[data-motion-direction] .focus-copy { animation: none !important; }
  :root[data-motion-direction] .fx-rain, :root[data-motion-direction] .fx-ripple,
  :root[data-motion-direction] .fx-bokeh, :root[data-motion-direction] .fx-haze,
  :root[data-motion-direction] .fx-pointer-light, :root[data-motion-direction] .fx-reveal-light,
  :root[data-motion-direction] .fx-focus-line, :root[data-motion-direction] .fx-focus-vignette,
  :root[data-motion-direction] .fx-headlight-sweep, :root[data-motion-direction] .fx-type-sweep,
  :root[data-motion-direction] .fx-shadow-wipe, :root[data-motion-direction] .focus-copy { display: none !important; }
  :root.is-playing .motion-effects { animation: phone-ambient 8s ease-in-out 1.6s infinite; }
  :root.is-playing .bridge-glow { animation: none; opacity: .76; }
  :root.is-form-active .motion-effects { animation: none; opacity: .5; }
}
@media (max-width: 680px) {
  .direction-header { backdrop-filter: none; }
  .header-actions { gap: .22rem; }
  :root[data-motion-direction] .motion-control { display: inline-flex; width: 44px; height: 44px; }
  .replay-button { width: 44px; height: 44px; }
  .motion-control-dot { width: .65rem; height: .65rem; border-radius: 0; background: linear-gradient(90deg,var(--gold) 0 32%,transparent 32% 65%,var(--gold) 65%); }
  .motion-control[aria-pressed="true"] .motion-control-dot { background: var(--gold); clip-path: polygon(0 0,100% 50%,0 100%); }
  .screen-switcher a { min-height: 44px; }
  .concept-switcher a { min-height: 44px; }
  .stage-light-bridge { top: calc(var(--header-height) + env(safe-area-inset-top)); bottom: auto; left: 0; width: 100%; height: clamp(19rem,44svh,29rem); }
  :root[data-photo-layout="landscape"] .stage-light-bridge { height: min(62.5vw,44svh); }
  .bridge-glow { background: radial-gradient(ellipse at 60% 92%, rgba(var(--scene-light),.2), transparent 64%); }
  .bridge-reflection { display: none !important; }
  .chapter-spotlight { left: 0; width: 100%; top: calc(var(--header-height) + env(safe-area-inset-top)); bottom: auto; height: 24rem; transform: none; background: radial-gradient(ellipse at 55% 72%, rgba(var(--scene-light),.24), transparent 70%); mask-image: none; }
  :root.is-playing .chapter-spotlight { animation: local-light 1.2s ease-out .2s both; }
  .content-panel { width: 100%; background: radial-gradient(ellipse at 90% 0%, rgba(var(--scene-light),.07), transparent 32%), var(--paper); }
  .body-copy { font-size: .875rem; line-height: 1.55; }
  .field-row input { min-height: 48px; font-size: 16px; }
  .field-row label { font-size: .65rem; }
  .legal-consents label { min-height: 30px; font-size: .66rem; gap: .6rem; align-items: center; }
  .legal-consents input { width: 20px; height: 20px; }
  .lab-page .is-lit > .section-spotlight { animation: local-light 1.2s ease-out both; background: radial-gradient(ellipse at 42% 28%, rgba(221,181,111,.24), transparent 70%); }
  .lab-page .tool-card.is-lit .tool-copy > *, .lab-page .tool-card.is-lit .tool-index { animation-duration: .3s; animation-delay: 0s; }
  .light-pause { padding: 8px 10px; font-size: 11px; }
}
@media (max-height: 500px) and (pointer: coarse) {
  /* In landscape or above a keyboard, do not pin navigation over the form. */
  .direction-header { position: absolute; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  /* Keep ambient light behind the title instead of reserving an empty intro. */
  body.lab-page.editorial-lab .lab-orbit { display: none; }
  body.lab-page.editorial-lab .lab-hero-glow { position: absolute; z-index: -1; top: 70px; right: -56px; width: 210px; height: 210px; margin: 0; transform: none; border-color: rgba(209,180,128,.08); background: radial-gradient(circle, rgba(209,180,128,.12), transparent 68%); }
  body.lab-page.editorial-lab .lab-hero { gap: 0; padding-top: calc(98px + env(safe-area-inset-top)); padding-bottom: 36px; }
  body.lab-page.editorial-lab .lab-hero-inner { padding: 0; }
  body.lab-page.editorial-lab .lab-hero h1 { margin-top: 0; margin-bottom: 22px; }
  .lab-page .lab-lead { margin-bottom: 0; font-size: 16px; line-height: 1.55; }
  .lab-page .lab-hero-action { margin-top: 24px; gap: 10px; }
  .lab-page .lab-entry-guide { margin-top: 8px; }
  .lab-page .pain-router, .lab-page .tools-section, .lab-page .lab-final { padding-top: 42px; padding-bottom: 42px; }
  .lab-page .lab-section-heading { margin-bottom: 26px; }
  .lab-page .lab-final-inner > p:not(.section-kicker) { font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
  /* Lighting can move, but reading must never wait for a text fade on touch. */
  .lab-page .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
  .lab-page .tool-card.is-lit .tool-copy > *,
  .lab-page .tool-card.is-lit .tool-index { animation: none; }
}
@media (max-width: 380px) {
  :root[data-motion-direction] .brand { font-size: 1.04rem; }
  .screen-switcher a { padding-right: .4rem; padding-left: .4rem; font-size: .54rem; }
  .header-actions { gap: .12rem; }
  :root[data-motion-direction] .direction-header { padding-right: .5rem; padding-left: .5rem; }
}
/* Pause includes newly added layers, pseudo-elements and one-shot entrances. */
:root.is-paused .direction-stage *, :root.is-paused .direction-stage *::before,
:root.is-page-hidden .direction-stage *, :root.is-page-hidden .direction-stage *::before,
:root.is-scene-offscreen .direction-visual *, :root.is-scene-offscreen .stage-light-bridge *,
:root.is-scene-offscreen .chapter-spotlight,
:root.is-light-paused .lab-page *, :root.is-light-paused .lab-page *::before,
:root.is-light-hidden .lab-page *, :root.is-light-hidden .lab-page *::before,
.lab-page .is-lit:not(.is-light-visible) > .section-spotlight { animation-play-state: paused !important; }
:root.is-paused [data-animate],
:root.is-light-paused .lab-page .tool-copy > *,
:root.is-light-paused .lab-page .tool-index { animation: none !important; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-motion-direction] .direction-stage *, :root[data-motion-direction] .direction-stage *::before,
  .lab-page *, .lab-page *::before, .lab-page *::after { animation: none !important; transition: none !important; }
  :root.is-playing .fx-reduced-light { animation: none !important; opacity: .5; }
  .chapter-spotlight, .section-spotlight { opacity: .45; transform: none; }
  .bridge-glow { opacity: .75; transform: none; }
  [data-light-pause], :root[data-motion-direction] .motion-control,
  :root[data-motion-direction] .replay-button { display: none; }
}