/* The original desk stays underneath, so fading never exposes an empty frame. */
.hero__scene { position: absolute; inset: 0; pointer-events: none; }
.hero__scene--website { opacity: 0; transition: opacity 1500ms cubic-bezier(.25,1,.5,1); mask-image: linear-gradient(90deg,transparent 30%,#000 54%); }
.hero[data-hero-active="1"] .hero__scene--website { opacity: 1; }
.hero__note { display: grid; }
.hero__caption { grid-area: 1 / 1; margin: 0; opacity: 1; transition: opacity 1200ms ease; }
.hero__caption--website { opacity: 0; }
.hero[data-hero-active="1"] .hero__caption:first-child { opacity: 0; }
.hero[data-hero-active="1"] .hero__caption--website { opacity: 1; }
.hero__switcher { position: absolute; z-index: 3; right: max(22px,calc((100% - 1180px)/2)); bottom: 24px; display: flex; align-items: center; gap: 3px; padding: 5px; border: 1px solid #d9e8eb; border-radius: 999px; background: #ffffffed; box-shadow: 0 4px 20px #163d5610; }
.hero__switcher[hidden], .hero__playback[hidden] { display: none; }
.hero__choice, .hero__playback { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 12px; border: 0; border-radius: 999px; color: #456270; background: transparent; font: 600 13px/1.5 var(--sans); cursor: pointer; }
.hero__choice { gap: 7px; white-space: nowrap; }
.hero__choice > span { width: 6px; height: 6px; border-radius: 50%; background: #b7cbd0; }
.hero__choice[aria-pressed="true"] { color: #116773; background: #e6f4f4; }
.hero__choice[aria-pressed="true"] > span { background: #147b85; }
.hero__choice:hover, .hero__playback:hover { background: #edf6f7; }
.hero__choice:focus-visible, .hero__playback:focus-visible { outline: 2px solid #147b85; outline-offset: 2px; }
.hero__playback { width: 38px; padding: 9px; }
.hero__playback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero__play-icon, .hero[data-hero-paused="true"] .hero__pause-icon { display: none; }
.hero[data-hero-paused="true"] .hero__play-icon { display: block; }
@media(max-width:1100px) { .hero__note { display: none; } }
@media(min-width:741px) and (max-width:1000px) { .hero__switcher { bottom: 88px; } }
@media(max-width:740px) {
  .hero__scene--website { mask-image: none; }
  .hero__switcher { right: 50%; bottom: 125px; transform: translateX(50%); width: max-content; max-width: calc(100% - 24px); }
  .hero__choice { min-height: 40px; padding: 8px 10px; font-size: 12px; gap: 6px; }
  .hero__playback { width: 40px; min-height: 40px; }
}
@media(prefers-reduced-motion:reduce) { .hero__scene--website, .hero__caption { transition: none; } }