/* =========================================================
   Pixel Peak Logos - the two animation service pages
   Loaded only by /services/animated-logo/ and /services/2d-3d-animation/, because both pages are
   built around one big interactive piece: a logo that animates four different ways, and a reel you
   can scrub and a product you can spin. Behaviour: assets/js/showpieces.js.
   Everything here degrades to a still frame with reduced motion or without JavaScript.
   ========================================================= */

/* =========================================================
   The animated logo player
   ========================================================= */
.al {
  --al-dur: 2.6s;
  --al-ink: #171214;
  --al-gold: #F2B33D;
  display: grid; gap: 16px;
  width: 100%; max-width: 620px; justify-self: center;
}
.al__stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 30px 60px -28px rgba(72, 10, 20, .5);
}
.al__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to right, rgba(20, 13, 13, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(to bottom, rgba(20, 13, 13, .045) 1px, transparent 1px) 0 0 / 34px 34px;
}
.al--dark .al__stage { background: var(--ink); }
.al--dark .al__stage::before { background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px); }
.al--dark { --al-ink: #fff; }

.al__logo { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(10px, 1.6vw, 18px); }
.al__mark { width: clamp(84px, 13vw, 124px); height: auto; overflow: visible; }
.al__mark .al-ring { fill: none; stroke: var(--al-ink); stroke-width: 5; }
.al__mark .al-sun { fill: var(--al-gold); }
.al__mark .al-line { fill: none; stroke: var(--al-ink); stroke-width: 6; stroke-linecap: round; }
.al__mark .al-px { fill: var(--al-ink); }
.al__word { display: grid; justify-items: center; gap: 6px; }
.al__letters { display: flex; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: .12em; line-height: 1; color: var(--al-ink); }
.al__letters span { display: inline-block; }
.al__sub { font-family: var(--mono); font-size: clamp(.5625rem, 1vw, .6875rem); letter-spacing: .34em; text-transform: uppercase; color: var(--al-ink); opacity: .65; }

/* The pixel dissolve sits on top of the logo and clears square by square */
.al__pixels { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(8, 1fr); pointer-events: none; opacity: 0; }
.al__pixels i { background: #fff; }
.al--dark .al__pixels i { background: var(--ink); }
.al[data-style="pixel"] .al__pixels { opacity: 1; }

/* Progress line under the stage */
.al__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(20, 13, 13, .08); }
.al__bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.al.is-playing .al__bar i { animation: al-progress var(--al-dur) linear forwards; }
@keyframes al-progress { to { width: 100%; } }

/* Controls */
.al__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.al__style {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  transition: border-color .2s, background-color .2s, color .2s;
}
.al__style::before { content: ""; width: 8px; height: 8px; background: var(--line); transition: background .2s; }
.al__style:hover { border-color: var(--ink); }
.al__style[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.al__style[aria-pressed="true"]::before { background: var(--grad); }
.al__replay { margin-left: auto; }
@media (max-width: 520px) { .al__replay { margin-left: 0; } }

/* ---------- Style 1: build. The parts fly in and settle. ---------- */
.al.is-playing[data-style="build"] .al-ring { animation: al-ring-in var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; }
.al.is-playing[data-style="build"] .al-sun { animation: al-sun-up var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; }
.al.is-playing[data-style="build"] .al-line { animation: al-line-in var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; }
.al.is-playing[data-style="build"] .al-px { animation: al-px-pop var(--al-dur) cubic-bezier(.34, 1.56, .64, 1) both; }
.al.is-playing[data-style="build"] .al__letters span { animation: al-letter-up var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.32s + var(--i) * .07s); }
.al.is-playing[data-style="build"] .al__sub { animation: al-fade var(--al-dur) ease .72s both; }
@keyframes al-ring-in { 0% { opacity: 0; transform: scale(.4) rotate(-40deg); transform-origin: center; } 34%, 100% { opacity: 1; transform: none; } }
@keyframes al-sun-up { 0% { opacity: 0; transform: translateY(26px); } 12% { opacity: 0; } 44%, 100% { opacity: 1; transform: none; } }
@keyframes al-line-in { 0% { opacity: 0; transform: scaleX(.2); transform-origin: center; } 50%, 100% { opacity: 1; transform: none; } }
@keyframes al-px-pop { 0%, 46% { opacity: 0; transform: scale(.2); transform-origin: center; } 62%, 100% { opacity: 1; transform: none; } }
@keyframes al-letter-up { 0% { opacity: 0; transform: translateY(120%); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes al-fade { 0%, 30% { opacity: 0; } 60%, 100% { opacity: .65; } }

/* ---------- Style 2: draw. The mark draws itself, then fills. ---------- */
.al[data-style="draw"] .al-ring, .al[data-style="draw"] .al-line { stroke-dasharray: 340; }
.al.is-playing[data-style="draw"] .al-ring { animation: al-draw var(--al-dur) cubic-bezier(.65, 0, .35, 1) both; }
.al.is-playing[data-style="draw"] .al-line { animation: al-draw var(--al-dur) cubic-bezier(.65, 0, .35, 1) .18s both; }
.al.is-playing[data-style="draw"] .al-sun { animation: al-wipe-up var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; }
.al.is-playing[data-style="draw"] .al-px { animation: al-fade-in var(--al-dur) ease .55s both; }
.al.is-playing[data-style="draw"] .al__letters span { animation: al-letter-wipe var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.4s + var(--i) * .06s); }
.al.is-playing[data-style="draw"] .al__sub { animation: al-fade var(--al-dur) ease .8s both; }
@keyframes al-draw { from { stroke-dashoffset: 340; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes al-wipe-up { 0%, 30% { clip-path: inset(100% 0 0 0); } 70%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes al-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes al-letter-wipe { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 45%, 100% { opacity: 1; clip-path: inset(0 0 0 0); } }

/* ---------- Style 3: morph. It arrives as one shape and resolves. ---------- */
.al.is-playing[data-style="morph"] .al__mark { animation: al-morph var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; }
.al.is-playing[data-style="morph"] .al-sun { animation: al-sun-swell var(--al-dur) cubic-bezier(.34, 1.56, .64, 1) both; }
.al.is-playing[data-style="morph"] .al-px { animation: al-px-slide var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; }
.al.is-playing[data-style="morph"] .al__letters span { animation: al-letter-spread var(--al-dur) cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.3s + var(--i) * .05s); }
.al.is-playing[data-style="morph"] .al__sub { animation: al-fade var(--al-dur) ease .85s both; }
@keyframes al-morph { 0% { opacity: 0; transform: scale(.25) rotate(120deg); } 20% { opacity: 1; } 62%, 100% { opacity: 1; transform: none; } }
@keyframes al-sun-swell { 0% { transform: scaleY(0); transform-origin: 60px 74px; } 55%, 100% { transform: none; } }
@keyframes al-px-slide { 0%, 20% { opacity: 0; transform: translateX(-24px); } 58%, 100% { opacity: 1; transform: none; } }
@keyframes al-letter-spread { 0% { opacity: 0; letter-spacing: .5em; transform: scale(1.3); } 50%, 100% { opacity: 1; letter-spacing: normal; transform: none; } }

/* ---------- Style 4: pixel. It resolves out of the grid, one square at a time. ---------- */
.al.is-playing[data-style="pixel"] .al__pixels i { animation: al-px-clear 120ms ease both; animation-delay: calc(var(--d) * 1ms); }
.al.is-playing[data-style="pixel"] .al__letters span { animation: al-letter-blink 120ms ease both; animation-delay: calc(1.1s + var(--i) * .08s); }
.al.is-playing[data-style="pixel"] .al__sub { animation: al-fade var(--al-dur) ease 1.5s both; }
@keyframes al-px-clear { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes al-letter-blink { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Still frame: reduced motion, or before the first play */
.al:not(.is-playing) .al__pixels { opacity: 0; }

/* ---------- The four styles, as small looping cards ---------- */
.al-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 640px) { .al-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .al-grid { grid-template-columns: repeat(4, 1fr); } }
.al-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.al-card .al { max-width: none; gap: 0; }
.al-card .al__stage { aspect-ratio: 1; border-radius: var(--radius); box-shadow: none; background: var(--paper-2); }
.al-card .al__stage::before { background-size: 22px 22px, 22px 22px; }
.al-card .al__mark { width: 54px; }
.al-card .al__letters { font-size: 1rem; }
.al-card .al__sub { font-size: .5rem; letter-spacing: .24em; }
.al-card h3 { font-size: 1.125rem; letter-spacing: -.02em; }
.al-card p { margin-top: 6px; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.al-card .al__pixels { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); }
.al-card .al__stage .al__bar { display: none; }

/* ---------- Where it plays: one mark, three places ---------- */
.play-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 900px) { .play-grid { grid-template-columns: repeat(3, 1fr); align-items: end; } }
.play-card { display: grid; gap: 14px; }
.play-card__frame {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line);
}
.play-card__label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.play-card__label b { display: block; margin-top: 4px; font-family: var(--font); font-size: 1rem; letter-spacing: -.02em; text-transform: none; color: var(--ink); }
/* 1. a site header */
.play-site { aspect-ratio: 16 / 10; align-content: start; padding: 0; }
.play-site__bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.play-site__bar i { height: 5px; width: 24px; border-radius: 3px; background: var(--line); }
.play-site__bar em { margin-left: auto; width: 46px; height: 18px; border-radius: 999px; background: var(--ink); }
.play-site__body { display: grid; gap: 8px; padding: 16px 12px; width: 100%; }
.play-site__body i { height: 7px; border-radius: 3px; background: var(--line); }
.play-site__body i:first-child { width: 62%; height: 12px; background: var(--ink); }
.play-site__body i:nth-child(2) { width: 84%; }
/* 2. a social post */
.play-post { aspect-ratio: 1; padding: 0; background: var(--ink); }
.play-post__art { position: absolute; inset: 0; display: grid; place-items: center; background: var(--grad); }
.play-post__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 10px 12px; background: #fff; }
.play-post__foot i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); }
/* 3. a video end card */
.play-video { aspect-ratio: 16 / 9; background: var(--ink); }
.play-video__play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: .625rem; }
.play-card .al__mark { width: clamp(48px, 8vw, 68px); }
.play-card .al__letters { font-size: clamp(.875rem, 1.6vw, 1.125rem); }
.play-card .al__sub { font-size: .4375rem; letter-spacing: .24em; }
.play-post .al, .play-video .al { --al-ink: #fff; }
.play-post .al__logo, .play-video .al__logo { position: relative; z-index: 2; }
.motion .play-card__frame .al__logo { animation: al-drift 6s var(--ease) infinite alternate; }
.play-card:nth-child(2) .al__logo { animation-delay: -2s; }
.play-card:nth-child(3) .al__logo { animation-delay: -4s; }
@keyframes al-drift { from { transform: translateY(-3px); } to { transform: translateY(3px); } }

/* =========================================================
   The reel: four scenes you can scrub
   ========================================================= */
.reel { display: grid; gap: 16px; width: 100%; max-width: 640px; justify-self: center; }
.reel__screen {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--ink);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .75);
}
.reel__scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.reel__scene.is-active { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.reel__tag {
  position: absolute; left: 14px; top: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.reel__controls { display: flex; align-items: center; gap: 12px; }
.reel__play { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: var(--ink); color: #fff; }
.reel__play .icon { width: 18px; height: 18px; }
.reel__play .reel__icon-play { display: none; }
.reel.is-paused .reel__play .reel__icon-play { display: block; }
.reel.is-paused .reel__play .reel__icon-pause { display: none; }
.reel__scrub { position: relative; flex: 1; height: 40px; display: grid; align-items: center; cursor: ew-resize; touch-action: none; }
.reel__scrub::before { content: ""; height: 5px; border-radius: 3px; background: var(--line); }
.reel__fill { position: absolute; left: 0; height: 5px; width: var(--p, 0%); border-radius: 3px; background: var(--grad); pointer-events: none; }
.reel__knob { position: absolute; left: var(--p, 0%); width: 18px; height: 18px; translate: -50%; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(20, 13, 13, .35); pointer-events: none; }
.reel__time { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; color: var(--muted); min-width: 5.5em; text-align: right; }
.reel__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.reel__tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase;
  transition: border-color .2s, background-color .2s, color .2s;
}
.reel__tab em { font-style: normal; opacity: .55; }
.reel__tab:hover { border-color: var(--ink); }
.reel__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.reel__tab[aria-selected="true"] em { opacity: .7; }

/* Scene 1: explainer - a problem becomes a solution */
.rs-explain { display: grid; place-items: center; }
.rs-explain__row { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }
.rs-explain__box { display: grid; place-items: center; width: clamp(64px, 11vw, 96px); aspect-ratio: 1; border-radius: 16px; background: #fff; color: var(--ink); font-size: clamp(1.25rem, 3vw, 2rem); }
.rs-explain__box--out { background: var(--grad); color: #fff; }
.rs-explain__arrow { width: clamp(30px, 6vw, 60px); height: 2px; background: rgba(255, 255, 255, .5); position: relative; }
.rs-explain__arrow::after { content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%; border: 5px solid transparent; border-left-color: rgba(255, 255, 255, .5); }
.rs-explain__cap { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; color: #fff; font-size: clamp(.875rem, 1.8vw, 1.125rem); font-weight: 600; }
.reel.is-live .rs-explain.is-active .rs-explain__box--in { animation: rs-in 6s var(--ease) infinite; }
.reel.is-live .rs-explain.is-active .rs-explain__arrow { animation: rs-arrow 6s var(--ease) infinite; }
.reel.is-live .rs-explain.is-active .rs-explain__box--out { animation: rs-out 6s var(--ease) infinite; }
.reel.is-live .rs-explain.is-active .rs-explain__cap { animation: rs-cap 6s var(--ease) infinite; }
@keyframes rs-in { 0% { opacity: 0; transform: translateX(-30px) scale(.8); } 12%, 74% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateX(-14px); } }
@keyframes rs-arrow { 0%, 16% { transform: scaleX(0); transform-origin: left; } 30%, 74% { transform: none; } 88%, 100% { opacity: 0; } }
@keyframes rs-out { 0%, 30% { opacity: 0; transform: scale(.6) rotate(-12deg); } 46%, 74% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes rs-cap { 0%, 46% { opacity: 0; transform: translateY(10px); } 58%, 76% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }

/* Scene 2: motion graphics - kinetic type */
.rs-type { display: grid; place-items: center; text-align: center; color: #fff; }
.rs-type p span { display: block; font-size: clamp(1.5rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -.04em; line-height: .95; }
.rs-type p span:nth-child(2) { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.rs-type__bar { position: absolute; left: 0; height: clamp(6px, 1.2vw, 10px); background: var(--orange); }
.rs-type__bar--a { top: 26%; width: 30%; }
.rs-type__bar--b { bottom: 24%; right: 0; left: auto; width: 40%; background: var(--grad); }
.reel.is-live .rs-type.is-active p span { animation: rs-word 5s var(--ease) infinite; }
.reel.is-live .rs-type.is-active p span:nth-child(2) { animation-delay: .18s; }
.reel.is-live .rs-type.is-active p span:nth-child(3) { animation-delay: .36s; }
.reel.is-live .rs-type.is-active .rs-type__bar--a { animation: rs-bar 5s var(--ease) infinite; }
.reel.is-live .rs-type.is-active .rs-type__bar--b { animation: rs-bar 5s var(--ease) .3s infinite; }
@keyframes rs-word { 0% { opacity: 0; transform: translateY(60%) skewY(6deg); } 16%, 72% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-40%); } }
@keyframes rs-bar { 0% { transform: scaleX(0); transform-origin: left; } 20%, 70% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); transform-origin: right; } }

/* Scene 3: 3D - a box you can spin */
.rs-3d { display: grid; place-items: center; perspective: 900px; }
.cube {
  position: relative; width: clamp(110px, 20vw, 172px); aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -16deg)) rotateY(var(--ry, 28deg));
  cursor: grab; touch-action: none;
}
.cube.is-dragging { cursor: grabbing; }
.motion .rs-3d.is-active .cube:not(.is-dragging):not(.is-held) { animation: cube-spin 16s linear infinite; }
@keyframes cube-spin { to { transform: rotateX(-16deg) rotateY(388deg); } }
.cube__face {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 6px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: var(--grad);
  color: #fff;
  --z: calc(clamp(110px, 20vw, 172px) / 2);
}
.cube__face--front { transform: translateZ(var(--z)); }
.cube__face--back { transform: rotateY(180deg) translateZ(var(--z)); }
.cube__face--right { transform: rotateY(90deg) translateZ(var(--z)); background: var(--ink); }
.cube__face--left { transform: rotateY(-90deg) translateZ(var(--z)); background: var(--ink); }
.cube__face--top { transform: rotateX(90deg) translateZ(var(--z)); background: var(--orange); color: var(--ink); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--z)); background: #fff; color: var(--ink); }
.cube__face svg { width: 34%; height: auto; }
.cube__face b { font-size: clamp(.75rem, 1.6vw, 1rem); letter-spacing: .18em; }
.cube__face span { font-family: var(--mono); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.rs-3d__hint { position: absolute; bottom: 16px; left: 50%; translate: -50%; color: rgba(255, 255, 255, .7); font-family: var(--mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }

/* Scene 4: character - a small figure that waves */
.rs-char { display: grid; place-items: center; }
.rs-char svg { width: clamp(120px, 24vw, 200px); height: auto; overflow: visible; }
.rs-char .ch-arm { transform-origin: 74px 66px; }
.reel.is-live .rs-char.is-active .ch-arm { animation: ch-wave 2.4s ease-in-out infinite; }
.reel.is-live .rs-char.is-active .ch-eye { animation: ch-blink 4.4s steps(1) infinite; }
.reel.is-live .rs-char.is-active .ch-body { animation: ch-bob 2.4s ease-in-out infinite; }
.reel.is-live .rs-char.is-active .ch-shadow { animation: ch-shadow 2.4s ease-in-out infinite; }
@keyframes ch-wave { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-26deg); } }
@keyframes ch-blink { 0%, 92% { transform: scaleY(1); } 94%, 97% { transform: scaleY(.1); } }
@keyframes ch-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ch-shadow { 0%, 100% { transform: scaleX(1); opacity: .25; } 50% { transform: scaleX(.92); opacity: .18; } }
.rs-char .ch-eye { transform-box: fill-box; transform-origin: center; }

/* A wider band for the spin-it-yourself block */
.spin-band { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .spin-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.spin-stage { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; border-radius: var(--radius-lg); background: var(--ink); overflow: hidden; perspective: 1000px; }
.spin-stage::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(239, 90, 26, .45), transparent 60%);
}
.spin-stage .cube { z-index: 1; }

/* ---------- Odds and ends the two pages need ---------- */
.al-player { display: grid; gap: 16px; justify-self: center; width: 100%; max-width: 620px; }
/* Logos that sit inside a mock-up have no stage of their own */
.play-card__frame .al, .al--mini { display: block; width: auto; max-width: none; gap: 0; }
.play-site__bar .al__mark { width: 26px; }
.play-site__bar .al { flex: none; }
.play-post__art .al__logo, .play-video .al__logo { display: grid; justify-items: center; gap: 10px; }
.flow--four { }
@media (min-width: 1000px) { .flow--four { grid-template-columns: repeat(4, 1fr); } }
.flow--dark li { background: var(--ink-2); border-color: var(--ink-3); }
.flow--dark p { color: var(--muted-on-ink); }
.flow--dark .flow__num { color: var(--muted-on-ink); }
@media (min-width: 800px) { .flow--dark li:not(:last-child)::before { background: var(--ink-3); } }
.cube--big { width: clamp(140px, 26vw, 230px); }
.cube--big .cube__face { --z: calc(clamp(140px, 26vw, 230px) / 2); }
.spin-stage .rs-3d__hint { z-index: 2; }
.section--paper .spin-stage { box-shadow: 0 30px 60px -30px rgba(20, 13, 13, .5); }

/* The reel sits on the dark hero, so its controls need the dark treatment */
.reel__tab { color: var(--ink); }
.page-hero--ink .reel__play { background: #fff; color: var(--ink); }
.page-hero--ink .reel__scrub::before { background: rgba(255, 255, 255, .18); }
.page-hero--ink .reel__time { color: var(--muted-on-ink); }
.page-hero--ink .reel__knob { border-color: var(--ink-2); background: #fff; }
.page-hero--ink .reel__tab { background: transparent; border-color: var(--ink-3); color: #fff; }
.page-hero--ink .reel__tab:hover { border-color: #fff; }
.page-hero--ink .reel__tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
/* On the dark hero the screen needs its own edge, or the scene floats in the section */
.page-hero--ink .reel__screen { background: var(--ink-2); border: 1px solid var(--ink-3); }