/* Luna · Heart pop. The stage layers, the heart buttons, hand cursors and the
   camera sub-sheet and camera-on pill. Built on the v2 system tokens; the
   buttons are the approved ones, unrestyled. Adapted from v2/play/lib/corner.css. */

.g-page { --stage-ratio: 16 / 10; --stage-ratio-phone: 16 / 10; --lp-rose: #76305f; }
.g-page[data-orientation="portrait"] { --stage-ratio: 4 / 5; --stage-ratio-phone: 4 / 5; }

.lp-stage { background: #e9a9c8; }
.lp-stage > .lp__plate { object-fit: cover; object-position: 50% 62%; }
.lp__poster, .lp__canvas, .pc2d, .pc2d__base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp__poster { object-fit: cover; transition: opacity 400ms var(--o-ease); z-index: 1; }
.lp__canvas { opacity: 0; transition: opacity 400ms var(--o-ease); z-index: 1; }
.lp-stage.is-live .lp__canvas { opacity: 1; }
.lp-stage.is-live .lp__poster { opacity: 0; }
/* a gentle tilt-shift: the far and near edges go soft, like the village plate itself (rich tier) */
.lp__tilt { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 95% at 50% 50%, transparent 60%, rgb(110 52 72 / .08)); }
.lp__tilt::before, .lp__tilt::after { content: ""; position: absolute; left: 0; right: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lp__tilt::before { top: 0; height: 16%; mask-image: linear-gradient(#000 15%, transparent); -webkit-mask-image: linear-gradient(#000 15%, transparent); }
.lp__tilt::after { bottom: 0; height: 12%; mask-image: linear-gradient(transparent, #000 85%); -webkit-mask-image: linear-gradient(transparent, #000 85%); }
[data-tier="reduced"] .lp__tilt, [data-tier="static"] .lp__tilt { display: none; }

/* the picture version (no WebGL, or 3D off) */
.pc2d { z-index: 1; }
.pc2d__base { object-fit: cover; }
.pc2d__layer { position: absolute; inset: 0; }
.pc2d__popped {
  position: absolute; display: block; opacity: 0; background-repeat: no-repeat;
  -webkit-mask: radial-gradient(closest-side, #000 78%, transparent); mask: radial-gradient(closest-side, #000 78%, transparent);
  transition: opacity 120ms ease-out;
}
.pc2d__popped.is-popped { opacity: 1; }
.pc2d__popped.is-bump { animation: pc2d-bump 260ms var(--o-ease); }
@keyframes pc2d-bump { 0% { transform: scale(.94); } 60% { transform: scale(1.02); } }
.pc2d.is-turning .pc2d__popped { opacity: 0; transition: opacity 380ms ease-in-out; }

/* hearts: real buttons laid exactly over the 3D hearts */
.lp__grid { position: absolute; inset: 0; z-index: 3; }
.lp__heart {
  position: absolute; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent; border-radius: 45%;
}
.lp__heart:focus-visible { outline: none; }
.lp__heart svg { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; opacity: 0; pointer-events: none; }
.lp__heart svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lp__heart .halo { stroke: #fff; stroke-width: 7; opacity: .95; }
.lp__heart .ring { stroke: var(--o-focus); stroke-width: 3; }
.lp__heart:focus-visible svg { opacity: 1; }
.lp__heart.is-aimed:not(:focus-visible) svg { opacity: 1; }
.lp__heart.is-aimed:not(:focus-visible) .ring { stroke: var(--lp-rose); stroke-dasharray: 2 7; stroke-linecap: round; stroke-width: 3.5; }
.lp__heart.is-aimed:not(:focus-visible) .halo { stroke-width: 7; opacity: .75; }
.lp-stage.is-turning .lp__heart svg { opacity: 0 !important; }

/* hand cursors */
.lp__cursors { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.lp__cursor {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 3.5px solid var(--o-ink); box-shadow: 0 0 0 3px rgb(255 255 255 / .85), inset 0 0 0 3px rgb(255 255 255 / .6);
  transition: opacity 200ms ease, background-color 120ms ease, border-color 120ms ease, scale 140ms var(--o-ease);
}
.lp__cursor[data-hand="1"] { border-color: var(--lp-rose); }
.lp__cursor.is-near { scale: .82; border-color: var(--lp-rose); }
.lp__cursor.is-pinched { scale: .5; background: var(--lp-rose); border-color: var(--lp-rose); }

/* the bar: instruction, then Turn it over and Play with your hand */
.lp-bar { position: relative; }
.lp-bar__actions { display: flex; flex-wrap: wrap; gap: var(--o-space-2); }
.g-howto[data-tone="hand"] { color: var(--o-ink); font-weight: 600; }
/* when every heart is down, Turn it over becomes the one action */
.lp-turn[data-ready] { border-color: var(--o-ink); }

/* the camera sub-sheet: one card, raised, anchored above the bar on the right */
.lp-cam {
  position: absolute; z-index: 6; inset-inline-end: 0; bottom: calc(100% + var(--o-space-2));
  width: min(380px, 100%);
  padding: var(--o-space-5); border-radius: var(--o-r-card);
  background: var(--o-surface); border: 1px solid var(--o-line); box-shadow: var(--o-shadow-raised);
  animation: lp-sheet-in var(--o-t-enter) var(--o-ease);
}
@keyframes lp-sheet-in { from { opacity: 0; translate: 0 8px; } }
.lp-cam__title { margin: 0 0 var(--o-space-3); font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); }
.lp-cam__title:focus { outline: none; }
.lp-cam__intro { display: grid; gap: var(--o-space-3); }
.lp-cam__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.lp-cam__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-3); margin-top: var(--o-space-5); }
.lp-cam__status { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--o-space-3); line-height: 1.5; }
.lp-cam__status[data-tone="problem"] { padding: var(--o-space-3) var(--o-space-4); border-radius: var(--o-r-control); background: var(--o-warm); }
.lp-cam__spinner { width: 18px; height: 18px; flex: none; margin-top: 3px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: lp-spin .9s linear infinite; }
@keyframes lp-spin { to { transform: rotate(1turn); } }

/* camera on: a pill fixed at the foot of the window, always in view while the camera runs */
.lp-camlight {
  position: fixed; z-index: var(--o-z-toast); left: 50%; bottom: max(var(--o-space-4), env(safe-area-inset-bottom));
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: var(--o-space-3);
  padding: var(--o-space-2) var(--o-space-2) var(--o-space-2) var(--o-space-4);
  border-radius: var(--o-r-pill); background: var(--o-surface); border: 1px solid var(--o-line); box-shadow: var(--o-shadow-raised);
}
.lp-camlight__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--o-action); box-shadow: 0 0 0 3px #c9ead8; flex: none; }
.lp-camlight__text { font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--o-action-press); white-space: nowrap; }
.lp-camlight__thumb { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; transform: scaleX(-1); background: #2b2a27; flex: none; }

@media (max-width: 699.98px) {
  .lp-bar__actions { width: 100%; }
  .lp-bar__actions .o-btn { flex: 1 1 auto; }
  .lp-cam { inset-inline: 0; width: auto; padding: var(--o-space-5) var(--o-space-4); }
}

/* motion off: instant states */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .lp-cam { animation: none; }
  html:not([data-motion="full"]) .lp-cam__spinner { animation: none; border-right-color: currentColor; opacity: .5; }
  html:not([data-motion="full"]) .lp__cursor { transition: opacity 200ms ease; }
}
[data-motion="still"] .lp-cam, html[data-motion="still"] .lp-cam { animation: none; }
html[data-motion="still"] .lp-cam__spinner { animation: none; border-right-color: currentColor; opacity: .5; }
html[data-motion="still"] .lp__poster, html[data-motion="still"] .lp__canvas { transition: none; }

@media (forced-colors: active) {
  .lp-cam, .lp-camlight { border-color: CanvasText; }
  .lp__heart svg .ring { stroke: CanvasText; }
  .lp__cursor { border-color: Highlight; }
}