:root {
  --intro-blue: #3d5bb8;
  --intro-orange: #ff5a22;
  --intro-green: #388b88;
  --intro-ink: #1b1113;
  color: var(--intro-ink);
  background: var(--intro-blue);
  font-family: var(--font-sans, Arial, sans-serif);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; background: var(--intro-blue); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--intro-orange); outline-offset: 6px; }

.intro-page {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--intro-blue);
  touch-action: none;
}

.intro-deform {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  contain: layout paint;
  transform-origin: 0 0;
  will-change: transform;
}

.intro-velocity {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.intro-collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  margin: 0;
  background: var(--intro-blue);
  cursor: ns-resize;
  transform-origin: 50% 51%;
}

.intro-target-cover {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.intro-target-shadow {
  position: absolute;
  z-index: 0;
  display: block;
  background: rgba(27,17,19,.22);
  filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(36px, 42px, 0) scale(.95);
  transform-origin: center;
  will-change: transform, opacity;
}

.intro-quadrants-preview {
  position: absolute;
  inset: 0;
  z-index: 14;
  opacity: 0;
  pointer-events: none;
}

.intro-quadrant {
  position: absolute;
  display: flex;
  width: max-content;
  max-width: 330px;
  flex-direction: column;
  opacity: 0;
  color: #171716;
}

.intro-quadrant i,
.intro-quadrant small {
  font-family: var(--font-sans);
  font-style: normal;
  text-transform: uppercase;
}

.intro-quadrant i {
  margin-bottom: 5px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .1em;
}

.intro-quadrant strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.intro-quadrant small {
  max-width: 290px;
  margin-top: 7px;
  color: rgba(23,23,22,.55);
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: .06em;
}

.intro-quadrant--top {
  top: 12.5%;
  left: 50%;
  width: 400px;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.intro-quadrant--left {
  top: 50%;
  right: calc(50% + 250px);
  width: 280px;
  transform: translateY(-50%);
}

.intro-quadrant--right {
  top: 50%;
  left: calc(50% + 250px);
  width: 305px;
  transform: translateY(-50%);
}

.intro-quadrant--bottom {
  top: calc(50% + 242px);
  left: 50%;
  width: 470px;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.intro-lens {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 18;
  width: clamp(112px, 10vw, 162px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(27,17,19,.72);
  border-radius: 50%;
  background-color: var(--intro-blue);
  background-image: url("public/intro/opening-20260910.png");
  background-repeat: no-repeat;
  box-shadow: 0 12px 34px rgba(27,17,19,.2), inset 0 0 0 5px rgba(61,91,184,.14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.78);
  will-change: transform, opacity, background-position;
}

.intro-cover,
.intro-layer {
  position: absolute;
  inset: 1.5%;
  width: 97%;
  height: 97%;
}

.intro-cover,
.intro-layer img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.intro-cover {
  z-index: 1;
  filter: saturate(1.03) contrast(1.01);
  transform: scale(1);
}

.intro-layer {
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}

.intro-layer img { will-change: transform; }
.intro-layer--left { clip-path: polygon(0 0, 31% 0, 35% 100%, 0 100%); }
.intro-layer--centre { z-index: 4; clip-path: polygon(27% 21%, 62% 17%, 72% 100%, 24% 100%); }
.intro-layer--right { z-index: 3; clip-path: polygon(62% 10%, 100% 9%, 100% 100%, 68% 100%); }
.intro-layer--type { z-index: 6; clip-path: polygon(23% 0, 82% 0, 82% 57%, 21% 57%); }
.intro-layer--archive { z-index: 7; clip-path: polygon(24% 86%, 76% 86%, 77% 100%, 22% 100%); }

.intro-shade,
.intro-grain {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.intro-shade {
  background:
    linear-gradient(180deg, rgba(61,91,184,.32), transparent 20%, transparent 72%, rgba(27,17,19,.14)),
    radial-gradient(circle at 50% 48%, transparent 44%, rgba(27,17,19,.13) 118%);
}

.intro-grain {
  z-index: 9;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.intro-meta,
.intro-index,
.intro-instruction,
.intro-scroll,
.intro-skip {
  position: absolute;
  z-index: 20;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.intro-meta {
  top: 25px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.intro-meta strong { font-family: var(--font-display); font-size: 13px; letter-spacing: .02em; }
.intro-meta span { opacity: .62; }
.intro-index { top: 27px; right: 28px; text-align: right; }
.intro-index span { display: block; }
.intro-index span:last-child { margin-top: 5px; opacity: .58; }

.intro-scroll {
  bottom: 19px;
  left: 50%;
  display: grid;
  width: min(210px, 42vw);
  grid-template-columns: 1fr 24px;
  gap: 5px 10px;
  align-items: center;
  font-size: 7px;
  transform: translateX(-50%);
}

.intro-scroll span { opacity: .72; }
.intro-scroll small { grid-column: 2; grid-row: 1; font: inherit; text-align: right; }
.intro-scroll i {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(27,17,19,.32);
}
.intro-scroll b {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--intro-ink);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.intro-skip {
  right: 28px;
  bottom: 20px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 7px;
  opacity: .58;
}
.intro-skip:hover,
.intro-skip:focus-visible { opacity: 1; }
.intro-instruction { bottom: 21px; left: 28px; margin: 0; font-size: 7px; opacity: .52; }

.intro-page.is-scrolling .intro-scroll span { opacity: 1; }
.intro-page.is-scrolling .intro-instruction { opacity: .24; }
.intro-page.is-scrolling .intro-lens { opacity: 0 !important; }

.intro-page.is-leaving { pointer-events: none; }
.intro-page.is-leaving .intro-grain { opacity: 0; transition: opacity 240ms ease; }

.from-archive body,
.from-archive .intro-page { background: #f4f3f5; }
.from-archive .intro-deform { opacity: 0; }
.from-archive .intro-meta,
.from-archive .intro-index,
.from-archive .intro-instruction,
.from-archive .intro-scroll,
.from-archive .intro-skip { opacity: 0; }

@media (max-width: 760px) {
  .intro-target-shadow,
  .intro-quadrants-preview { display: none; }
  .intro-lens { display: none; }
  .intro-cover,
  .intro-layer { inset: 1.5%; width: 97%; height: 97%; }
  .intro-cover,
  .intro-layer img { object-position: 52% center; }
  .intro-meta { top: 19px; left: 18px; }
  .intro-index { top: 21px; right: 18px; }
  .intro-meta strong { font-size: 9px; white-space: nowrap; }
  .intro-meta span,
  .intro-index span:first-child { display: none; }
  .intro-index span:last-child { margin-top: 0; }
  .intro-instruction { display: none; }
  .intro-scroll { bottom: 18px; width: min(190px, 58vw); }
  .intro-skip { right: 18px; bottom: 19px; }
  .intro-layer--left { clip-path: polygon(0 0, 37% 0, 38% 100%, 0 100%); }
  .intro-layer--centre { clip-path: polygon(20% 16%, 73% 14%, 82% 100%, 18% 100%); }
  .intro-layer--right { clip-path: polygon(67% 7%, 100% 7%, 100% 100%, 72% 100%); }
  .intro-layer--type { clip-path: polygon(9% 0, 93% 0, 93% 58%, 7% 58%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .intro-layer { display: none; }
  .intro-cover { transform: none; }
}