/* Component styles are intentionally limited to motion hooks. */
.hero-name span { display: inline-block; }
.hero-portrait { translate: var(--portrait-x, 0px) var(--portrait-y, 0px); transition: translate 650ms cubic-bezier(.16,1,.3,1); }
.reveal { transition: opacity 800ms ease, translate 800ms cubic-bezier(.16,1,.3,1); }
.reveal.motion-pending { opacity: 0; translate: 0 28px; }
.reveal.is-visible { opacity: 1; translate: 0 0; }
[data-magnetic] { translate: var(--magnetic-x, 0px) var(--magnetic-y, 0px); transition: translate 250ms ease; }
.scroll-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 2px; background: var(--accent, #ff643d); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; pointer-events: none; }
#film-dialog { border: 1px solid rgb(255 255 255 / .16); padding: 0; color: #f6f5f1; background: #0b0d0e; width: min(1080px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto; box-shadow: 0 32px 160px rgb(0 0 0 / .65); }
#film-dialog::backdrop { background: rgb(0 0 0 / .88); backdrop-filter: blur(12px); }
#film-dialog[open] { animation: film-enter 300ms cubic-bezier(.16,1,.3,1); }
#film-title { margin: 0; padding: 22px 80px 22px 24px; font-size: clamp(16px, 2vw, 22px); font-weight: 500; }
#film-video { display: block; width: 100%; max-height: calc(100svh - 130px); background: #000; }
#film-dialog [data-film-close], #film-dialog .film-close { position: absolute; top: 12px; right: 12px; min-width: 44px; min-height: 44px; border: 1px solid rgb(255 255 255 / .3); background: #191b1d; color: #fff; cursor: pointer; border-radius: 50%; }
#film-dialog button:focus-visible { outline: 2px solid var(--accent, #ff643d); outline-offset: 4px; }
@keyframes film-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-portrait, [data-magnetic], .reveal, .reveal.motion-pending { translate: none; transition: none; opacity: 1; }
  #film-dialog[open] { animation: none; }
}