@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital@1&display=swap');

:root {
  color-scheme: dark;
  --ivory: #f4efe4;
  --gold: #efd097;
  --muted: #c7c4b7;
  --side: clamp(22px, 6.8vw, 115px);
  --mast-height: 76px;
  --total: 0;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0a100c; color: var(--ivory); font-family: 'DM Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
p, h1, h2, figure { margin: 0; }
em { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; }
img { display: block; }
.skip { position: fixed; z-index: 12; top: 10px; left: 12px; background: #161f18; padding: 10px; transform: translateY(-170%); }
.skip:focus { transform: none; }

.mast {
  position: fixed; z-index: 9; inset: 0 0 auto; min-height: var(--mast-height);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-inline: var(--side);
  background: linear-gradient(#070c09f5, #070c09b5 80%, #070c0920);
}
.brand { display: inline-flex; align-items: center; width: fit-content; gap: 10px; min-height: 44px; }
.brand > span { font-size: 11px; line-height: 1.35; letter-spacing: .18em; text-transform: uppercase; }
.brand small { display: block; margin-top: 3px; color: var(--gold); font-size: 8px; letter-spacing: .23em; }
.mast nav { display: flex; align-items: center; gap: clamp(14px, 3.5vw, 58px); }
.mast nav a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: #e2e2d6; font-size: 13px; white-space: nowrap; }
.mast nav a:hover, .mast nav a[aria-current] { color: var(--gold); }
.mast nav a span, .mast-index { color: var(--gold); font: 10px ui-monospace, monospace; }
.mast-index { color: var(--muted); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.mast-index b { color: var(--gold); font-weight: 500; }
.mast-tools { justify-self: end; display: flex; align-items: center; gap: 18px; }
.portfolio-language { position: relative; font-size: 12px; }
.portfolio-language summary {
  display: flex; align-items: center; gap: 4px; min-height: 44px;
  color: var(--ivory); cursor: pointer; list-style: none; white-space: nowrap;
}
.portfolio-language summary::-webkit-details-marker { display: none; }
.portfolio-language summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.portfolio-language summary span { color: var(--gold); }
.portfolio-language-options {
  position: absolute; right: 0; top: 100%; display: grid; min-width: 126px; padding: 5px;
  background: #101a14; border: 1px solid #cbb38555; border-radius: 6px;
  box-shadow: 0 14px 30px #0008;
}
.portfolio-language-options a { padding: 9px 11px; border-radius: 3px; }
.portfolio-language-options a:hover, .portfolio-language-options a[aria-current="page"] { background: #e1be8723; color: var(--gold); }
.progress { position: absolute; inset: auto var(--side) 0; height: 1px; background: #f2ddb942; }
.progress::after { content: ''; position: absolute; inset: 0; background: #f1c878; box-shadow: 0 0 10px #f0c77d90; transform: scaleX(var(--total)); transform-origin: left; }

.track { --p: 0; --reveal: 1; --cut: 0; position: relative; }
.scene {
  position: relative; min-height: 650px; height: 100vh; height: 100svh;
  isolation: isolate; overflow: hidden; overflow: clip;
}
.motion .track { min-height: 164vh; min-height: 164svh; }
.motion .opening { min-height: 126vh; min-height: 126svh; }
.motion .scene { position: sticky; top: 0; }
.opening .scene { background: #09100c; }
.opening-art, .opening-vignette, .boat-art, .boat-wash, .boat-grid, .traffic-grid, .traffic-light {
  position: absolute; inset: 0; pointer-events: none;
}
.opening-art {
  transform: translate3d(calc(var(--p) * -3%), calc(var(--p) * -9%), 0) scale(calc(1 + var(--p) * .29));
  background: radial-gradient(ellipse at 73% 42%, #42351a 0%, #17251b 37%, #07110d 68%, #060b08 100%);
}
.opening-art::before {
  content: ''; position: absolute; inset: 0; background: url('/assets/kraken-hero.webp') center 53% / cover;
  opacity: .12; filter: saturate(.66); mix-blend-mode: screen;
}
.signature-halo {
  position: absolute; width: min(59vw, 820px); aspect-ratio: 1; top: 46%; right: -3%;
  transform: translate3d(0,-50%,0); border: 1px solid #edd39127; border-radius: 50%;
  background: radial-gradient(circle, #f2bd654b, #eebc6010 42%, transparent 66%);
  box-shadow: 0 0 90px #deb77314, inset 0 0 52px #e1b76512;
}
.signature-halo::before, .signature-halo::after {
  content: ''; position: absolute; inset: 8%; border: 1px solid #edd39130; border-radius: 50%;
}
.signature-halo::after { inset: 18%; border-style: dashed; }
.opening-art .signature-kraken {
  position: absolute; width: clamp(310px,42vw,610px); aspect-ratio: 3 / 2; top: 48%; right: 6%;
  transform: translate3d(0,-50%,0); filter: drop-shadow(0 0 32px #eab75a62) drop-shadow(0 13px 30px #0a0e05);
}
.signature-kraken::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(140deg,#f4d69e,#dbaf62 75%,#edcc8c);
  mask: url('/assets/kraken-mark.png') center / contain no-repeat;
}
.motion .signature-kraken { animation: signature-arrival 2.2s both cubic-bezier(.16,.73,.19,1); }
@keyframes signature-arrival {
  0% { transform: translate3d(0,-47%,0) scale(.70); opacity: .24; }
  58% { transform: translate3d(0,-50%,0) scale(1.035); opacity: 1; }
  100% { transform: translate3d(0,-50%,0) scale(1); }
}
.opening-vignette { background: linear-gradient(90deg, #07100bc7, #07100b3f 52%, transparent 78%), linear-gradient(0deg, #070e0bd9, transparent 30%); }
.opening-orbit { position: absolute; z-index: 1; width: min(65vw, 950px); aspect-ratio: 1; border: 1px solid #fae2a735; border-radius: 50%; right: -13%; top: -37%; transform: translate3d(0, calc(var(--p) * 35%), 0); pointer-events: none; }
.opening-orbit::before, .opening-orbit::after { content: ''; position: absolute; inset: 7%; border: 1px solid #fae2a71f; border-radius: 50%; }
.opening-orbit::after { inset: 15%; }
.opening-copy { position: absolute; z-index: 4; top: 48%; left: var(--side); right: var(--side); transform: translate3d(0, calc(-48% - var(--p) * 85px), 0); opacity: calc(1 - var(--cut) * .48); }
.kicker, .chapter { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: 11px; letter-spacing: .19em; text-transform: uppercase; }
.kicker > i { width: 7px; height: 7px; background: var(--gold); box-shadow: 0 0 20px #ffce6ad0; border-radius: 50%; }
.kicker > span, .chapter > span { width: 22px; height: 1px; background: currentColor; opacity: .48; }
h1 { font-size: clamp(64px, 9.4vw, 176px); font-weight: 500; letter-spacing: -.096em; line-height: .89; margin-top: 23px; }
h1 > span, h1 em { display: block; }
h1 em { color: #efd3a0; letter-spacing: -.092em; padding-bottom: .12em; }
.intro-text { margin-top: 14px; max-width: 31rem; color: #e6e1d4; font-size: clamp(15px, 1.8vw, 21px); line-height: 1.4; }
.motion .opening-copy h1 > span, .motion .opening-copy h1 > em, .motion .intro-text { animation: first-light .9s both cubic-bezier(.2,.75,.25,1); }
.motion .opening-copy h1 > em { animation-delay: .13s; }
.motion .intro-text { animation-delay: .25s; }
@keyframes first-light { from { transform: translate3d(0,42px,0); opacity: 0; filter: blur(9px); } }
.descent { position: absolute; z-index: 4; bottom: max(26px, env(safe-area-inset-bottom)); left: var(--side); display: flex; align-items: center; gap: 12px; min-height: 46px; color: #ede1c6; font-size: 13px; }
.descent-arrow { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid #e5cb8c79; border-radius: 50%; color: var(--gold); font-size: 22px; }
.motion .descent-arrow { animation: tug 1.8s ease-in-out 2; }
@keyframes tug { 50% { transform: translateY(5px); box-shadow: 0 0 16px #e9c98c30; } }
.opening-index { position: absolute; right: var(--side); bottom: 32px; z-index: 4; color: #e8d9ba; text-align: right; font: 10px/1.6 ui-monospace, monospace; letter-spacing: .12em; }
.opening-seam, .sail-seam { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: var(--cut); }
.opening-seam { background: linear-gradient(159deg, #0a392f9e 5%, #67ccb42e 60%, #2bc9ab26); clip-path: polygon(0 58%,100% 0,100% 100%,0 100%); transform: translate3d(0,calc(100% - var(--cut) * 94%),0); }

.boat { --accent: #92ebd5; --screen-edge: #99e4dcb0; --screen-bg: #0a2b29; }
.boat .scene { background: #092b27; }
.boat-art { transform: translate3d(calc(var(--p) * -4%), calc(var(--p) * 4%), 0) scale(calc(1.04 + var(--p) * .30)); }
.boat-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 63%; filter: saturate(1.05); }
.boat-art .sea-surface { position: absolute; inset: 0; }
.boat-art .boat-sail {
  position: absolute; top: 0; right: -2%; width: 62%; height: 81%; object-position: center 60%;
  opacity: calc(.83 - var(--p) * .48); transform: translate3d(calc(var(--p) * 19%),calc(var(--p) * -11%),0) scale(calc(1 + var(--p) * .09));
  mask-image: linear-gradient(90deg,transparent,#000 27%), linear-gradient(0deg,transparent,#000 29%);
  mask-composite: intersect;
}
.boat-wash { background: linear-gradient(90deg,#031713d9,#05272491 30%,#0b555713 84%), linear-gradient(0deg,#061e1cdd,transparent 38%); }
.tide-mark { position: absolute; z-index: 3; inset: auto var(--side) 14%; font: 10px ui-monospace,monospace; letter-spacing: .17em; color: #baf8ef; opacity: .75; }
.tide-mark i { display: inline-block; width: 44px; height: 1px; background: currentColor; margin: 0 8px 3px 0; }
.boat .project-visual { transform: perspective(1200px) translate3d(calc(155px * (1 - var(--reveal))),calc(195px * (1 - var(--reveal))),0) rotateX(calc(23deg * (1 - var(--reveal)))) rotateZ(calc(10deg * (1 - var(--reveal)))) scale(calc(.67 + var(--reveal) * .33)); }
.boat-grid { background-image: linear-gradient(#aff7e415 1px,transparent 1px),linear-gradient(90deg,#aff7e415 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg,transparent,black 68%,transparent); transform: translateY(calc(var(--p) * -64px)); opacity: .55; }
.rigging, .circuit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rigging path, .circuit path { fill: none; stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--reveal)); vector-effect: non-scaling-stroke; }
.rigging path { stroke: #b6f2e7a2; filter: drop-shadow(0 0 7px #9be8dd); }
.sail-seam { background: linear-gradient(134deg,transparent 34%,#d4f4f2a0 59%,#54d98f9b 60%,#081e11 95%); clip-path: polygon(0 95%,100% 9%,100% 100%,0 100%); transform: translate3d(0,calc(60% - var(--cut) * 59%),0); }

.chapter { position: absolute; top: calc(var(--mast-height) + 7.5vh); left: var(--side); z-index: 5; color: var(--accent); }
.chapter b { font: 12px ui-monospace, monospace; }
.project-copy { position: absolute; z-index: 5; left: var(--side); top: 36%; transform: translate3d(0,calc(var(--p) * -51px),0); }
.project-copy h2 { font-size: clamp(53px, 8vw, 134px); line-height: .96; letter-spacing: -.094em; font-weight: 600; text-shadow: 0 4px 35px #020b0a65; }
.project-copy h2 em { color: var(--accent); letter-spacing: -.09em; }
.project-line { font-size: clamp(18px, 2.4vw, 29px); color: var(--ivory); margin-top: 19px; }
.project-description { font-size: 15px; line-height: 1.6; max-width: min(30vw, 320px); color: #e0e7de; margin-top: 10px; }
.project-visual {
  position: absolute; z-index: 4; width: min(55vw, 970px); right: var(--side); top: 25%;
  perspective: 1400px; transform-style: preserve-3d; transform-origin: 55% 60%;
  transform: perspective(1400px) translate3d(calc(160px * (1 - var(--reveal))), calc(72px * (1 - var(--reveal))), 0) rotateY(calc(-24deg * (1 - var(--reveal)))) rotateZ(calc(7deg * (1 - var(--reveal)))) scale(calc(.77 + var(--reveal) * .23));
  opacity: calc(.53 + var(--reveal) * .47);
}
.screen {
  overflow: hidden; border-radius: 12px; border: 1px solid var(--screen-edge); background: var(--screen-bg);
  box-shadow: 0 32px 80px #020b0bc7, 0 0 52px color-mix(in srgb, var(--accent), transparent 80%);
}
.screen figcaption { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 9px 12px; font: 10px ui-monospace,monospace; letter-spacing: .04em; color: var(--accent); }
.screen figcaption span { display: flex; gap: 4px; }
.screen figcaption i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .64; }
.screen figcaption b { justify-self: end; font-weight: 500; }
.screen img { width: 100%; height: auto; }
.visual-tag {
  position: absolute; bottom: -21px; right: -12px; display: flex; align-items: center; gap: 9px;
  padding: 10px 15px 10px 10px; border: 1px solid var(--screen-edge); border-radius: 7px; background: var(--screen-bg); color: var(--ivory);
  transform: translate3d(calc(38px * (1 - var(--reveal))), calc(25px * (1 - var(--reveal))),0);
  box-shadow: 0 14px 40px #0009; font-weight: 700; font-size: 13px;
}
.visual-tag i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--accent); color: #092723; font-style: normal; }
.visual-tag small { display: block; color: var(--accent); font: 8px ui-monospace,monospace; letter-spacing: .065em; margin-top: 3px; }
.boat-tag span span { color: var(--accent); }
.scene-footer { position: absolute; z-index: 6; bottom: max(25px, env(safe-area-inset-bottom)); inset-inline: var(--side); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.project-link, .next-link { display: flex; align-items: center; min-height: 44px; gap: 12px; font-size: 13px; }
.project-link { border-radius: 4px; padding: 7px 12px; background: var(--accent); color: #0b231e; font-weight: 700; }
.project-link:hover { filter: brightness(1.12); }
.next-link { color: var(--ivory); }
.next-link b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--screen-edge); color: var(--accent); }

.traffic { --accent: #97ffad; --screen-edge: #59e282ae; --screen-bg: #092719; }
.traffic .scene { background: radial-gradient(ellipse at 68% 49%, #103523 0%,#0b1b14 49%,#040c08 85%); }
.traffic-grid { inset: -22%; background-image: linear-gradient(#74ff9d39 1px,transparent 1px),linear-gradient(90deg,#74ff9d39 1px,transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(ellipse at 70% 75%,black,transparent 70%); transform: perspective(800px) rotateX(57deg) translate3d(0,calc(var(--p) * -120px),0); }
.traffic-light { background: radial-gradient(ellipse at 76% 30%,#3cff7549,transparent 49%),radial-gradient(ellipse at 66% 70%,#42ee812c,transparent 54%); transform: scale(calc(1 + var(--p) * .26)); }
.circuit path { stroke: #64fda19c; filter: drop-shadow(0 0 6px #42f27a); }
.orbits { position: absolute; inset: -7% -24% 0 15%; transform: rotate(-21deg); pointer-events: none; }
.orbits i { position: absolute; inset: 10% 8%; border: 1px solid #59df8a55; border-radius: 50%; transform: translate3d(calc(var(--p) * 40px),0,0) scale(calc(.94 + var(--p) * .15)); }
.orbits i:nth-child(2) { inset: 17% 11%; }
.orbits i:nth-child(3) { inset: 23% 15%; }
.traffic .project-copy h2 { font-size: clamp(46px, 6.6vw, 112px); }
.traffic .project-description { color: #d6eadb; }
.traffic-visual { transform: perspective(1400px) translate3d(calc(90px * (1 - var(--reveal))), calc(-155px * (1 - var(--reveal))), 0) rotateX(calc(25deg * (1 - var(--reveal)))) rotateZ(calc(-10deg * (1 - var(--reveal)))) scale(calc(.70 + var(--reveal) * .30)); }
.traffic-tag i, .traffic .project-link { color: #082315; }
.matrix-rain {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none;
  mask-image: linear-gradient(90deg,#0004,#000d 44%,#000 70%);
}
.motion .traffic-screen {
  clip-path: inset(0 calc((1 - var(--reveal)) * 29%) 0 0 round 12px);
  filter: saturate(calc(.52 + var(--reveal) * .48));
  position: relative;
}
.motion .traffic-screen::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 24%;
  background: linear-gradient(0deg,#9aff9d84,transparent 70%);
  border-bottom: 1px solid #9aff9d; transform: translateY(calc(var(--reveal) * 300%));
  opacity: calc((1 - var(--reveal)) * .92); pointer-events: none;
}

.swiss { --accent: #ffc1ca; --screen-edge: #f893a8a0; --screen-bg: #2d1520; }
.swiss .scene { background: radial-gradient(ellipse at 68% 46%,#391923,#130f15 51%,#090a0e 88%); }
.swiss-rack, .swiss-grid { position: absolute; inset: 0; pointer-events: none; }
.swiss-rack { background: url('/assets/projects/swiss-infrastructure.webp') center / cover; opacity: .16; filter: grayscale(.83); transform: scale(calc(1.05 + var(--p) * .18)); mask-image: radial-gradient(ellipse at 69% 52%, #000, transparent 75%); }
.swiss-grid { background: repeating-linear-gradient(90deg,#ffb6c218 0 1px,transparent 1px 52px),repeating-linear-gradient(0deg,#ffb6c218 0 1px,transparent 1px 52px); mask-image: radial-gradient(ellipse at 72% 56%, #000, transparent 67%); }
.swiss .project-copy { top: 31%; }
.swiss .project-copy h2 { font-size: clamp(53px,7.3vw,126px); }
.swiss .project-line { margin-top: 16px; }
.swiss .project-description { color: #e8dce0; }
.swiss .project-link { color: #2c141a; }
.swiss-instrument {
  position: absolute; z-index: 4; width: min(61vw,88svh,850px); aspect-ratio: 1; top: 49%; right: calc(var(--side) - 2.5vw);
  transform: translate3d(calc(52px * (1 - var(--reveal))),-50%,0) scale(calc(.83 + var(--reveal) * .17));
}
.swiss-optics { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 16px #e9436585); }
.optic-outer, .optic-blades { transform-origin: 320px 320px; }
.optic-outer { transform: rotate(calc(var(--p) * 115deg)); }
.optic-blades { transform: rotate(calc(63deg - var(--p) * 63deg)) scale(calc(.68 + var(--reveal) * .32)); }
.swiss-core {
  display: grid; place-items: center; position: absolute; inset: 31%; border-radius: 50%; border: 1px solid #ffc1ca75;
  background: radial-gradient(circle at 44% 37%, #42212a,#190e16 68%);
  box-shadow: inset 0 0 35px #ff607d33, 0 0 34px #f853715e;
  transform: scale(calc(.7 + var(--reveal) * .30)); opacity: calc(.58 + var(--reveal) * .42);
}
.swiss-core img { width: 68%; height: auto; filter: drop-shadow(0 3px 12px #fbb8c448); }
.swiss-coordinates { position: absolute; right: 6%; bottom: 6%; color: #ffc5ce; font: 10px ui-monospace,monospace; letter-spacing: .14em; }
.swiss-coordinates i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #ff718b; box-shadow: 0 0 12px #ff4863; }

.end { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 105px; padding: 16px var(--side); border-top: 1px solid #ddc7a546; color: var(--muted); font-size: 13px; }
.end p span, .end a span { color: var(--gold); }
.end a { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--ivory); }
.transition-sweep { position: fixed; z-index: 8; inset: 0; pointer-events: none; opacity: var(--sweep,0); overflow: hidden; overflow: clip; }
.tide-wipe, .tide-crest, .signal-wipe, .iris-wipe { position: absolute; inset: 0; display: none; }
.transition-sweep[data-theme="01"] .tide-wipe, .transition-sweep[data-theme="01"] .tide-crest,
.transition-sweep[data-theme="02"] .signal-wipe, .transition-sweep[data-theme="03"] .iris-wipe { display: block; }
.tide-wipe {
  background: linear-gradient(180deg,#1dc3b923, #002b2573), url('/assets/projects/open-water.webp') center calc(50% - var(--surge,0) * 24%) / cover;
  clip-path: var(--wave, polygon(0 100%,100% 100%,100% 100%,0 100%));
}
.tide-crest { width: 100%; height: 100%; filter: drop-shadow(0 0 14px #5bfff2); }
.tide-crest polyline { fill: none; stroke: #c5fff1; stroke-width: 2.2; stroke-opacity: .77; vector-effect: non-scaling-stroke; }
.signal-wipe {
  height: 39vh; inset: 0 -8% auto; transform: translate3d(0,var(--sweep-y,100vh),0) skewY(-5deg);
  background: repeating-linear-gradient(0deg,#4dff702d 0 1px,transparent 1px 7px), linear-gradient(180deg,transparent,#041f14df 22%,#10542bdc 53%,transparent);
  box-shadow: 0 -9px 20px #7cff9e3e;
}
.signal-wipe i { position: absolute; left: 0; top: 27%; width: 88%; height: 14%; background: linear-gradient(90deg,#87ff976e,#094321df 40%,#8aff9e55); transform: translateX(calc(-20% + var(--surge,0) * 37%)); }
.signal-wipe i:nth-child(2) { top: 48%; width: 64%; left: 34%; height: 5%; transform: translateX(calc(25% - var(--surge,0) * 61%)); }
.signal-wipe i:nth-child(3) { top: 65%; width: 72%; left: 20%; height: 8%; transform: translateX(calc(37% - var(--surge,0) * 53%)); }
.iris-wipe { background: radial-gradient(circle at 65% 52%,transparent 13%,#ff395c5e 38%,#1b0711b0 64%,transparent 83%); }
.iris-wipe i { position: absolute; top: 52%; left: 65%; width: max(37vw,44vh); aspect-ratio: 1; border: 2px solid #ff9aaa; border-radius: 50%; box-shadow: 0 0 36px #ff657dcc, inset 0 0 33px #ff657d90; transform: translate(-50%,-50%) scale(calc(.25 + var(--surge,0) * 2.6)); }
.iris-wipe i:nth-child(2) { border-style: dashed; width: max(47vw,58vh); transform: translate(-50%,-50%) rotate(calc(var(--surge,0) * 83deg)) scale(calc(.25 + var(--surge,0) * 2.6)); }
.sparks { position: fixed; z-index: 7; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 850px) {
  :root { --side: clamp(18px, 5.5vw, 44px); --mast-height: 60px; }
  .mast { grid-template-columns: 1fr auto auto; gap: 12px; }
  .mast-index { display: none; }
  .brand { gap: 6px; }
  .brand img { width: 27px; height: 27px; }
  .brand > span { font-size: 10px; letter-spacing: .10em; }
  .brand small { font-size: 7px; }
  .mast nav { gap: 13px; }
  .mast nav a { font-size: 11px; gap: 3px; }
  .mast nav a span { font-size: 9px; }
  .scene { min-height: 590px; }
  .motion .track { min-height: 151vh; min-height: 151svh; }
  .motion .opening { min-height: 119vh; min-height: 119svh; }
  .opening-art .signature-kraken { top: 32%; right: 50%; width: clamp(170px,62vw,345px); transform: translate3d(50%,-50%,0); }
  .motion .signature-kraken { animation-name: signature-mobile; }
  .signature-halo { width: min(78vw,430px); top: 32%; right: 50%; transform: translate3d(50%,-50%,0); }
  .opening-art::before { opacity: .10; }
  .opening-vignette { background: linear-gradient(90deg,#080f0bcc,#080f0b23),linear-gradient(0deg,#080f0bed,transparent 47%,#080f0b29); }
  .opening-copy { top: 59%; transform: translate3d(0,calc(-17% - var(--p) * 65px),0); }
  h1 { font-size: clamp(53px, 13vw, 104px); }
  .intro-text { max-width: 280px; }
  .opening-index { font-size: 8px; }
  .chapter { top: calc(var(--mast-height) + 5.3vh); }
  .project-copy { top: 22%; transform: translate3d(0,calc(var(--p) * -22px),0); }
  .project-copy h2 { font-size: clamp(56px, 13vw, 102px); }
  .traffic .project-copy h2 { font-size: clamp(42px, 10vw, 84px); }
  .project-line { margin-top: 9px; }
  .project-description { max-width: min(80vw, 450px); font-size: 14px; line-height: 1.42; margin-top: 6px; }
  .project-visual { width: auto; inset-inline: var(--side); top: max(293px, 45%); transform: translate3d(calc(36px * (1 - var(--reveal))), calc(42px * (1 - var(--reveal))), 0) rotateZ(calc(8deg * (1 - var(--reveal)))) scale(calc(.78 + var(--reveal) * .22)); }
  .boat .project-visual { transform: translate3d(calc(46px * (1 - var(--reveal))),calc(110px * (1 - var(--reveal))),0) rotateZ(calc(8deg * (1 - var(--reveal)))) scale(calc(.75 + var(--reveal) * .25)); }
  .traffic-visual { transform: translate3d(calc(34px * (1 - var(--reveal))),calc(55px * (1 - var(--reveal))),0) rotateZ(calc(-8deg * (1 - var(--reveal)))) scale(calc(.75 + var(--reveal) * .25)); }
  .visual-tag { right: -4px; bottom: -16px; padding: 6px 9px 6px 6px; font-size: 11px; }
  .visual-tag i { width: 22px; height: 22px; }
  .visual-tag small { font-size: 7px; }
  .boat-wash { background: linear-gradient(0deg,#06231fcf,transparent 56%,#082925ad 92%),linear-gradient(90deg,#061e1cad,#0b555711 89%); }
  .boat-art .boat-sail { width: 84%; height: 72%; }
  .tide-mark { display: none; }
  .swiss .project-copy { top: 21%; }
  .swiss .project-copy h2 { font-size: clamp(40px,10vw,71px); }
  .swiss .project-line { margin-top: 9px; }
  .swiss-instrument { width: min(86vw,51svh,535px); top: 66%; right: 50%; transform: translate3d(50%,-48%,0) scale(calc(.81 + var(--reveal) * .19)); }
  .swiss-coordinates { bottom: 3%; right: 5%; font-size: 8px; }
  .iris-wipe i { left: 50%; }
  .matrix-rain { mask-image: linear-gradient(0deg,#000,#000b 54%,#0009); }
}
@keyframes signature-mobile {
  from { transform: translate3d(50%,-48%,0) scale(.73); opacity: .27; }
  to { transform: translate3d(50%,-50%,0) scale(1); opacity: 1; }
}
@media (max-width: 480px) {
  .mast .brand > span { display: none; }
  .mast .brand img { width: 30px; height: 30px; }
  .mast { gap: 8px; }
  .mast nav { gap: 10px; }
  .mast nav a span { display: none; }
  .swiss .project-link { font-size: 12px; }
}
@media (max-width: 365px) {
  .mast nav a span { display: none; }
  .mast nav { gap: 9px; }
  .descent { font-size: 12px; }
  .opening-index { display: none; }
  .scene-footer { gap: 7px; }
  .project-link, .next-link { gap: 6px; font-size: 12px; }
  .next-link b { width: 29px; height: 29px; flex: 0 0 29px; }
}
@media (min-width: 590px) and (max-width: 850px) {
  .project-visual { width: min(73vw, 555px); left: auto; }
}
@media (max-height: 680px) and (min-width: 851px) {
  .scene { min-height: 550px; }
  h1 { font-size: clamp(65px, 8vw, 128px); }
  .project-copy h2 { font-size: clamp(50px, 6.8vw, 108px); }
  .project-visual { width: min(53vw, 790px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sparks, .matrix-rain { display: none; }
}

.motion .boat.is-active .sea-surface { animation: sea-arrival 3.6s both cubic-bezier(.19,.65,.25,1); }
@keyframes sea-arrival {
  from { transform: translate3d(-2%,7%,0) scale(1.16) rotate(-2deg); }
  to { transform: translate3d(0,0,0) scale(1.025) rotate(0deg); }
}
.motion .traffic.is-active .traffic-light { animation: system-arrival 2s both ease-out; }
@keyframes system-arrival {
  from { opacity: .2; }
  45% { opacity: 1; }
  to { opacity: .85; }
}
.motion .swiss.is-active .swiss-optics { animation: iris-arrival 2.4s both cubic-bezier(.17,.7,.24,1); }
@keyframes iris-arrival {
  from { rotate: -31deg; scale: .72; opacity: .18; }
  to { rotate: 0deg; scale: 1; opacity: 1; }
}