/* The cinematic start section. All additions are scoped to this hero. */
:root {
  --cinema-height: clamp(500px, calc(100svh - 162px), 680px);
  --cinema-title-size: clamp(52px, 5.7vw, 82px);
  --cinema-title-track: -0.055em;
  --cinema-title-leading: 1.02;
  --cinema-copy-width: 470px;
  --cinema-body-width: 32ch;
  --cinema-art-height: clamp(340px, 34vw, 470px);
  --cinema-art-width: 76%;
  --cinema-mark-width: 330px;
  --cinema-mark-height: 385px;
  --cinema-mark-color: rgba(43, 98, 196, 0.2);
  --cinema-mark-floor: 0.36;
  --cinema-object-bottom: 28px;
  --cinema-float-height: -12px;
  --cinema-vial-turn: -9deg;
  --cinema-vial-lean: -5deg;
  --cinema-perspective: 1100px;
  --cinema-depth: 40px;
  --cinema-away: 54px;
  --cinema-away-turn: 12deg;
  --cinema-away-scale: 0.94;
  --cinema-z-back: 0;
  --cinema-z-floor: 1;
  --cinema-z-object: 2;
  --cinema-enter-time: 900ms;
  --cinema-swap-time: 800ms;
  --cinema-float-time: 7s;
  --cinema-lag-copy: 100ms;
  --cinema-lag-body: 240ms;
  --cinema-lag-action: 360ms;
  --cinema-lag-art: 180ms;
  --cinema-enter-rise: 22px;
  --cinema-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
  --cinema-tilt-x: 0deg;
  --cinema-tilt-y: 0deg;
}
.stage.cinema { min-height: var(--cinema-height); padding-block: var(--s-6); overflow: hidden; background-color: var(--c-bg); }
.cinema-layout { display: flex; align-items: center; gap: var(--s-8); }
.cinema-copy { flex: 0 1 var(--cinema-copy-width); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-6); min-width: var(--s-0); }
.cinema-title { font-family: var(--font-display); font-size: var(--cinema-title-size); line-height: var(--cinema-title-leading); letter-spacing: var(--cinema-title-track); color: var(--c-text); text-wrap: balance; }
.cinema-description { max-width: var(--cinema-body-width); font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--c-text-2); }
.cinema-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.cinema-actions .button-primary { clip-path: none; }
.cinema-actions .button-quiet { padding-inline: var(--s-3); }
.cinema-showcase { flex: 1 1 var(--w-narrow); min-width: var(--s-0); }
.cinema-scene { position: relative; height: var(--cinema-art-height); perspective: var(--cinema-perspective); }
.cinema-scene .dust { --c-dust: var(--cinema-mark-color); --w-dust: var(--cinema-mark-width); --h-dust: var(--cinema-mark-height); --op-dust-out: var(--cinema-mark-floor); z-index: var(--cinema-z-back); pointer-events: none; }
.cinema-scene .dust-bit { animation: dust-drift var(--t-dust) var(--ease-dust) infinite; animation-play-state: paused; }
.cinema-orbit { position: absolute; inset: var(--s-0); transform-style: preserve-3d; transform: rotateX(var(--cinema-tilt-x)) rotateY(var(--cinema-tilt-y)); transition: transform var(--t-mid) var(--cinema-ease); }
.cinema-object { position: absolute; inset: var(--s-0); bottom: var(--cinema-object-bottom); display: flex; align-items: center; justify-content: center; margin: var(--s-0); opacity: 0; pointer-events: none; transform: translateX(var(--cinema-away)) rotateY(var(--cinema-away-turn)) scale(var(--cinema-away-scale)); transition: opacity var(--cinema-swap-time) var(--cinema-ease), transform var(--cinema-swap-time) var(--cinema-ease); z-index: var(--cinema-z-object); }
.cinema-orbit { mix-blend-mode: multiply; }
.cinema-object[data-current="true"] { opacity: 1; transform: translateX(var(--s-0)) rotateY(var(--s-0)) scale(1); }
.cinema-float { width: var(--cinema-art-width); animation: cinema-float var(--cinema-float-time) var(--cinema-ease) infinite; animation-play-state: paused; }
.cinema-image { width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; transform: rotateY(var(--cinema-vial-turn)) rotateZ(var(--cinema-vial-lean)) translateZ(var(--cinema-depth)); }
.cinema-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); border-top: var(--bw-1) solid var(--c-line); }
.cinema-product { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); min-height: var(--h-tap); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-text); text-decoration: none; }
.cinema-product:hover { color: var(--c-action); }
.cinema-size { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--c-text-3); }
.cinema-controls { display: flex; flex: none; gap: var(--s-2); }
.cinema-controls .icon-button { background-color: var(--c-surface); color: var(--c-action); }
.cinema-controls .icon-button:hover { background-color: var(--c-sunken); transform: translateY(calc(var(--bw-1) * -1)); }
.cinema-controls .icon-button:active { transform: translateY(var(--bw-1)); }
.cinema-controls .cinema-play { display: none; }
.cinema-controls [aria-pressed="true"] .cinema-pause { display: none; }
.cinema-controls [aria-pressed="true"] .cinema-play { display: block; }
.cinema[data-cinema-running="true"] .dust-bit,
.cinema[data-cinema-running="true"] .cinema-float { animation-play-state: running; }
.cinema.stage-live .cinema-title { animation: cinema-enter var(--cinema-enter-time) var(--cinema-ease) var(--cinema-lag-copy) both; }
.cinema.stage-live .cinema-description { animation: cinema-enter var(--cinema-enter-time) var(--cinema-ease) var(--cinema-lag-body) both; }
.cinema.stage-live .cinema-actions { animation: cinema-enter var(--cinema-enter-time) var(--cinema-ease) var(--cinema-lag-action) both; }
.cinema.stage-live .cinema-showcase { animation: cinema-enter var(--cinema-enter-time) var(--cinema-ease) var(--cinema-lag-art) both; }
@keyframes cinema-enter { from { opacity: 0; transform: translateY(var(--cinema-enter-rise)); } to { opacity: 1; transform: translateY(var(--s-0)); } }
@keyframes cinema-float { 0%,100% { transform: translateY(var(--s-0)); } 50% { transform: translateY(var(--cinema-float-height)); } }
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --cinema-title-size: 54px; --cinema-copy-width: 360px; --cinema-art-height: 360px; --cinema-mark-width: 270px; --cinema-mark-height: 315px; }
  .cinema-layout { gap: var(--s-5); }
}
@media (max-width: 767px) {
  :root { --cinema-height: auto; --cinema-title-size: clamp(42px, 11.8vw, 60px); --cinema-art-height: 270px; --cinema-mark-width: 220px; --cinema-mark-height: 256px; --cinema-art-width: 86%; --cinema-plinth-height: 72px; --cinema-object-bottom: 12px; --cinema-vial-lean: -4deg; }
  .stage.cinema { padding-block: var(--s-6) var(--s-3); }
  .cinema-layout { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .cinema-copy { flex-basis: auto; gap: var(--s-4); }
  .cinema-description { font-size: var(--fs-base); max-width: var(--cinema-body-width); }
  .cinema-showcase { flex-basis: auto; }
  .cinema-actions .button-primary { padding-inline: var(--s-4); }
  .cinema-actions .button-quiet { padding-inline: var(--s-2); font-size: var(--fs-sm); }
  .cinema-caption { padding-block: var(--s-2); gap: var(--s-2); }
  .cinema-controls { gap: var(--s-1); }
  .cinema-product { gap: var(--s-2); }
  .cinema-product .icon-glyph { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema.stage-live .cinema-title, .cinema.stage-live .cinema-description,
  .cinema.stage-live .cinema-actions, .cinema.stage-live .cinema-showcase,
  .cinema-scene .dust-bit, .cinema-float { animation: none; }
  .cinema-object, .cinema-orbit { transition: none; }
  .cinema-image, .cinema-orbit { transform: none; }
}