:root {
  --ink: #0d0b1e;
  --cream: #f4efe6;
  --orange: #ff5b3a;
  --yellow: #ffd23f;
  --blue: #2b1bff;
  --pink: #ff7ad9;
  --mint: #4fffb0;
  --display: 'Syne', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --split: 0px; /* set by JS from scroll speed */
}

/* the italic serif accent that runs through the whole site */
em, .word.em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* subtle pink/cyan split on big type while scrolling fast */
.split, .row, .words, .g-head h2, .orbit-title, .tunnel-text, .wave {
  text-shadow:
    var(--split) 0 0 rgba(255, 40, 120, .4),
    calc(var(--split) * -1) 0 0 rgba(0, 220, 255, .4);
}
.row.outline .track, .w.hl { text-shadow: none; }

.fx {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100lvh;
  z-index: 95; pointer-events: none;
  mix-blend-mode: difference; /* white ink line reads on every background */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--ink); overscroll-behavior: none; }
body {
  color: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  body, a, button { cursor: none; }
}

#spacer { width: 1px; pointer-events: none; }

.label {
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .7;
}

/* ================= LAYERS (the "cloth" sheets) ================= */
.layer {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* large-viewport height: doesn't jump when a phone's address bar hides */
  height: 100vh; height: 100lvh;
  overflow: hidden;
  visibility: hidden;
  will-change: transform;
  contain: layout paint;
}
.sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}
.content {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0%;
  will-change: transform;
}

/* fabric folds that appear while the sheet is being pulled */
.drape {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,0) 30%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,.18) 4vw,
      rgba(255,255,255,.08) 7vw,
      rgba(0,0,0,0) 10vw);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 75%);
  will-change: opacity;
}
/* darkens a sheet as the next one covers it */
.shade {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: #05040c;
  opacity: 0;
  will-change: opacity;  /* fade on the GPU, no repaint */
}

/* ================= INTRO ================= */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--cream);
  color: var(--ink);
  pointer-events: none;
  animation: lift 1.3s 1.25s cubic-bezier(.76, 0, .24, 1) forwards;
}
.intro-name {
  position: absolute; left: 5vw; top: 6vh;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  letter-spacing: -.02em;
  animation: fadeUp .8s .1s var(--ease) both;
}
.intro-tag {
  position: absolute; right: 5vw; top: 6.8vh;
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; opacity: .6;
  animation: fadeUp .8s .2s var(--ease) both;
}
.intro-count {
  position: absolute; right: 4vw; bottom: 3vh;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(6rem, 22vw, 20rem);
  line-height: .8; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.intro-count::after { content: '%'; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .35em; margin-left: .05em; }
.intro-line {
  position: absolute; left: 5vw; right: 5vw; bottom: 2vh;
  height: 1px; background: var(--ink);
  transform-origin: 0 50%;
  animation: grow 1.1s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes grow { from { transform: scaleX(0); } }
@keyframes lift {
  0%   { transform: translateY(0);     border-radius: 0 0 50% 50% / 0 0 0 0; }
  60%  {                               border-radius: 0 0 50% 50% / 0 0 40vh 40vh; }
  100% { transform: translateY(-125%); border-radius: 0 0 50% 50% / 0 0 60vh 60vh; }
}

/* ================= HEADER ================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px clamp(16px, 3vw, 36px);
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  font: 500 .72rem/1 var(--body);
  letter-spacing: .16em; text-transform: uppercase;
}
.brand {
  pointer-events: auto; justify-self: start;
  font-family: var(--display); font-weight: 700;
  font-size: 1rem; letter-spacing: -.01em; text-transform: none;
}
.brand em { font-size: 1.12em; }
.sec { display: flex; align-items: baseline; gap: .6em; }
.sec-num { display: inline-block; overflow: hidden; height: 1.1em; }
.sec-num span { display: inline-block; animation: roll .6s var(--ease) both; }
@keyframes roll { from { transform: translateY(110%); } }
.sec-of { opacity: .5; }
.sec-name { min-width: 7ch; }
.clock { display: flex; align-items: center; gap: .6em; }
.clock i {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .2; } }
@media (max-width: 600px) {
  .topbar { grid-template-columns: 1fr auto; padding: 16px; }
  .sec { display: none; }
}

/* headings that slide up from behind an invisible edge */
.mask { overflow: hidden; padding-bottom: .12em; }
.mask-in {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease);
}
.layer.in .mask-in { transform: none; transition-delay: .15s; }

/* ================= GLOBAL UI ================= */
.progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 101; pointer-events: none;
  mix-blend-mode: difference;
}
.progress span {
  display: block; height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: #fff;
}

/* section nav: slim dashes, the active one stretches */
.dots {
  position: fixed; right: clamp(16px, 3vw, 36px); top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  mix-blend-mode: difference;
}
.dots button {
  position: relative;
  width: 14px; height: 2px;
  border: 0; border-radius: 2px;
  background: #fff;
  opacity: .4;
  transition: width .5s var(--ease), opacity .3s;
}
.dots button::before { content: ''; position: absolute; inset: -7px -4px; }
.dots button:hover { opacity: .8; }
.dots button.on { width: 32px; opacity: 1; }
.dots button::after {
  content: attr(data-name);
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font: 500 .7rem/1 var(--body);
  letter-spacing: .15em; text-transform: uppercase;
  white-space: nowrap;
  opacity: 0; transition: opacity .3s;
}
.dots button:hover::after { opacity: 1; }
@media (max-width: 600px) {
  .dots { right: 8px; gap: 10px; }
  .dots button::after { display: none; }
}

.cursor, .cursor-dot {
  position: fixed; left: 0; top: 0;
  z-index: 150; pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1.5px solid #fff;
  transition: width .3s, height .3s, margin .3s, background .3s;
}
.cursor.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: #fff; }
.cursor .cl {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 600 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  opacity: 0; transition: opacity .2s;
}
.cursor.is-view {
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  background: var(--cream); border-color: var(--cream);
  mix-blend-mode: normal;
}
.cursor.is-view .cl { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

.grain {
  position: fixed; inset: -10%;
  z-index: 90; pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-5%, 3%); }
  50%  { transform: translate(4%, -4%); }
  75%  { transform: translate(-3%, -2%); }
  100% { transform: translate(2%, 5%); }
}

/* split text */
.word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; will-change: transform; }
.char > span { display: inline-block; }

/* ================= 1. HERO ================= */
#hero .sheet { background: radial-gradient(120% 90% at 50% 110%, #3a1d7a 0%, var(--ink) 60%); }
.blobs { position: absolute; inset: -10%; }
/* soft glows are gradients, not blur filters: same look, a fraction of the GPU cost */
.blob {
  position: absolute;
  border-radius: 50%;
  opacity: .75;
  background: radial-gradient(circle, var(--c) 0%, transparent 70%);
  background: radial-gradient(circle, var(--c) 0%, color-mix(in srgb, var(--c) 45%, transparent) 35%, transparent 70%);
  will-change: transform;
  animation: float 16s ease-in-out infinite;
}
.b1 { --c: var(--pink);   width: 65vmax; height: 65vmax; top: -18%; left: -18%; }
.b2 { --c: var(--blue);   width: 70vmax; height: 70vmax; bottom: -22%; right: -20%; animation-delay: -5s; }
.b3 { --c: var(--orange); width: 45vmax; height: 45vmax; top: 25%; left: 30%; animation-delay: -10s; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(8vw, 6vh) scale(1.12); }
  66%      { transform: translate(-6vw, 4vh) scale(.9); }
}

/* WebGL ink (moved between the hero and contact sheets by script.js) */
.fluid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

#hero .content {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 16px;
}
.eyebrow {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  opacity: .9;
  margin-bottom: .4rem;
  animation: fadeUp 1s 1.9s var(--ease) both;
}
.split {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.2rem, 13vw, 12rem);
  line-height: .95;
  letter-spacing: -.03em;
}
.split .char > span {
  animation: rise 1.1s cubic-bezier(.2, .9, .2, 1) both;
  animation-delay: calc(1.75s + var(--i) * 60ms);
  transition: color .3s;
}
.split .char:hover > span { color: var(--yellow); }
@keyframes rise {
  from { transform: translateY(100%) rotate(12deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.rotator {
  margin-top: 1.4rem;
  font-size: clamp(1.1rem, 2.2vw, 1.8rem);
  animation: fadeUp 1s 2.3s var(--ease) both;
  perspective: 400px;
}
.rot-word {
  display: inline-block;
  color: var(--yellow);
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 1.25em;
  transition: transform .35s cubic-bezier(.6, 0, .3, 1), opacity .35s;
}
.rot-word.out      { transform: translateY(-60%) rotateX(80deg); opacity: 0; }
.rot-word.in-start { transform: translateY(60%) rotateX(-80deg); opacity: 0; transition: none; }

.scroll-cue {
  position: absolute; left: 0; right: 0; bottom: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  opacity: .7;
  animation: fadeUp 1s 2.7s var(--ease) both;
}
.hero-meta {
  position: absolute; left: clamp(16px, 3vw, 36px); right: clamp(16px, 3vw, 36px); bottom: 34px;
  display: flex; justify-content: space-between;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6;
  animation: fadeUp 1s 2.8s var(--ease) both;
  pointer-events: none;
}
@media (max-width: 600px) { .hero-meta { display: none; } }
.scroll-cue i {
  width: 1px; height: 48px;
  background: linear-gradient(var(--cream), transparent);
  transform-origin: top;
  animation: drip 1.6s ease-in-out infinite;
}
@keyframes drip {
  0%   { transform: scaleY(0); opacity: 1; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } }

/* ================= 2. MARQUEE ================= */
#marquee .sheet { background: var(--orange); color: var(--ink); }
#marquee .content {
  display: flex; flex-direction: column; justify-content: center; gap: 2vh;
}
.row {
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 11vw, 10rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.row.band {
  background: var(--ink);
  color: var(--cream);
  margin: 2vh -10vw;
  padding: .08em 0;
  transform: rotate(-4deg);
}
.row.outline .track { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.row em { font-size: 1.05em; padding: 0 .08em; }
.wave .word.em { color: var(--orange); }
.track { display: inline-flex; will-change: transform; }
.unit { padding-right: .3em; }

/* ================= 3. MANIFESTO ================= */
#manifesto .sheet { background: var(--cream); color: var(--ink); }
#manifesto .content {
  display: flex; flex-direction: column; justify-content: center; gap: 2rem;
  padding: 0 max(16px, 8vw);
}
.words {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 4.4rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 24ch;
}
.w { display: inline-block; opacity: .12; will-change: opacity, transform; }
.w.hl {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.12em; letter-spacing: -.01em;
  color: var(--orange);
}
.badge {
  position: absolute;
  right: max(16px, 6vw); bottom: 7vh;
  width: clamp(100px, 13vw, 170px);
  fill: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 2px;
}
.badge circle { fill: var(--orange); }

/* ================= 4. GALLERY ================= */
#gallery .sheet { background: #111014; }
.g-head { position: absolute; top: 10vh; left: max(16px, 8vw); right: 16px; }
.g-head h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  line-height: 1; letter-spacing: -.03em;
  margin-top: .6rem;
}
.g-track {
  position: absolute; left: 0; bottom: 8vh;
  width: max-content;
  display: flex; gap: clamp(16px, 3vw, 48px);
  padding: 0 max(16px, 8vw);
  perspective: 1200px;
  will-change: transform;
}
.card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 30vw, 420px);
  height: min(54vh, 560px);
  border-radius: 24px;
  overflow: hidden;
  will-change: transform;
}
/* glare that follows the mouse across a card */
.card::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.45), transparent 55%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .3s;
}
.card:hover::after { opacity: 1; }
.meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
}
.meta span { font-size: .75rem; letter-spacing: .2em; opacity: .75; }
.meta h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.1; }
.meta p { opacity: .85; font-size: .95rem; margin-top: .2rem; }

/* card art — .art itself is moved by JS, the animation lives on the pseudo-elements */
.art { position: absolute; inset: -8%; background: var(--c1); }
.art::before, .art::after { content: ''; position: absolute; }

.art-1 { background: var(--c2); }
.art-1::before {
  width: 130%; aspect-ratio: 1; left: -15%; top: 5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--c1), var(--c2), var(--yellow), var(--c1));
  filter: blur(30px);
  animation: spin 7s linear infinite;
}
/* patterns slide by exactly one tile using transform (GPU), not background-position (repaint) */
.art-2::before {
  top: 0; bottom: 0; left: -62.225px; right: 0;
  background: repeating-linear-gradient(45deg, var(--c1) 0 22px, var(--c2) 22px 44px);
  background-size: 62.225px 62.225px;
  will-change: transform;
  animation: stripes 1.2s linear infinite;
}
@keyframes stripes { to { transform: translateX(62.225px); } }
.art-3 { background: var(--c2); }
.art-3::before {
  top: -34px; left: -34px; right: 0; bottom: 0;
  background: radial-gradient(circle, var(--c1) 28%, transparent 30%) 0 0 / 34px 34px;
  will-change: transform;
  animation: dots 2s linear infinite;
}
@keyframes dots { to { transform: translate(34px, 34px); } }
.art-4::before {
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 45%, var(--c1) 0 16px, var(--c2) 16px 32px);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.25); } }
.art-5 { background: var(--c2); }
.art-5::before {
  width: 70%; aspect-ratio: 1; left: 15%; top: 14%;
  background: linear-gradient(135deg, var(--c1), var(--pink));
  animation: morph 6s ease-in-out infinite;
}
@keyframes morph {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: rotate(0); }
  50%      { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform: rotate(180deg); }
}
.art-6::before {
  width: 56%; aspect-ratio: 1; left: 22%; top: 16%;
  border: 3px solid var(--c2);
  box-shadow: 0 0 0 18px rgba(79,255,176,.12), 0 0 40px rgba(79,255,176,.5);
  animation: spin 6s linear infinite;
}
.art-6::after {
  width: 30%; aspect-ratio: 1; left: 35%; top: 29%;
  background: var(--c2);
  animation: spin 3s linear infinite reverse;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= 5. ORBIT ================= */
#orbit .sheet { background: radial-gradient(circle at 50% 50%, #5a4bff, var(--blue) 45%, #120880); }
#orbit .content { perspective: 1100px; }
.ring {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.orbit-title {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: max-content;
  text-align: center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 8rem);
  line-height: .9; letter-spacing: -.03em;
}
.item {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  padding: .5em 1.1em;
  border: 2px solid var(--cream);
  border-radius: 999px;
  background: rgba(13, 11, 30, .3);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.9rem, 2vw, 1.6rem);
  will-change: transform, opacity;
}
.item:nth-child(3n) { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.item:nth-child(4n) { background: var(--pink);   color: var(--ink); border-color: var(--pink); }

/* ================= 6. PARTICLES ================= */
#particles .sheet { background: #07060d; }
#particles canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-caption { position: absolute; left: 0; right: 0; bottom: 9vh; text-align: center; padding: 0 16px; }

/* ================= 7. TUNNEL ================= */
#tunnel .sheet { background: var(--yellow); color: var(--ink); }
.rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.tunnel-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 16px;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 7rem);
  letter-spacing: -.03em;
  opacity: 0;
}

/* ================= 8. CONTACT ================= */
#contact .sheet { background: var(--ink); }
.aurora {
  position: absolute; left: 50%; top: 50%;
  width: 150vmax; height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background:
    radial-gradient(circle closest-side at 38% 38%, rgba(255, 122, 217, .45), transparent),
    radial-gradient(circle closest-side at 64% 42%, rgba(43, 27, 255, .55), transparent),
    radial-gradient(circle closest-side at 55% 64%, rgba(79, 255, 176, .3), transparent),
    radial-gradient(circle closest-side at 38% 62%, rgba(255, 91, 58, .38), transparent);
  will-change: transform;
  animation: spin 22s linear infinite;
}
#contact .content {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.2rem;
  text-align: center;
  padding: 0 16px;
}
.wave {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 7.5rem);
  line-height: .95; letter-spacing: -.03em;
  max-width: 12ch;
}
.wave .char > span {
  animation: bob 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -90ms);
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.12em); } }
.magnet {
  position: relative;
  display: grid; place-items: center;
  width: clamp(130px, 15vw, 180px); aspect-ratio: 1;
  border-radius: 50%;
  color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  will-change: transform;
}
.magnet .lab { position: relative; z-index: 1; display: block; will-change: transform; }

/* liquid button: a core + droplets that split off and melt back in (via the #goo SVG filter) */
.goo {
  position: absolute; inset: -70px;
  filter: url(#goo);
  pointer-events: none;
}
.goo-core, .drop {
  position: absolute;
  border-radius: 50%;
  background: var(--orange);
}
.goo-core { inset: 70px; }
.drop {
  left: 50%; top: 50%;
  width: 34%; aspect-ratio: 1;
  translate: -50% -50%;
  animation: drip-orbit 4.5s ease-in-out infinite;
  animation-delay: calc(var(--k) * -.9s);
}
@keyframes drip-orbit {
  0%, 100% { transform: rotate(calc(var(--k) * 72deg)) translateX(20%) scale(1); }
  50%      { transform: rotate(calc(var(--k) * 72deg + 160deg)) translateX(100%) scale(.55); }
}
.magnet:hover .drop { animation-duration: 2.2s; }
.magnet::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 91, 58, .6);
  animation: ping 2s ease-out infinite;
}
@keyframes ping { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.socials { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; }
.socials a { position: relative; opacity: .85; }
.socials a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.6, 0, .3, 1);
}
.socials a:hover::after { transform: scaleX(1); transform-origin: left; }
.foot { position: absolute; left: 0; right: 0; bottom: 22px; font-size: .8rem; opacity: .5; padding: 0 16px; }

/* ================= PHONES ================= */
/* the phone version of the cloth edge (see script.js) */
.cap {
  position: fixed; top: 0; left: -2px; right: -2px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform-origin: 50% 100%;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
@media (hover: none), (pointer: coarse) {
  .grain { display: none; }                         /* big animated overlay */
  .fx { mix-blend-mode: normal; }                   /* no full-screen blending on phones */
  .content { will-change: auto; }                   /* not transformed on phones: no extra GPU layer */
  .split, .row, .words, .g-head h2, .orbit-title, .tunnel-text, .wave { text-shadow: none; }
  .goo { filter: none; }                            /* blur filter repaints every frame */
  .drop { display: none; }
  .goo-core { background: var(--orange); }
}
@media (max-width: 600px) {
  .dots button::before { content: ''; position: absolute; inset: -8px; } /* bigger tap target */
  .scroll-cue { bottom: 90px; }
  .row { font-size: 15vw; }
  .row.band { margin: 1.5vh -15vw; }
  .words { font-size: 1.65rem; }
  .badge { width: 90px; bottom: 90px; }
  .g-head { top: 9vh; }
  .card { width: 72vw; height: min(52vh, 440px); }
  .meta { padding: 18px; }
  .item { font-size: .78rem; padding: .45em .9em; }
  .p-caption { bottom: 110px; }
  #contact .content { gap: 1.6rem; }
  .foot { bottom: 64px; font-size: .72rem; }
  .clock { display: none; }
}

/* ================= MOTION TOGGLE (in the header) ================= */
.tb-right { justify-self: end; display: flex; align-items: center; gap: 1.4em; }
.motion-toggle {
  pointer-events: auto;
  padding: .55em .9em;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  opacity: .8;
  transition: opacity .3s, border-color .3s;
}
.motion-toggle:hover { opacity: 1; border-color: #fff; }
html.calm *, html.calm *::before, html.calm *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}