/* scenes/regards.css -- js/motion/scenes/regards.js. Overlays are created by the JS:
   small, pointer-events:none (bar the lake button), transform/opacity only. Anything
   hidden before its entrance is scoped under html.motion (reduced motion = PSD frame). */

.rg-drop, .rg-veil, .rg-spout, .rg-spark, .rg-glint, .rg-flock, .rg-ring, .rg-diya, .rg-hint {
  position: absolute;
  pointer-events: none;
}
.rg-drop, .rg-veil, .rg-spark, .rg-glint, .rg-ring { opacity: 0; }

/* ---------------------------------------------------------------- fountain */
/* a droplet: white bead with a cool rim, so it reads on the cream stone and the hedge */
.rg-drop {
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 255, 1) 0%, rgba(236, 248, 255, 1) 40%, rgba(112, 160, 196, 0.85) 72%, rgba(112, 160, 196, 0) 100%);
}
.rg-veil {
  border-radius: 999px;
  transform-origin: 50% 0%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 45%, rgba(196, 226, 246, 0.9) 70%, rgba(196, 226, 246, 0));
  box-shadow: 0 0 calc(3 * var(--u)) rgba(120, 170, 205, 0.55);
}
.rg-spout {
  border-radius: 50% 50% 40% 40%;
  transform-origin: 50% 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(240, 249, 255, 0.85) 55%, rgba(240, 249, 255, 0));
  box-shadow: 0 0 calc(4 * var(--u)) rgba(112, 160, 196, 0.6);
}
.rg-spark {
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, 0.95) 50%, transparent 56%),
    linear-gradient(0deg, transparent 44%, rgba(255, 255, 255, 0.95) 50%, transparent 56%),
    radial-gradient(circle closest-side, rgba(255, 255, 255, 1) 0%, rgba(214, 238, 255, 0.6) 35%, rgba(214, 238, 255, 0) 100%);
}

/* ---------------------------------------------------------------- lake */
.rg-glint {
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, 1) 0%, rgba(236, 246, 255, 0.75) 40%, rgba(226, 240, 255, 0) 100%);
}

/* ---------------------------------------------------------------- birds */
.rg-flock.is-left .rg-bird { scale: -1 1; }
.rg-bird {
  position: absolute;
  display: block;
  transform-origin: 50% 60%;
  animation: rg-flap 480ms ease-in-out infinite alternate;
}
.rg-bird svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #3f4b3c;
}
/* wings up "v" <-> wings down: eased so the bird dwells at both ends of the stroke */
@keyframes rg-flap {
  from { transform: scaleY(1); }
  to   { transform: translateY(18%) scaleY(-0.6); }
}

/* ---------------------------------------------------------------- diya on the lake */
.rg-diya img { position: relative; display: block; width: 100%; height: 100%; }
/* warm glow round the flame (flame sits at ~69% / 22% of diya.webp) */
.rg-diya__flame {
  position: absolute;
  left: 46%;
  top: -18%;
  width: 46%;
  height: 64%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 246, 200, 0.9) 0%, rgba(255, 200, 100, 0.45) 40%, rgba(255, 170, 70, 0) 100%);
  animation: rg-flicker 1.3s ease-in-out infinite alternate;
}
/* the lamp's warm reflection on the water */
.rg-diya__refl {
  position: absolute;
  left: 8%;
  top: 72%;
  width: 84%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 214, 130, 0.55) 0%, rgba(255, 200, 110, 0.22) 50%, rgba(255, 200, 110, 0) 100%);
  animation: rg-flicker 1.7s ease-in-out infinite alternate-reverse;
}
@keyframes rg-flicker {
  from { opacity: 1; transform: scale(1); }
  45%  { opacity: 0.7; transform: scale(0.93, 0.97); }
  to   { opacity: 0.95; transform: scale(1.05); }
}
.rg-ring {
  border-radius: 50%;
  border: calc(2.4 * var(--u)) solid rgba(240, 248, 255, 0.85);
  box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 255, 255, 0.4);
}

/* ---------------------------------------------------------------- lake button + hint */
.rg-lake-btn {
  position: absolute;
  z-index: 30;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(24 * var(--u));
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rg-lake-btn:focus-visible { outline: 3px solid #b8476d; outline-offset: -4px; }

.rg-hint {
  z-index: 30;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 1.05em 0.55em;
  border-radius: 999px;
  border: 1px solid rgba(190, 150, 86, 0.5);
  background: rgba(255, 252, 244, 0.92);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(60, 70, 50, 0.14);
  color: #2f4a2a;
  font: max(calc(30 * var(--u)), 13px) / 1.15 "Amiri", Georgia, serif;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.motion .rg-hint:not(.is-on) { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
.rg-hint.is-gone { opacity: 0; }
.rg-hint__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #fff6d8 0%, #f2b85a 55%, rgba(242, 184, 90, 0) 100%);
  box-shadow: 0 0 0.45em rgba(242, 184, 90, 0.8);
  animation: rg-breathe 1.8s ease-in-out infinite alternate;
}
.rg-hint__arrow {
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  opacity: 0.7;
}
@keyframes rg-breathe { from { opacity: 0.55; } to { opacity: 1; } }

/* off screen: every CSS loop rests */
.scene--regards.rg-away .rg-bird,
.scene--regards.rg-away .rg-diya__flame,
.scene--regards.rg-away .rg-diya__refl,
.scene--regards.rg-away .rg-hint__dot { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rg-bird, .rg-diya__flame, .rg-diya__refl, .rg-hint__dot { animation: none; }
  .rg-hint { transition: none; }
}