/* ============================================================
   MANU DÍAZ — Editorial Minimal Portfolio
   Clean, dynamic, full-width editorial system
   ============================================================ */

:root {
  --c-bg: #f4f1eb;
  --c-paper: #fbfaf7;
  --c-ink: #070707;
  --c-muted: #77736b;
  --c-line: rgba(7, 7, 7, .12);
  --c-line-soft: rgba(7, 7, 7, .075);
  --c-dark: #050505;
  --c-dark-2: #11100f;
  --c-white: #f8f6f1;
  --c-orange: #ff3b00;
  --c-blue: #0067ff;
  --c-grey: #dedbd4;
  --radius-lg: 34px;
  --radius-md: 22px;
  --side: clamp(16px, 3vw, 42px);
  --gap: clamp(16px, 2vw, 28px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-display: 'Archivo Black', Impact, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-weight: 400;
  cursor: none;
}
body.is-loading { overflow: hidden; }
a, button { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; background: none; cursor: none; }
ul { list-style: none; }
::selection { background: var(--c-orange); color: #fff; }

/* Background ------------------------------------------------ */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(232,229,222,.75)),
    var(--c-bg);
}
.page-bg__grain {
  position: absolute;
  inset: 0;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-bg__wash {
  position: absolute;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .18;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform .2s linear;
}
.page-bg__wash--one { left: -12vw; top: 10vh; background: var(--c-orange); }
.page-bg__wash--two { right: -20vw; bottom: -18vh; background: #ffffff; opacity: .5; }

/* Cursor --------------------------------------------------- */
.cursor,
.cursor-follower {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
}
.cursor { width: 8px; height: 8px; background: var(--c-orange); }
.cursor-follower {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 59, 0, .5);
  opacity: .65;
  transition: width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
body.cursor-hover .cursor-follower {
  width: 72px;
  height: 72px;
  background: rgba(255, 59, 0, .07);
  border-color: var(--c-orange);
}

/* Loader --------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: var(--side);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  transition: transform .8s var(--ease), opacity .8s ease;
}
.loader.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.loader__top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.loader__bar { height: 2px; background: rgba(7,7,7,.14); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--c-orange); }
.loader__count { align-self: flex-end; font-family: var(--font-mono); font-size: 11px; }

/* Navigation ---------------------------------------------- */
.nav {
  position: fixed;
  top: 16px;
  left: var(--side);
  right: var(--side);
  z-index: 900;
  height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  border: 1px solid rgba(7,7,7,.1);
  border-radius: 999px;
  background: rgba(244,241,235,.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.nav.is-scrolled { background: rgba(244,241,235,.84); border-color: rgba(7,7,7,.16); }
.nav__brand {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .03em;
}
.nav__links {
  justify-self: center;
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.nav__links a { opacity: .58; transition: opacity .2s ease, color .2s ease; }
.nav__links a:hover,
.nav__links a.is-active { opacity: 1; color: var(--c-orange); }
.nav__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(7,7,7,.62);
}
.nav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.65); } }
.nav__toggle { display: none; width: 38px; height: 38px; place-items: center; }
.nav__toggle span { display: block; width: 24px; height: 1px; background: var(--c-ink); transition: transform .35s var(--ease); }
.nav__toggle span + span { margin-top: 6px; width: 16px; margin-left: 8px; }
.nav__toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle.is-open span:last-child { width: 24px; margin-left: 0; transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--c-bg);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: var(--font-display); font-size: clamp(42px, 12vw, 90px); line-height: .9; }

/* Base layout --------------------------------------------- */
.section { position: relative; z-index: 1; }
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.eyebrow,
.mini-title,
.panel__header,
.hero__topline,
.hero__bottom-strip,
.scroll-note,
.footer {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.eyebrow,
.mini-title { color: var(--c-orange); }
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(7,7,7,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.4);
  transition: transform .3s var(--ease), background .3s ease, border-color .3s ease;
}
.pill:hover { transform: translateY(-2px); border-color: rgba(7,7,7,.28); }
.pill--orange { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }

/* Hero ----------------------------------------------------- */
.hero {
  min-height: 100vh;
  padding: 96px var(--side) var(--side);
  display: grid;
  align-items: end;
}
.hero__shell {
  min-height: calc(100vh - 120px);
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(24px, 4vw, 58px);
  padding: clamp(18px, 4vw, 54px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: rgba(251,250,247,.66);
  box-shadow: 0 30px 100px rgba(7,7,7,.08);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
.hero__topline,
.hero__bottom-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: rgba(7,7,7,.55);
}
.hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: clamp(24px, 5vw, 88px);
  align-items: end;
}
.hero h1 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(78px, 18vw, 260px);
  line-height: .78;
  letter-spacing: -.065em;
  font-weight: 900;
}
.hero__right {
  align-self: end;
  display: grid;
  gap: 24px;
  padding-bottom: 1.2vw;
}
.hero__right p {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.1vw, 52px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scroll-note {
  position: absolute;
  left: var(--side);
  bottom: calc(var(--side) + 8px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(7,7,7,.46);
}
.scroll-note span { width: 34px; height: 1px; background: currentColor; display: block; }

/* Panels --------------------------------------------------- */
.section--panel { width: 100%; padding: 7px 0; }
.panel {
  width: calc(100vw - 14px);
  margin-left: 7px;
  min-height: 68vh;
  padding: clamp(24px, 4vw, 64px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.section--dark .panel,
.section--dark.panel,
.section--dark { color: var(--c-white); }
.section--dark .panel { background: var(--c-dark); }
.section--light .panel { background: rgba(251,250,247,.84); border: 1px solid rgba(7,7,7,.08); backdrop-filter: blur(18px); }
.panel__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: currentColor;
  opacity: .52;
  border-bottom: 1px solid currentColor;
  padding-bottom: 13px;
  margin-bottom: clamp(32px, 5vw, 72px);
}
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(32px, 7vw, 110px);
  align-items: end;
}
.intro-grid h2,
.experience-title h2,
.projects__header h2,
.contact h2 {
  font-family: var(--font-display);
  font-size: clamp(48px, 8.5vw, 132px);
  line-height: .9;
  letter-spacing: -.055em;
}
.intro-copy p {
  max-width: 620px;
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.45;
  color: rgba(248,246,241,.74);
}
.stat-strip {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(248,246,241,.12);
  border-radius: 22px;
  overflow: hidden;
}
.stat-strip div { padding: 18px; border-right: 1px solid rgba(248,246,241,.12); }
.stat-strip div:last-child { border-right: 0; }
.stat-strip strong { display: block; font-family: var(--font-display); font-size: clamp(36px, 5vw, 70px); line-height: .85; color: var(--c-orange); }
.stat-strip span { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .55; }

/* Interludes ---------------------------------------------- */
.interlude {
  min-height: 72vh;
  padding: clamp(48px, 8vw, 110px) var(--side);
  display: grid;
  align-items: center;
}
.interlude__card {
  max-width: 980px;
  display: grid;
  gap: 18px;
}
.interlude__card--center { margin: 0 auto; text-align: center; }
.interlude__card p {
  font-family: var(--font-serif);
  font-size: clamp(44px, 7vw, 118px);
  line-height: .94;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.interlude__card em { color: var(--c-orange); font-style: italic; }
.interlude__card span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(7,7,7,.45); }
.interlude--wheel {
  grid-template-columns: minmax(320px, .95fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 96px);
  min-height: 88vh;
}

/* Curved kinetic wheel ------------------------------------- */
.wheel-reference {
  height: clamp(460px, 66vh, 690px);
  min-width: 0;
  border-radius: 0;
  background: #000;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}
.wheel-reference::before,
.wheel-reference::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 34%;
  z-index: 4;
  pointer-events: none;
}
.wheel-reference::before {
  top: 0;
  background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.82) 34%, transparent 100%);
}
.wheel-reference::after {
  bottom: 0;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,.82) 34%, transparent 100%);
}
.wheel-reference__dot {
  position: absolute;
  left: 27%;
  top: 47%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-blue);
  z-index: 6;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 24px rgba(0,103,255,.72);
}
.wheel-reference__mask {
  position: absolute;
  inset: -9% -20%;
  overflow: hidden;
  transform: rotate(-14deg);
  transform-origin: center;
  perspective: 900px;
  z-index: 2;
}
.wheel-reference__track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.wheel-reference__track span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: .94;
  letter-spacing: -.06em;
  white-space: nowrap;
  transform-origin: left center;
  will-change: transform, opacity, filter;
  text-shadow: 0 0 1px rgba(255,255,255,.2);
}
.wheel-reference.is-paused .wheel-reference__track span { transition: opacity .2s ease; }
/* About ---------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: .8fr 1.1fr .75fr;
  gap: clamp(24px, 4vw, 66px);
  align-items: start;
}
.about-title h2 {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 110px);
  line-height: .88;
  letter-spacing: -.055em;
}
.about-text { display: grid; gap: 18px; }
.about-text p,
.experience-title p,
.contact p {
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.48;
  color: rgba(7,7,7,.68);
}
.glass-card {
  border: 1px solid rgba(7,7,7,.1);
  border-radius: 24px;
  padding: 18px;
  background: rgba(255,255,255,.45);
  box-shadow: 0 20px 60px rgba(7,7,7,.05);
}
.skills-card ul { margin-top: 18px; display: grid; gap: 0; }
.skills-card li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(7,7,7,.1);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -.01em;
}
.skills-card li span { font-family: var(--font-mono); font-size: 10px; color: var(--c-orange); padding-top: 7px; }

/* Experience ---------------------------------------------- */
.experience-grid {
  display: grid;
  grid-template-columns: minmax(255px, .56fr) minmax(0, 1.44fr);
  gap: clamp(28px, 4.4vw, 62px);
  align-items: start;
}
.experience-title {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 360px;
}
.experience-title h2 {
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: .88;
  letter-spacing: -.045em;
  max-width: 100%;
  overflow-wrap: normal;
}
.experience-title p {
  max-width: 300px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.45;
  color: rgba(7,7,7,.58);
}
.experience-board {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.edu-card {
  min-height: 190px;
  border-radius: 26px;
  padding: clamp(18px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(7,7,7,.1);
}
.edu-card h3 {
  margin: 18px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 74px);
  line-height: .88;
  letter-spacing: -.04em;
}
.edu-card p,
.edu-card li {
  font-size: 15px;
  line-height: 1.35;
}
.edu-card--black { grid-column: span 6; background: var(--c-dark); color: var(--c-white); }
.edu-card--black .mini-title { color: var(--c-orange); }
.edu-card--white { grid-column: span 6; background: #fff; color: var(--c-ink); }
.edu-card--orange { grid-column: span 7; background: var(--c-orange); color: #fff; }
.edu-card--orange .mini-title { color: rgba(255,255,255,.8); }
.edu-card--grey { grid-column: span 5; background: var(--c-grey); }
.edu-card--wide { grid-column: span 12; background: rgba(255,255,255,.62); }
.skills-cloud div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.skills-cloud span:not(.mini-title) {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.studies-list { display: grid; gap: 10px; margin-top: 22px; }
.studies-list li {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(7,7,7,.1);
}
.studies-list span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--c-orange); }

/* Projects ------------------------------------------------- */
.projects {
  padding: clamp(70px, 10vw, 150px) var(--side) clamp(40px, 6vw, 90px);
}
.projects__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(7,7,7,.14);
}
.projects__header h2 { font-size: clamp(88px, 16vw, 240px); }
.projects__list { display: grid; }
.project-block {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.25fr) minmax(280px, .7fr) 58px;
  gap: clamp(12px, 2vw, 30px);
  align-items: center;
  min-height: 154px;
  border-bottom: 1px solid rgba(7,7,7,.14);
  transition: padding .35s var(--ease), background .35s ease, transform .35s var(--ease);
}
.project-block:hover { background: rgba(255,59,0,.035); padding-left: 14px; padding-right: 14px; }
.project-block__num { font-family: var(--font-mono); font-size: 12px; color: var(--c-orange); }
.project-block h3 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 112px);
  line-height: .88;
  letter-spacing: -.05em;
}
.project-block p { margin-top: 10px; max-width: 600px; color: rgba(7,7,7,.62); line-height: 1.45; }
.project-block__tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-start; }
.project-block__tags span {
  padding: 8px 11px;
  border: 1px solid rgba(7,7,7,.15);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(7,7,7,.64);
}
.project-block__arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  justify-self: end;
  border-radius: 50%;
  background: var(--c-ink);
  color: var(--c-white);
  font-size: 22px;
  transition: transform .35s var(--ease), background .35s ease;
}
.project-block__arrow:hover { transform: translate(4px, -4px); background: var(--c-orange); }

/* Preview panels ------------------------------------------ */
.previews {
  display: grid;
  gap: 7px;
  padding: 7px 0;
}
.preview-panel {
  width: calc(100vw - 14px);
  margin-left: 7px;
  min-height: 74vh;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-lg);
  background: rgba(251,250,247,.74);
  border: 1px solid rgba(7,7,7,.08);
  backdrop-filter: blur(18px);
}
.preview-panel--reverse { grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr); }
.preview-panel--reverse .preview-panel__info { grid-column: 2; }
.preview-panel--reverse .preview-panel__media { grid-column: 1; grid-row: 1; }
.preview-panel__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vw, 48px);
}
.preview-panel h3 {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: clamp(54px, 8vw, 130px);
  line-height: .86;
  letter-spacing: -.06em;
}
.preview-panel p { max-width: 620px; margin-top: 18px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.45; color: rgba(7,7,7,.64); }
.preview-panel ul { display: grid; gap: 0; max-width: 580px; }
.preview-panel li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(7,7,7,.12); }
.preview-panel li span { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(7,7,7,.48); }
.preview-panel li strong { font-weight: 500; text-align: right; }
.preview-panel__media {
  min-height: 52vh;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: end start;
  padding: 24px;
  text-align: left;
  border: 1px solid rgba(7,7,7,.1);
  transition: transform .45s var(--ease), filter .45s ease;
}
.preview-panel__media:hover { transform: scale(.992); filter: contrast(1.04); }
.preview-panel__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), rgba(255,255,255,.85), transparent 20%),
    linear-gradient(120deg, transparent, rgba(255,255,255,.24), transparent 58%);
  opacity: .6;
  pointer-events: none;
}
.preview-panel__media::after {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.35);
  pointer-events: none;
}
.preview-panel__media span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 86px);
  line-height: .88;
  letter-spacing: -.05em;
  max-width: 540px;
  color: #fff;
  text-shadow: 0 0 16px rgba(0,0,0,.32), 0 14px 36px rgba(0,0,0,.58), 0 2px 10px rgba(0,0,0,.88);
}
.media-card--orange { background: linear-gradient(135deg, #ff3b00, #ff7a00 44%, #101010 100%); color: #fff; }
.media-card--light { background: linear-gradient(135deg, #ffffff, #e5e1d8 50%, #c9c4ba); color: var(--c-ink); }
.media-card--dark { background: radial-gradient(circle at 70% 35%, #555, #050505 55%); color: var(--c-white); }
.media-card--grey { background: linear-gradient(135deg, #dcd8cf, #f8f7f2 45%, #101010 100%); color: var(--c-ink); }

/* Contact -------------------------------------------------- */
.contact .panel { min-height: 86vh; display: flex; flex-direction: column; justify-content: space-between; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(340px, .72fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}
.contact-grid > * { min-width: 0; }
.contact h2 {
  color: var(--c-orange);
  font-size: clamp(50px, 7.1vw, 104px);
  line-height: .86;
  letter-spacing: -.055em;
  max-width: 7.8ch;
}
.contact p { margin-top: 30px; max-width: 560px; color: rgba(248,246,241,.72); }
.contact-links { display: grid; gap: 8px; }
.contact-links a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(248,246,241,.14);
  background: rgba(248,246,241,.04);
  transition: background .35s ease, border-color .35s ease, transform .35s var(--ease);
}
.contact-links a:hover { background: rgba(255,59,0,.08); border-color: var(--c-orange); transform: translateX(6px); }
.contact-links span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .45; }
.contact-links strong { font-weight: 500; }
.contact-links i { color: var(--c-orange); font-style: normal; }
.footer {
  width: calc(100vw - 14px);
  margin-left: 7px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px var(--side) 28px;
  color: rgba(248,246,241,.44);
  background: var(--c-dark);
}

/* Gallery modal ------------------------------------------- */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--side);
}
.gallery-modal.is-open { display: flex; }
.gallery-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(10px); }
.gallery-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(840px, calc(100vh - var(--side) * 2));
  overflow: auto;
  border-radius: 32px;
  background: var(--c-paper);
  color: var(--c-ink);
  padding: clamp(18px, 3vw, 36px);
  box-shadow: 0 30px 120px rgba(0,0,0,.32);
}
.gallery-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(7,7,7,.12);
  margin-bottom: 18px;
}
.gallery-modal__header h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 104px);
  line-height: .85;
  letter-spacing: -.055em;
  margin-top: 6px;
}
.gallery-modal__close {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.gallery-modal__intro {
  display: none;
  margin: 0 0 18px;
}
.gallery-modal__intro.is-visible {
  display: block;
}
.project-story {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .9fr);
  gap: 12px;
}
.project-story__lead,
.project-story__meta,
.project-story__list,
.project-story__document {
  border-radius: 24px;
  border: 1px solid rgba(7,7,7,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(242,239,232,.96));
  padding: 20px 20px 22px;
}
.project-story__lead {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.project-story__lead h3 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: .92;
  letter-spacing: -.045em;
  margin: 10px 0 12px;
  max-width: 12ch;
}
.project-story__lead p,
.project-story__list p {
  max-width: 62ch;
  color: rgba(7,7,7,.72);
}
.project-story__meta {
  display: grid;
  gap: 12px;
  align-content: start;
  background: linear-gradient(180deg, rgba(28,28,31,.96), rgba(18,18,20,.98));
  color: var(--c-white);
}
.project-story__meta div {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.project-story__meta div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.project-story__meta span,
.project-story__list span,
.project-story__document span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  opacity: .68;
}
.project-story__meta strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.03em;
}
.project-story__list {
  display: grid;
  gap: 14px;
  grid-column: 1 / 2;
}
.project-story__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.project-story__tags li {
  list-style: none;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(7,7,7,.06);
  border: 1px solid rgba(7,7,7,.08);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.project-story__document {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(255,91,39,.1), rgba(255,255,255,.96) 30%, rgba(238,234,226,.98));
}
.project-story__document p {
  color: rgba(7,7,7,.68);
}
.project-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.project-story__actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(7,7,7,.12);
  background: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.project-story__actions a:first-child {
  background: var(--c-ink);
  color: var(--c-white);
}
@media (max-width: 820px) {
  .project-story { grid-template-columns: 1fr; }
  .project-story__list { grid-column: auto; }
}
.gallery-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.gallery-item {
  min-height: 250px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(7,7,7,.1);
  background: #e9e5dc;
}
.gallery-item:nth-child(2n) { min-height: 330px; }
.gallery-item:nth-child(3n) { min-height: 290px; }
.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,59,0,.35), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.72), transparent 38%),
    repeating-linear-gradient(90deg, rgba(7,7,7,.05) 0 1px, transparent 1px 36px);
  opacity: .75;
}
.gallery-item--dark { background: var(--c-dark); color: var(--c-white); }
.gallery-item--orange { background: var(--c-orange); color: #fff; }
.gallery-item--paper { background: #fff; color: var(--c-ink); }
.gallery-item span,
.gallery-item strong { position: relative; z-index: 1; }
.gallery-item span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.gallery-item strong { font-family: var(--font-display); font-size: clamp(28px, 4vw, 56px); line-height: .9; letter-spacing: -.045em; }


@media (min-width: 1101px) and (max-width: 1280px) {
  .experience-title h2 { font-size: clamp(36px, 4vw, 50px); }
  .experience-title { max-width: 300px; }
  .contact h2 { font-size: clamp(48px, 6.4vw, 84px); }
}

/* Responsive ---------------------------------------------- */
@media (max-width: 1100px) {
  body { cursor: auto; }
  .cursor, .cursor-follower { display: none; }
  .hero__layout,
  .intro-grid,
  .about-grid,
  .experience-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .experience-title { position: static; max-width: 720px; }
  .experience-title h2 { font-size: clamp(46px, 9vw, 96px); max-width: 9ch; }
  .experience-title p { max-width: 520px; }
  .contact h2 { max-width: 8.5ch; font-size: clamp(56px, 11vw, 112px); }
  .project-block { grid-template-columns: 54px 1fr 46px; }
  .project-block__tags { grid-column: 2 / 4; }
  .preview-panel,
  .preview-panel--reverse { grid-template-columns: 1fr; }
  .preview-panel--reverse .preview-panel__info,
  .preview-panel--reverse .preview-panel__media { grid-column: auto; grid-row: auto; }
  .interlude--wheel { grid-template-columns: 1fr; }
  .wheel-reference { height: 500px; }
}

@media (max-width: 820px) {
  .nav { grid-template-columns: auto 1fr auto; top: 10px; }
  .nav__links, .nav__meta { display: none; }
  .nav__toggle { display: block; justify-self: end; }
  .mobile-menu { display: flex; }
  .hero { padding-top: 84px; }
  .hero__shell { min-height: 78vh; border-radius: 24px; }
  .hero h1 { font-size: clamp(68px, 22vw, 150px); }
  .hero__bottom-strip { justify-content: flex-start; }
  .panel { width: calc(100vw - 10px); margin-left: 5px; padding: 24px; border-radius: 24px; }
  .panel__header { align-items: start; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip div { border-right: 0; border-bottom: 1px solid rgba(248,246,241,.12); }
  .stat-strip div:last-child { border-bottom: 0; }
  .edu-card--black,
  .edu-card--white,
  .edu-card--orange,
  .edu-card--grey,
  .edu-card--wide { grid-column: span 12; }
  .studies-list li { grid-template-columns: 1fr; gap: 3px; }
  .project-block { min-height: 170px; align-items: start; padding: 22px 0; }
  .project-block h3 { font-size: clamp(42px, 13vw, 80px); }
  .preview-panel { width: calc(100vw - 10px); margin-left: 5px; padding: 7px; border-radius: 24px; }
  .preview-panel__info { padding: 24px 18px; }
  .preview-panel__media { min-height: 360px; border-radius: 20px; }
  .gallery-modal__grid { grid-template-columns: 1fr; }
  .footer { width: calc(100vw - 10px); margin-left: 5px; flex-direction: column; }
  .contact-links a { grid-template-columns: 1fr auto; gap: 8px; border-radius: 24px; padding: 16px; }
  .contact-links span { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  :root { --side: 12px; --radius-lg: 22px; }
  .hero__right p, .interlude__card p { font-size: clamp(34px, 12vw, 54px); }
  .wheel-reference { height: 410px; }
  .wheel-reference__dot { left: 18%; width: 14px; height: 14px; }
  .wheel-reference__mask { inset: -6% -34%; transform: rotate(-14deg); }
  .wheel-reference__track span { font-size: 34px; }
  .project-block { grid-template-columns: 1fr; }
  .project-block__tags { grid-column: auto; }
  .project-block__arrow { justify-self: start; }
}

/* Polishing pass: image projects, slower cylindrical wheel, overflow fixes */
.experience-title p { max-width: 335px; }
.skills-cloud span:not(.mini-title) { white-space: normal; }
.skills-cloud span:not(.mini-title):last-child {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.7);
}

.preview-panel__info { min-width: 0; overflow: hidden; }
.preview-panel h3 {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
.preview-panel[data-gallery="illustrations"] h3,
.preview-panel[data-gallery="archetype"] h3 {
  font-size: clamp(38px, 5.35vw, 82px);
  line-height: .9;
  letter-spacing: -.055em;
}

.media-card--image {
  color: #fff;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.52)),
    var(--media-image);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.media-card--image::before {
  background:
    radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), rgba(255,255,255,.36), transparent 18%),
    linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent 58%);
  mix-blend-mode: screen;
  opacity: .55;
}
.media-card--image span {
  color: #fff;
  text-shadow: 0 18px 50px rgba(0,0,0,.62);
}
.media-card--ovrkll {
  --media-image: url('assets/project-images/ovrkll-grillz.png');
  background-position: center;
}
.media-card--archetype {
  --media-image: url('assets/project-images/archetype-add.png');
  background-position: center;
}

.gallery-item--image {
  min-height: 330px;
  padding: 0;
  background: var(--c-dark);
  color: #fff;
}
.gallery-item--image:nth-child(2n) { min-height: 420px; }
.gallery-item--image:nth-child(3n) { min-height: 360px; }
.gallery-item--image::before { display: none; }
.gallery-item--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .7s ease;
}
.gallery-item--image:hover img { transform: scale(1.035); filter: contrast(1.04); }
.gallery-item--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.68));
  z-index: 1;
  pointer-events: none;
}
.gallery-item__caption {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 18px;
  display: grid;
  gap: 8px;
}
.gallery-item--image span,
.gallery-item--image strong { position: static; }
.gallery-item--image strong {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 42px);
  line-height: .92;
  letter-spacing: -.04em;
  color: #fff;
  text-shadow: 0 0 16px rgba(0,0,0,.32), 0 10px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.88);
}
.gallery-item--image span {
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 12px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.48), 0 2px 6px rgba(0,0,0,.75);
}

.wheel-reference { height: clamp(520px, 70vh, 740px); }
.wheel-reference__mask {
  inset: -13% -24%;
  transform: rotate(-13deg);
  perspective: 720px;
  perspective-origin: 55% 50%;
}
.wheel-reference__track span {
  font-size: clamp(34px, 4.8vw, 64px);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

@media (max-width: 1100px) {
  .preview-panel[data-gallery="illustrations"] h3,
  .preview-panel[data-gallery="archetype"] h3 { font-size: clamp(46px, 9vw, 96px); }
}
@media (max-width: 820px) {
  .gallery-item--image,
  .gallery-item--image:nth-child(2n),
  .gallery-item--image:nth-child(3n) { min-height: 360px; }
  .preview-panel[data-gallery="illustrations"] h3,
  .preview-panel[data-gallery="archetype"] h3 { font-size: clamp(42px, 12vw, 78px); }
}


/* V4 polish: real project imagery, image-to-carousel modal and slower word wheel */
.media-card--posters {
  --media-image: url('assets/project-images/poster-prado.png');
  background-position: center 42%;
}
.media-card--illustrations {
  --media-image: url('assets/project-images/illustration-robot.png');
  background-position: center;
}
.preview-panel[data-gallery="illustrations"] h3,
.preview-panel[data-gallery="archetype"] h3 {
  font-size: clamp(38px, 4.85vw, 76px);
  max-width: 9ch;
  text-wrap: balance;
}
.preview-panel[data-gallery="archetype"] h3 { max-width: 8ch; }

.gallery-item {
  appearance: none;
  border: 1px solid rgba(7,7,7,.1);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: none;
}
.gallery-item--image { cursor: none; }
.gallery-item--image:focus-visible,
.carousel-modal__close:focus-visible,
.carousel-modal__controls button:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 4px;
}

.carousel-modal {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 44px);
}
.carousel-modal.is-open { display: flex; }
.carousel-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.74);
  backdrop-filter: blur(14px);
}
.carousel-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
  height: min(880px, calc(100vh - clamp(24px, 6vw, 88px)));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  border-radius: 34px;
  background: #070707;
  color: var(--c-white);
  padding: clamp(14px, 2.4vw, 28px);
  box-shadow: 0 34px 140px rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.12);
}
.carousel-modal__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
  padding-bottom: 10px;
}
.carousel-modal__header h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 82px);
  line-height: .85;
  letter-spacing: -.055em;
  margin-top: 4px;
}
.carousel-modal__close,
.carousel-modal__controls button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: var(--c-white);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: none;
}
.carousel-modal__figure {
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #111;
}
.carousel-modal__figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.carousel-modal__figure figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.54);
  backdrop-filter: blur(12px);
}
.carousel-modal__figure figcaption span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.62);
}
.carousel-modal__figure figcaption strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: .9;
  letter-spacing: -.04em;
  text-align: right;
}
.carousel-modal__controls {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.carousel-modal__controls button:hover,
.carousel-modal__close:hover {
  background: var(--c-orange);
  border-color: var(--c-orange);
}

.wheel-reference { height: clamp(560px, 76vh, 780px); }
.wheel-reference__mask {
  inset: -17% -30%;
  transform: rotate(-11deg);
  perspective: 980px;
  perspective-origin: 58% 50%;
}
.wheel-reference__track span {
  font-size: clamp(38px, 5.25vw, 72px);
  letter-spacing: -.055em;
  transform-origin: 50% 50%;
}
.wheel-reference__dot { left: 25%; }

@media (max-width: 820px) {
  .carousel-modal__figure figcaption { flex-direction: column; align-items: start; }
  .carousel-modal__figure figcaption strong { text-align: left; }
  .carousel-modal__panel { border-radius: 24px; }
  .carousel-modal__figure { border-radius: 18px; }
  .preview-panel[data-gallery="illustrations"] h3,
  .preview-panel[data-gallery="archetype"] h3 { font-size: clamp(42px, 11vw, 74px); }
}

/* V5 carousel fix: always show the complete image, never crop it */
.carousel-modal {
  padding: clamp(8px, 1.6vw, 24px);
}

.carousel-modal__panel {
  width: min(1540px, 100%);
  height: calc(100dvh - clamp(16px, 3.2vw, 48px));
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.carousel-modal__figure {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  justify-items: stretch;
  gap: 10px;
  padding: clamp(8px, 1.2vw, 16px);
  overflow: hidden;
}

.carousel-modal__figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center;
  display: block;
  border-radius: 16px;
}

.carousel-modal__figure figcaption {
  position: static;
  width: 100%;
  inset: auto;
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.42);
  font-size: clamp(18px, 2.2vw, 32px);
  line-height: 1;
}

.carousel-modal__figure figcaption span,
.carousel-modal__figure figcaption strong {
  white-space: normal;
}

@media (max-width: 820px) {
  .carousel-modal {
    padding: 8px;
  }
  .carousel-modal__panel {
    height: calc(100dvh - 16px);
    padding: 12px;
    gap: 10px;
  }
  .carousel-modal__header h2 {
    font-size: clamp(28px, 8vw, 52px);
  }
  .carousel-modal__figure {
    padding: 8px;
    gap: 8px;
  }
  .carousel-modal__figure img {
    border-radius: 12px;
  }
  .carousel-modal__figure figcaption {
    font-size: 18px;
  }
}

/* V6 correction: reference-accurate circular word wheel */
.wheel-reference {
  background: #000;
  overflow: hidden;
  min-height: 560px;
}
.wheel-reference__dot {
  left: clamp(128px, 24%, 260px) !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
}
.wheel-reference__mask {
  inset: -8% -56% -8% -6% !important;
  transform: none !important;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
.wheel-reference__track {
  transform-style: preserve-3d;
  transform: translateZ(0);
}
.wheel-reference__track span {
  left: 0;
  top: 0;
  font-family: Inter, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(36px, 5.15vw, 70px);
  letter-spacing: -0.06em;
  line-height: 0.93;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .wheel-reference { min-height: 440px; }
  .wheel-reference__mask { inset: -8% -78% -8% -12% !important; }
  .wheel-reference__track span { font-size: clamp(30px, 10vw, 46px); }
  .wheel-reference__dot { left: 20% !important; }
}

/* V7 polish: smaller word wheel text + cleaner hero breathing */
.wheel-reference__track span {
  font-size: clamp(24px, 3.8vw, 48px) !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}

.hero {
  padding: clamp(104px, 11vh, 132px) var(--side) clamp(28px, 4vh, 48px);
  align-items: center;
}

.hero__shell {
  min-height: min(82vh, 820px);
  gap: clamp(36px, 5.5vw, 84px);
  padding: clamp(28px, 5.4vw, 78px);
  background: rgba(251, 250, 247, 0.58);
}

.hero__layout {
  align-items: center;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.62fr);
  gap: clamp(42px, 7vw, 118px);
}

.hero h1 {
  font-size: clamp(72px, 15.5vw, 224px);
  line-height: 0.82;
  margin-top: clamp(16px, 2.6vw, 34px);
}

.hero__right {
  align-self: center;
  gap: clamp(22px, 3vw, 34px);
  padding-bottom: 0;
}

.hero__right p {
  max-width: 520px;
  font-size: clamp(22px, 2.55vw, 42px);
  line-height: 1.08;
}

.hero__topline,
.hero__bottom-strip {
  opacity: 0.72;
}

.hero__bottom-strip {
  justify-content: flex-start;
  gap: 12px 22px;
}

.footer {
  justify-content: flex-start;
}

@media (max-width: 820px) {
  .wheel-reference__track span {
    font-size: clamp(22px, 7.4vw, 34px) !important;
  }

  .hero {
    padding-top: 96px;
    align-items: start;
  }

  .hero__shell {
    min-height: auto;
    padding: 26px;
  }

  .hero h1 {
    font-size: clamp(64px, 20vw, 134px);
  }

  .hero__right p {
    font-size: clamp(24px, 8.8vw, 42px);
  }
}


/* V8 polish: DZMT logo nav, lighter hero title, rounder reference wheel */
.nav__brand {
  width: clamp(74px, 6.8vw, 104px) !important;
  height: 34px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
.nav__brand img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}

.hero h1 {
  font-family: var(--font-body) !important;
  font-weight: 680 !important;
  font-size: clamp(70px, 14.6vw, 208px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.095em !important;
  margin-top: clamp(20px, 3vw, 40px) !important;
}

.wheel-reference {
  min-height: clamp(560px, 78vh, 760px) !important;
}
.wheel-reference__dot {
  left: clamp(126px, 23%, 250px) !important;
  width: 16px !important;
  height: 16px !important;
}
.wheel-reference__mask {
  inset: -9% -72% -9% -10% !important;
  perspective: 1200px !important;
}
.wheel-reference__track span {
  font-size: clamp(22px, 3.25vw, 42px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

@media (max-width: 820px) {
  .nav__brand { width: 78px !important; height: 30px !important; }
  .nav__brand img { max-height: 28px; }
  .hero h1 {
    font-size: clamp(58px, 18.5vw, 126px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.085em !important;
  }
  .wheel-reference {
    min-height: 480px !important;
  }
  .wheel-reference__mask {
    inset: -8% -104% -8% -18% !important;
  }
  .wheel-reference__track span {
    font-size: clamp(20px, 6.6vw, 32px) !important;
  }
  .wheel-reference__dot { left: 18% !important; }
}


/* V9 cinematic hero inspired by the new reference ----------------------- */
:root {
  --hero-x: 50%;
  --hero-y: 45%;
}

.nav:not(.is-scrolled) {
  color: rgba(248, 246, 241, 0.88);
  background: rgba(2, 2, 2, 0.22);
  border-color: rgba(248, 246, 241, 0.13);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.18);
}
.nav:not(.is-scrolled) .nav__brand img {
  filter: invert(1);
  opacity: 0.92;
}
.nav:not(.is-scrolled) .nav__links a,
.nav:not(.is-scrolled) .nav__meta {
  color: rgba(248, 246, 241, 0.82);
}
.nav:not(.is-scrolled) .nav__toggle span {
  background: var(--c-white);
}
.nav.is-scrolled .nav__brand img {
  filter: none;
}

.hero--cinematic {
  min-height: 100vh;
  padding: 0;
  display: grid;
  place-items: stretch;
  background: #020202;
  overflow: hidden;
}
.hero--cinematic .hero__shell {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: clamp(96px, 11vh, 132px) var(--side) clamp(30px, 4vw, 54px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(255, 255, 255, 0.13), transparent 18%),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.36));
  color: #fff;
  box-shadow: none;
  backdrop-filter: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(22px, 3vw, 42px);
  overflow: hidden;
}
.hero__ambient,
.hero__ambient span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__ambient {
  z-index: 0;
  overflow: hidden;
  background: #050507;
}
.hero__orb {
  filter: blur(42px);
  opacity: 0.95;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.hero__orb--blue {
  width: 110vw;
  height: 74vh;
  left: -28vw;
  top: 18vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 65% 45%, rgba(198, 239, 255, 0.76) 0%, rgba(79, 130, 210, 0.68) 28%, rgba(15, 26, 58, 0.42) 58%, transparent 74%);
  animation: hero-drift-blue 18s ease-in-out infinite alternate;
}
.hero__orb--orange {
  width: 96vw;
  height: 78vh;
  right: -34vw;
  bottom: -14vh;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 44% 46%, rgba(255, 77, 0, 0.98) 0%, rgba(255, 111, 34, 0.9) 24%, rgba(90, 31, 13, 0.54) 54%, transparent 76%);
  animation: hero-drift-orange 20s ease-in-out infinite alternate;
}
.hero__orb--black {
  width: 78vw;
  height: 72vh;
  right: -20vw;
  top: 2vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.92) 0%, rgba(0,0,0,.7) 48%, transparent 72%);
  filter: blur(36px);
  opacity: 0.82;
  animation: hero-drift-black 24s ease-in-out infinite alternate;
}
.hero__noise {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.026) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 280 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  background-size: 88px 88px, 88px 88px, 260px 260px;
  mix-blend-mode: soft-light;
  opacity: 0.22;
}
.hero--cinematic .hero__topline,
.hero--cinematic .hero__bottom-strip,
.hero__center {
  position: relative;
  z-index: 2;
}
.hero--cinematic .hero__topline,
.hero--cinematic .hero__bottom-strip {
  color: rgba(248, 246, 241, 0.62);
  opacity: 1;
}
.hero__center {
  align-self: center;
  justify-self: center;
  width: min(920px, 90vw);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2vw, 24px);
  transform: translateY(clamp(-10px, -1.5vh, 0px));
}
.hero__mini {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(248, 246, 241, 0.6);
}
.hero--cinematic .hero__headline {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-weight: 380 !important;
  font-size: clamp(48px, 7.1vw, 118px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.067em !important;
  color: rgba(248, 246, 241, 0.96) !important;
  text-wrap: balance;
  text-shadow: 0 0 34px rgba(255,255,255,.14), 0 18px 70px rgba(0,0,0,.36);
}
.hero__headline span {
  display: block;
}
.hero__headline--typing {
  max-width: min(980px, 86vw);
  min-height: 2.25em;
}
.hero__headline--typing .hero__typed,
.hero__headline--typing .hero__cursor {
  display: inline-block;
  vertical-align: top;
}
.hero__headline--typing .hero__typed {
  text-wrap: pretty;
}
.hero__cursor {
  width: .08em;
  margin-left: .08em;
  background: rgba(248,246,241,.92);
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(255,255,255,.28), 0 0 28px rgba(0,0,0,.18);
  animation: heroCursorBlink 1s steps(1,end) infinite;
}
@keyframes heroCursorBlink {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}
.hero__glyphs {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(620px, 74vw);
  height: 210px;
  transform: translate(-50%, -52%);
  pointer-events: none;
  color: rgba(248,246,241,.55);
  mix-blend-mode: screen;
  filter: blur(.2px);
}
.hero__glyphs span {
  position: absolute;
  font-family: var(--font-body);
  font-size: clamp(30px, 4vw, 68px);
  font-weight: 320;
  letter-spacing: -0.08em;
  opacity: .45;
}
.hero__glyphs span:nth-child(1) { left: 18%; top: 16%; transform: rotate(-6deg); }
.hero__glyphs span:nth-child(2) { right: 12%; top: 44%; transform: rotate(5deg); }
.hero__glyphs span:nth-child(3) { left: 44%; bottom: 0; font-size: clamp(20px, 2.4vw, 38px); letter-spacing: .08em; opacity: .28; }
.hero__descriptor {
  max-width: 620px;
  color: rgba(248, 246, 241, 0.72);
  font-size: clamp(14px, 1.5vw, 19px);
  line-height: 1.55;
}
.hero--cinematic .hero__actions {
  justify-content: center;
  gap: 10px;
}
.hero--cinematic .pill {
  min-height: 42px;
  color: rgba(248,246,241,.86);
  border-color: rgba(248,246,241,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.hero--cinematic .pill--orange {
  color: #fff;
  border-color: rgba(255, 59, 0, .65);
  background: rgba(255, 59, 0, .76);
}
.hero--cinematic .pill--ghost:hover { background: rgba(255,255,255,.13); }
.hero--cinematic .hero__bottom-strip {
  justify-content: center;
  gap: 10px 28px;
}
.hero--cinematic .scroll-note,
.scroll-note--dark {
  color: rgba(248, 246, 241, 0.55);
  z-index: 5;
}

@keyframes hero-drift-blue {
  from { transform: translate3d(calc(var(--mx, 0px) * -0.25), calc(var(--my, 0px) * -0.2), 0) rotate(-2deg) scale(1); }
  to { transform: translate3d(calc(var(--mx, 0px) * 0.4 + 34px), calc(var(--my, 0px) * .25 - 18px), 0) rotate(4deg) scale(1.04); }
}
@keyframes hero-drift-orange {
  from { transform: translate3d(calc(var(--mx, 0px) * .35), calc(var(--my, 0px) * .2), 0) rotate(3deg) scale(1); }
  to { transform: translate3d(calc(var(--mx, 0px) * -.35 - 30px), calc(var(--my, 0px) * -.2 + 18px), 0) rotate(-3deg) scale(1.08); }
}
@keyframes hero-drift-black {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-22px, 12px, 0) scale(1.05); }
}

@media (max-width: 820px) {
  .nav:not(.is-scrolled) {
    background: rgba(2,2,2,.32);
  }
  .hero--cinematic .hero__shell {
    padding: 92px 18px 34px;
    min-height: 100svh;
  }
  .hero__center {
    width: 100%;
    gap: 16px;
  }
  .hero--cinematic .hero__headline {
    font-size: clamp(42px, 14.5vw, 76px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.06em !important;
  }
  .hero__descriptor {
    font-size: 14px;
    max-width: 330px;
  }
  .hero__glyphs {
    height: 170px;
    opacity: .72;
  }
  .hero--cinematic .hero__topline {
    gap: 10px;
    justify-content: flex-start;
  }
  .hero--cinematic .hero__bottom-strip {
    justify-content: flex-start;
    gap: 10px 16px;
  }
}

/* V10 hero polish: clean dynamic gradient, no glyph layer ---------------- */
:root {
  --hero-flow-x: 0px;
  --hero-flow-y: 0px;
  --hero-avoid-x: 50%;
  --hero-avoid-y: 50%;
}

.hero__glyphs { display: none !important; }

.hero--cinematic .hero__shell {
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(255, 255, 255, 0.08), transparent 17%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
}

.hero__ambient {
  background: #040405;
}

.hero__ambient::before,
.hero__ambient::after {
  content: '';
  position: absolute;
  inset: -14%;
  pointer-events: none;
  z-index: 4;
}

/* Soft dark pocket under the cursor: the colour field appears to move away. */
.hero__ambient::before {
  inset: 0;
  background:
    radial-gradient(circle at var(--hero-avoid-x) var(--hero-avoid-y),
      rgba(0,0,0,0.64) 0%,
      rgba(0,0,0,0.42) 9%,
      rgba(0,0,0,0.10) 21%,
      transparent 36%);
  mix-blend-mode: multiply;
  opacity: 0.86;
  transition: opacity .25s ease;
}

/* Subtle luminous rim, kept very soft so the hero stays clean. */
.hero__ambient::after {
  background:
    radial-gradient(circle at var(--hero-avoid-x) var(--hero-avoid-y),
      transparent 0%,
      transparent 16%,
      rgba(255,255,255,0.06) 22%,
      transparent 34%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.hero__orb {
  filter: blur(54px) saturate(1.08);
  opacity: 0.92;
}

.hero__orb--blue {
  background:
    radial-gradient(ellipse at 64% 46%, rgba(210, 242, 255, 0.68) 0%, rgba(82, 132, 218, 0.58) 27%, rgba(12, 26, 66, 0.36) 58%, transparent 75%);
  animation: hero-drift-blue-v10 20s ease-in-out infinite alternate;
}
.hero__orb--orange {
  background:
    radial-gradient(ellipse at 44% 46%, rgba(255, 80, 8, 0.94) 0%, rgba(255, 118, 36, 0.78) 24%, rgba(93, 30, 12, 0.46) 55%, transparent 77%);
  animation: hero-drift-orange-v10 22s ease-in-out infinite alternate;
}
.hero__orb--black {
  opacity: 0.78;
  animation: hero-drift-black-v10 26s ease-in-out infinite alternate;
}

@keyframes hero-drift-blue-v10 {
  0%   { transform: translate3d(calc(var(--hero-flow-x) * .72 - 42px), calc(var(--hero-flow-y) * .52 + 12px), 0) rotate(-4deg) scale(1.02); }
  50%  { transform: translate3d(calc(var(--hero-flow-x) * .34 + 12px), calc(var(--hero-flow-y) * .28 - 22px), 0) rotate(2deg) scale(1.07); }
  100% { transform: translate3d(calc(var(--hero-flow-x) * .82 + 38px), calc(var(--hero-flow-y) * .44 - 10px), 0) rotate(5deg) scale(1.04); }
}
@keyframes hero-drift-orange-v10 {
  0%   { transform: translate3d(calc(var(--hero-flow-x) * .88 + 26px), calc(var(--hero-flow-y) * .48 + 20px), 0) rotate(3deg) scale(1.04); }
  50%  { transform: translate3d(calc(var(--hero-flow-x) * .42 - 20px), calc(var(--hero-flow-y) * .30 - 6px), 0) rotate(-1deg) scale(1.1); }
  100% { transform: translate3d(calc(var(--hero-flow-x) * .96 - 44px), calc(var(--hero-flow-y) * .58 + 36px), 0) rotate(-5deg) scale(1.07); }
}
@keyframes hero-drift-black-v10 {
  0%   { transform: translate3d(calc(var(--hero-flow-x) * .18), calc(var(--hero-flow-y) * .16), 0) scale(1); }
  100% { transform: translate3d(calc(var(--hero-flow-x) * -.20 - 24px), calc(var(--hero-flow-y) * .20 + 16px), 0) scale(1.06); }
}

.hero--cinematic .hero__headline {
  text-shadow: 0 0 28px rgba(255,255,255,.10), 0 18px 72px rgba(0,0,0,.42) !important;
}

@media (hover: none) {
  .hero__ambient::before,
  .hero__ambient::after {
    display: none;
  }
}

/* V11 hero gradient: modular, organic, autonomous motion + mouse repulsion ---- */
:root {
  --hero-mouse-x: 50%;
  --hero-mouse-y: 50%;
  --hero-blue-x: 0px;
  --hero-blue-y: 0px;
  --hero-orange-x: 0px;
  --hero-orange-y: 0px;
  --hero-black-x: 0px;
  --hero-black-y: 0px;
  --hero-field-x: 0px;
  --hero-field-y: 0px;
}

.hero--cinematic .hero__shell {
  background:
    radial-gradient(circle at var(--hero-mouse-x) var(--hero-mouse-y), rgba(255,255,255,.055), transparent 15%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.38));
}

.hero__ambient {
  background:
    radial-gradient(circle at 50% 52%, rgba(10,11,16,.82), #020203 72%),
    #020203;
}

/* A modular colour field below the individual blobs. It moves on its own and
   also shifts away from the pointer through JS variables. */
.hero__ambient::before {
  inset: -20%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 16% 56%, rgba(239, 94, 34, .78) 0%, rgba(239, 94, 34, .48) 18%, transparent 42%),
    radial-gradient(ellipse at 31% 49%, rgba(255, 171, 84, .48) 0%, rgba(255, 171, 84, .22) 20%, transparent 39%),
    radial-gradient(ellipse at 46% 45%, rgba(196, 236, 242, .55) 0%, rgba(80, 139, 205, .34) 22%, transparent 46%),
    radial-gradient(ellipse at 63% 42%, rgba(48, 77, 152, .72) 0%, rgba(12, 20, 56, .56) 28%, transparent 57%),
    radial-gradient(ellipse at 80% 56%, rgba(255, 73, 0, .66) 0%, rgba(111, 31, 13, .46) 30%, transparent 58%);
  filter: blur(44px) saturate(1.12);
  opacity: .92;
  mix-blend-mode: normal;
  transform: translate3d(var(--hero-field-x), var(--hero-field-y), 0) rotate(-8deg) scale(1.08);
  animation: hero-field-organic 34s ease-in-out infinite alternate;
}

/* Clean dark displacement under the cursor. This makes the colour feel like it
   opens/aparts around the pointer without becoming dirty. */
.hero__ambient::after {
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(circle at var(--hero-mouse-x) var(--hero-mouse-y),
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.56) 8%,
      rgba(0,0,0,.18) 20%,
      transparent 36%),
    radial-gradient(circle at var(--hero-mouse-x) var(--hero-mouse-y),
      transparent 0%, transparent 17%, rgba(255,255,255,.045) 24%, transparent 38%);
  mix-blend-mode: multiply;
  opacity: .78;
}

.hero__orb {
  z-index: 2;
  filter: blur(42px) saturate(1.18);
  opacity: .82;
  will-change: transform, border-radius;
}

.hero__orb--blue {
  width: 98vw;
  height: 76vh;
  left: -26vw;
  top: 16vh;
  border-radius: 58% 42% 64% 36% / 42% 58% 36% 64%;
  background:
    radial-gradient(ellipse at 62% 42%, rgba(221, 249, 255, .64) 0%, rgba(112, 166, 225, .52) 20%, transparent 48%),
    radial-gradient(ellipse at 45% 62%, rgba(42, 76, 154, .72) 0%, rgba(14, 25, 67, .48) 38%, transparent 66%);
  animation: hero-organic-blue 30s ease-in-out infinite alternate;
}

.hero__orb--orange {
  width: 104vw;
  height: 82vh;
  right: -39vw;
  bottom: -17vh;
  border-radius: 44% 56% 36% 64% / 64% 34% 66% 36%;
  background:
    radial-gradient(ellipse at 42% 46%, rgba(255, 81, 4, .92) 0%, rgba(255, 115, 31, .72) 24%, transparent 54%),
    radial-gradient(ellipse at 60% 40%, rgba(255, 177, 96, .38) 0%, transparent 34%),
    radial-gradient(ellipse at 62% 70%, rgba(72, 18, 8, .62) 0%, transparent 58%);
  animation: hero-organic-orange 32s ease-in-out infinite alternate;
}

.hero__orb--black {
  z-index: 3;
  width: 86vw;
  height: 74vh;
  right: -23vw;
  top: -2vh;
  border-radius: 54% 46% 38% 62% / 48% 60% 40% 52%;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 44%, transparent 72%);
  filter: blur(38px);
  opacity: .72;
  animation: hero-organic-black 36s ease-in-out infinite alternate;
}

.hero__noise {
  z-index: 6;
  opacity: .16;
  mix-blend-mode: soft-light;
}

@keyframes hero-field-organic {
  0% {
    transform: translate3d(calc(var(--hero-field-x) - 34px), calc(var(--hero-field-y) + 16px), 0) rotate(-10deg) scale(1.08);
    border-radius: 45% 55% 58% 42% / 54% 40% 60% 46%;
  }
  38% {
    transform: translate3d(calc(var(--hero-field-x) + 24px), calc(var(--hero-field-y) - 18px), 0) rotate(-4deg) scale(1.13);
    border-radius: 60% 40% 42% 58% / 38% 64% 36% 62%;
  }
  72% {
    transform: translate3d(calc(var(--hero-field-x) - 8px), calc(var(--hero-field-y) + 28px), 0) rotate(6deg) scale(1.1);
    border-radius: 39% 61% 52% 48% / 58% 43% 57% 42%;
  }
  100% {
    transform: translate3d(calc(var(--hero-field-x) + 38px), calc(var(--hero-field-y) - 6px), 0) rotate(9deg) scale(1.15);
    border-radius: 55% 45% 64% 36% / 46% 60% 40% 54%;
  }
}

@keyframes hero-organic-blue {
  0% {
    transform: translate3d(calc(var(--hero-blue-x) - 42px), calc(var(--hero-blue-y) + 8px), 0) rotate(-7deg) scale(1.03);
    border-radius: 58% 42% 64% 36% / 42% 58% 36% 64%;
  }
  45% {
    transform: translate3d(calc(var(--hero-blue-x) + 18px), calc(var(--hero-blue-y) - 26px), 0) rotate(2deg) scale(1.11);
    border-radius: 38% 62% 46% 54% / 62% 38% 58% 42%;
  }
  100% {
    transform: translate3d(calc(var(--hero-blue-x) + 54px), calc(var(--hero-blue-y) + 2px), 0) rotate(7deg) scale(1.06);
    border-radius: 51% 49% 37% 63% / 46% 64% 36% 54%;
  }
}

@keyframes hero-organic-orange {
  0% {
    transform: translate3d(calc(var(--hero-orange-x) + 30px), calc(var(--hero-orange-y) + 22px), 0) rotate(5deg) scale(1.06);
    border-radius: 44% 56% 36% 64% / 64% 34% 66% 36%;
  }
  42% {
    transform: translate3d(calc(var(--hero-orange-x) - 28px), calc(var(--hero-orange-y) - 10px), 0) rotate(-2deg) scale(1.13);
    border-radius: 64% 36% 57% 43% / 42% 62% 38% 58%;
  }
  100% {
    transform: translate3d(calc(var(--hero-orange-x) - 58px), calc(var(--hero-orange-y) + 38px), 0) rotate(-7deg) scale(1.09);
    border-radius: 52% 48% 68% 32% / 36% 58% 42% 64%;
  }
}

@keyframes hero-organic-black {
  0% {
    transform: translate3d(calc(var(--hero-black-x) + 10px), calc(var(--hero-black-y) - 4px), 0) scale(1.02);
    border-radius: 54% 46% 38% 62% / 48% 60% 40% 52%;
  }
  100% {
    transform: translate3d(calc(var(--hero-black-x) - 28px), calc(var(--hero-black-y) + 18px), 0) scale(1.08);
    border-radius: 41% 59% 62% 38% / 60% 42% 58% 40%;
  }
}

@media (max-width: 820px) {
  .hero__ambient::before { filter: blur(38px) saturate(1.08); opacity: .86; }
  .hero__orb { filter: blur(38px) saturate(1.08); }
  .hero__ambient::after { opacity: .62; }
}