/* Home uses the existing film/intro helper and a native viewport-sized link. */
.home-page { position: relative; width: 100vw; height: 100dvh; overflow: hidden; }
.home-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.home-entry-link { position: absolute; inset: 0; z-index: 20; display: block; color: var(--text); text-decoration: none; cursor: alias; }
.home-entry-link * { cursor: inherit; }
.home-callout { --home-font-size: var(--large-text-size); position: absolute; top: 50%; left: 50%; width: max-content; transform: translate(-50%, -50%); font-size: var(--home-font-size); line-height: var(--ui-line-height); }
.home-identity { display: flex; align-items: baseline; gap: 0 0.25em; width: max-content; margin: 0; font: inherit; white-space: nowrap; }
.home-name { flex: 0 0 auto; }
.home-roles { position: relative; display: flex; flex: 0 0 auto; width: max-content; height: 1.2em; overflow: hidden; color: var(--menu-secondary-color); font-family: "Editorial New", Georgia, serif; font-size: calc(var(--home-font-size) + 1px); font-weight: 400; line-height: 1.2; }

/* Each hidden sizing copy contributes only its animated intrinsic width.
   The translated parent therefore centres name + current role continuously. */
.home-role-item { --home-role-delay: calc(var(--home-role-index) * 2s - 10.4s); display: grid; grid-template-columns: 0fr; flex: 0 0 auto; min-width: 0; height: 1.2em; animation: home-role-width 10s var(--overlay-transition-easing) infinite paused; animation-delay: var(--home-role-delay); }
.home-role-size { display: block; min-width: 0; overflow: hidden; visibility: hidden; }
.home-role-label { position: absolute; top: 0; left: 0; display: block; width: max-content; height: 1.2em; line-height: 1.2; visibility: hidden; transform: translate3d(0, 100%, 0); animation: home-role-roll 10s var(--overlay-transition-easing) infinite paused; animation-delay: var(--home-role-delay); }
.home-role-item:first-child { grid-template-columns: 1fr; }
.home-role-item:first-child .home-role-label { visibility: visible; transform: translate3d(0, 0, 0); }
body.is-page-visible :is(.home-role-item, .home-role-label) { animation-play-state: running; }

/* Negative phases start with the first role already readable and keep the
   outgoing and incoming roles in sync, including the last-to-first change. */
@keyframes home-role-width {
  0% { grid-template-columns: 0fr; }
  4%, 20% { grid-template-columns: 1fr; }
  24%, 100% { grid-template-columns: 0fr; }
}
@keyframes home-role-roll {
  0% { visibility: visible; transform: translate3d(0, 100%, 0); }
  4%, 20% { visibility: visible; transform: translate3d(0, 0, 0); }
  24% { visibility: hidden; transform: translate3d(0, -100%, 0); }
  100% { visibility: hidden; transform: translate3d(0, -100%, 0); }
}
@media (any-hover: hover) and (any-pointer: fine) {
  .home-app:has(:where(.home-identity:hover)) .main-blur-overlay { --main-blur: var(--overlay-blur); --main-effect-duration: var(--overlay-filter-duration); }
}
@media (prefers-reduced-motion: reduce) { .home-role-item, .home-role-label { animation: none; } }