@charset "UTF-8";

:root {
  --ink: #181a16;
  --paper: #f5f3e9;
  --signal: #eff781;
  --type: "DM Sans", system-ui, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", var(--type);
  --edge: clamp(20px, 5.4vw, 106px);
  --header: 68px;
  --dock: 80px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html.motion-on { scroll-behavior: smooth; }
body { margin: 0; background: #191b17; color: var(--paper); font: 400 1rem/1.52 var(--type); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
em { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--signal); color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 10px;
  left: 10px;
  padding: 9px 13px;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

.experience-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header);
  gap: 14px;
  padding: 9px var(--edge);
  background: rgb(24 26 22 / .92);
  color: var(--paper);
  border-bottom: 1px solid rgb(255 255 240 / .15);
  backdrop-filter: blur(16px);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-weight: 750;
}
.header-current { color: #d4d6c9; font-size: .94rem; font-weight: 600; text-align: center; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: clamp(9px, 1.8vw, 29px); }
.header-actions a { white-space: nowrap; font-size: .9rem; font-weight: 750; }
.header-cv { text-decoration: underline; text-underline-offset: 4px; }
.header-contact { padding: 7px 13px; border: 1px solid #9a9c8e; transition: background .25s, color .25s, border-color .25s; }
.header-contact:hover { background: var(--signal); color: var(--ink); border-color: var(--signal); }

.reading-line {
  position: fixed;
  z-index: 22;
  inset: calc(var(--header) - 2px) 0 auto;
  height: 2px;
  background: var(--signal);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

.chapter-dock {
  position: fixed;
  z-index: 19;
  bottom: 15px;
  left: 50%;
  width: min(100% - 2 * var(--edge), 1160px);
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid #575950;
  background: rgb(24 26 22 / .95);
  color: var(--paper);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 35px #13140f33;
}
.chapter-nav, .chapter-stepper { display: flex; gap: 4px; align-items: center; }
.chapter-nav {
  position: relative;
  min-width: 0;
  overflow: auto hidden;
  scrollbar-width: none;
}
.chapter-nav::-webkit-scrollbar { display: none; }
.chapter-nav a, .chapter-stepper a {
  display: grid;
  min-height: 42px;
  align-items: center;
  padding: 7px clamp(7px, 1.1vw, 16px);
  color: #dedfd3;
  white-space: nowrap;
  font-size: .89rem;
  font-weight: 700;
  transition: background .22s, color .22s;
}
.chapter-nav a:focus-visible { outline-offset: -3px; }
.chapter-nav a:hover, .chapter-stepper a:hover { background: #33362d; color: #fff; }
.chapter-nav a[aria-current] { background: var(--signal); color: var(--ink); }
.chapter-stepper {
  flex: none;
  gap: 5px;
  border-left: 1px solid #575950;
  padding-left: 9px;
}
.chapter-stepper a { min-width: 42px; padding: 4px; place-items: center; font-size: 1.18rem; line-height: 1; }
.chapter-stepper a[aria-disabled="true"] { color: #a0a096; opacity: .55; cursor: default; pointer-events: none; }
.chapter-counter { min-width: 3.25rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.motion-toggle {
  min-height: 37px;
  padding: 6px 9px;
  border: 1px solid #76796d;
  color: var(--paper);
  background: transparent;
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
}
.motion-toggle:hover { background: var(--signal); color: var(--ink); }

.chapter {
  --scene: #191b17;
  --text: #f5f3e9;
  --muted: #d4d6c9;
  --stroke: #9da092;
  --accent: #eff781;
  --accent-ink: #181a16;
  position: relative;
  color: var(--text);
  background: var(--scene);
}
.chapter-stage {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--header) + 29px) var(--edge) calc(var(--dock) + 27px);
  overflow: clip;
  isolation: isolate;
}
.chapter-grid {
  width: min(100%, 1530px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
  gap: clamp(28px, 5vw, 92px);
  align-items: center;
}
.chapter-copy, .chapter-visual { min-width: 0; }
.chapter-copy { position: relative; z-index: 2; }
.chapter-copy > * + * { margin-top: 18px; }
.chapter-kicker { color: var(--muted); font-size: clamp(.96rem, 1.3vw, 1.2rem); font-weight: 750; }
.chapter h1, .chapter h2 {
  max-width: 10.5ch;
  font-family: var(--display);
  font-size: clamp(4.1rem, 8.65vw, 10.2rem);
  font-weight: 700;
  line-height: .79;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.chapter h1 { max-width: none; font-size: clamp(5.7rem, 11.1vw, 13rem); }
.chapter :is(h1, h2) > span { display: block; }
.chapter-lead { max-width: 38ch; color: var(--muted); font-size: clamp(1.07rem, 1.55vw, 1.32rem); line-height: 1.43; text-wrap: pretty; }
.chapter-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.chapter-links a, .contact-email, .contact-card a {
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: .075em;
  transition: text-decoration-color .2s;
}
.chapter-links a:hover, .contact-email:hover { text-decoration-color: transparent; }
.chapter-links a:hover > span[aria-hidden="true"] { transform: translate(3px, -2px); }
.chapter-links a > span[aria-hidden="true"] { display: inline-block; transition: transform .3s var(--ease); }
.chapter-links .primary-link, .contact-form button, .contact-form .contact-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 9px 15px;
  border: 1px solid var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
  text-decoration: none;
  font-weight: 800;
  transition: translate .24s var(--ease), filter .24s;
}
.chapter-links .primary-link:hover, .contact-form button:hover, .contact-form .contact-send:hover { translate: 0 -2px; filter: brightness(.94); }

.switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.switcher button {
  border: 1px solid var(--stroke);
  padding: 7px 11px;
  min-height: 42px;
  color: var(--text);
  background: transparent;
  font-size: .94rem;
  font-weight: 750;
  transition: background .25s, color .25s, border-color .25s, translate .24s var(--ease);
}
.switcher button:hover { translate: 0 -2px; }
.switcher button:is([aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent);
}
.choice-panel { max-width: 43ch; color: var(--muted); font-size: clamp(.99rem, 1.32vw, 1.18rem); line-height: 1.45; }
.choice-panel strong { color: var(--text); }
.choice-panel a { text-decoration: underline; text-underline-offset: 4px; }

.chapter-visual {
  --lift: calc(var(--travel, 0) * -70px - var(--phase, 0) * 12px);
  --point-x: calc(var(--pointer-x, 0) * 13px);
  --point-y: calc(var(--pointer-y, 0) * 10px);
  width: min(100%, 690px);
  justify-self: center;
  position: relative;
}
:is(.intro-art, .diamond-art, .meritoo-art, .odiseia-art, .creative-art, .profile-visual) { position: relative; width: 100%; min-width: 0; }

.chapter--intro {
  --scene: #191b17;
  --muted: #d3d8c3;
  --accent: #eff781;
  --stroke: #969e80;
}
.chapter--intro .chapter-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -7% -15% -4% 34%;
  background: radial-gradient(ellipse at 54% 47%, #4b5533 0%, #2f3728 30%, transparent 63%);
  transform: translateX(calc(var(--phase, 0) * 12%));
  pointer-events: none;
}
.chapter--intro .chapter-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.04fr); gap: clamp(29px, 6vw, 102px); }
.intro-art { min-height: clamp(250px, 37vw, 625px); }
.intro-stack { position: absolute; inset: 0 0 35px; isolation: isolate; }
.intro-stack img {
  position: absolute;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 21px 62px #08090572;
  border: 1px solid #e8eed232;
  transform-origin: 50% 57%;
  transition: transform .28s var(--ease);
}
.intro-stack .intro-album {
  z-index: 3;
  width: 67%;
  top: 8%;
  left: 16%;
  transform: translate(calc(var(--point-x) + var(--travel, 0) * 36px), calc(var(--point-y) + var(--travel, 0) * -29px)) rotate(calc(-7deg + var(--phase, 0) * 13deg));
}
.intro-stack .intro-diamond {
  z-index: 2;
  width: 42%;
  top: 35%;
  left: 1%;
  transform: translate(calc(var(--point-x) * -1.1 + var(--travel, 0) * -41px), calc(var(--point-y) * -.8 + var(--phase, 0) * 35px)) rotate(calc(-15deg - var(--phase, 0) * 10deg));
}
.intro-stack .intro-meritoo {
  z-index: 1;
  width: 46%;
  top: 12%;
  right: 1%;
  transform: translate(calc(var(--point-x) * -.75 + var(--travel, 0) * 47px), calc(var(--point-y) * -.65 + var(--travel, 0) * -30px)) rotate(calc(16deg + var(--phase, 0) * 15deg));
}
.intro-art-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #e3e6d4;
  font-size: .95rem;
  font-weight: 650;
}

.chapter--diamond {
  --scene: #f1df50;
  --text: #1b1b13;
  --muted: #373622;
  --stroke: #68603d;
  --accent: #191b17;
  --accent-ink: #fff2a1;
}
.diamond-art {
  --ratio: 1;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  gap: 12px;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(310px, 35vw, 575px);
  padding: clamp(15px, 2.8vw, 45px);
  background: #171912;
  color: #f1df50;
}
.diamond-art[data-period="start"] { --ratio: .0075; }
.diamond-grid {
  position: absolute;
  z-index: -1;
  inset: -15%;
  background-image: linear-gradient(#fff1a526 1px, transparent 1px), linear-gradient(90deg, #fff1a526 1px, transparent 1px);
  background-size: 29px 29px;
  mask-image: radial-gradient(ellipse at 63% 52%, #000 10%, transparent 62%);
  transform: translate(calc(var(--point-x) * .8 + var(--travel, 0) * 24px), calc(var(--point-y) + var(--phase, 0) * 25px)) rotate(-12deg) scale(1.25);
  transition: transform .2s var(--ease);
}
.diamond-logo {
  width: clamp(72px, 8.4vw, 124px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 7px;
  background: #f1df50;
  justify-self: end;
}
.diamond-number { align-self: center; }
.diamond-number strong {
  display: block;
  color: #f1df50;
  font: 700 clamp(4.5rem, 10vw, 10.5rem)/.82 var(--display);
  letter-spacing: -.047em;
  white-space: nowrap;
}
.diamond-number span { display: block; margin-top: 10px; color: #f7edac; font-size: clamp(.98rem, 1.4vw, 1.26rem); font-weight: 750; }
.diamond-scale { position: relative; padding-top: 14px; color: #f8edac; }
.diamond-scale::before, .diamond-fill { content: ""; position: absolute; top: 0; left: 0; height: 5px; }
.diamond-scale::before { width: 100%; background: #71672d; }
.diamond-fill { width: 100%; min-width: 3px; background: #f1df50; transform: scaleX(var(--ratio)); transform-origin: left; transition: transform .68s var(--ease); }
.diamond-endpoints { display: flex; justify-content: space-between; gap: 7px; font-size: clamp(.9rem, 1.28vw, 1.1rem); font-weight: 750; }

.chapter--meritoo {
  --scene: #e9e8ff;
  --text: #22204a;
  --muted: #454270;
  --stroke: #827dac;
  --accent: #332d8d;
  --accent-ink: #fff;
}
.meritoo-art {
  --orbit-shift: 0px;
  --orbit-turn: -15deg;
  --tile-turn: -9deg;
  --art-bg: #322576;
  --art-glow: #6253b2;
  --art-ink: #f1edff;
  display: grid;
  min-height: clamp(310px, 35vw, 575px);
  overflow: clip;
  isolation: isolate;
  background: radial-gradient(ellipse at 72% 26%, var(--art-glow), transparent 60%), var(--art-bg);
  transition: background-color .65s;
}
.meritoo-art[data-mode="social"] { --orbit-shift: -67px; --orbit-turn: 19deg; --tile-turn: 11deg; --art-bg: #312969; --art-glow: #8760bb; }
.meritoo-art[data-mode="campaigns"] { --orbit-shift: 32px; --orbit-turn: -32deg; --tile-turn: -18deg; --art-bg: #1c336c; --art-glow: #5955b2; }
.meritoo-orbits {
  position: absolute;
  z-index: -1;
  width: 126%;
  height: 160%;
  top: -40%;
  left: 19%;
  border-radius: 48%;
  background: repeating-radial-gradient(ellipse at 55% 50%, transparent 0 13px, #e6dfff78 14px 15px, transparent 16px 24px);
  mask-image: linear-gradient(125deg, transparent 6%, #000 38%, #000 82%, transparent);
  transform: translate(calc(var(--point-x) + var(--orbit-shift) + var(--phase, 0) * 35px), calc(var(--point-y) + var(--travel, 0) * -30px)) rotate(var(--orbit-turn));
  transition: transform .65s var(--ease);
}
.meritoo-logo {
  width: clamp(92px, 15.5vw, 226px);
  aspect-ratio: 1;
  object-fit: contain;
  position: absolute;
  top: 15%;
  right: 12%;
  padding: clamp(8px, 1.2vw, 17px);
  background: #fff;
  box-shadow: 0 18px 65px #17162f84;
  transform: translate(calc(var(--point-x) * -.6 + var(--travel, 0) * 16px), calc(var(--point-y) * -.6)) rotate(var(--tile-turn));
  transition: transform .6s var(--ease);
}
.meritoo-art-title {
  align-self: end;
  z-index: 1;
  max-width: 10ch;
  padding: clamp(19px, 3vw, 50px);
  box-sizing: content-box;
  color: var(--art-ink);
  font: 700 clamp(3rem, 6.3vw, 6.8rem)/.82 var(--display);
  letter-spacing: -.035em;
}

.chapter--odiseia {
  --scene: #cee6db;
  --text: #123932;
  --muted: #26564b;
  --stroke: #65887d;
  --accent: #16483c;
  --accent-ink: #edfff6;
}
.odiseia-art {
  display: grid;
  align-content: end;
  gap: 12px;
  min-height: clamp(310px, 35vw, 575px);
  padding: clamp(19px, 3vw, 50px);
  background: #153c35;
  color: #ddfff0;
  overflow: clip;
  isolation: isolate;
}
.event-orbits {
  position: absolute;
  z-index: -1;
  inset: -20%;
  background:
    repeating-radial-gradient(circle at 70% 41%, transparent 0 27px, #93d5bd67 28px 29px, transparent 30px 49px),
    linear-gradient(#9bd5c139 1px, transparent 1px),
    linear-gradient(90deg, #9bd5c139 1px, transparent 1px);
  background-size: auto, 31px 31px, 31px 31px;
  mask-image: radial-gradient(ellipse at 68% 43%, #000 7%, transparent 69%);
  transform: translate(calc(var(--point-x) * 1.2 + var(--phase, 0) * -68px), calc(var(--point-y) + var(--travel, 0) * 38px)) rotate(calc(var(--phase, 0) * 14deg));
  transition: transform .24s var(--ease);
}
.odiseia-logo {
  width: clamp(94px, 13.2vw, 194px);
  aspect-ratio: 1.2;
  object-fit: contain;
  position: absolute;
  top: 13%;
  right: 11%;
  padding: 9px;
  background: #fff;
  box-shadow: 0 14px 42px #051d17a5;
  transform: translate(calc(var(--point-x) * -.8 + var(--travel, 0) * -14px), calc(var(--point-y) * -.8)) rotate(calc(7deg - var(--phase, 0) * 15deg));
  transition: transform .28s var(--ease);
}
.event-type { max-width: 10ch; font: 700 clamp(3.1rem, 6.8vw, 7rem)/.78 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.event-type :is(span, em) { display: block; color: #95e3c4; }
.event-credit { color: #c2efdf; font-size: .95rem; font-weight: 650; }

.chapter--creative {
  --scene: #392838;
  --text: #fbedeb;
  --muted: #ebd0e1;
  --stroke: #ae8fa7;
  --accent: #f5bcd5;
  --accent-ink: #332632;
}
.creative-art {
  --art-panel: #d6b2c9;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: clip;
  min-height: clamp(310px, 35vw, 575px);
  padding: clamp(20px, 3vw, 49px);
  color: #261c24;
  background: var(--art-panel);
  transition: background-color .5s;
}
.creative-art[data-mode="pegasso"] { --art-panel: #d8ccae; }
.creative-art[data-mode="covers"] { --art-panel: #c7d4e9; }
.creative-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 68%;
  aspect-ratio: 1;
  border: 1px solid #4e394b6b;
  border-radius: 50%;
  box-shadow: 0 0 0 13px #f8e6f73a, 0 0 0 35px #4e394b26, 0 0 0 55px #f8e6f720;
  transform: translate(calc(var(--point-x) * -1.4 + var(--travel, 0) * 29px), calc(var(--point-y) * -1.25)) scale(calc(.85 + var(--phase, 0) * .24));
  transition: transform .27s var(--ease);
}
.creative-image {
  width: min(72%, 415px);
  aspect-ratio: 1;
  object-fit: cover;
  background: #eee6ea;
  box-shadow: 0 18px 58px #21152165;
  transform: translate(var(--point-x), calc(var(--point-y) + var(--travel, 0) * -24px)) rotate(calc(-7deg + var(--phase, 0) * 13deg));
  transition: transform .27s var(--ease);
}
.creative-metric {
  position: absolute;
  right: clamp(12px, 2.2vw, 36px);
  bottom: clamp(12px, 2.2vw, 36px);
  max-width: calc(100% - 26px);
  padding: 7px 12px;
  color: #261c24;
  background: #fbf0f4;
  font-size: clamp(.94rem, 1.7vw, 1.24rem);
  font-weight: 800;
  box-shadow: 0 6px 26px #35263533;
}

.chapter--profile {
  --scene: #eae7dc;
  --text: #24251e;
  --muted: #505347;
  --stroke: #898e80;
  --accent: #24251e;
  --accent-ink: #f9f7eb;
}
.profile-visual { display: grid; align-items: center; min-height: 290px; }
.profile-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: start;
  min-height: 300px;
  padding: clamp(23px, 4vw, 57px);
  gap: 10px;
  color: #25261f;
  background: #fbf9ee;
  border: 1px solid #a7aa9a;
  box-shadow: 10px 10px 0 #a1a79666;
  transform: rotate(calc(-2.5deg + var(--phase, 0) * 5deg));
}
.profile-logo {
  width: clamp(68px, 8vw, 115px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 7px;
  background: #fff;
  border: 1px solid #dbdcd0;
}
.profile-company { margin-top: 5px; font: 700 clamp(2.9rem, 5.8vw, 6.1rem)/.82 var(--display); letter-spacing: -.04em; }
.profile-role { color: #3a3d32; font-weight: 800; font-size: clamp(1rem, 1.45vw, 1.22rem); }
.profile-date { color: #565b4c; }

.chapter--contact {
  --scene: #1c251b;
  --text: #f3f5e6;
  --muted: #d8e0cc;
  --stroke: #87937e;
  --accent: #eff781;
  --accent-ink: #181a16;
}
.contact-card {
  width: 100%;
  padding: clamp(15px, 3.5vw, 42px);
  color: #f3f5e6;
  background: #283326;
  border: 1px solid #70836b;
}
.contact-card p + p { margin-top: 10px; }
.contact-form { display: grid; gap: 10px; }
.contact-form label { font-weight: 750; }
.contact-form :is(input, select, textarea) {
  width: 100%;
  min-height: 43px;
  padding: 8px 10px;
  border: 1px solid #87937e;
  color: #f7f7ee;
  background: #1b241b;
}
.contact-form textarea { resize: vertical; }
.contact-form :is(input, textarea)::placeholder { color: #ccd3c4; }
.contact-form button, .contact-form .contact-send { justify-self: start; margin-top: 4px; }
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin-top: 15px; overflow-wrap: anywhere; text-decoration: none; }
.contact-copy {
  min-height: 36px;
  padding: 4px 9px;
  border: 1px solid #87937e;
  background: transparent;
  font-size: .92rem;
  font-weight: 750;
  transition: color .2s, background .2s;
}
.contact-copy:hover { background: var(--signal); color: var(--ink); }
.contact-status { min-height: 1.52em; color: #e5ebda; font-size: .93rem; }

@media (min-width: 900px) and (min-height: 640px) {
  .motion-on .chapter:not(.chapter--contact) { min-height: 148svh; }
  .motion-on .chapter.chapter--intro { min-height: 136svh; }
  .motion-on .chapter-stage { position: sticky; top: 0; }
  .chapter-visual { width: min(100%, max(340px, calc(100svh - var(--header) - var(--dock) - 26px)), 690px); }
  .intro-art { min-height: min(37vw, 56svh, 620px); }
  :is(.diamond-art, .meritoo-art, .odiseia-art, .creative-art) { min-height: min(35vw, 55svh, 575px); }
  .motion-on .chapter-copy {
    transform: translate3d(calc(var(--phase, 0) * -14px), calc(var(--travel, 0) * 30px + var(--phase, 0) * 15px), 0);
  }
  .motion-on .chapter-visual {
    transform: translate3d(calc((1 - var(--intro, 1)) * 52px + var(--phase, 0) * 15px), var(--lift), 0) scale(calc(.93 + var(--intro, 1) * .07 + var(--phase, 0) * .075));
  }
}

.motion-on .chapter--intro h1 { animation: rise .82s var(--ease) both; }
.motion-on .chapter--intro .chapter-lead { animation: rise .8s .09s var(--ease) both; }
.motion-on .chapter--intro .intro-stack { animation: rise 1s .06s var(--ease) both; }
.motion-on .chapter:not(.chapter--intro).has-entered .chapter-copy h2 { animation: rise .72s var(--ease) both; }
.motion-on .chapter:not(.chapter--intro).has-entered .chapter-visual { animation: reveal-art .83s var(--ease) both; }
.motion-on .chapter.has-entered .diamond-grid { animation: grid-in 1.2s var(--ease) both; }
.motion-on .chapter.has-entered .event-orbits { animation: grid-in 1.25s var(--ease) both; }
@keyframes rise { from { translate: 0 29px; opacity: .32; } }
@keyframes reveal-art { from { opacity: .52; clip-path: inset(4% 0 9% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes grid-in { from { opacity: 0; scale: 1.24; } }

@media (max-width: 1080px) {
  .chapter-dock { width: calc(100% - 2 * min(var(--edge), 20px)); }
}
@media (max-width: 899px) {
  :root { --edge: clamp(18px, 4.3vw, 48px); --header: 62px; --dock: 76px; }
  .chapter-grid, .chapter--intro .chapter-grid { gap: clamp(22px, 4vw, 52px); }
  .chapter h2 { font-size: clamp(3.3rem, 8.9vw, 5.6rem); }
  .chapter h1 { font-size: clamp(4rem, 11.8vw, 7.3rem); }
  .chapter-visual { --lift: 0px; }
}

@media (max-width: 680px) {
  :root { --header: 58px; --dock: 111px; }
  .experience-header { grid-template-columns: 1fr auto; padding-inline: var(--edge); }
  .header-current { display: none; }
  .header-actions { gap: 11px; }
  .header-actions a { font-size: .86rem; }
  .header-contact { padding: 5px 9px; }
  .brand { font-size: .91rem; gap: 6px; }
  .chapter-dock {
    width: calc(100% - 20px);
    bottom: max(8px, env(safe-area-inset-bottom));
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 5px;
  }
  .chapter-nav a, .chapter-stepper a { min-height: 34px; padding: 5px 8px; font-size: .88rem; }
  .chapter-stepper {
    justify-content: space-between;
    padding: 2px 5px 0;
    border-left: 0;
    border-top: 1px solid #575950;
  }
  .chapter-stepper { display: grid; grid-template-columns: 34px minmax(40px, 1fr) 34px auto; }
  .chapter-stepper a { font-size: 1.14rem; min-width: 34px; }
  .motion-toggle { grid-column: 4; min-height: 33px; padding: 4px 7px; }
  .chapter-prev { grid-column: 1; }
  .chapter-counter { grid-column: 2; }
  .chapter-next { grid-column: 3; }
  .chapter-counter { min-width: 0; }
  .chapter-grid, .chapter--intro .chapter-grid { grid-template-columns: 1fr; gap: 26px; }
  .chapter-stage { align-items: start; min-height: auto; padding: calc(var(--header) + 30px) var(--edge) calc(var(--dock) + 27px); }
  .chapter--intro .chapter-stage { min-height: 100svh; }
  .chapter-copy > * + * { margin-top: 14px; }
  .chapter h1 { font-size: clamp(4.75rem, 16.8vw, 7.4rem); }
  .chapter h2 { font-size: clamp(3.7rem, 12vw, 6rem); }
  .chapter-lead { font-size: 1.05rem; }
  .chapter-visual { max-width: 505px; }
  .intro-art { min-height: clamp(225px, 74vw, 425px); }
  .intro-stack { inset-block-end: 27px; }
  .intro-stack .intro-album { top: 5%; }
  .intro-stack .intro-diamond { top: 29%; left: 4%; }
  .intro-stack .intro-meritoo { top: 11%; right: 4%; }
  .intro-art-caption { font-size: .88rem; }
  :is(.diamond-art, .meritoo-art, .odiseia-art, .creative-art) { min-height: clamp(260px, 70vw, 410px); }
  .diamond-art { gap: 11px; }
  .diamond-number strong { font-size: clamp(4.35rem, 17vw, 7.2rem); }
  .meritoo-art-title, .event-type { font-size: clamp(3.05rem, 13vw, 5.8rem); }
  .meritoo-logo, .odiseia-logo { width: clamp(83px, 25vw, 142px); }
  .profile-visual { min-height: auto; }
  .profile-card { min-height: 238px; }
}

@media (max-width: 899px) {
  .motion-on .chapter-visual { transform: translateY(calc(var(--travel, 0) * -23px)) scale(calc(.97 + var(--intro, 1) * .03)); }
}

@media (min-width: 590px) and (max-width: 680px) {
  .chapter--intro .chapter-stage { align-items: center; }
  .chapter--intro .chapter-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .96fr); gap: 24px; }
  .chapter--intro h1 { font-size: clamp(4.55rem, 11.8vw, 5.3rem); }
  .intro-art { min-height: clamp(240px, 44vw, 310px); }
}

@media (max-width: 370px) {
  .header-cv { display: none; }
  .chapter h1 { font-size: clamp(4.4rem, 17vw, 5rem); }
  .chapter h2 { font-size: clamp(3.2rem, 13vw, 4.25rem); }
  .chapter-lead { font-size: 1rem; }
  .chapter-stage { padding-top: calc(var(--header) + 23px); }
  .chapter-links { gap: 9px 15px; }
}

html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after {
  animation: none !important;
  transition: none !important;
}
html:not(.motion-on) .chapter { --travel: 0 !important; --phase: 0 !important; --intro: 1 !important; }
html:not(.motion-on) .chapter-visual { --point-x: 0px; --point-y: 0px; }