/* scenes/lunch.css -- js/motion/scenes/lunch.js (curtains, fairy lights, butterflies,
   couple stroll, tap-to-shower). Nothing here changes the resting PSD frame: armed rules
   are under html.motion, overlays exist only with motion (except the hint pill). */

/* curtains hang from their outer top corner */
.scene--lunch [data-layer="curtain-left"] { transform-origin: 0 0; }
.scene--lunch [data-layer="curtain-right"] { transform-origin: 100% 0; }
/* armed: a little drawn toward the centre until the entrance eases them open */
html.motion .scene--lunch:not(.is-entered) [data-layer="curtain-left"] { transform: scaleX(1.13) skewX(2.2deg); }
html.motion .scene--lunch:not(.is-entered) [data-layer="curtain-right"] { transform: scaleX(1.13) skewX(-2.2deg); }
html.motion .scene--lunch:not(.is-entered) [data-layer="couple"] { opacity: 0; }
.scene--lunch [data-layer="couple"] img { transform-origin: 50% 100%; }

/* fairy lights: a warm glow over each baked light dot (inside the curtain wrapper) */
.ll-light {
  position: absolute;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  margin: calc(-26 * var(--u)) 0 0 calc(-26 * var(--u));
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle closest-side,
    rgba(255, 255, 252, 1) 0%, rgba(255, 249, 222, 0.95) 16%,
    rgba(255, 232, 168, 0.5) 40%, rgba(255, 226, 150, 0.16) 70%, rgba(255, 226, 150, 0) 100%);
  animation: ll-twinkle var(--d, 2.6s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes ll-twinkle {
  0%, 100% { opacity: 0; }
  45% { opacity: var(--pk, 0.9); }
  60% { opacity: calc(var(--pk, 0.9) * 0.7); }
}

/* overlay for butterflies + blossoms: stage-sized, under the text (z 25+) and the couple */
.ll-fx {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
  overflow: hidden;
}
.ll-bfly {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(64 * var(--u) * var(--bs, 0.8));
  height: calc(46 * var(--u) * var(--bs, 0.8));
  margin: calc(-23 * var(--u) * var(--bs, 0.8)) 0 0 calc(-32 * var(--u) * var(--bs, 0.8));
  opacity: 0;
}
.ll-bfly__face { width: 100%; height: 100%; }
.ll-bfly__img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 48% 92%;
  animation: ll-flap 0.26s ease-in-out infinite alternate;
}
@keyframes ll-flap { from { transform: none; } to { transform: scaleX(0.3) scaleY(0.92); } }
.ll-blossom {
  position: absolute;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* "Tap to shower flowers": a real button on the kolam path, clear of the text and couple */
.ll-hint {
  position: absolute;
  left: calc(640 * var(--u));
  top: calc(1822 * var(--u));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: calc(12 * var(--u)) calc(30 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u));
  transform: translate(-50%, -50%);
  border: calc(2.5 * var(--u)) solid rgba(185, 140, 69, 0.75);
  border-radius: calc(60 * var(--u));
  background: rgba(255, 251, 240, 0.92);
  box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(70, 45, 10, 0.22);
  color: #5a4a1e;
  font-family: "Amiri", serif;
  font-size: calc(36 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ll-hint__icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.ll-hint:active { transform: translate(-50%, -50%) scale(0.96); }
.ll-hint:focus-visible { outline: 3px solid #8a2f4b; outline-offset: 4px; }
/* motion: appears after the entrance, breathes until first use, then fades away
   (it stays focusable: keyboard focus brings it back) */
html.motion .scene--lunch:not(.ll-hint-on) .ll-hint { opacity: 0; transform: translate(-50%, -30%); pointer-events: none; }
html.motion .scene--lunch.ll-hint-on:not(.ll-used) .ll-hint::after {
  content: "";
  position: absolute;
  inset: calc(-2.5 * var(--u));
  border-radius: inherit;
  border: calc(2.5 * var(--u)) solid rgba(185, 140, 69, 0.7);
  pointer-events: none;
  animation: ll-ring 2.4s ease-out 0.4s infinite;
}
@keyframes ll-ring {
  0% { opacity: 0.9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.12, 1.4); }
}
.scene--lunch.ll-used .ll-hint:not(:focus-visible) { opacity: 0; pointer-events: none; }

/* off screen: every CSS loop holds still (iOS budget) */
.scene--lunch.ll-away .ll-light,
.scene--lunch.ll-away .ll-bfly__img,
.scene--lunch.ll-away .ll-hint::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ll-light, .ll-bfly { display: none; }
  .ll-hint { transition: none; }
  .ll-hint::after { animation: none !important; }
}