/* ============================================================
   MERIDIAN — A Studio for Kinetic Identity
   A study site absorbing motion techniques from spade-co.jp.
   ============================================================ */

:root {
  /* palette */
  --bone:        #ECE6D8;
  --bone-2:      #DFD7C2;
  --bone-3:      #CFC6AE;
  --ink:         #0E0F0C;
  --ink-2:       #1A1A16;
  --ink-soft:    #2A2A24;
  --vermillion:  #C8412B;
  --vermillion-d:#9C2E1B;
  --rule:        rgba(14, 15, 12, 0.18);
  --rule-strong: rgba(14, 15, 12, 0.55);

  /* motion */
  --ease-sharp:  cubic-bezier(0.4, 0.12, 0.08, 1);
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1:       1s;
  --dur-2:       1.2s;
  --dur-3:       1.6s;

  /* spacing */
  --pad-x:       clamp(20px, 4.5vw, 100px);
  --gut:         clamp(18px, 2.4vw, 48px);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

/* ---------- typography ---------- */
html {
  font-family: 'IBM Plex Mono', 'Noto Sans JP', ui-monospace, SFMono-Regular, monospace;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:lang(ja), [lang="ja"] { font-feature-settings: "palt" 1; }

.f-display {
  font-family: 'Fraunces', 'Noto Serif JP', 'Times New Roman', serif;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 380;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.f-display em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  color: var(--vermillion);
}

/* ---------- sample bar (← INDEX) ---------- */
.sb {
  position: fixed; top: 12px; left: 12px;
  z-index: 100;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15,12,10,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .14em;
  line-height: 1;
  transition: background .4s var(--ease-soft), border-color .4s var(--ease-soft), transform .4s var(--ease-soft);
  text-transform: uppercase;
  pointer-events: auto;
  text-decoration: none;
}
.sb:hover { background: rgba(15,12,10,.78); border-color: rgba(255,255,255,.34); transform: translateX(-2px); }
.sb__arrow { display: inline-flex; width: 12px; height: 12px; }
.sb__arrow svg { width: 100%; height: 100%; }
.sb__lab { font-weight: 500; }
.sb__sep { opacity: .35; }
.sb__crumb { font-family: 'Noto Sans JP', sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: none; opacity: .85; }
@media (max-width: 767px) {
  .sb { top: 10px; left: 10px; padding: 7px 12px; font-size: 10px; }
  .sb__sep, .sb__crumb { display: none; }
}

/* ---------- body / scroll wrapper ---------- */
body {
  background: var(--bone);
  overflow-x: hidden;
  /* JS will set body height to match wrap content height */
}
body.is-loading .wrap { opacity: 0; }

.wrap {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  will-change: transform;
  opacity: 1;
  transition: opacity 0.6s var(--ease-soft);
}

/* ---------- fixed header ---------- */
.hd {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--pad-x);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  pointer-events: none;
  mix-blend-mode: difference;
  filter: invert(1);
}
.hd > * { pointer-events: auto; }
.hd__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}
.hd__brand-mark { font-size: 18px; color: var(--vermillion); }
.hd__lat {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.hd__nav {
  display: flex;
  justify-content: flex-end;
  gap: 28px;
}
.hd__a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 18px;
  overflow: hidden;
}
.hd__a-lab { display: inline-block; transition: transform var(--dur-1) var(--ease-sharp); }
.hd__a:hover .hd__a-lab { transform: translateY(-100%); }
.hd__a::after {
  content: attr(data-label);
  position: absolute;
  inset: 100% 0 auto 0;
  color: var(--vermillion);
  transition: transform var(--dur-1) var(--ease-sharp);
}
.hd__a:hover::after { transform: translateY(-100%); }
.hd__a--cta { color: var(--vermillion); }
.hd__a-arrow {
  width: 32px; height: 8px;
  margin-left: 2px;
  color: var(--vermillion);
  overflow: visible;
  transition: transform var(--dur-1) var(--ease-sharp);
}
.hd__a--cta:hover .hd__a-arrow { transform: translateX(6px); }

/* hide difference-blend trick on small screens (less stable) */
@media (max-width: 720px) {
  .hd { mix-blend-mode: normal; filter: none; background: linear-gradient(to bottom, rgba(236, 230, 216, 0.92), rgba(236, 230, 216, 0)); }
  .hd__lat { display: none; }
  .hd { grid-template-columns: 1fr auto; }
  .hd__nav { gap: 14px; font-size: 10px; }
}

/* ============================================================
   §00 HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px var(--pad-x) 80px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: var(--bone);
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.92;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(236, 230, 216, 0.0) 0%, rgba(236, 230, 216, 0.6) 70%, rgba(236, 230, 216, 0.95) 100%),
    linear-gradient(180deg, rgba(236, 230, 216, 0.0) 30%, rgba(236, 230, 216, 0.85) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  grid-row: 2 / 3;
  align-self: center;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 56px);
}

.hero__kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vermillion);
}

.hero__title {
  font-size: clamp(54px, 12vw, 196px);
  margin: 0;
  line-height: 0.86;
}
.hero__title .line { display: block; overflow: visible; white-space: nowrap; }
.hero__title .line + .line { padding-left: clamp(24px, 8vw, 144px); }

.hero__sub {
  max-width: 36ch;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gut);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  max-width: 760px;
}
.hero__meta-block { display: flex; flex-direction: column; gap: 6px; }
.hero__meta-lab {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
}
.hero__meta-val {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.hero__marker {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: clamp(20px, 4vw, 60px);
}
.hero__marker-line {
  display: inline-block;
  width: 80px;
  height: 1px;
  background: var(--ink-soft);
  position: relative;
  overflow: hidden;
}
.hero__marker-line::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--vermillion);
  transform: translateX(-100%);
  animation: marker-sweep 2.4s var(--ease-sharp) infinite;
}
@keyframes marker-sweep {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(120%); }
}

@media (max-width: 720px) {
  .hero { padding-top: 110px; }
  .hero__title .line { white-space: normal; }
  .hero__title .line + .line { padding-left: 0; }
  .hero__meta { grid-template-columns: 1fr 1fr; }
  .hero__meta .hero__meta-block:last-child { grid-column: 1 / -1; }
}

/* ============================================================
   §01 INDEX
   ============================================================ */
.idx {
  position: relative;
  padding: clamp(120px, 14vw, 220px) var(--pad-x);
  border-top: 1px solid var(--rule);
}
.idx__num {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: clamp(40px, 6vw, 90px);
}
.idx__title {
  font-size: clamp(40px, 7.5vw, 128px);
  margin: 0 0 clamp(40px, 6vw, 96px) 0;
}
.idx__title .line { display: block; }
.idx__title .line + .line { padding-left: clamp(20px, 6vw, 96px); }

.idx__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 90px);
  max-width: 1280px;
}
@media (min-width: 960px) {
  .idx__body { grid-template-columns: 1.1fr 1fr; align-items: start; }
}
.idx__lead {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 36;
  font-weight: 380;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 28ch;
}
.idx__lead em { font-style: italic; color: var(--vermillion); }

.idx__defs { display: grid; gap: 22px; }
.idx__def {
  display: grid;
  grid-template-columns: 12ch 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.idx__def:last-child { border-bottom: 1px solid var(--rule); }
.idx__def dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  align-self: center;
}
.idx__def dd {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 24;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.4;
  font-weight: 380;
}
.idx__def dd em { font-style: italic; color: var(--vermillion); }

@media (max-width: 640px) {
  .idx__def { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   §02 CAPABILITIES
   ============================================================ */
.cap {
  position: relative;
  padding: clamp(120px, 14vw, 220px) var(--pad-x);
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
}
.cap__hd {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 90px);
  margin-bottom: clamp(60px, 8vw, 130px);
  max-width: 1280px;
  margin-inline: auto;
}
.cap__num {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vermillion);
}
.cap__title {
  font-size: clamp(36px, 7vw, 116px);
  margin: 0;
  color: var(--bone);
}
.cap__title em { color: var(--vermillion); }
.cap__title .line { display: block; }
.cap__title .line + .line { padding-left: clamp(20px, 6vw, 80px); }

.cap__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2vw, 40px);
  max-width: 1280px;
  margin-inline: auto;
}
@media (min-width: 720px)  { .cap__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .cap__grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.cap__card {
  position: relative;
  padding: clamp(24px, 2.4vw, 40px);
  background: var(--ink-2);
  border: 1px solid rgba(236, 230, 216, 0.1);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 380px;
  /* CURTAIN initial state — clip the entire box to a hairline at the bottom */
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path var(--dur-3) var(--ease-sharp);
  transition-delay: var(--curtain-delay, 0s);
}
.cap__card._in {
  clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
}

.cap__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 230, 216, 0.55);
  border-bottom: 1px solid rgba(236, 230, 216, 0.18);
  padding-bottom: 12px;
}
.cap__card-no { color: var(--vermillion); font-style: italic; font-family: 'Fraunces', serif; font-size: 14px; letter-spacing: 0; }

.cap__card-name {
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 4px 0 0 0;
  color: var(--bone);
}
.cap__card-de {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(236, 230, 216, 0.75);
  flex: 1;
}
.cap__card-bull {
  border-top: 1px solid rgba(236, 230, 216, 0.15);
  padding-top: 14px;
  display: grid;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(236, 230, 216, 0.65);
}
.cap__card-bull li { display: flex; align-items: baseline; gap: 8px; }
.cap__card-bull li::before {
  content: "·";
  color: var(--vermillion);
  font-size: 18px;
  line-height: 0;
  position: relative;
  top: 2px;
}

/* ============================================================
   §03 SELECTED WORK
   ============================================================ */
.work {
  position: relative;
  padding: clamp(120px, 14vw, 220px) var(--pad-x);
  border-top: 1px solid var(--rule);
}
.work__hd {
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  margin-bottom: clamp(60px, 8vw, 120px);
  max-width: 1280px;
}
.work__num {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vermillion);
}
.work__title {
  font-size: clamp(40px, 7vw, 116px);
  margin: 0;
}
.work__title .line { display: block; }
.work__title .line + .line { padding-left: clamp(20px, 6vw, 80px); }
.work__lead {
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 24;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  font-weight: 380;
  max-width: 52ch;
  color: var(--ink-soft);
}

.work__list { border-top: 1px solid var(--rule-strong); }
.work__item { border-bottom: 1px solid var(--rule); }
.work__link {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr 80px 220px 60px;
  align-items: baseline;
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(22px, 3vw, 44px) 0;
  overflow: hidden;
  transition: color var(--dur-1) var(--ease-sharp);
}
.work__link::before {
  /* sliding red bar from the right */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vermillion);
  transform: translateX(101%);
  transition: transform var(--dur-2) var(--ease-sharp);
  z-index: -1;
}
.work__link:hover { color: var(--bone); }
.work__link:hover::before { transform: translateX(0); }

.work__no {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease-sharp);
}
.work__link:hover .work__no { color: rgba(236, 230, 216, 0.7); }

.work__name {
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
}
.work__yr {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 24, "SOFT" 80;
  font-size: 18px;
  color: var(--vermillion);
  transition: color var(--dur-1) var(--ease-sharp);
}
.work__link:hover .work__yr { color: var(--bone); }
.work__tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  transition: color var(--dur-1) var(--ease-sharp);
}
.work__link:hover .work__tag { color: rgba(236, 230, 216, 0.85); }

.work__arrow {
  position: relative;
  width: 60px; height: 16px;
  color: var(--ink);
  /* CLIP-PATH MORPH HOVER (signature spade trick): on hover the arrow is "drawn" from left to right */
  clip-path: inset(0 90% 0 0);
  transition: clip-path var(--dur-2) var(--ease-sharp);
  justify-self: end;
}
.work__link:hover .work__arrow {
  clip-path: inset(0 0% 0 0);
  color: var(--bone);
}

@media (max-width: 980px) {
  .work__link {
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 16px;
    padding: 22px 0;
  }
  .work__no { grid-row: 1; align-self: start; }
  .work__name { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; font-size: clamp(24px, 6vw, 36px); }
  .work__yr  { grid-column: 3 / 4; grid-row: 1; }
  .work__tag { grid-column: 3 / 4; grid-row: 2; }
  .work__arrow { display: none; }
}

/* ============================================================
   §04 CTA / FOOTER
   ============================================================ */
.cta {
  position: relative;
  padding: clamp(120px, 16vw, 240px) var(--pad-x) clamp(40px, 5vw, 80px);
  background: var(--bone-2);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.cta__num {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: clamp(32px, 5vw, 70px);
}
.cta__title {
  font-size: clamp(44px, 9vw, 140px);
  line-height: 1.0;
  margin: 0 0 clamp(40px, 7vw, 110px) 0;
  letter-spacing: -0.02em;
}
.cta__title .line { display: block; white-space: nowrap; }
.cta__title .line + .line { padding-left: clamp(20px, 8vw, 140px); }

.cta__btn {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: clamp(20px, 2.6vw, 36px) clamp(28px, 3.6vw, 50px);
  border: 1px solid var(--ink);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: clamp(60px, 8vw, 120px);
}
.cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-sharp);
  z-index: -1;
}
.cta__btn:hover { color: var(--bone); }
.cta__btn:hover::before { transform: translateY(0); }

.cta__btn-lab {
  position: relative;
  display: inline-block;
  height: 1.05em;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 96, "SOFT" 0;
  font-weight: 380;
  font-size: clamp(28px, 4.5vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.cta__btn-lab-line {
  display: block;
  transition: transform var(--dur-2) var(--ease-sharp);
}
.cta__btn-lab-line + .cta__btn-lab-line {
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  color: var(--vermillion);
}
.cta__btn:hover .cta__btn-lab-line { transform: translateY(-100%); }

.cta__btn-arrow {
  position: relative;
  width: clamp(48px, 7vw, 96px);
  height: clamp(14px, 2.2vw, 24px);
  overflow: hidden;
}
.cta__btn-arrow-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease-sharp);
}
.cta__btn-arrow-svg--ghost {
  transform: translateX(-110%);
  color: var(--vermillion);
}
.cta__btn:hover .cta__btn-arrow-svg:not(.cta__btn-arrow-svg--ghost) { transform: translateX(110%); }
.cta__btn:hover .cta__btn-arrow-svg--ghost { transform: translateX(0); color: var(--bone); }

/* ---------- footer ---------- */
.ft {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gut);
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ft__lab {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 10px;
}
.ft__col p { margin: 0; }
.ft__col--colophon { grid-column: span 1; }
@media (max-width: 880px) {
  .ft { grid-template-columns: 1fr 1fr; }
  .ft__col--colophon { grid-column: 1 / -1; }
}

/* ============================================================
   ANIMATION STATE CLASSES (the spade pattern)
   ============================================================ */

/* a) char-split fade — `_in` triggers each char's transition */
.js-split .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.1em);
  transition: opacity var(--dur-2) var(--ease-sharp), transform var(--dur-2) var(--ease-sharp);
}
.js-split._in .char {
  opacity: 1;
  transform: translateY(0);
}
.js-split .word { display: inline-block; }   /* keep words together to prevent orphan break */

/* b) line/element fade (used for kicker, lead, defs) */
.js-fade {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease-sharp), transform var(--dur-2) var(--ease-sharp);
  transition-delay: var(--fade-delay, 0s);
}
.js-fade._in { opacity: 1; transform: translateY(0); }

/* c) long slide-in (a--ln pattern) */
.js-slide {
  overflow: hidden;
}
.js-slide .line {
  display: block;
  transform: translateX(-110%);
  transition: transform var(--dur-3) var(--ease-sharp);
}
.js-slide .line:nth-child(2) { transition-delay: 0.1s; }
.js-slide._in .line { transform: translateX(0); }

/* d) work row reveal (slides up from below the rule) */
.js-row {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-3) var(--ease-sharp);
}
.js-row._in {
  clip-path: inset(0 0 0% 0);
}

/* ============================================================
   Page grain overlay
   ============================================================ */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 60;
  opacity: 0.18;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  animation: grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   Decorative virtual scrollbar (right edge)
   ============================================================ */
.vbar {
  position: fixed;
  top: 0; right: 8px; bottom: 0;
  width: 2px;
  background: rgba(14, 15, 12, 0.08);
  z-index: 70;
  pointer-events: none;
}
.vbar__thumb {
  position: absolute;
  left: -3px; right: -3px;
  height: 60px;
  background: var(--vermillion);
  transform: translateY(0);
  will-change: transform, height;
}
@media (max-width: 720px) {
  .vbar { display: none; }
  .cta__btn { padding: 16px 20px; gap: 14px; }
  .cta__btn-lab { font-size: 22px; }
  .cta__btn-arrow { width: 36px; height: 12px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .grain { animation: none; }
  .hero__canvas { display: none; }
}