/* Opening and background layers are isolated from existing content motion. */
.site-opening { display: none; position: fixed; inset: 0; z-index: 100; place-items: center; background: #101413; pointer-events: none; }
.opening-active .site-opening { display: grid; }
.opening-logo { width: min(41.333333vw, 220px); height: auto; overflow: visible; }
.opening-logo [data-logo-part], .opening-logo [data-logo-trace] { opacity: 0; }

/* Twice the hero's height, offset by one hero: unchanged document length. */
.hero-stage { position: relative; z-index: 0; }
.hero-stage.is-sticky { height: calc(2 * var(--hero-height)); }
.hero-stage.is-sticky > .hero { position: sticky; top: var(--header-height); }
.hero-stage.is-sticky + .intro { margin-top: calc(-1 * var(--hero-height)); }
.intro { position: relative; z-index: 1; background: var(--bg); border-radius: 28px 28px 0 0; }
.viewport-probe { position: fixed; width: 0; height: 100svh; visibility: hidden; pointer-events: none; }

.dc-works { position: relative; isolation: isolate; }
.works-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.works-ambient::before { content: ''; position: absolute; inset: -15%; background: radial-gradient(ellipse at 22% 35%, #37beb012 0%, transparent 58%), radial-gradient(ellipse at 80% 65%, #ffffff85 0%, transparent 62%); animation: works-ambient-drift 30s ease-in-out infinite; }
@keyframes works-ambient-drift { 0%, 100% { transform: translate3d(-3%, -2%, 0); } 50% { transform: translate3d(3%, 2%, 0); } }
@media (max-width: 600px) {
  .opening-logo { width: min(31vw, 165px); }
  .intro { border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .works-ambient::before { animation: none; } .site-opening { display: none !important; } }