/* ============================================================
   Ashish & Priyanshi — Layered Invitation
   Sources:
   - Cover Slide.psd, 1080 x 3840 px.
   - Envelope Slide.psd, 1080 x 1920 px.
   - Scratch to reveal slide.psd, 1080 x 1920 px.
   - Bhaat.psd, 1080 x 1920 px.
   - Sangeet Slide.psd, 1080 x 1920 px.
   - Haldi Slide.psd, 1080 x 1920 px.
   - Wedding Slide.psd, 1080 x 1920 px.
   - Rsvp Slide.psd, 1080 x 1920 px.
   - Last Slide.psd, 1080 x 4500 px.
   Visible PSD leaf layers are positioned at their original
   coordinates, expressed as % of each PSD canvas.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  min-height: 100dvh;
  background: #d2e6ed;
  color: #1f3f48;
}

.invite {
  --stage-width: min(100vw, calc(100dvh * 1080 / 1920), 540px);
  --motion-fast: 180ms;
  --motion-medium: 480ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 100dvh;
}

.slide {
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  width: var(--stage-width);
  overflow: hidden;
  background: #d2e6ed;
  isolation: isolate;
  contain: layout paint style;
}

.stage--cover {
  aspect-ratio: 1080 / 3840;
}

.stage--envelope,
.stage--bhaat,
.stage--sangeet,
.stage--haldi,
.stage--wedding,
.stage--rsvp {
  aspect-ratio: 1080 / 1920;
}

.stage--scratch {
  aspect-ratio: 1080 / 1920;
}

.stage--last {
  aspect-ratio: 1080 / 4500;
}

.ly {
  position: absolute;
  display: block;
  /* left / top / width / height set inline per layer from PSD bbox */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.scratch-canvas {
  position: absolute;
  z-index: 2;
  display: block;
  cursor: grab;
  touch-action: none;
  transition:
    opacity var(--motion-medium) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
  user-select: none;
  will-change: transform, opacity;
}

.scratch-canvas:active,
.scratch-canvas.is-scratching {
  cursor: grabbing;
  transform: scale(0.992);
}

.scratch-canvas:focus-visible {
  outline: 4px solid rgba(176, 70, 108, 0.9);
  outline-offset: 6px;
}

.stage--scratch.is-scratch-complete .scratch-canvas {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scratch-canvas {
    transition: none;
  }
}