/* Motion study: the existing Signal identity, expressed as a kinetic object. */
#hero { position: relative; min-height: max(660px, calc(100svh - 70px)); padding: 7rem 0 3rem; isolation: isolate; }
#hero::before { display: none; }
#sculpture-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.8s ease; pointer-events: none; }
.sculpture-ready #sculpture-canvas { opacity: 1; }
.sculpture-ready #hero-canvas { opacity: 0; }
.sculpture-ready #hero { background: transparent; }
.sculpture-ready #main-content { position: relative; z-index: 1; }
.hero-inner { width: 100%; }
.hero-brand { color: #c4baaa; font-size: 1rem; }
.hero-headline { text-shadow: 0 2px 30px #080808, 0 2px 70px #080808; font-size: 7rem; }
.hero-sub { color: #c1bdb6; text-shadow: 0 1px 12px #080808, 0 2px 22px #080808; }
.hero-headline em { color: #e5dccb; }
.hero-scroll-indicator { margin-top: 2.5rem; }
.hero-brand-rule { width: 60px; }
.motion-toggle { position: fixed; right: 3rem; bottom: 1.5rem; z-index: 50; font: 11px var(--mono); color: #a49e95; background: #080808; border: 0; padding: 12px; cursor: pointer; }
.motion-toggle:hover { color: #f0ede8; }
.motion-toggle:focus-visible { outline: 1px solid #c9a96e; outline-offset: 5px; }
.engine-art { width: 100%; height: 180px; display: block; margin: 0 0 2.25rem; }
#engines { position: relative; background: transparent; padding-top: 3rem; padding-bottom: 0; }
.engines-intro { margin-bottom: 1.5rem; }
.engines-grid { display: block; max-width: none; }
.engines-col { min-height: 90svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 5rem 55% 5rem 0; opacity: 1; transform: none; }
.engines-col:nth-of-type(3) { padding: 5rem 0 5rem 55%; }
.engines-line { display: none; }
.engine-art { display: none; }
.engines-col .engines-name { font-size: 4rem; }
.engines-col .engines-desc { font-size: 1rem; max-width: 370px; line-height: 1.85; }
.engines-col .engines-num { margin-bottom: 1.8rem; }
.engines-num { font: 11px var(--mono); margin-bottom: 1rem; }
.engines-name { font-size: 2.15rem; }
.engines-desc { font-size: .9rem; }
.sculpture-ready #intro { background: transparent; }
.sculpture-ready #intro-wordmark, .sculpture-ready #intro-tagline { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: max-content; max-width: calc(100% - 3rem); text-align: center; }
.sculpture-ready #intro-wordmark { font-size: 1.75rem; letter-spacing: 0; transition: opacity .55s ease, transform .85s var(--ease-out-expo); }
.sculpture-ready #intro-tagline { font-size: 3.5rem; letter-spacing: 0; transition: opacity .6s ease, transform .95s var(--ease-out-expo); }
.sculpture-ready #intro.fade-out { transform: none; transition: opacity .8s ease; }
html:not([data-signal-ready='true']) .motion-toggle { visibility: hidden; }
:is(.section-headline, .contact-headline) .word { display: inline-block; }
:is(.section-headline, .contact-headline) .word-inner { display: inline-block; transform: translateY(100%) rotate(3deg); transition: transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: var(--word-delay, 0ms); }
:is(.section-headline, .contact-headline) .word { overflow: clip; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
:is(.section-headline, .contact-headline).in-view .word-inner { transform: translateY(0) rotate(0deg); }
:is(.section-headline, .contact-headline).reveal { opacity: 1; transform: none; filter: none; }
.bd-closer-engines { position: relative; }
.bd-closer-engines::after { content: ''; display: block; position: absolute; left: 0; bottom: -1.2rem; width: 100%; height: 1px; background: #bca37d; transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.16,1,.3,1); }
.in-view .bd-closer-engines::after { transform: scaleX(1); }

/* The chapter index is navigation, not a competing headline. */
.chapter-nav { position: fixed; top: auto; right: auto; left: 3rem; bottom: 1.5rem; width: max-content; height: 44px; padding: 0; border: 0; background: transparent; backdrop-filter: none; z-index: 50; display: flex; justify-content: flex-start; align-items: center; gap: 2px; }
.chapter-nav[hidden] { display: none; }
.chapter-nav a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: #080808e8; font: 12px var(--mono); color: #8b8882; text-decoration: none; transition: color .3s; }
.chapter-nav a::after { content: ''; position: absolute; bottom: 5px; left: 14px; right: 14px; height: 1px; background: #c9a96e; transform: scaleX(0); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.chapter-nav a[aria-current], .chapter-nav a:hover, .chapter-nav a:focus-visible { color: #eee8de; }
.chapter-nav a[aria-current]::after { transform: scaleX(1); }
.chapter-nav a:focus-visible { outline: 1px solid #c9a96e; outline-offset: 2px; }
.chapter-nav a::before { content: attr(data-label); position: absolute; bottom: 52px; left: 0; width: max-content; padding: 10px 12px; color: #ddd5c8; background: #121210; border: 1px solid #ffffff1a; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s, transform .2s, visibility .2s; }
.chapter-nav a:focus-visible::before { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .chapter-nav a:hover::before { opacity: 1; visibility: visible; transform: none; }
}
.engines-col { scroll-margin-top: 0; }
.engine-copy { width: 100%; }

/* Traveling edge light connects the details without moving their copy. */
:is(.pillar, .intake-cap, .bd-cap) { --edge-x: 50%; }
:is(.pillar, .intake-cap, .bd-cap)::before { content: ''; pointer-events: none; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #d9bb85, transparent); transform: scaleX(0); transform-origin: left; opacity: 0; }
:is(.pillar, .intake-cap, .bd-cap).in-view::before { animation: signal-edge 1.4s cubic-bezier(.16,1,.3,1) both; animation-delay: var(--detail-delay, 0ms); }
@keyframes signal-edge { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: .85; } 100% { transform: scaleX(1); opacity: .22; } }
@media (hover: hover) and (pointer: fine) {
  :is(.pillar, .intake-cap, .bd-cap):hover::before { animation: none; transform: none; opacity: .8; background: linear-gradient(90deg, transparent calc(var(--edge-x) - 25%), #e4c898 var(--edge-x), transparent calc(var(--edge-x) + 25%)); }
  :is(.pillar, .intake-cap, .bd-cap):hover { background: #ffffff03; }
}
.problem-stat-num { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.16,1,.3,1); transition-delay: var(--detail-delay, 0ms); }
.problem-stat.in-view .problem-stat-num { clip-path: inset(0); }
.handle-callout { position: relative; }
.handle-callout::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #c9a96e; transform: scaleY(0); transform-origin: top; transition: transform 1.8s cubic-bezier(.16,1,.3,1); }
.handle-callout.in-view::before { transform: scaleY(1); }
.sculpture-ready #contact { position: relative; background: transparent; }
.contact-headline { letter-spacing: 0; }
.contact-inner { position: relative; }
.contact-form .form-input { background: #0d0d0d; }
.contact-form .form-input:focus { background: #11110f; }
.contact-form:focus-within .form-input:not(:focus) { border-color: #ffffff21; }
.btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: -30% auto -30% -55%; width: 35%; background: linear-gradient(90deg, transparent, #ffffff55, transparent); transform: skewX(-20deg); pointer-events: none; }
.btn-primary:hover::after, .btn-primary:focus-visible::after { animation: signal-sheen .85s cubic-bezier(.16,1,.3,1); }
.nav-cta:hover, .nav-cta:focus-visible { background: #e4ded4; color: #080808; }
@keyframes signal-sheen { to { left: 140%; } }
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }
#main-content .reveal.in-view { filter: none; }
@media (max-width: 1100px) {
  .hero-headline { font-size: 6rem; }
  .engines-grid { gap: 0 1.2rem; }
  .engines-name { font-size: 1.95rem; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 146px; }
  #hero { min-height: max(660px, calc(100svh - 70px)); padding: 7rem 0 3rem; }
  .hero-headline { font-size: 5rem; }
  .hero-brand { font-size: .85rem; }
  .motion-toggle { right: 1.5rem; top: 96px; bottom: auto; }
  .chapter-nav { left: 1.5rem; top: 96px; bottom: auto; }
  .chapter-nav a::before { top: 48px; bottom: auto; }
  .sculpture-ready #intro-wordmark { font-size: 1.15rem; }
  .sculpture-ready #intro-tagline { font-size: 2.1rem; }
  .sculpture-ready #intro-wordmark, .sculpture-ready #intro-tagline { max-width: min(320px, calc(100% - 88px)); }
  .sculpture-ready #intro-tagline .intro-phrase { display: block; width: max-content; max-width: 100%; margin: auto; }
  .engines-col, .engines-col:nth-of-type(3) { min-height: 100svh; padding: 52svh 0 3rem; justify-content: flex-start; }
  .engines-col .engines-name { font-size: 3rem; }
  .engines-col .engines-desc { max-width: 440px; }
  .reading-veil { position: relative; z-index: 0; }
  .reading-veil::before { content: ''; position: absolute; top: -30px; bottom: -30px; left: calc((100vw - 100%) / -2); right: calc((100vw - 100%) / -2); z-index: -1; pointer-events: none; background: rgba(8,8,8,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); mask-image: linear-gradient(transparent, #000 30px, #000 calc(100% - 30px), transparent); opacity: 0; transition: opacity .3s ease; }
  .reading-veil.over-art::before { opacity: 1; }
  .engines-name { font-size: 2rem; }
  .engines-line { margin: 2.5rem 0; }
}
@media (max-width: 500px) {
  #hero { padding: 7rem 0 3rem; }
  .hero-headline { font-size: 4.1rem; }
  .hero-brand { font-size: .75rem; }
  .hero-sub { font-size: .93rem; }
  .engines-col, .engines-col:nth-of-type(3) { padding-top: 51svh; }
  .engines-col .engines-name { font-size: 2.75rem; }
  .engines-col .engines-desc { font-size: .95rem; }
  .engines-name { font-size: 1.85rem; }
  .engines-desc { font-size: .86rem; }
}
@media (max-width: 360px) {
  .hero-headline { font-size: 3.45rem; }
  .hero-brand { font-size: .67rem; }
  .engines-col .engines-name { font-size: 2.4rem; }
  .engines-name { font-size: 1.65rem; }
  .chapter-nav { left: 1rem; }
  .motion-toggle { right: 1rem; }
}
@media (min-width: 769px) and (max-height: 800px) {
  #hero { min-height: 650px; padding-top: 6.75rem; padding-bottom: 2.5rem; }
  .hero-headline { font-size: 6.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.section-headline, .contact-headline) .word-inner { transform: none; transition: none; }
  .sculpture-ready #intro.fade-out { transform: none; }
  #sculpture-canvas { transition: none; }
  .problem-stat-num { clip-path: none; transition: none; }
  .handle-callout::before { transform: none; transition: none; }
  :is(.pillar, .intake-cap, .bd-cap)::before, .btn-primary::after { animation: none !important; }
}
html[data-motion='paused'] :is(.section-headline, .contact-headline) .word-inner { transform: none; transition: none; }
html[data-motion='paused'] .problem-stat-num { clip-path: none; }
html[data-motion='paused'] .btn-primary { translate: none !important; }
html[data-motion='paused'] { scroll-behavior: auto; }
html[data-motion='paused'] *, html[data-motion='paused'] *::before, html[data-motion='paused'] *::after { animation-play-state: paused !important; transition-duration: 0s !important; }
html:not(.sculpture-ready) .engines-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.5rem; }
html:not(.sculpture-ready) .engines-col { min-height: auto; padding: 3rem 0 5rem; }
html:not(.sculpture-ready) .engines-col .engines-name { font-size: 2.5rem; }
@media (max-width: 768px) {
  html:not(.sculpture-ready) .engines-grid { grid-template-columns: 1fr; gap: 0; }
}