html { scroll-behavior: auto; }
.motion-study { --ink: #000; background: #000; }
.motion-study #hero-scroll { height: 190svh; }
.motion-study #hero { position: sticky; top: 0; height: 100svh; min-height: 0; max-height: none; background: #000; }
.motion-study #hero-scroll.motion-ready { height: 190svh; }
.motion-study #hero-scroll.motion-ready #hero { position: sticky; top: 0; }
.motion-study #hero-stage { position: absolute; inset: 0; }
.motion-study #hero-poster { position: absolute; inset: 0; z-index: 1; display: block; opacity: 1; visibility: hidden; pointer-events: none; transition: opacity .45s ease; }
.motion-study #hero-stage[data-poster-aligned='true'] #hero-poster { visibility: visible; }
.motion-study #hero-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.motion-study #hero-stage[data-live='true'] #hero-poster { opacity: 0; }
.motion-study #hero-stage[data-departing='true'] #hero-poster { opacity: 0; transition: none; }
.motion-study #hero-stage[data-poster-cleared='true'] #hero-poster { opacity: 0; transition: none; }
.motion-study #hero-stage[data-live='false'] #resonance-canvas { opacity: 0; pointer-events: none; }
.motion-study #resonance-canvas { width: 100%; height: 100%; touch-action: pan-y pinch-zoom; cursor: grab; transition: none; }
.motion-study #resonance-canvas:active { cursor: grabbing; }
#resonance-canvas.is-transition-layer { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 6; pointer-events: none; }
#study-particle-overlay { position: fixed; inset: 0; width: 100%; height: 100svh; z-index: 5; pointer-events: none; }
.motion-study #hero .hero-copy { left: auto; right: var(--gutter); bottom: 170px; pointer-events: none; opacity: var(--study-copy-opacity, 1); }
.motion-study #hero .hero-copy { isolation: isolate; z-index: 4; text-shadow: 0 2px 18px #000, 0 1px 4px #000; }
.motion-study #hero .hero-copy::before { content: ''; position: absolute; inset: -28px -24px -24px -65px; z-index: -1; background: radial-gradient(ellipse at 78% 55%, #000a, #0005 60%, transparent 78%); filter: blur(15px); }
.motion-study #hero .hero-copy h1 { font-size: clamp(60px, 7vw, 110px); }
.motion-study #hero .hero-copy h1 { animation: hero-title-enter .8s cubic-bezier(.2,.7,.2,1) both; }
#hero-enter { position: absolute; z-index: 4; left: 50%; bottom: max(32px, env(safe-area-inset-bottom)); width: 48px; height: 56px; transform: translateX(-50%); display: grid; place-items: center; color: #ece9e0; opacity: calc(.5 * var(--study-copy-opacity, 1)); transition: color .25s, opacity .25s; -webkit-tap-highlight-color: transparent; }
#hero-enter svg { transition: transform .25s ease; }
#hero-enter:hover, #hero-enter:focus-visible { opacity: 1; }
#hero-enter:hover svg { transform: translateY(4px); }
#hero-enter:focus-visible { outline: 1px solid #b8a47e; outline-offset: 4px; }
@keyframes hero-title-enter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.motion-study .hero-shade { pointer-events: none; background: none; }
.motion-study #hero-scroll.motion-still { height: 100svh; }
.motion-study #hero-scroll.motion-still #hero { position: relative; }
.motion-study #hero-scroll.motion-still #study-progress { opacity: .35; cursor: default; }
.study-error { position: absolute; top: 104px; left: var(--gutter); right: var(--gutter); color: var(--muted); font-size: 12px; }
.model-credits { color: var(--muted); font-size: 10px; }
.model-credits:hover { color: var(--paper); }
@media(max-width:760px) {
  .motion-study .site-header { padding-block: 23px; gap: 10px; }
  .motion-study #hero-scroll { height: 200svh; }
  .motion-study #hero-scroll.motion-ready { height: 200svh; }
  .motion-study #hero-scroll.motion-still { height: 100svh; }
  .motion-study #hero .hero-copy { bottom: 168px; }
  .motion-study #hero .hero-copy h1 { font-size: clamp(50px, 11vw, 80px); }
  .motion-study .contact-section h2 { font-size: clamp(48px, 14vw, 70px); }
}
@media(max-height:560px) and (min-aspect-ratio:6/5) {
  .motion-study #hero .hero-copy { bottom: 115px; }
  .motion-study #hero .hero-copy h1 { font-size: 45px; }
}
@media(prefers-reduced-motion:reduce) {
  .motion-study #hero-scroll, .motion-study #hero-scroll.motion-ready { height: 100svh; }
  .motion-study #hero { position: relative; }
  .motion-study #hero-poster { transition: none; }
  .motion-study #hero .hero-copy h1 { animation: none; }
}

/* Reviewed tall-phone title spacing; 3D pose follows viewport proportions. */
@media(max-width:759px) and (min-height:560px){.motion-study #hero .hero-copy{bottom:116px}.motion-study #hero .hero-copy h1{font-size:clamp(48px,11vw,58px)}}
@media(max-width:759px) and (min-height:560px) and (max-height:740px){.motion-study #hero .hero-copy{bottom:86px}.motion-study #hero .hero-copy h1{font-size:clamp(42px,10vw,48px)}#hero-enter{bottom:18px;height:48px}}