/* Existing transparent source: 1678 x 937, resonator at (678, 458).
   Image, strings and rings share one canvas and one floating parent.
   Only transform/opacity animate; the alpha mask and gradients are static. */
.hero-with-pondar {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
}
.hero-pondar-live {
  --pondar-gold: #c5a059;
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 512px;
  margin: 0 auto;
  isolation: isolate;
  background: var(--paper);
}
.pondar-surface {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 512 / 340;
  border: 0;
  border-radius: 16px;
  padding: 0;
  background: transparent;
  color: inherit;
  opacity: 1;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}
.pondar-surface:disabled { opacity: 1; }
.pondar-surface:focus-visible { outline-offset: 0; }
.pondar-tilt {
  position: absolute;
  /* The transparent source has less empty space than the former JPEG.
     92% canvas width makes the actual instrument about 13% larger. */
  width: 92%;
  aspect-ratio: 1678 / 937;
  left: 4%;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}
.pondar-tilt::before {
  content: '';
  position: absolute;
  left: 8%;
  top: 81%;
  width: 45%;
  height: 7%;
  /* A short, static contact shadow replaces the long shadow in the JPEG. */
  background: radial-gradient(ellipse, rgba(40, 61, 48, .09), transparent 70%);
}
.pondar-float {
  position: absolute;
  inset: 0;
  animation: pondarFloat 11s ease-in-out infinite;
}
.pondar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pondar-light-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Reuse the actual alpha silhouette; light never reveals a rectangle. */
  -webkit-mask-image: url('/assets/hava-pondur-transparent.webp');
  mask-image: url('/assets/hava-pondur-transparent.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.pondar-shimmer {
  position: absolute;
  inset: -35% -30%;
  opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, .18) 50%, transparent 65%);
  animation: pondarShimmer 24s ease-in-out infinite;
}
.pondar-sound {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pondar-rings { fill: none; stroke: var(--pondar-gold); stroke-width: 2; }
.pondar-ring {
  transform-box: view-box;
  transform-origin: 40.405244% 48.879402%;
  opacity: 0;
}
.pondar-strings {
  fill: none;
  stroke: #fff0cb;
  stroke-width: 1.5;
  opacity: .55;
  transform-box: view-box;
  transform-origin: 55.57211% 47.0651%;
}
/* Idle is just a slow float and a rare glint. The two rings and strings
   respond once; the controller clears interaction after two seconds. */
.hero-pondar-live[data-interacting="true"] .pondar-strings {
  animation: stringVibrate .72s linear 1;
}
.hero-pondar-live[data-interacting="true"] .pondar-ring-one {
  animation: pondarRing 1.75s ease-out 1 both;
}
.hero-pondar-live[data-interacting="true"] .pondar-ring-two {
  animation: pondarRing 1.6s .25s ease-out 1 both;
}
/* Static until loaded, visible and permitted. A manual pause always wins. */
.hero-pondar-live .pondar-float,
.hero-pondar-live .pondar-shimmer,
.hero-pondar-live .pondar-ring,
.hero-pondar-live .pondar-strings { animation-play-state: paused; }
.hero-pondar-live[data-running="true"] .pondar-float,
.hero-pondar-live[data-running="true"] .pondar-shimmer,
.hero-pondar-live[data-running="true"] .pondar-ring,
.hero-pondar-live[data-running="true"] .pondar-strings { animation-play-state: running; }
.hero-pondar-live[data-image="pending"] .pondar-sound { visibility: hidden; }
.pondar-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 6%;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.pondar-caption > span { min-width: 0; }
.pondar-caption-title { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.pondar-caption-note { display: block; margin-top: 5px; font-size: .8rem; color: var(--muted); line-height: 1.6; }
.pondar-play { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 8px; border: 0; background: transparent; color: var(--muted); font-size: .75rem; }
.pondar-play:hover { background: var(--soft); }
.pondar-play-symbol { display: block; flex-shrink: 0; width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.pondar-play[aria-pressed="true"] .pondar-play-symbol { width: 0; height: 0; border: 5px solid transparent; border-right: 0; border-left: 8px solid currentColor; }
.pondar-fallback { min-height: 160px; padding: 32px 24px; font-size: 1.6rem; color: var(--green); }
@keyframes pondarFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2.5px) rotate(-.15deg); }
}
@keyframes pondarShimmer {
  0%, 84% { transform: translateX(-60%); opacity: 0; }
  88% { opacity: .5; }
  92% { opacity: .5; }
  96%, 100% { transform: translateX(60%); opacity: 0; }
}
@keyframes pondarRing {
  0% { transform: scale(.85); opacity: 0; }
  15% { opacity: .34; }
  100% { transform: scale(1.85); opacity: 0; }
}
@keyframes stringVibrate {
  0%, 100% { transform: translateY(0) rotate(0); }
  8%, 24% { transform: translateY(2px) rotate(.04deg); }
  16%, 32% { transform: translateY(-2px) rotate(-.04deg); }
  42%, 62% { transform: translateY(1px); }
  52%, 72% { transform: translateY(-1px); }
  84% { transform: translateY(.3px); }
}
@media (max-width: 900px) {
  .hero-with-pondar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-pondar-live { max-width: 430px; }
  .pondar-surface { aspect-ratio: 512 / 260; }
}
@media (max-width: 700px) {
  .hero-with-pondar { display: grid; gap: 8px; padding-bottom: 28px; }
  .pondar-surface { height: clamp(140px, 42vw, 180px); aspect-ratio: auto; }
  .pondar-tilt { width: 88%; left: 6%; }
  .pondar-caption { margin-inline: 3%; padding-top: 9px; }
  .pondar-caption-title { font-size: .65rem; }
  .pondar-caption-note { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pondar-live *, .hero-pondar-live *::before, .hero-pondar-live *::after { animation: none !important; transition: none !important; }
  .pondar-shimmer, .pondar-ring { opacity: 0; }
  .pondar-play { display: none; }
}