/* One coordinate system keeps the cards attached to the photographed palm. */
.hero:has(.reh-scene) { grid-template-columns: .95fr 1.15fr; gap: 12px; max-width: none; margin-inline: 0; padding-inline: max(32px, calc((100% - 1376px) / 2)); }
.reh-scene { position: relative; width: 100%; aspect-ratio: 48 / 35; container-type: inline-size; isolation: isolate; align-self: center; }
.reh-portrait { display: block; width: 100%; height: auto; position: relative; z-index: 1; pointer-events: none; user-select: none; mask-image: linear-gradient(to bottom, #000 89%, transparent 99%); }
.reh-scene .hero-stage { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 3; perspective: 1000px; pointer-events: none; }
.reh-scene .arc-slot { inset: auto; left: 29%; top: 46.971429%; width: 0; height: 0; }
.reh-scene .arc-card { left: 0; top: 0; width: 14cqw; height: 21cqw; margin: -10.5cqw 0 0 -7cqw; border-radius: 1.8cqw; background: linear-gradient(145deg,rgba(255,255,255,.12),rgba(169,123,255,.08) 70%),rgba(29,17,43,.96); gap: 12px; }
.reh-scene .arc-card svg { width: 4cqw; height: 4cqw; }
.reh-scene .arc-card .arc-label { font-size: 12px; letter-spacing: .055em; padding: 0; }
.reh-scene .arc-slot[data-pos="left"] { transform: translate(-8.4cqw,1.2cqw) rotate(-12deg); }
.reh-scene .arc-slot[data-pos="center"] { transform: translate(0,-1.7cqw); }
.reh-scene .arc-slot[data-pos="right"] { transform: translate(8.5cqw,1.5cqw) rotate(13deg); }
.reh-scene .arc-bob { animation-name: reh-bob; }
.reh-scene .hero-stage-ring { left: 29%; top: 46.971429%; width: 36cqw; height: 36cqw; margin: -18cqw 0 0 -18cqw; opacity: .25; }
.palm-glow { position: absolute; z-index: 2; left: 29%; top: 70.742857%; width: 22%; height: 11%; transform: translate(-50%,-50%); background: radial-gradient(ellipse,rgba(225,191,118,.45),rgba(180,126,255,.22) 40%,transparent 72%); filter: blur(5px); pointer-events: none; animation: palm-pulse 4s ease-in-out infinite; }
.levitation-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.levitation-dust i { position: absolute; left: calc(29% + var(--x)); top: 70.742857%; width: 2px; height: 2px; border-radius: 50%; background: #eacf99; box-shadow: 0 0 8px #e8caaa; opacity: 0; animation: reh-rise var(--duration) var(--delay) infinite ease-out; }
.reh-scene.is-changing .palm-glow { filter: blur(4px) brightness(1.65); }
.reh-scene .arc-card { touch-action: manipulation; }
.reh-scene .arc-card:focus-visible { outline-offset: 5px; }
@keyframes reh-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1cqw); } }
@keyframes palm-pulse { 50% { opacity: .55; transform: translate(-50%,-50%) scale(.85); } }
@keyframes reh-rise { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--drift),-14cqw); } }
@media(max-width:899px) {
  .hero:has(.reh-scene) { grid-template-columns: 1fr; padding: 30px 20px 50px; gap: 12px; }
  .reh-scene { order: -1; max-width: 650px; justify-self: center; }
  .hero-content { max-width: 650px; justify-self: center; }
  .reh-scene .arc-card { width: 16cqw; height: 24cqw; margin: -12cqw 0 0 -8cqw; gap: 8px; }
  .reh-scene .arc-slot[data-pos="left"] { transform: translate(-10cqw,1.2cqw) rotate(-12deg); }
  .reh-scene .arc-slot[data-pos="right"] { transform: translate(10cqw,1.5cqw) rotate(13deg); }
  .reh-scene .arc-card svg { width: 5cqw; height: 5cqw; }
  .reh-scene .arc-card .arc-label { font-size: clamp(8px,2cqw,12px); }
}
@media(prefers-reduced-motion:reduce) {
  .reh-scene *, .reh-scene *::after { animation: none !important; transition: none !important; }
  .levitation-dust { display: none; }
}