/* Landing hero plinths v3 (J-1004-TYPING-PLINTH-GFX proposal).
   Two sibling roots inside each .land-stage, so the hero really sits BETWEEN them:
     .pp-back  z-index 0  aura, pedestal, far half of the rune ring(s), back particle canvas
     img.land-hero z-index 1 (unchanged)
     .pp-front z-index 2  near half of the rune ring(s), light on the boots, front particle canvas
   Each root is its own size container (cqw/cqh = the stage), pointer-events none, aria-hidden.
   Geometry: R = --pp-r x stage width; pedestal centre = (50%, --pp-cy). Only transform/opacity animate. */
.land-stage.pp-on { background: none; }
.land-stage.pp-on::after { display: none; }                 /* old floor ring: the pedestal replaces it */

.pp-root {
  position: absolute; inset: 0; pointer-events: none; container-type: size; overflow: visible;
  --pp-r: .46; --pp-cy: 94.5cqh; --R: calc(var(--pp-r) * 100cqw);
}
.pp-root * { pointer-events: none; }
.pp-root[data-pp="mage"] { --pp-r: .40; }
.pp-back  { z-index: 0; }
.pp-front { z-index: 2; }

.pp-aura, .pp-plinth, .pp-pool, .pp-canvas, .pp-still-sparks { position: absolute; left: 50%; top: var(--pp-cy); display: block; max-width: none; }
/* soft column + halo (alpha = brightness) */
.pp-aura   { width: calc(3.2 * var(--R)); height: calc(4.8 * var(--R)); transform: translate(-50%, -86%); opacity: .75;
             animation: pp-breathe 3.2s ease-in-out infinite alternate; will-change: opacity; }
/* pedestal: foot point at 35.48% of the image height */
.pp-plinth { width: calc(2.5 * var(--R)); height: auto; transform: translate(-50%, -35.48%); }
/* light on the top surface + up-light on the boots */
.pp-pool   { width: calc(2.4 * var(--R)); height: calc(.96 * var(--R)); transform: translate(-50%, -62%); mix-blend-mode: screen; opacity: .55;
             animation: pp-pool 3.2s ease-in-out infinite alternate; will-change: opacity; }
.pp-canvas, .pp-still-sparks { width: calc(3.2 * var(--R)); height: calc(4.8 * var(--R)); transform: translate(-50%, -86%); }

/* floating rune ring: square texture spun by the inner img, squashed flat by the wrapper.
   clip-path is in the wrapper's own (unsquashed) space, so the cut stays put while the runes turn. */
.pp-ring {
  position: absolute; left: 50%; top: calc(var(--pp-cy) - .12 * var(--R));
  width: calc(2.5 * var(--R)); height: calc(2.5 * var(--R)); margin: calc(-1.25 * var(--R)) 0 0 calc(-1.25 * var(--R));
  transform: scaleY(.17);
}
.pp-orbit { top: calc(var(--pp-cy) - .30 * var(--R)); width: calc(2.2 * var(--R)); height: calc(2.2 * var(--R)); margin: calc(-1.1 * var(--R)) 0 0 calc(-1.1 * var(--R)); }
.pp-back  .pp-ring { clip-path: inset(0 0 50% 0); }          /* far half, behind the legs */
.pp-front .pp-ring { clip-path: inset(50% 0 0 0); }          /* near half, across the boots */
.pp-ring > img { display: block; width: 100%; height: 100%; max-width: none; animation: pp-spin 60s linear infinite; will-change: transform; }
.pp-root[data-pp="mage"] .pp-ring > img { animation-duration: 40s; animation-direction: reverse; }
.pp-root[data-pp="mage"] .pp-orbit > img { animation-duration: 9s; animation-direction: normal; }
.pp-ring-glow { animation: pp-rune 2.4s ease-in-out infinite alternate; will-change: opacity; }

@keyframes pp-spin    { to { transform: rotate(360deg); } }
@keyframes pp-rune    { from { opacity: .78; } to { opacity: 1; } }
@keyframes pp-breathe { from { opacity: .6; } to { opacity: .85; } }
@keyframes pp-pool    { from { opacity: .45; } to { opacity: .7; } }

/* mage lightning: JS adds .pp-flash to both roots for ~220 ms */
.pp-flash .pp-aura { opacity: 1; animation-play-state: paused; }
.pp-flash .pp-ring-glow { opacity: 1; }

/* hover / focus on Play: a little surge */
#screen-title.land .class-card:has(> .btn:hover) .pp-aura,
#screen-title.land .class-card:has(> .btn:focus-visible) .pp-aura { opacity: 1; }

/* nothing animates while another screen is up (JS also stops the canvas loop) */
#screen-title:not(.active) .pp-root * { animation-play-state: paused; }

/* reduced motion: same pedestal, rings and glow, frozen; baked sparks instead of the canvas */
@media (prefers-reduced-motion: reduce) {
  .pp-root *, .pp-root *::before, .pp-root *::after { animation: none !important; transition: none !important; }
  .pp-canvas { display: none; }
  .pp-aura { opacity: .72; } .pp-pool { opacity: .55; }
  .pp-ring > img { transform: rotate(18deg); }
}
.pp-still-sparks { display: none; }
@media (prefers-reduced-motion: reduce) { .pp-still-sparks { display: block; } }