.intro-overlay { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #000; color: #fff; }
.intro-mosaic { position: absolute; inset: 70px 28px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 8px; }
.intro-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #000; }
.intro-tile video { display: block; width: 100%; height: 100%; object-fit: contain; }
.intro-heading,.intro-caption { position: absolute; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: center; font: 10px var(--mono,monospace); text-transform: uppercase; }
.intro-heading { top: 24px; }.intro-caption { bottom: 24px; color: #ffffff80; }
.intro-heading strong { font: 800 24px/1 'Helvetica Neue',Helvetica,Arial,sans-serif; }
.intro-managed.intro-pending { overflow: hidden; }
.intro-managed.intro-pending body > main,.intro-managed.intro-pending body > .navigation,.intro-managed.intro-pending body > .archive-position,.intro-managed.intro-pending body > .index-bar { opacity: 0; pointer-events: none; }
.intro-pending #site-cursor { display: none!important; }.intro-pending #background-icons { opacity: 0!important; }
html:has(:fullscreen) { scrollbar-gutter: auto; }
@media(min-width:1600px) { .intro-mosaic { grid-template-columns: repeat(8,minmax(0,1fr)); } }
@media(min-width:641px) and (max-width:1000px) { .intro-mosaic { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); } }
@media(max-width:640px) { .intro-mosaic { inset: 62px 12px; gap: 5px; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(4,minmax(0,1fr)); }.intro-heading,.intro-caption { left: 16px; right: 16px; font-size: 9px; }.intro-heading { top: 20px; }.intro-caption { bottom: 20px; } }
@media(prefers-reduced-motion:reduce) { .intro-mosaic { display: none; } }
.intro-mosaic { inset:0; display:flex; flex-direction:column; gap:0; opacity:.22; filter:grayscale(.35); transition:opacity 1.6s ease; }
.intro-mosaic.colour-in { filter:grayscale(.35); }
.intro-mosaic,.intro-mosaic.colour-in { filter:grayscale(.35) blur(3px); transform:scale(1.015); }
.intro-row { display:flex; flex:1; min-height:0; width:max-content; gap:0; animation:intro-left 16s linear infinite; will-change:transform; backface-visibility:hidden; contain:layout paint; }
.intro-row[data-direction=right] { animation-name:intro-right; }
.intro-row .intro-tile { flex:0 0 max(19vw,160px); width:max(19vw,160px); height:100%; }
.intro-row video { object-fit:cover; }
.intro-row img {display:block;width:100%;height:100%;object-fit:cover;}
.intro-heading,.intro-caption { z-index:2; text-shadow:0 1px 12px #000; }
@keyframes intro-left { from {transform:translateX(0)} to {transform:translateX(-19vw)} }
@keyframes intro-right { from {transform:translateX(-19vw)} to {transform:translateX(0)} }
.intro-heading,.intro-caption { display:none; }
.intro-centre { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; pointer-events:none; }
.intro-logo { font:800 86px/1 'Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing:0; animation:logo-breathe 1.4s ease-in-out infinite; will-change:transform,opacity; }
.intro-percent { font:11px/1 var(--mono,monospace); font-variant-numeric:tabular-nums; width:5ch; text-align:center; color:#ffffffa6; }
@keyframes logo-breathe { 0%,100% {transform:scale(.97);opacity:.72} 50% {transform:scale(1.025);opacity:1} }
@media(max-width:640px) { .intro-logo {font-size:64px;} }
@media(prefers-reduced-motion:reduce) { .intro-row,.intro-logo {animation:none;} }