/* Page-scoped layer for /home only. Auto-loaded by SitePage AFTER site.css.
   Purpose: place the rotating natal-wheel as a CENTERED, FULL-VIEW foreground
   feature inside the .path-card.feature astrology card ("kelias" section).
   Does NOT touch shared site.css or any other wheel. Delete this file + the
   home.html mount line to fully revert. */

.path-card.feature{
  /* Size knob: change ONLY this to zoom. 90% = current.
     Zoom in  10% -> 100%   |   Reduce 10% -> 80%. */
  --card-wheel-size: 90%;
}

/* Centered in the card, full circle visible (no mask, nothing clipped). */
.path-card.feature .card-wheel{
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-wheel-size);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);   /* true center of the card */
  z-index: 0;                          /* behind the text, above the background */
  opacity: .6;
  pointer-events: none;
}
.path-card.feature .card-wheel .natal-svg{
  width: 100%; height: 100%; display: block;
  overflow: visible;                   /* show the full wheel, never crop */
}

/* Spin 20% FASTER — scoped to THIS card's wheel only (durations = site.css / 1.2).
   We override animation-DURATION only (not animation-name/direction), so:
   - other wheels on every page keep their original speed (shared site.css untouched);
   - the .nw-aspect layer keeps its reverse direction;
   - prefers-reduced-motion still wins: site.css sets animation:none (name:none),
     which we don't touch, so the wheel stays fully halted for reduced motion. */
.path-card.feature .card-wheel .nw-ticks  { animation-duration: 200s; }
.path-card.feature .card-wheel .nw-aspect { animation-duration: 300s; }
.path-card.feature .card-wheel .nw-orbits { animation-duration: 250s; }
.path-card.feature .card-wheel .nw-zodiac,
.path-card.feature .card-wheel .nw-axis   { animation-duration: 500s; }

/* Keep the card's real content crisp and readable on top of the wheel. */
.path-card.feature > .path-glyph,
.path-card.feature > h3,
.path-card.feature > p,
.path-card.feature > a{
  position: relative;
  z-index: 1;
}

/* Reduced motion: the engine already stops .nw-* rotation via site.css.
   Nothing extra needed here. */