/*
 * Stand scenes — the animation of the tilt / swivel / rotation diagrams.
 *
 * The drawings themselves come from includes/product-scene.php
 * (udtheme_stand_scene_*) and are used in two places: the product page and the
 * range showcase. Until now these rules were copied into css/ud-product.css
 * and into tpl-showcase.php, which meant a pivot had to be moved twice and one
 * of the two copies quietly drifted. They live here once instead.
 *
 * Both roots are named on every rule on purpose. The theme's own requirement is
 * that nothing sits at the top level — a bare `.tiltPivot` would animate any
 * element of that name anywhere on the site — so the selectors stay anchored to
 * .ud-product-page and .ud-showcase, exactly as they were when duplicated.
 *
 * Loaded by ud_enqueue_product_layer() and ud_enqueue_showcase().
 *
 * ---------------------------------------------------------------------------
 * Angle signs — read before touching a scene.
 *
 * The spec convention is the industry one: +N tilts the screen back, -N tilts
 * it forward. CSS rotate() counts clockwise, i.e. the other way round, so the
 * PHP that prints the custom properties negates them:
 *   --ang-from = -(spec_from), --ang-to = -(spec_to)
 * A scene reading `+5°~-10°` therefore arrives here as
 * `--ang-from:-5deg; --ang-to:10deg`. That is a deliberate conversion, not a
 * bug — do not "fix" the signs here or in the SVG scenes.
 *
 * --swiv and --rot are magnitudes and are not negated.
 * ---------------------------------------------------------------------------
 */

@keyframes ud-tilt{
  0%,14%{transform:rotate(var(--ang-from))}
  44%,58%{transform:rotate(var(--ang-to))}
  86%,100%{transform:rotate(var(--ang-from))}
}
@keyframes ud-rotate{
  0%,12%{transform:rotate(0deg)}
  38%,62%{transform:rotate(var(--rot))}
  88%,100%{transform:rotate(0deg)}
}
@keyframes ud-swivel{
  0%,12%{transform:rotate(calc(var(--swiv) * -1))}
  44%,56%{transform:rotate(var(--swiv))}
  88%,100%{transform:rotate(calc(var(--swiv) * -1))}
}

/* transform-box:view-box makes transform-origin resolve against the SVG's own
   coordinate system rather than the element's bounding box, which is what lets
   the origins below be written in viewBox units. */
.ud-product-page .tiltPivot,.ud-product-page .rotPivot,.ud-product-page .swivPivot,
.ud-showcase .tiltPivot,.ud-showcase .rotPivot,.ud-showcase .swivPivot{transform-box:view-box}

.ud-product-page .tiltPivot,
.ud-showcase .tiltPivot{animation:ud-tilt 6s cubic-bezier(.5,0,.5,1) infinite}
.ud-product-page .rotPivot,
.ud-showcase .rotPivot{animation:ud-rotate 6.5s cubic-bezier(.5,0,.5,1) infinite}
.ud-product-page .swivPivot,
.ud-showcase .swivPivot{animation:ud-swivel 6.5s cubic-bezier(.5,0,.5,1) infinite;transform-origin:150px 175px}

/* transform-origin is in viewBox units and matches the pivot dot the diagram
   draws, so the panel turns about exactly the point the angle rays leave from.
   These are the numbers that used to live in two files. */
.ud-product-page .stand-svg--floor .tiltPivot,
.ud-showcase .stand-svg--floor .tiltPivot{transform-origin:190px 108px}
.ud-product-page .stand-svg--wall .tiltPivot,
.ud-showcase .stand-svg--wall .tiltPivot{transform-origin:136px 158px}
.ud-product-page .stand-svg--rot .rotPivot,
.ud-showcase .stand-svg--rot .rotPivot{transform-origin:150px 118px}
.ud-product-page .stand-svg--swiv .swivPivot,
.ud-showcase .stand-svg--swiv .swivPivot{transform-origin:150px 175px}

/* The stand freezes at rest — the diagram still reads as a range. */
@media(prefers-reduced-motion:reduce){
  .ud-product-page .tiltPivot,.ud-product-page .rotPivot,.ud-product-page .swivPivot,
  .ud-showcase .tiltPivot,.ud-showcase .rotPivot,.ud-showcase .swivPivot{animation:none}
}