/* ==========================================================================
   Hero rotator — example only. Loaded after main.css by the demo pages.
   Four scenes cross-fade on a timer; three transition flavours (a / b / c).
   ========================================================================== */

.hero-rot { position: relative; width: 100%; aspect-ratio: 1 / 1; }
@media (max-width: 980px) { .hero-rot { max-width: 460px; margin-inline: auto; } }

.hero-scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .85s var(--dd-ease), transform .85s var(--dd-ease), filter .85s var(--dd-ease);
  will-change: opacity, transform;
}
.hero-scene.is-on { opacity: 1; visibility: visible; pointer-events: auto; }

/* -- flavour A: fade + gentle scale -- */
.hero-rot--a .hero-scene { transform: scale(.94); }
.hero-rot--a .hero-scene.is-on { transform: scale(1); }

/* -- flavour B: slide + reveal (direction-aware) -- */
.hero-rot--b { --dir: 1; }
[dir="rtl"] .hero-rot--b { --dir: -1; }
.hero-rot--b .hero-scene { transform: translateX(calc(var(--dir) * 7%)); clip-path: inset(0 0 12% 0 round 22px); }
.hero-rot--b .hero-scene.is-on { transform: translateX(0); clip-path: inset(0 0 0 0 round 22px); }
.hero-rot--b .hero-scene.is-out { transform: translateX(calc(var(--dir) * -7%)); }

/* -- flavour C: 3D tilt + blur -- */
.hero-rot--c { perspective: 1400px; }
.hero-rot--c .hero-scene { transform: rotateY(calc(var(--dir, 1) * -16deg)) translateZ(-70px); filter: blur(7px); transform-origin: 50% 50%; }
[dir="rtl"] .hero-rot--c { --dir: -1; }
.hero-rot--c .hero-scene.is-on { transform: none; filter: blur(0); }
.hero-rot--c .hero-scene.is-out { transform: rotateY(calc(var(--dir, 1) * 16deg)) translateZ(-70px); filter: blur(7px); }

/* -- staggered entrance for elements inside the active scene -- */
.hero-scene .st { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--dd-ease), transform .6s var(--dd-ease); }
.hero-scene.is-on .st { opacity: 1; transform: none; }
.hero-scene.is-on .st:nth-child(1) { transition-delay: .10s; }
.hero-scene.is-on .st:nth-child(2) { transition-delay: .18s; }
.hero-scene.is-on .st:nth-child(3) { transition-delay: .26s; }
.hero-scene.is-on .st:nth-child(4) { transition-delay: .34s; }
.hero-scene.is-on .st:nth-child(5) { transition-delay: .42s; }
.hero-scene.is-on .st:nth-child(6) { transition-delay: .50s; }

/* -- scene chrome -- */
.scene-cap {
  position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.94);
  border: 1px solid var(--dd-line); border-radius: var(--dd-r-pill); padding: 7px 15px;
  box-shadow: var(--dd-sh-2); backdrop-filter: blur(8px); white-space: nowrap;
}
/* Centred with the standalone `translate` property, not `transform`: the .st entrance
   animation owns `transform` and its resting `transform:none` would cancel the centring. */
[dir="rtl"] .scene-cap { translate: 50% 0; }
.scene-cap b { font-family: var(--dd-font-head); font-size: 12px; font-weight: 700; color: var(--dd-ink); }
.scene-cap svg { width: 15px; height: 15px; color: var(--dd-teal-700); }

.scene-card {
  position: absolute; background: #fff; border: 1px solid var(--dd-line); border-radius: 16px;
  padding: 14px; box-shadow: 0 20px 44px -20px rgba(10,31,60,.28);
}
.scene-card h4 { font-family: var(--dd-font-head); font-size: 12.5px; font-weight: 700; color: var(--dd-ink); margin: 0; }
.scene-kpi { background: var(--dd-surface-2); border-radius: 10px; padding: 9px 11px; }
.scene-kpi span { display: block; font-family: var(--dd-font-body); font-size: 10px; color: var(--dd-muted); }
.scene-kpi b { display: block; font-family: var(--dd-font-head); font-size: 18px; font-weight: 800; color: var(--dd-navy-800); line-height: 1.3; }
.scene-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--dd-line-soft); }
.scene-row span { font-family: var(--dd-font-body); font-size: 11px; color: var(--dd-ink-2); }
.scene-row b { font-family: var(--dd-font-head); font-size: 10px; font-weight: 700; color: var(--dd-success); background: #E8F7EF; border-radius: 99px; padding: 2px 9px; }

/* -- sector ring -- */
/* Centred on their anchor point without a transform: the .st entrance animation
   owns `transform`, and its `transform:none` at rest used to cancel any centring
   here. A zero-width grid box straddles the anchor identically in LTR and RTL. */
.ring-item { position: absolute; width: 110px; margin-inline-start: -55px; margin-block-start: -27.6px;
  display: grid; justify-items: center; gap: 4px; }
.ring-item i { width: 38px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid var(--dd-line);
  display: grid; place-items: center; box-shadow: 0 10px 20px -12px rgba(10,31,60,.3); }
.ring-item i svg { width: 17px; height: 17px; color: var(--dd-teal-600); }
.ring-item b { font-family: var(--dd-font-head); font-size: 9.5px; font-weight: 600; color: var(--dd-muted); white-space: nowrap; }
.ring-core { position: absolute; inset-block-start: 53%; inset-inline: 0; margin-block-start: -32px; text-align: center; }
.ring-core b { display: block; font-family: var(--dd-font-head); font-size: 40px; font-weight: 800; color: var(--dd-navy-800); line-height: 1; }
.ring-core span { font-family: var(--dd-font-body); font-size: 12px; color: var(--dd-muted); }

/* -- nav: unlabelled progress lines -- */
.hero-rot__nav { display: flex; justify-content: center; align-items: center; gap: 10px; margin-block-start: var(--dd-5); }
.hero-rot__btn {
  position: relative; width: 26px; height: 5px; padding: 0; border: 0; border-radius: 99px;
  background: var(--dd-line); cursor: pointer; overflow: hidden;
  transition: width .45s var(--dd-ease), background .3s var(--dd-ease);
}
.hero-rot__btn::before { content: ""; position: absolute; inset: -18px -5px; }  /* comfortable tap target */
.hero-rot__btn:hover { background: var(--dd-teal-300); }
.hero-rot__btn:focus-visible { outline: 2px solid var(--dd-teal-500); outline-offset: 5px; }
.hero-rot__btn[aria-selected="true"] { width: 54px; background: var(--dd-teal-100); }
.hero-rot__btn i { position: absolute; inset-block: 0; inset-inline-start: 0; display: block; width: 0; border-radius: 99px; background: var(--dd-teal-500); }
.hero-rot__btn[aria-selected="true"] i { animation: rot-fill var(--rot-dur, 10000ms) linear forwards; }
.hero-rot.is-paused .hero-rot__btn i { animation-play-state: paused; }
@keyframes rot-fill { from { width: 0 } to { width: 100% } }

@media (prefers-reduced-motion: reduce) {
  .hero-scene { transition: opacity .2s linear; transform: none !important; filter: none !important; clip-path: none !important; }
  .hero-scene .st { transition: none; opacity: 1; transform: none; }
  .hero-rot__btn i { animation: none !important; }
}