/* scenes/haldi-mayra.css -- styles for js/motion/scenes/haldi-mayra.js (haldi (PDF p3) + mayra (PDF p5)).
   OWNER: the haldi-mayra motion agent (edit only this file + its JS).
   Everything here is either armed under html.motion or styles nodes the JS creates only
   when motion runs, so reduced motion / no JS shows the exact PSD frame. */

/* Taps fire colour shots / blessings: keep scroll + pinch, drop double-tap zoom. */
html.motion [data-scene="haldi"] .stage,
html.motion [data-scene="mayra"] .stage { touch-action: manipulation; }

/* ---------------------------------------------------------------- armed entrances */
html.motion .scene:not(.is-entered) .hm-arm { opacity: 0; }

/* ---------------------------------------------------------------- layer windows
   A small box onto the layer's own image (overflow clips it to its rect), so a swinging
   strand is its own small composited node, never a layer-sized one. */
.hm-pc { position: absolute; overflow: hidden; pointer-events: none; }
.hm-pc--open { overflow: visible; }
.ly .hm-pc > img { position: absolute; max-width: none; }

/* ---------------------------------------------------------------- overlays */
.hm-canvas { position: absolute; left: 0; width: 100%; pointer-events: none; }
.hm-fx { position: absolute; inset: 0; pointer-events: none; }
.hm-petal {
  position: absolute; height: auto; opacity: 0; pointer-events: none;
  user-select: none; -webkit-user-drag: none;
}

/* Soft light that blooms behind the couple / family; opacity + transform only. */
.hm-glow {
  position: absolute; pointer-events: none; border-radius: 50%; opacity: 0;
}
.hm-glow--haldi {
  background: radial-gradient(circle closest-side,
    rgba(255, 228, 160, 0.7) 0%, rgba(255, 196, 150, 0.36) 42%,
    rgba(255, 170, 170, 0.12) 70%, rgba(255, 170, 170, 0) 100%);
}
.hm-glow--mayra {
  background: radial-gradient(circle closest-side,
    rgba(255, 232, 160, 0.95) 0%, rgba(255, 200, 96, 0.55) 38%,
    rgba(236, 126, 62, 0.16) 70%, rgba(236, 126, 62, 0) 100%);
}

/* Thaal / gift glints: a tiny four-point star that twinkles now and then. */
.hm-glint {
  position: absolute; width: calc(54 * var(--u)); height: calc(54 * var(--u));
  margin: calc(-27 * var(--u)) 0 0 calc(-27 * var(--u));
  pointer-events: none; opacity: 0;
}
.hm-glint::before, .hm-glint::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  background: radial-gradient(closest-side, #fffdf4 0%, rgba(255, 226, 150, 0.9) 35%, rgba(255, 210, 120, 0) 100%);
}
.hm-glint::before { width: 100%; height: 14%; transform: translate(-50%, -50%); }
.hm-glint::after { width: 14%; height: 100%; transform: translate(-50%, -50%); }
.hm-glint.is-on { animation: hm-glint 4.2s ease-in-out var(--d, 0s) infinite; }
.hm-away .hm-glint.is-on { animation-play-state: paused; }
@keyframes hm-glint {
  0%, 62%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  72% { opacity: 1; transform: scale(1) rotate(25deg); }
  84% { opacity: 0.35; transform: scale(0.55) rotate(45deg); }
}

/* ---------------------------------------------------------------- CTA pill
   hardik-nandini's pulsing chip (frosted, tap ripple), re-coloured per event. Small
   node: backdrop-filter is fine here. Sits at the bottom centre of the slide, on the
   grass / floor -- clear of every line of text and of the faces. */
.hm-cta {
  position: absolute; left: 50%; bottom: calc(26 * var(--u)); z-index: 60;
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px; margin: 0; padding: 0.45em 1.05em 0.45em 0.8em;
  border-radius: 999px;
  font-family: "Quattrocento", Georgia, serif;
  font-size: clamp(13px, calc(36 * var(--u)), 17px);
  letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap;
  cursor: pointer; touch-action: manipulation;
  -webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.scene.is-entered .hm-cta {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition-delay: 2.6s;
  animation: hm-cta-float 2.8s ease-in-out 3.4s infinite;
}
.hm-away .hm-cta, .hm-away .hm-cta__ring { animation-play-state: paused; }
.hm-cta__text { text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7); }
.hm-cta__tap { position: relative; flex: none; width: 1.5em; height: 1.5em; }
.hm-cta__dot {
  position: absolute; left: 50%; top: 50%; width: 0.52em; height: 0.52em;
  margin: -0.26em 0 0 -0.26em; border-radius: 50%;
}
.hm-cta__ring {
  position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em;
  margin: -0.75em 0 0 -0.75em; border-radius: 50%; border: 1.5px solid currentColor;
  transform: scale(0.34); opacity: 0;
}
.scene.is-entered .hm-cta__ring { animation: hm-tap-ripple 2.6s ease-out 3s infinite; }
.scene.is-entered .hm-cta__ring:nth-child(2) { animation-delay: 4.3s; }

/* Haldi: turmeric-cream chip, gulabi text, a marigold dot with a pink halo. */
.hm-cta--haldi {
  color: #ac3452;
  border: 1px solid rgba(240, 178, 40, 0.75);
  background: linear-gradient(180deg, rgba(255, 250, 226, 0.94), rgba(255, 238, 204, 0.9));
  box-shadow: 0 6px 18px rgba(196, 96, 40, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.hm-cta--haldi .hm-cta__dot {
  background: radial-gradient(circle, #ffd84a 0 45%, #f39a1e 70%, #e8508a 100%);
  box-shadow: 0 0 7px rgba(255, 170, 40, 0.7);
}
.hm-cta--haldi .hm-cta__ring { color: rgba(232, 80, 138, 0.85); }
.hm-cta--haldi:focus-visible { outline: 2px solid #c8366e; outline-offset: 4px; }

/* Mayra: ivory chip, bandhej red text, a red dot ringed with tiny yellow bandhani dots. */
.hm-cta--mayra {
  color: #9f1f3a;
  border: 1px solid rgba(200, 150, 60, 0.7);
  background: linear-gradient(180deg, rgba(255, 251, 240, 0.94), rgba(252, 238, 214, 0.9));
  box-shadow: 0 6px 18px rgba(120, 30, 40, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.hm-cta--mayra .hm-cta__dot {
  background: radial-gradient(circle, #fff3c4 0 18%, #c8203c 24% 100%);
  box-shadow: 0 0 0 2px rgba(255, 205, 60, 0.85), 0 0 7px rgba(200, 32, 60, 0.6);
}
.hm-cta--mayra .hm-cta__ring { color: rgba(200, 140, 40, 0.9); }
.hm-cta--mayra:focus-visible { outline: 2px solid #9f1f3a; outline-offset: 4px; }

@keyframes hm-cta-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}
@keyframes hm-tap-ripple {
  0% { transform: scale(0.34); opacity: 0; }
  18% { opacity: 0.9; }
  75% { opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Safety: never built under reduced motion; hide if they ever appear. */
@media (prefers-reduced-motion: reduce) {
  .hm-cta, .hm-canvas, .hm-fx, .hm-glow, .hm-glint { display: none; }
}