.hero.has-palette-sweep{isolation:isolate}
.palette-sweep{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero.has-palette-sweep .glows{visibility:hidden}
.hero.has-palette-sweep .hero-rectangle{background:transparent}
.hero.has-palette-sweep .hero-rectangle:hover{background:transparent}

/* The band overlaps the header by half, but is in FRONT so all text is visible. */
.hero.has-palette-sweep{z-index:2}
.scroll-band{position:relative;z-index:3;height:115px;min-height:115px;margin-top:-57.5px;padding:12px 16px;box-sizing:border-box;overflow:hidden}
.scroll-band-text{font-size:clamp(18px,3.6vw,80px);line-height:1.15}

/* Fine source-inspired drafting grid; never intercept pointer events. */
.hero-grid{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.32;mix-blend-mode:difference;width:100%;height:100%}
.hero-intro{position:absolute;left:12%;top:17%;z-index:5;pointer-events:none;margin:0;font:500 clamp(20px,2.6vw,42px)/1 monospace;color:#fff8ed;letter-spacing:-.06em}
@media(pointer:fine){.hero,.hero *{cursor:var(--alex-cursor),auto!important}}
.scroll-dot-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* Editorial separator: less oversized type, balanced rhythm, still half-overlapping. */
.scroll-band{height:96px;min-height:96px;margin-top:-48px;padding:18px 3vw;background:#ef00d7;border-block:1px solid rgba(255,230,0,.35)}
.scroll-band-text{display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,64px);width:100%;font-size:clamp(17px,2.4vw,44px);font-weight:500;letter-spacing:-.025em;line-height:1.2;white-space:nowrap}
.discipline-separator{font-size:.58em;flex:none}
.project-arrival{opacity:.2;transform:perspective(1000px) translateY(65px) rotateX(7deg) skewY(1.4deg) scale(.97);transform-origin:center bottom;transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:var(--entry-delay,0ms)}
.project-arrival.is-revealed{opacity:1;transform:none}
.projects .card video{transition:filter .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){.projects .card video{filter:saturate(.68) brightness(.82)}.projects .card:hover video,.projects .card:focus-within video{filter:saturate(1) brightness(1);transform:scale(1.025)}}
@media(max-width:700px){.scroll-band-text{flex-wrap:wrap;gap:8px 12px;font-size:18px;white-space:normal;padding:0}.scroll-band{height:96px;padding:16px}.discipline-separator{font-size:12px}}
@media(prefers-reduced-motion:reduce){.project-arrival{opacity:1;transform:none;transition:none}.projects .card video{transition:none}}

/* Only text starts hidden; keyboard focus always reveals interactive content. */
.entrance-pending{opacity:0}
.entrance-pending:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.entrance-pending{opacity:1}}

/* Keep the accessible title without flashing the yellow fallback before WebGL renders. */
#alex-stage .alex-fallback{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Source scroll deformation replaces the earlier timed card entrance. */
.projects .card.project-arrival{opacity:1;transform:none;transition:none}
.hero > .bg-video{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.10;object-fit:cover}

/* The cover is present before the first WebGL frame; scenes render underneath. */
#intro-loader{display:none}
.intro-loading #intro-loader,.intro-revealing #intro-loader{display:grid;place-items:center;position:fixed;inset:0;z-index:2147483647;background:#151015;transition:opacity .6s ease}
#intro-loader [role="progressbar"]{width:150px;height:4px;border-radius:8px;overflow:hidden;background:#46343f;--progress:0}
#intro-loader span{display:block;width:100%;height:100%;transform-origin:left;transform:scaleX(var(--progress));background:linear-gradient(90deg,#ff00e5,#ffe600);transition:transform .24s ease}
#intro-loader.is-leaving{opacity:0;pointer-events:none}
html.intro-loading{overflow:hidden}
.intro-loading .topbar-text,.intro-loading .center-title,.intro-loading .hero-intro,.intro-loading .cta,.intro-revealing .topbar-text,.intro-revealing .center-title,.intro-revealing .hero-intro,.intro-revealing .cta{visibility:hidden}
@media(prefers-reduced-motion:reduce){#intro-loader,#intro-loader span{transition:none!important}}

/* Reference greeting: restrained type beside the tall loop of the l. */
.hero-intro{left:8%;top:12%;font-family:Telegraf,Arial,sans-serif;font-weight:400;font-size:clamp(20px,3vw,44px);letter-spacing:-.035em;line-height:1.15;color:#fff5ee}
@media(max-width:700px){.hero-intro{left:7%;top:8%;font-size:clamp(18px,4.8vw,28px)}}

.intro-sound-choice{position:absolute;top:calc(50% + 32px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:12px;align-items:center;width:260px}
.intro-sound-choice button{font:inherit;color:#fff5ee;border:1px solid #e500bd;border-radius:99px;padding:12px 24px;background:#321027;cursor:pointer}
.intro-sound-choice button:last-child{font-size:13px;background:transparent;border-color:transparent;color:#c8bdc5}
.intro-sound-choice button:focus-visible{outline:2px solid #ffe600;outline-offset:4px}