/* Generated by scripts/pyramid.py — the live Prism Pyramid strip on heygen-home-v4.html.
   Edit the script, not this file. */

.pyr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the strip: seven small stages in a row (scrolls sideways on phones) ---- */
.framed.live { content-visibility: auto; contain-intrinsic-size: auto 480px; padding: 40px 32px; }
.strip { display: flex; gap: 28px; width: 100%; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; color: #fff; }
.step { position: relative; flex: 1 0 150px; scroll-snap-align: center; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; font-size: 13px; line-height: 1.4; }
.step + .step::before { content: "\2192"; position: absolute; left: -22px; top: calc(50% - 60px); color: rgb(255 255 255 / .35); font-size: 16px; }
.step b { font-weight: 600; font-size: 15px; margin-top: 10px; }
.step span { color: rgb(255 255 255 / .65); }
.cell { position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: rgb(255 255 255 / .05); }
.step.frost .cell { cursor: crosshair; }
.step.frost .cell:hover :is(.pyr, .pyr-tilt, .pyr-spin) { animation-play-state: paused; }
.step.frost .cell:hover .pyr { filter: blur(18px); }

/* ---- the mark: orbit wrappers → perspective scene → tilt → spin → 4 wings → folded faces → sheets ---- */
.pyr { position: absolute; width: var(--size); height: var(--size); left: calc(50% - var(--size) / 2); top: calc(50% - var(--size) / 2);
  pointer-events: none; user-select: none; will-change: transform; transition: filter .3s ease; }
.pyr-y { width: 100%; height: 100%; will-change: transform; }
.pyr-scene { width: 100%; height: 100%; perspective: 1100px; }
/* preserve-3d must run unbroken from .pyr-tilt to the sheets: no overflow, filter or opacity on any of these */
.pyr-tilt { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--tilt)); }
.pyr-tilt.sway { animation: pyr-sway var(--sway-t) ease-in-out infinite alternate; }
.pyr-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; animation: pyr-turn var(--spin-t) linear infinite; }
.wing { position: absolute; inset: 0; transform-style: preserve-3d; }
.wing-w { transform: rotateZ(90deg); } .wing-n { transform: rotateZ(180deg); } .wing-e { transform: rotateZ(270deg); }
.face { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; transform-origin: 50% 100%; transform: rotateX(calc(-1 * var(--fold))); transform-style: preserve-3d; }
.face svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.flat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* the tile ellipse: two nested alternate tracks, Y a quarter period behind, so x ≈ cos and y ≈ sin */
.pyr.ellipse { animation: orb-x var(--lap) ease-in-out infinite alternate; }
.pyr.ellipse > .pyr-y { animation: orb-y var(--lap) ease-in-out infinite alternate; animation-delay: calc(var(--lap) / -2); }
@keyframes pyr-turn { to { transform: rotateZ(360deg); } }
@keyframes pyr-sway { from { transform: rotateX(var(--tilt-lo)); } to { transform: rotateX(var(--tilt-hi)); } }
@keyframes orb-x { from { transform: translateX(calc(-1 * var(--rx))); } to { transform: translateX(var(--rx)); } }
@keyframes orb-y { from { transform: translateY(calc(-1 * var(--ry))); } to { transform: translateY(var(--ry)); } }

@media (max-width: 900px) {
  .framed.live { padding: 24px 16px; }
  .step { flex-basis: min(240px, 68vw); }
}

@media (prefers-reduced-motion: reduce) {
  .pyr, .pyr-y, .pyr-tilt, .pyr-spin { animation: none; }
  .pyr-spin { transform: rotateZ(45deg); }
}