/* =====================================================
   Hero — 5 layered elements
   Layer 1: motive (rotating, bottom)
   Layer 2: glow (top light source)
   Layer 3: idol (the Lord's PNG)
   Layer 4: FX (Lottie + physics canvas)
   Layer 5: pedestal + interaction icons / event label
   ===================================================== */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13;
  min-height: 560px;
  overflow: visible;
  isolation: isolate;
  /* Prevent iOS from selecting content in the hero during press-and-hold */
  -webkit-user-select: none;
  user-select: none;
}

/* --- Layer 1: motive (rotates once every 20s) --- */
.hero-motive {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.hero-motive img {
  max-width: 420px;
  height: auto;
  animation: motive-rotate 20s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes motive-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Layer 2: top glow --- */
.hero-glow {
  position: absolute;
  top: -60px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.hero-glow img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: top center;
}

/* --- Layer 3: idol --- */
.hero-idol {
  position: absolute;
  top: 40px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 3;
  pointer-events: none;
}

.hero-idol img {
  width: 100%;
  max-width: 400px;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

/* Subtle golden halo during event states */
.hero-idol.state-event img {
  filter: drop-shadow(0 0 40px rgba(186, 141, 66, 0.35));
}

/* --- Layer 4: FX layer (Lottie + physics canvas) --- */
.hero-fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.fx-stick,
.fx-diya {
  position: absolute;
  top: 140px;
  left: 40px;
  right: 40px;
  height: 420px;
  pointer-events: none;
}

/* Respect the HTML `hidden` attribute on these FX containers */
.fx-stick[hidden],
.fx-diya[hidden] {
  display: none;
}

.physics-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- Layer 5: pedestal + icons / event label --- */
.hero-pedestal {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  padding: 0 20px;
}


.pedestal-base {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

/* --- Interaction row (4 circular icons) --- */
.interaction-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 5vw, 20px);
  width: 100%;
  padding: 0;
  /* Scale factor: desired display size / SVG native size (152px) */
  --icon-scale: 0.53;   /* ≈ 80px display */
}

.interaction-row[hidden] {
  display: none;
}

.interaction-icon {
  flex: 0 0 auto;
  width: clamp(68px, 18vw, 80px);
  height: clamp(68px, 18vw, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;

  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.interaction-icon img {
  width: 152px;
  height: 152px;
  transform: scale(var(--icon-scale, 0.5));
  transform-origin: center center;
  object-fit: contain;
  -webkit-touch-callout: none;
  pointer-events: none;

  /* Force Safari to paint each icon on its own compositing layer */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.interaction-icon:hover { transform: translateY(-1px); }
.interaction-icon:active { transform: scale(0.94); }


.interaction-icon.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Event label (shown during event / anasara states) --- */
.event-label {
  text-align: center;
  color: var(--color-white);
  padding: 0 24px;
}

.event-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.event-countdown {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-yellow);
  font-variant-numeric: tabular-nums;
}