/* ==========================================================================
   The chapters after the opening (DEFINE, BUILD, AMPLIFY) and their sheets.

   Chapters, two editions from the same markup (templates/marketing/partials/chapters.html):
   - live (.chapters.is-live, set by chapters.js when the glass can be drawn and motion is
     welcome): one glass object in the middle of the screen, the current chapter's words
     around it;
   - still (default): one chapter under the other, each with a picture of its object.

   Sheets (chapter_sheets.html): raised from the bottom by sheets.js (their behaviour and frame
   are in controls.css); without a script they open as page targets (:target).
   ========================================================================== */

.page-opening {
  --r: min(18vw, 22.5svh);        /* the glass object's scale: the same formula as chapters.js */
  --object-y: 46%;                /* where its centre stands on the screen */
  --muted-cool: #646a72;
  --hairline: rgb(14 17 20 / 0.12);
  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 700px) {
  .page-opening { --r: min(30vw, 19svh); --object-y: 44%; }
}


/* Chapters ---------------------------------------------------------------- */
.chapters { position: relative; }
.chapters__stage { display: none; }

.chapter { position: relative; height: 100svh; min-height: 36rem; }
.chapter__open { position: absolute; inset: 0; display: block; color: var(--ink-cool); -webkit-tap-highlight-color: transparent; }
.chapter__open:focus-visible { outline: none; }
.chapter__open:focus-visible .chapter__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

.chapter__number,
.chapter__name,
.chapter__tagline,
.chapter__hint { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.chapter__number {
  top: calc(var(--object-y) - var(--r) * 1.12 - 2.6rem);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.34em; padding-left: 0.34em; color: var(--muted-cool);
}
.chapter__object {
  position: absolute; left: 50%; top: var(--object-y); width: calc(var(--r) * 3.75); height: calc(var(--r) * 3.75);   /* the stills: r = 240 of 900 px */
  transform: translate(-50%, -50%); cursor: pointer;
}
.chapter__still { width: 100%; height: 100%; object-fit: contain; }
.chapter__name {
  top: calc(var(--object-y) + var(--r) * 1.3 + 0.6rem);
  font-size: clamp(1.9rem, 3.3vw, 3.4rem); font-weight: 400; line-height: 1; letter-spacing: 0.16em; padding-left: 0.16em;
  text-transform: uppercase;
}
.chapter__tagline {
  top: calc(var(--object-y) + var(--r) * 1.3 + 0.6rem + clamp(2.8rem, 4.6vw, 4.6rem));
  font-size: clamp(1rem, 1.25vw, 1.2rem); color: var(--muted-cool); letter-spacing: 0.01em;
}
.chapter__hint {
  top: calc(var(--object-y) + var(--r) * 1.3 + 0.6rem + clamp(5.4rem, 8vw, 7.8rem));
  display: grid; justify-items: center; gap: 0.7rem;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.36em; padding-left: 0.36em; text-transform: uppercase; color: var(--muted-cool);
  opacity: 0.55; transition: opacity 0.6s var(--ease-out);
}
.chapter__hint::after { content: ""; width: 1.4rem; height: 1px; background: currentColor; margin-left: -0.36em; transition: transform 0.8s var(--ease-out); }
.chapter__open:hover .chapter__hint,
.chapter__open:focus-visible .chapter__hint { opacity: 1; }
.chapter__open:hover .chapter__hint::after,
.chapter__open:focus-visible .chapter__hint::after { transform: scaleX(2.6); }

/* Live edition: the object is drawn once, in the middle; the chapters' words take turns
   around it. Their pieces are fixed to the screen and only the current chapter's show. */
/* The stage takes one screen and the first chapter is pulled up over it: the glass stays in the middle
   while the chapters pass, and leaves with the last one (a negative margin on the stage itself would
   keep it on screen for one more screen: sticky positioning counts margins). */
.chapters.is-live .chapters__stage { display: block; position: sticky; top: 0; height: 100svh; pointer-events: none; }
.chapters.is-live .chapters__stage + .chapter { margin-top: -100svh; }
.chapters.is-live .chapters__glass { display: block; width: 100%; height: 100%; }
.chapters.is-live .chapter__still { visibility: hidden; }
.chapters.is-live .chapter__open { position: fixed; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; transition: visibility 0s 0.7s; }
.chapters.is-live .chapter__open > * { pointer-events: auto; }
.chapters.is-live .chapter.is-current .chapter__open { visibility: visible; transition: visibility 0s; }
.chapters.is-live .chapter__number,
.chapters.is-live .chapter__name,
.chapters.is-live .chapter__tagline,
.chapters.is-live .chapter__hint {
  opacity: 0; translate: 0 0.9rem; transition: opacity 0.5s ease, translate 0.7s var(--ease-out);
}
.chapters.is-live .chapter.is-current .chapter__number,
.chapters.is-live .chapter.is-current .chapter__name,
.chapters.is-live .chapter.is-current .chapter__tagline { opacity: 1; translate: 0 0; transition: opacity 1s ease 0.15s, translate 1.3s var(--ease-out) 0.15s; }
.chapters.is-live .chapter.is-current .chapter__name { transition-delay: 0.25s; }
.chapters.is-live .chapter.is-current .chapter__tagline { transition-delay: 0.4s; }
.chapters.is-live .chapter.is-current .chapter__hint { opacity: 0.55; translate: 0 0; transition: opacity 1s ease 0.7s, translate 1.3s var(--ease-out) 0.7s; }
.chapters.is-live .chapter.is-current .chapter__open:hover .chapter__hint { opacity: 1; transition-delay: 0s; }


/* Sheets ------------------------------------------------------------------- */
/* How every sheet opens, scrolls and closes: controls.css. Here: what the chapters' stories contain. */
.sheet__head { display: grid; justify-items: start; gap: 1.1rem; padding-bottom: clamp(5rem, 16svh, 11rem); }
.sheet__number { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.34em; color: var(--muted-cool); }
.sheet__title { font-size: clamp(3rem, 8vw, 8.4rem); font-weight: 400; line-height: 0.92; letter-spacing: 0.1em; text-transform: uppercase; margin-left: -0.05em; }
.sheet__tagline { font-size: clamp(1.15rem, 1.7vw, 1.6rem); color: var(--muted-cool); }

.sheet__text { padding-left: clamp(0rem, 16.66%, 12rem); font-size: clamp(1.2rem, 1.85vw, 1.85rem); }
.sheet__text p { max-width: 40ch; line-height: 1.32; letter-spacing: -0.012em; text-wrap: pretty; }
.sheet__text p + p { margin-top: 0.42em; }
.sheet__text--lead p:first-child { font-size: 1.32em; line-height: 1.16; margin-bottom: 0.6em; }

.sheet__statement {
  margin-block: clamp(10rem, 30svh, 18rem) clamp(6rem, 18svh, 12rem); text-align: center;
  font-size: clamp(1.9rem, 4.6vw, 5rem); font-weight: 400; line-height: 1.1; letter-spacing: 0.045em;
  text-transform: uppercase; text-wrap: balance;
}


/* The visuals of the stories ----------------------------------------------- */
.visual { margin-block: clamp(5rem, 16svh, 11rem); --p: 0; }
.visual__caption { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 1rem; font-size: 0.8rem; color: var(--muted-cool); }
.visual__label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em; color: var(--ink-cool); }

/* A photograph */
.visual__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #eceef0; }
.visual__frame img { width: 100%; height: 100%; object-fit: cover; }

/* DEFINE — alignment */
.align { position: relative; aspect-ratio: 1000 / 620; container-type: inline-size; border-radius: 16px; background: #f6f6f4; overflow: hidden; }
.align__guides { position: absolute; inset: 0; width: 100%; height: 100%; opacity: clamp(0, (var(--p) - 0.72) * 3.6, 1); }
.align__guides line { stroke: #d9707e; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.45; }
.align__item {
  --off: calc(1 - var(--p));
  position: absolute; display: block;
  transform: translate(calc(var(--dx) * 1cqw * var(--off)), calc(var(--dy) * 1cqw * var(--off))) rotate(calc(var(--r) * 1deg * var(--off)));
}
.align__type { left: 7%; top: 6%; font-size: 22cqw; line-height: 1; font-weight: 400; letter-spacing: -0.03em; }
.align__specimen { left: 7.4%; top: 69%; font-size: 1.5cqw; letter-spacing: 0.22em; color: var(--muted-cool); }
.align__mark { left: 43.5%; top: 15.5%; width: 13cqw; height: 13cqw; border: 1.5px solid var(--ink-cool); border-radius: 50%; }
.align__mark i { position: absolute; left: 50%; top: -12%; bottom: -12%; width: 1.5px; margin-left: -0.75px; background: var(--ink-cool); }
.align__swatch { top: 15.5%; width: 5.4cqw; height: 26cqw; border-radius: 99px; }
.align__swatch--red { left: 62%; background: #e0707c; }
.align__swatch--violet { left: 69%; background: #8c6bd8; }
.align__swatch--blue { left: 76%; background: #5a82e6; }
.align__swatch--gold { left: 83%; height: 12cqw; background: #f2dda4; }
.align__word { left: 43.5%; top: 69%; font-size: 2.4cqw; letter-spacing: 0.32em; text-transform: uppercase; }
.align__rule { left: 7%; top: 80.6%; width: 86%; height: 1px; background: rgb(14 17 20 / 0.25); }
.align__codes { left: 62%; top: 60.5%; font-size: 1.15cqw; letter-spacing: 0.14em; color: var(--muted-cool); }

/* BUILD — from plan to experience */
.blueprint { display: block; width: 100%; height: auto; border-radius: 16px; background: #f6f6f4; }
.blueprint__plan line {
  stroke: #7c838c; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - var(--i) * 0.035) * 5, 1));
}
.blueprint__plan .blueprint__faint { opacity: 0.4; }
.blueprint__plan .blueprint__dim { stroke: #d9707e; }
.blueprint__structure { fill: none; stroke: #0e1114; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: clamp(0, (var(--p) - 0.38) * 4, 1); }
.blueprint__finished { opacity: clamp(0, (var(--p) - 0.72) * 5, 1); }
.blueprint__brand { font-size: 15px; font-weight: 600; letter-spacing: 0.3em; fill: #0e1114; }
.blueprint__headline { font-size: 54px; font-weight: 400; letter-spacing: 0.1em; fill: #fdfdfc; }
.blueprint__button { font-size: 22px; fill: #0e1114; text-anchor: middle; }

/* BUILD — interaction details: the frame stays, the shots change */
.shots { position: relative; height: calc(7 * 46svh); }
.shots__frame {
  position: sticky; top: 16svh; aspect-ratio: 16 / 9; max-height: 64svh; margin-inline: auto;
  border-radius: 16px; background: #f4f4f2; overflow: hidden; container-type: inline-size;
}
.shot {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.04);
  transition: opacity 0.7s ease, transform 1.1s var(--ease-out);
  -webkit-mask: radial-gradient(75% 85% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(75% 85% at 50% 50%, #000 55%, transparent 100%);
}
.shot.is-active { opacity: 1; transform: none; }
.shots__caption { position: absolute; left: 3cqw; bottom: 2.6cqw; font-size: max(0.7rem, 1.1cqw); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-cool); }
.shots__caption span { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; transition: opacity 0.5s ease; }
.shots__caption span.is-active { opacity: 1; }
/* each close-up plays its small loop only while it is on screen */
.shot:not(.is-active) * { animation-play-state: paused !important; }

.ui-button { display: inline-flex; align-items: center; gap: 2.2cqw; padding: 3.4cqw 6.2cqw; border-radius: 99px; background: #0e1114; color: #fdfdfc; font-size: 5.2cqw; letter-spacing: 0.02em; animation: ui-hover 3.2s var(--ease-in-out) infinite; }
.ui-button i { font-style: normal; animation: ui-arrow 3.2s var(--ease-in-out) infinite; }
.ui-cursor { position: absolute; left: 50%; top: 50%; width: 8.5cqw; fill: #0e1114; stroke: #fdfdfc; stroke-width: 1.2; animation: ui-cursor 3.2s var(--ease-in-out) infinite; }
@keyframes ui-cursor { 0% { transform: translate(22cqw, 14cqw); } 45%, 80% { transform: translate(3cqw, 1cqw); } 100% { transform: translate(22cqw, 14cqw); } }
@keyframes ui-hover { 0%, 40% { background: #0e1114; } 50%, 80% { background: #2b3038; } 100% { background: #0e1114; } }
@keyframes ui-arrow { 0%, 45% { transform: none; } 55%, 80% { transform: translateX(1.2cqw); } 100% { transform: none; } }

.ui-nav { position: relative; display: flex; gap: 6.5cqw; font-size: 4.6cqw; letter-spacing: 0.01em; padding-bottom: 2cqw; margin-left: 18cqw; }
.ui-nav i { position: absolute; left: 0; bottom: 0; height: 3px; width: 16cqw; background: #0e1114; animation: ui-nav 6s var(--ease-in-out) infinite; }
@keyframes ui-nav { 0%, 18% { transform: translateX(0); width: 16cqw; } 25%, 43% { transform: translateX(22.5cqw); width: 15cqw; } 50%, 68% { transform: translateX(44cqw); width: 17cqw; } 75%, 93% { transform: translateX(67.5cqw); width: 16cqw; } 100% { transform: translateX(0); width: 16cqw; } }

.ui-burger { position: absolute; left: 18%; top: 50%; display: grid; gap: 1.4cqw; width: 8cqw; transform: translateY(-50%); }
.ui-burger i { height: 0.5cqw; background: #0e1114; border-radius: 1px; transform-origin: center; animation: ui-burger-a 4s var(--ease-in-out) infinite; }
.ui-burger i:nth-child(2) { animation-name: ui-burger-b; }
.ui-burger i:nth-child(3) { animation-name: ui-burger-c; }
@keyframes ui-burger-a { 0%, 20% { transform: none; } 35%, 80% { transform: translateY(1.9cqw) rotate(45deg); } 95%, 100% { transform: none; } }
@keyframes ui-burger-b { 0%, 20% { opacity: 1; } 35%, 80% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes ui-burger-c { 0%, 20% { transform: none; } 35%, 80% { transform: translateY(-1.9cqw) rotate(-45deg); } 95%, 100% { transform: none; } }
.ui-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; display: grid; align-content: center; gap: 3cqw; padding-left: 6cqw; background: #0e1114; animation: ui-panel 4s var(--ease-in-out) infinite; }
.ui-panel b { height: 1.4cqw; width: 60%; background: rgb(253 253 252 / 0.85); border-radius: 1px; }
.ui-panel b:nth-child(2) { width: 42%; } .ui-panel b:nth-child(3) { width: 52%; } .ui-panel b:nth-child(4) { width: 34%; }
@keyframes ui-panel { 0%, 22% { transform: translateX(100%); } 38%, 80% { transform: none; } 95%, 100% { transform: translateX(100%); } }

.ui-page { position: absolute; inset: 14% 18%; display: grid; grid-template-rows: 1fr auto auto; gap: 2cqw; padding: 3cqw; border-radius: 1.4cqw; background: #fdfdfc; box-shadow: 0 2cqw 5cqw -2cqw rgb(14 17 20 / 0.2); }
.ui-page i { border-radius: 0.8cqw; background: linear-gradient(135deg, #f3d6dc, #e2dcf6 50%, #d4e1fb); }
.ui-page b { height: 1.3cqw; width: 55%; background: #0e1114; border-radius: 1px; }
.ui-page b + b { width: 38%; background: #a3a8ae; }
.ui-page--to i { background: url("../opening/ocean-phone.webp") center / cover; }
.ui-page--to { animation: ui-wipe 4.4s var(--ease-in-out) infinite; }
@keyframes ui-wipe { 0%, 25% { clip-path: inset(100% 0 0 0 round 1.4cqw); } 55%, 85% { clip-path: inset(0 0 0 0 round 1.4cqw); } 100% { clip-path: inset(0 0 100% 0 round 1.4cqw); } }

.ui-calendar { display: grid; grid-template-columns: repeat(7, 8.4cqw); gap: 1.6cqw; font-size: 3cqw; text-align: center; font-variant-numeric: tabular-nums; }
.ui-calendar span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; }
.ui-calendar span:nth-child(18) { animation: ui-pick 4s var(--ease-in-out) infinite; }
@keyframes ui-pick { 0%, 25% { background: transparent; color: inherit; } 38%, 90% { background: #0e1114; color: #fdfdfc; } 100% { background: transparent; color: inherit; } }
.ui-slot { position: absolute; right: 12%; bottom: 20%; padding: 1.2cqw 2.6cqw; border: 1px solid #0e1114; border-radius: 99px; font-size: 2.2cqw; animation: ui-slot 4s var(--ease-in-out) infinite; }
@keyframes ui-slot { 0%, 40% { opacity: 0; transform: translateY(1.5cqw); } 55%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.ui-product { position: absolute; left: 14%; top: 26%; display: grid; grid-template-columns: 16cqw 1fr; grid-template-rows: auto auto; gap: 1.6cqw 3cqw; width: 50%; align-items: center; }
.ui-product i { grid-row: span 2; aspect-ratio: 1; border-radius: 1.2cqw; background: linear-gradient(135deg, #f3d6dc, #e2dcf6 50%, #d4e1fb); }
.ui-product b { height: 1.5cqw; width: 80%; background: #0e1114; border-radius: 1px; }
.ui-product b + b { width: 45%; background: #a3a8ae; }
.ui-pay { position: absolute; right: 12%; bottom: 20%; display: grid; place-items: center; min-width: 28cqw; padding: 3.2cqw 5cqw; border-radius: 99px; background: #0e1114; color: #fdfdfc; font-size: 4.2cqw; animation: ui-press 4.2s var(--ease-in-out) infinite; }
.ui-pay > * { grid-area: 1 / 1; }
.ui-pay span { animation: ui-label 4.2s var(--ease-in-out) infinite; }
.ui-pay i { font-style: normal; opacity: 0; animation: ui-check 4.2s var(--ease-in-out) infinite; }
@keyframes ui-press { 0%, 30% { transform: none; } 36% { transform: scale(0.96); } 42%, 100% { transform: none; } }
@keyframes ui-label { 0%, 38% { opacity: 1; } 46%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ui-check { 0%, 42% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

.ui-field { position: relative; display: block; width: 64%; padding-top: 5.5cqw; border-bottom: 1px solid #a3a8ae; font-size: 5cqw; animation: ui-line 5s var(--ease-in-out) infinite; }
.ui-field__label { position: absolute; left: 0; top: 6cqw; color: #7a8088; transform-origin: left; animation: ui-float 5s var(--ease-in-out) infinite; }
.ui-field__value { display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap; padding-bottom: 1cqw; animation: ui-type 5s steps(6, end) infinite; }
.ui-field__value i { width: 2px; height: 5.2cqw; margin-left: 2px; background: #0e1114; animation: ui-caret 0.9s steps(1) infinite; }
@keyframes ui-float { 0%, 12% { transform: none; } 22%, 92% { transform: translateY(-6cqw) scale(0.6); } 100% { transform: none; } }
@keyframes ui-type { 0%, 22% { width: 0; } 60%, 92% { width: 12.5ch; } 100% { width: 0; } }
@keyframes ui-caret { 50% { opacity: 0; } }
@keyframes ui-line { 0%, 15% { border-color: #a3a8ae; } 22%, 92% { border-color: #0e1114; } 100% { border-color: #a3a8ae; } }

/* AMPLIFY — propagation */
.propagation { display: block; width: 100%; height: auto; border-radius: 16px; background: #f6f6f4; }
.propagation__ring {
  transform-box: view-box; transform-origin: 600px 350px;
  transform: scale(calc(var(--k) / 6 * clamp(0.001, var(--p) * 1.7 - (var(--k) - 1) * 0.13, 1)));
  opacity: calc(clamp(0, var(--p) * 1.7 - (var(--k) - 1) * 0.13, 1) * (1.05 - var(--k) * 0.12));
}
.propagation__ring circle { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.propagation__red { stroke: #e0707c; opacity: 0.8; }
.propagation__violet { stroke: #8c6bd8; opacity: 0.9; }
.propagation__blue { stroke: #5a82e6; opacity: 0.8; }
.propagation__beams line {
  stroke: #8c6bd8; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.22;
  transform-box: view-box; transform-origin: 600px 350px; transform: rotate(calc(var(--a) * 30deg));
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 0.25) * 1.6, 1));
}
.propagation__glow { transform-box: view-box; transform-origin: 600px 350px; transform: scale(calc(0.4 + var(--p) * 1.4)); }
.propagation__source { fill: #0e1114; }

/* AMPLIFY — presence: one identity, six surfaces */
.presence { position: relative; aspect-ratio: 1000 / 620; container-type: inline-size; border-radius: 16px; background: #f6f6f4; overflow: hidden; }
.presence__links { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(var(--p) * 0.9); }
.presence__links line { stroke: #8c6bd8; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; opacity: 0.45; }
.presence__mark { position: absolute; left: 50%; top: 50%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border-radius: 50%; border: 1.5px solid #0e1114; background: #fdfdfc; box-shadow: 0 0 0 1.2cqw rgb(140 107 216 / 0.08); }
.presence__mark i, .surface__pin i, .surface__poster i, .surface__phone > i { position: absolute; left: 50%; top: -14%; bottom: -14%; width: 1.5px; margin-left: -0.75px; background: currentColor; }
.presence__mark i { color: #0e1114; }
.surface {
  --off: calc(1 - var(--p));
  position: absolute; display: grid; align-content: start; gap: 0.7cqw; padding: 1.6cqw;
  border-radius: 1.2cqw; background: #fdfdfc; box-shadow: 0 0.3cqw 0.8cqw rgb(14 17 20 / 0.05), 0 2cqw 4cqw -2cqw rgb(14 17 20 / 0.16);
  font-size: 1.2cqw; opacity: clamp(0, var(--p) * 1.6, 1);
  transform: translate(calc(var(--dx) * 1cqw * var(--off)), calc(var(--dy) * 1cqw * var(--off)));
}
.surface b { display: block; height: 0.7cqw; width: 90%; border-radius: 1px; background: #d6d9dd; }
.surface b + b { width: 70%; }
.surface__kind { font-size: 0.85cqw; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-cool); }
.surface__url { font-size: 1cqw; color: #5d8a6a; }
.surface__title { font-size: 1.7cqw; color: #5a6fd6; }
.surface--search { left: 6%; top: 9%; width: 24cqw; }
.surface--social { right: 7%; top: 6%; width: 17cqw; }
.surface__image { display: block; aspect-ratio: 1; border-radius: 0.6cqw; background: center / cover no-repeat #e9e6f2; }
.surface__handle { font-size: 1.1cqw; }
.surface--local { left: 5%; bottom: 8%; width: 22cqw; }
.surface__map { width: 100%; height: auto; border-radius: 0.6cqw; background: #f1f2f0; }
.surface__map path { fill: none; stroke: #c9ccd0; stroke-width: 2; }
.surface__pin { position: absolute; left: 44%; top: 38%; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; border: 1.5px solid #0e1114; background: #fdfdfc; color: #0e1114; }
.surface--editorial { left: 33%; bottom: 7%; width: 21cqw; }
.surface__headline { font-size: 2cqw; line-height: 1.1; letter-spacing: -0.01em; }
.surface--campaign { right: 6%; bottom: 7%; width: 16cqw; }
.surface__poster { position: relative; display: grid; align-content: end; aspect-ratio: 3 / 4; padding: 1.2cqw; border-radius: 0.6cqw; color: #0e1114; background: linear-gradient(160deg, #f3d6dc, #e2dcf6 48%, #d4e1fb); font-size: 1cqw; letter-spacing: 0.26em; text-transform: uppercase; }
.surface__poster i { left: 50%; top: 22%; bottom: auto; height: 22%; }
.surface--mobile { left: 60%; top: 12%; width: 11cqw; padding: 0.8cqw; border-radius: 1.8cqw; }
.surface__phone { position: relative; display: grid; gap: 0.6cqw; padding: 1.4cqw 0.8cqw; border-radius: 1.2cqw; background: #fdfdfc; color: #0e1114; }
.surface__phone > i { position: relative; left: auto; top: auto; bottom: auto; display: block; width: 2.4cqw; height: 2.4cqw; margin: 0; border: 1.5px solid #0e1114; border-radius: 50%; background: transparent; }
.surface__screen { display: block; aspect-ratio: 4 / 5; border-radius: 0.6cqw; background: center / cover no-repeat #cfd8e2; }

/* AMPLIFY — expansion: a beam from one point, widening */
.expansion {
  --w: calc(0.5% + var(--p) * 47%);
  position: relative; aspect-ratio: 16 / 9; border-radius: 16px; background: #f4f4f2; overflow: hidden;
}
.expansion__beam, .expansion__core { position: absolute; inset: 0; }
.expansion__beam {
  background: linear-gradient(180deg, rgb(224 112 124 / 0) 0%, rgb(224 112 124 / 0.55) 30%, rgb(140 107 216 / 0.5) 50%, rgb(90 130 230 / 0.55) 70%, rgb(90 130 230 / 0) 100%);
  clip-path: polygon(7% 50%, 100% calc(50% - var(--w)), 100% calc(50% + var(--w)));
  opacity: calc(0.35 + var(--p) * 0.55);
}
.expansion__core {
  background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 0.85) 40%, rgb(255 255 255 / 0) 100%);
  clip-path: polygon(7% 50%, 100% calc(50% - var(--w) * 0.3), 100% calc(50% + var(--w) * 0.3));
}
.expansion__source { position: absolute; left: 7%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fdfdfc; box-shadow: 0 0 0 3px rgb(140 107 216 / 0.35), 0 0 22px 6px rgb(140 107 216 / 0.35); }


/* Phones ------------------------------------------------------------------- */
@media (max-width: 700px) {
  .chapter__name { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .sheet__text { padding-left: 0; }
  .sheet__text { font-size: 1.22rem; }
  .sheet__statement { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .visual__frame { aspect-ratio: 4 / 5; }
  .align, .presence { aspect-ratio: 4 / 5; }
  .align__type { left: 8%; top: 5%; font-size: 30cqw; }
  .align__mark { left: 62%; top: 9%; width: 22cqw; height: 22cqw; }
  .align__swatch { top: 44%; width: 9cqw; height: 26cqw; }
  .align__swatch--red { left: 8%; } .align__swatch--violet { left: 21%; } .align__swatch--blue { left: 34%; } .align__swatch--gold { left: 47%; height: 13cqw; }
  .align__codes { left: 8%; top: 76%; font-size: 2.6cqw; }
  .align__word { left: 8%; top: 84%; font-size: 4.4cqw; }
  .align__specimen { left: 8%; top: 30%; font-size: 3.4cqw; }
  .align__rule { top: 90%; }
  .surface { font-size: 2.6cqw; gap: 1.4cqw; padding: 3cqw; border-radius: 2.4cqw; }
  .surface__kind { font-size: 1.8cqw; }
  .surface__title { font-size: 3.4cqw; }
  .surface__url, .surface__handle { font-size: 2.2cqw; }
  .surface b { height: 1.4cqw; }
  .surface--search { left: 5%; top: 4%; width: 52cqw; }
  .surface--social { right: 5%; top: 5%; width: 32cqw; }
  .surface--mobile { left: 62%; top: 36%; width: 26cqw; }
  .surface--editorial { left: 5%; top: 33%; width: 48cqw; }
  .surface__headline { font-size: 4.2cqw; }
  .surface--local { left: 5%; bottom: 5%; width: 46cqw; }
  .surface--campaign { right: 5%; bottom: 5%; width: 36cqw; }
  .surface__poster { font-size: 2cqw; }
  .presence__mark { width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; top: 58%; left: 58%; }
  .shots__frame { aspect-ratio: 4 / 5; }
  .shot .ui-button, .shot .ui-nav, .shot .ui-field { font-size: 6cqw; }
}

/* Reduced motion: every visual shows its finished state, the shots still change with the scroll. */
@media (prefers-reduced-motion: reduce) {
  .visual { --p: 1 !important; }
}