/* Sitewide cinematic hero (owner decision #25) — format taken from the
   Second to None hero: full-bleed image, gradient scrim, single-line Anton
   wordmark, statement or question, lede, animated motif, buttons.
   Motion plays for everyone; only an OS-level Reduce Motion setting
   swaps each motif to its static state (decision #24). */

.cine-hero { position: relative; padding: calc(var(--header-h) + var(--space-32)) 0 clamp(48px, 7vw, 88px); overflow: hidden; }
.cine-bg { position: absolute; inset: 0; z-index: var(--layer-base); }
.cine-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-pos, center 30%); display: block; }
.cine-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,28,.74) 0%, rgba(10,18,28,.68) 45%, rgba(10,18,28,.97) 96%); }
.cine-hero--quiet .cine-bg img { filter: grayscale(1) brightness(.8); }
.cine-hero--quiet .cine-bg::after { background: linear-gradient(180deg, rgba(10,18,28,.86) 0%, rgba(10,18,28,.82) 45%, rgba(10,18,28,.98) 96%); }
.cine-inner { position: relative; z-index: var(--layer-content); max-width: 840px; margin: 0 auto; text-align: center; }
.cine-mast { font-family: var(--font-display); font-size: var(--mast-size, clamp(34px, 7.5vw, 112px)); line-height: .92; letter-spacing: .004em; text-transform: uppercase; white-space: nowrap; color: var(--text-primary); margin: 0 0 clamp(20px, 3vw, 36px); user-select: none; }
.cine-h1 { margin: 0; font: 300 clamp(1.625rem, calc(1.2rem + 2vw), 3.125rem)/1.16 var(--font-sans); letter-spacing: -.02em; color: var(--text-muted); }
.cine-h1 .lift { color: var(--text-primary); }
.cine-lede { margin: clamp(18px, 2.2vw, 26px) auto 0; font: 400 clamp(.9375rem, calc(.9rem + .25vw), 1.125rem)/1.65 var(--font-sans); color: var(--text-secondary); max-width: 58ch; }
.cine-ctas { margin-top: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }
@keyframes cine-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cine-hero .in-1 { animation: cine-rise var(--motion-slow) var(--ease-enter) backwards; }
.cine-hero .in-2 { animation: cine-rise var(--motion-hero) var(--ease-enter) .035s backwards; }
.cine-hero .in-3 { animation: cine-rise var(--motion-slow) var(--ease-enter) .105s backwards; }
.cine-mobile-media { display: none; }
@media (max-width: 767px) {
  .cine-bg { display: none; }
  .cine-hero { padding-bottom: var(--space-24); }
  .cine-mobile-media { display: block; margin: var(--space-32) auto 0; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 9; }
  .cine-mobile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* ---- Animated hero motifs ------------------------------------------- */
/* Each motif is ~34px tall, decorative (aria-hidden), accent-colored.   */
.motif { margin: clamp(22px, 3vw, 34px) auto 0; height: 34px; display: flex; align-items: center; justify-content: center; }

/* rings — broadcast (speaking, media) */
.motif--rings { position: relative; width: 44px; }
.motif--rings i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--signal-on-dark); }
.motif--rings span { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid var(--signal-on-dark); border-radius: 50%; opacity: .35; }
.motif--rings span + span { transform: scale(.62); opacity: .7; }

/* pulse — EKG line (emergency room). Paths live inline in the page:
   .base is the faint resting trace, .run is the bright traveling segment. */
.motif--pulse svg { display: block; width: 120px; height: 34px; overflow: visible; }
.motif--pulse path { fill: none; stroke: var(--signal-on-dark); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.motif--pulse .base { opacity: .3; }

/* steps — form stepper dots filling (application + inquiry forms) */
.motif--steps { gap: 10px; }
.motif--steps span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--signal-on-dark); opacity: .5; }
.motif--steps span:first-child { background: var(--signal-on-dark); opacity: 1; }

/* bars — ascending chart (results, bottleneck score) */
.motif--bars { gap: 5px; align-items: flex-end; }
.motif--bars span { width: 5px; background: rgba(234,238,245,.38); }
.motif--bars span.a { background: var(--signal-on-dark); }

/* converge — two marks meeting (private 1:1 advisory) */
.motif--converge { gap: 12px; }
.motif--converge span { width: 3px; height: 26px; background: var(--signal-on-dark); opacity: .85; }

/* clock — fractional time (fractional executive) */
.motif--clock { position: relative; width: 34px; }
.motif--clock i { position: absolute; inset: 0; border: 1.5px solid rgba(234,238,245,.45); border-radius: 50%; }
.motif--clock i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 12px; margin-left: -1px; background: var(--signal-on-dark); transform-origin: 50% 0; transform: rotate(200deg); }

/* chevrons — the path forward (work with nick) */
.motif--chevrons { gap: 8px; }
.motif--chevrons span { width: 10px; height: 10px; border-top: 2px solid var(--signal-on-dark); border-right: 2px solid var(--signal-on-dark); transform: rotate(45deg); opacity: .35; }

/* ticks — chapters lighting in order (about) */
.motif--ticks { gap: 14px; }
.motif--ticks span { width: 22px; height: 2px; background: rgba(234,238,245,.38); }

/* cursor — writing in progress (insights) */
.motif--cursor { gap: 3px; align-items: flex-end; }
.motif--cursor .line { width: 34px; height: 2px; background: rgba(234,238,245,.38); margin-bottom: 4px; }
.motif--cursor .caret { width: 2px; height: 20px; background: var(--signal-on-dark); }

/* duo — two moving in step (shoulder to shoulder) */
.motif--duo { gap: 10px; }
.motif--duo span { width: 9px; height: 9px; border-radius: 50%; background: var(--signal-on-dark); }
.motif--duo span + span { opacity: .65; }

/* dot — quiet presence (contact, legal, 404) */
.motif--dot span { width: 9px; height: 9px; border-radius: 50%; background: var(--signal-on-dark); }

@media (prefers-reduced-motion: no-preference) {
  .motif--rings span { animation: motif-ring 2.6s ease-out infinite; }
  .motif--rings span + span { animation-delay: 1.3s; }
  .motif--pulse .run { stroke-dasharray: 44 156; stroke-dashoffset: 200; animation: motif-ekg 2.4s linear infinite; }
  .motif--steps span { animation: motif-step 2.8s ease-in-out infinite; }
  .motif--steps span:nth-child(2) { animation-delay: .7s; }
  .motif--steps span:nth-child(3) { animation-delay: 1.4s; }
  .motif--steps span:nth-child(4) { animation-delay: 2.1s; }
  .motif--bars span { transform-origin: bottom; animation: motif-bar 1.6s ease-in-out infinite; }
  .motif--bars span:nth-child(1) { animation-delay: -.2s; }
  .motif--bars span:nth-child(2) { animation-delay: -.9s; }
  .motif--bars span:nth-child(3) { animation-delay: -.5s; }
  .motif--bars span:nth-child(4) { animation-delay: -1.2s; }
  .motif--bars span:nth-child(5) { animation-delay: -.7s; }
  .motif--converge span { animation: motif-lean 2.2s ease-in-out infinite; }
  .motif--converge span + span { animation-name: motif-lean-b; }
  .motif--clock i::after { animation: motif-hand 8s linear infinite; }
  .motif--chevrons span { animation: motif-chev 1.8s ease-in-out infinite; }
  .motif--chevrons span:nth-child(2) { animation-delay: .3s; }
  .motif--chevrons span:nth-child(3) { animation-delay: .6s; }
  .motif--ticks span { animation: motif-tick 3.3s ease-in-out infinite; }
  .motif--ticks span:nth-child(2) { animation-delay: 1.1s; }
  .motif--ticks span:nth-child(3) { animation-delay: 2.2s; }
  .motif--cursor .caret { animation: motif-blink 1.1s steps(2, start) infinite; }
  .motif--duo span { animation: motif-bob 1.5s ease-in-out infinite; }
  .motif--duo span + span { animation-delay: .18s; }
  .motif--dot span { animation: motif-breathe 3s ease-in-out infinite; }
}
@keyframes motif-ring { 0% { transform: scale(.25); opacity: .8; } 80% { opacity: 0; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes motif-ekg { to { stroke-dashoffset: 0; } }
@keyframes motif-step { 0%, 12%, 100% { background: transparent; opacity: .5; } 18%, 82% { background: var(--signal-on-dark); opacity: 1; } }
@keyframes motif-bar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes motif-lean { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes motif-lean-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes motif-hand { from { transform: rotate(200deg); } to { transform: rotate(560deg); } }
@keyframes motif-chev { 0%, 100% { opacity: .35; transform: rotate(45deg) translate(0, 0); } 50% { opacity: 1; transform: rotate(45deg) translate(2px, -2px); } }
@keyframes motif-tick { 0%, 15%, 100% { background: rgba(234,238,245,.38); } 22%, 80% { background: var(--signal-on-dark); } }
@keyframes motif-blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes motif-bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes motif-breathe { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }