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

:root {
  --base-w: 1080;
  --base-h: 1920;
  --scale: 1;
  --viewport-h: 100dvh;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: #2b1a12;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  scroll-snap-type: y mandatory;
  color: #fff8df;
  background: #2b1a12;
  font-family: Georgia, "Times New Roman", serif;
}

.invite {
  width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.slide {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--viewport-h);
  min-height: var(--viewport-h);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  background:
    radial-gradient(circle at 50% 45%, rgba(87, 52, 33, 0.28), transparent 34rem),
    #2b1a12;
  contain: layout paint;
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--base-w) * 1px);
  height: calc(var(--base-h) * 1px);
  overflow: hidden;
  background: #f5e6d3;
  transform: translate(-50%, -50%) scale(var(--scale));
  transform-origin: center center;
  box-shadow: 0 0 0 1px rgba(255, 228, 185, 0.05);
  backface-visibility: hidden;
  contain: layout paint style;
  isolation: isolate;
}

.stage picture {
  display: contents;
}

#slide-1 .stage {
  background: transparent;
}

.stage-button {
  position: absolute;
  z-index: 20;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stage-button:focus-visible {
  outline: 5px solid rgba(255, 245, 196, 0.94);
  outline-offset: 10px;
}

#slide-1.envelope-opened .stage-button:focus-visible {
  outline: 0;
}

.layer {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 900ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.slide.is-active .layer,
.slide.was-seen .layer {
  opacity: 1;
  transform: translateY(0);
}

.slide.is-active .layer {
  will-change: opacity, transform;
}

.full {
  left: 0;
  top: 0;
  width: 1080px;
  height: 1920px;
}

.delay-1 { transition-delay: 120ms; }
.delay-2 { transition-delay: 240ms; }
.delay-3 { transition-delay: 360ms; }
.delay-4 { transition-delay: 480ms; }

.envelope-layer,
.scratch-stage {
  position: absolute;
  inset: 0;
}

.envelope-layer {
  z-index: 10;
  transition:
    opacity 850ms ease,
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

#slide-1:not(.opening-scene-loaded) .opening-bg,
#slide-1:not(.opening-scene-loaded) .opening-border {
  opacity: 0;
  transform: scale(1.012);
}

#slide-1:not(.opening-scene-loaded) .opening-flower,
#slide-1:not(.opening-scene-loaded) .envelope-layer {
  opacity: 0;
}

#slide-1:not(.opening-scene-loaded) .opening-flower {
  transform: scale(0.985);
}

#slide-1:not(.opening-scene-loaded) .envelope-layer {
  transform: translateY(28px) scale(0.985);
}

#slide-1.opening-scene-loaded .opening-bg,
#slide-1.opening-scene-loaded .opening-border {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 520ms ease,
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

#slide-1.opening-scene-loaded .opening-flower {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 640ms ease 140ms,
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 140ms;
}

#slide-1.opening-scene-loaded .envelope-layer {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 680ms ease 360ms,
    transform 820ms cubic-bezier(0.22, 1, 0.36, 1) 360ms;
}

.opening-label,
.opening-hint,
.scratch-hint,
.scroll-cue {
  position: absolute;
  z-index: 18;
  margin: 0;
  color: #5f2f25;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 246, 232, 0.58);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.opening-label {
  left: 0;
  right: 0;
  top: 780px;
  font-size: 38px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.opening-hint {
  left: 0;
  right: 0;
  top: 1088px;
  font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif;
  font-size: 52px;
  letter-spacing: 0;
  color: rgba(95, 47, 37, 0.58);
}

.slide.is-active .opening-label,
.slide.was-seen .opening-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 420ms;
}

.slide.is-active .opening-hint,
.slide.was-seen .opening-hint {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 620ms;
}

.flower-l {
  left: 0;
  top: 1369px;
  width: 348px;
  height: 551px;
  z-index: 2;
}

.flower-r {
  left: 697px;
  top: 0;
  width: 383px;
  height: 483px;
  z-index: 2;
}

.square-envelope {
  left: 0;
  top: 441px;
  width: 1080px;
  height: 1080px;
  z-index: 4;
}

.flap {
  z-index: 5;
  transform-origin: 540px 755px;
}

.seal-pulse {
  z-index: 6;
  transform-origin: center center;
}

#slide-1.is-active .seal-pulse {
  animation: sealRotate 4.8s linear infinite;
}

.seal-art {
  left: 441px;
  top: 955px;
  width: 200px;
  height: 200px;
  z-index: 6;
}

.envelope-hotspot {
  left: 118px;
  top: 700px;
  width: 844px;
  height: 562px;
  border-radius: 28px;
}

#slide-1.envelope-opened .opening-label,
#slide-1.envelope-opened .opening-hint {
  opacity: 0;
  transform: translateY(-10px);
}

#slide-1.envelope-opened .envelope-layer {
  opacity: 0;
  transform: translateY(-18px) scale(0.985);
  transition:
    opacity 520ms ease,
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

#slide-1.envelope-gone .envelope-layer {
  opacity: 0;
  transform: translateY(-18px) scale(0.985);
  pointer-events: none;
}

.scratch-stage {
  z-index: 16;
  opacity: 0;
  transform: translateY(72px) scale(0.97);
  transition:
    opacity 760ms ease,
    transform 980ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

#slide-1.scratch-active .scratch-stage {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.scratch-hint {
  left: 0;
  right: 0;
  top: 210px;
  color: #fff8ef;
  font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif;
  font-size: 94px;
  line-height: 1;
  text-shadow:
    0 2px 3px rgba(68, 43, 31, 0.22),
    0 0 18px rgba(255, 245, 220, 0.32);
}

#slide-1.scratch-active .scratch-hint {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 260ms;
  animation: hintFloat 2.8s ease-in-out 950ms infinite;
}

.scratch-stamp {
  position: absolute;
  left: -187px;
  top: 278px;
  z-index: 18;
  display: block;
  width: 1445px;
  height: 1445px;
  opacity: 0;
  transform: translateY(44px) scale(0.98);
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.scratch-reveal-stamp {
  position: absolute;
  left: -187px;
  top: 278px;
  z-index: 19;
  display: block;
  width: 1445px;
  height: 1445px;
  clip-path: inset(332px 468px 357px 478px);
  opacity: 0;
  transform: translateY(44px) scale(0.98);
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#slide-1.scratch-active .scratch-stamp {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 120ms;
}

#slide-1.scratch-active.scratch-started .scratch-reveal-stamp,
#slide-1.scratch-complete .scratch-reveal-stamp {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0ms;
}

.scratch-card {
  position: absolute;
  left: 291px;
  top: 565px;
  z-index: 24;
  width: 499px;
  height: 700px;
  opacity: 0;
  transform: translateY(52px) scale(0.96);
  transition:
    opacity 720ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

#slide-1.scratch-active .scratch-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 200ms;
}

.scratch-ticket {
  position: absolute;
  left: 69px;
  top: 300px;
  z-index: 6;
  display: block;
  width: 361px;
  height: 114px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.scratch-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.scratch-canvas:focus-visible {
  outline: 6px solid rgba(255, 245, 196, 0.92);
  outline-offset: 8px;
}

.scratch-glow {
  position: absolute;
  inset: -24px;
  z-index: 0;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 48px rgba(255, 220, 135, 0.55),
    0 0 92px rgba(255, 186, 83, 0.28),
    inset 0 0 32px rgba(255, 244, 204, 0.24);
}

#slide-1.scratch-complete .scratch-glow {
  animation: scratchGlow 2.15s ease-in-out forwards;
}

.scratch-names {
  position: absolute;
  left: 334px;
  top: 1405px;
  z-index: 28;
  display: block;
  width: 412px;
  height: 37px;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms ease,
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

#slide-1.scratch-active .scratch-names {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 440ms;
}

.scroll-cue {
  left: 0;
  right: 0;
  top: 1675px;
  z-index: 32;
  color: #fff8ef;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

#slide-1.scratch-complete .scroll-cue {
  opacity: 1;
  transform: translateY(0);
  animation: scrollCue 1.8s ease-in-out 700ms infinite;
}

.s3-bg {
  left: 0;
  top: 0;
  width: 1080px;
  height: 3683px;
}

.s3-clouds {
  left: 0;
  top: 215px;
  width: 1080px;
  height: 452px;
  z-index: 2;
}

.s3-rishikesh {
  left: 0;
  top: 694px;
  width: 1080px;
  height: 1226px;
  z-index: 3;
}

.s3-flowers {
  left: 0;
  top: 1044px;
  width: 1080px;
  height: 876px;
  z-index: 5;
}

.s3-logo {
  left: 284px;
  top: 120px;
  width: 512px;
  height: 626px;
  z-index: 6;
}

.s3-boats {
  left: 480px;
  top: 1238px;
  width: 465px;
  height: 185px;
  z-index: 6;
}

.s4-bg {
  left: 0;
  top: 0;
  width: 1080px;
  height: 3683px;
}

.s4-flowers {
  left: 0;
  top: 0;
  width: 1080px;
  height: 2195px;
  z-index: 5;
}

.s4-mirror {
  left: 4px;
  top: 294px;
  width: 1071px;
  height: 1517px;
  z-index: 3;
}

.s4-content {
  left: 251px;
  top: 498px;
  width: 578px;
  height: 1096px;
  z-index: 6;
}

.s4-bird {
  left: 70px;
  top: 170px;
  width: 175px;
  height: 126px;
  z-index: 7;
}

.s5-frame {
  left: 114px;
  top: 52px;
  width: 840px;
  height: 1223px;
  z-index: 3;
}

.event-copy {
  position: absolute;
  z-index: 8;
  margin: 0;
  color: #fff8ef;
  text-align: center;
  pointer-events: none;
}

.event-copy h2,
.event-copy p {
  margin: 0;
}

.event-copy h2 {
  font-family: "Snell Roundhand", "Apple Chancery", Georgia, serif;
  font-weight: 400;
  letter-spacing: 0;
}

.event-copy p {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.45;
}

.event-copy sup {
  font-size: 0.34em;
  vertical-align: super;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.event-date {
  font-size: 74px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
}

.event-time {
  font-size: 40px;
}

.event-note {
  font-size: 28px;
  font-style: italic;
  letter-spacing: 0.18em;
}

.event-venue-label {
  margin-top: 36px !important;
  font-size: 34px;
  font-weight: 400 !important;
  letter-spacing: 0;
  text-transform: none !important;
}

.event-venue {
  font-size: 42px;
}

.s6-design {
  left: 7px;
  top: 0;
  width: 1073px;
  height: 1565px;
  z-index: 3;
}

.s6-sparkle-top {
  left: 0;
  top: 0;
  width: 623px;
  height: 460px;
  z-index: 4;
}

.s6-sparkle-bottom {
  left: 335px;
  top: 1127px;
  width: 745px;
  height: 793px;
  z-index: 4;
}

.s6-gramophone {
  left: 104px;
  top: 920px;
  width: 235px;
  height: auto;
  z-index: 6;
}

.s6-cd {
  left: 220px;
  top: 968px;
  width: 145px;
  height: 145px;
  z-index: 7;
}

.s6-tones {
  left: 760px;
  top: 330px;
  width: 265px;
  height: 135px;
  z-index: 7;
}

.s7-design {
  left: 0;
  top: 0;
  width: 1080px;
  height: 1289px;
  z-index: 3;
}

.s7-couple {
  left: 334px;
  top: 684px;
  width: 414px;
  height: 605px;
  z-index: 4;
}

.s7-disco {
  left: 908px;
  top: 0;
  width: 172px;
  height: 292px;
  z-index: 5;
}

.s7-mask {
  left: 71px;
  top: 630px;
  width: 246px;
  height: 258px;
  z-index: 5;
}

.s7-butterfly {
  left: 800px;
  top: 400px;
  width: 131px;
  height: 146px;
  z-index: 5;
}

.s7-hand {
  left: 0;
  top: 1360px;
  width: 134px;
  height: 293px;
  z-index: 5;
}

.s8-design {
  left: 257px;
  top: 178px;
  width: 615px;
  height: 914px;
  z-index: 3;
}

.s8-couple {
  left: 242px;
  top: 693px;
  width: 439px;
  height: 568px;
  z-index: 5;
}

.s8-light {
  left: 0;
  top: 1520px;
  width: 210px;
  height: 401px;
  z-index: 4;
}

.s8-pot {
  left: 830px;
  top: 1677px;
  width: 330px;
  height: 243px;
  z-index: 4;
}

.s9-design {
  left: 30px;
  top: 0;
  width: 945px;
  height: 1185px;
  z-index: 3;
}

.s9-sufi {
  left: 285px;
  top: 880px;
  width: 289px;
  height: 416px;
  z-index: 5;
}

.s9-music {
  left: 642px;
  top: 935px;
  width: 442px;
  height: 400px;
  z-index: 4;
}

.s9-lanterns {
  left: 17px;
  top: 1695px;
  width: 159px;
  height: 238px;
  z-index: 5;
}

.event-copy-welcome,
.event-copy-sangeet,
.event-copy-after,
.event-copy-wedding,
.event-copy-sufi {
  left: 0;
  top: 0;
  width: 1080px;
  height: 1920px;
}

.event-copy h2 {
  position: absolute;
  margin: 0;
  width: 100%;
}

.event-details {
  position: absolute;
  width: 100%;
}

.event-details p {
  margin: 0;
}

.event-copy-welcome h2 {
  left: 250px;
  top: 410px;
  width: 580px;
  color: #8a5538;
  font-size: 98px;
  line-height: 0.92;
}

.event-copy-welcome .event-details {
  left: 130px;
  top: 1320px;
  width: 820px;
  color: #8a5538;
}

.event-copy-welcome .event-date {
  font-size: 66px;
}

.event-copy-welcome .event-time {
  margin-top: 44px;
  font-size: 43px;
}

.event-copy-welcome .event-venue-label {
  margin-top: 72px !important;
  font-size: 32px;
}

.event-copy-welcome .event-venue {
  margin-top: 20px;
  font-size: 40px;
}

.event-copy-sangeet h2 {
  left: 260px;
  top: 328px;
  width: 560px;
  color: rgba(255, 248, 239, 0.86);
  font-size: 68px;
  line-height: 0.96;
}

.event-copy-sangeet .event-details {
  left: 120px;
  top: 1225px;
  width: 840px;
  color: rgba(255, 248, 239, 0.88);
}

.event-copy-sangeet .event-date {
  margin-bottom: 42px;
  font-size: 56px;
}

.event-copy-sangeet p:not(.event-date, .event-venue-label, .event-venue) {
  font-size: 24px;
}

.event-copy-sangeet .event-venue-label {
  margin-top: 46px !important;
  font-size: 30px;
}

.event-copy-sangeet .event-venue {
  margin-top: 18px;
  font-size: 34px;
}

.event-copy-after h2 {
  left: 280px;
  top: 548px;
  width: 520px;
  color: rgba(255, 248, 239, 0.82);
  font-size: 78px;
  line-height: 0.95;
}

.event-copy-after .event-details {
  left: 170px;
  top: 1292px;
  width: 740px;
  color: #8a5538;
}

.event-copy-after .event-date {
  font-size: 64px;
}

.event-copy-after .event-time {
  margin-top: 50px;
  font-size: 38px;
}

.event-copy-after .event-venue-label {
  margin-top: 72px !important;
  font-size: 32px;
}

.event-copy-after .event-venue {
  margin-top: 20px;
  font-size: 39px;
}

.event-copy-wedding h2 {
  left: 330px;
  top: 382px;
  width: 420px;
  color: #c45862;
  font-size: 66px;
  line-height: 0.98;
}

.event-copy-wedding .event-details {
  left: 185px;
  top: 1245px;
  width: 710px;
  color: #8a5538;
}

.event-copy-wedding .event-date {
  font-size: 56px;
}

.event-copy-wedding .event-time {
  margin-top: 34px;
  font-size: 31px;
}

.event-copy-wedding .event-note {
  margin-top: 18px;
  font-size: 22px;
}

.event-copy-wedding .event-venue-label {
  margin-top: 28px !important;
  font-size: 27px;
}

.event-copy-wedding .event-venue {
  margin-top: 12px;
  font-size: 32px;
}

.event-copy-wedding .event-time-secondary {
  margin-top: 34px;
}

.event-copy-sufi h2 {
  left: 305px;
  top: 488px;
  width: 470px;
  color: rgba(255, 248, 239, 0.84);
  font-size: 76px;
  line-height: 1;
}

.event-copy-sufi .event-details {
  left: 150px;
  top: 1320px;
  width: 780px;
  color: rgba(255, 248, 239, 0.74);
  text-shadow: 0 1px 8px rgba(43, 26, 18, 0.22);
}

.event-copy-sufi .event-date {
  font-size: 54px;
}

.event-copy-sufi .event-time {
  margin-top: 40px;
  font-size: 34px;
}

.event-copy-sufi .event-note {
  margin-top: 24px;
  font-size: 23px;
}

.event-copy-sufi .event-venue-label {
  margin-top: 48px !important;
  font-size: 29px;
}

.event-copy-sufi .event-venue {
  margin-top: 16px;
  font-size: 34px;
}

.s10-resort {
  left: 0;
  top: 610px;
  width: 1080px;
  height: auto;
  z-index: 2;
}

.slide.s3-play .s3-bg {
  animation: s3BgSettle 3s ease-out forwards;
}

.slide.s3-play .s3-logo {
  animation: s3HeaderReveal 1.35s cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.slide.s3-play .s3-rishikesh {
  animation: s3SceneRise 1.5s ease-out 220ms both;
}

.slide.s3-play .s3-boats {
  animation:
    s3BoatIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both,
    s3BoatFloat 3.2s ease-in-out 2.2s infinite;
}

.slide.s4-play .s4-bg,
.slide.s4-play .s4-flowers {
  animation: s4SoftIn 1.05s ease-out both;
}

.slide.s4-play .s4-mirror {
  animation: s4MirrorRise 1.18s cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
}

.slide.s4-play .s4-content {
  animation: s4CopyIn 920ms ease-out 540ms both;
}

.slide.s4-play .s4-bird {
  animation:
    s4BirdIn 1.1s ease-out 980ms both,
    s4BirdBob 3.8s ease-in-out 2.1s infinite;
}

.slide.s5-play .s5-frame {
  animation: sceneSlideRight 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.s5-play .event-copy-welcome {
  animation: textRevealUp 900ms ease-out 420ms both;
}

.slide.s6-play .s6-design {
  animation: sceneSlideLeft 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.s6-play .event-copy-sangeet {
  animation: textRevealDown 1.05s ease-out 480ms both;
}

.slide.s6-play .s6-cd {
  animation: spinSoft 3.6s linear 1.5s infinite;
}

.slide.s6-play .s6-gramophone {
  animation: gramophoneSettle 1.1s ease-out 680ms both;
}

.slide.s6-play .s6-tones {
  animation: musicSwipe 2.6s ease-in-out 1.4s infinite;
}

.slide.s7-play .s7-design {
  animation: sceneDropIn 1.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.s7-play .event-copy-after {
  animation: textRevealDown 1.05s ease-out 460ms both;
}

.slide.s7-play .s7-couple {
  animation: coupleBreathe 4s ease-in-out 1.6s infinite;
}

.slide.s7-play .s7-butterfly,
.slide.s7-play .s7-mask {
  animation: partyFloat 3s ease-in-out 1.5s infinite;
}

.slide.s7-play .s7-disco,
.slide.s7-play .s7-hand {
  animation: partySway 3.5s ease-in-out 1.5s infinite;
}

.slide.s8-play .s8-design {
  animation: sceneRiseIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.s8-play .event-copy-wedding {
  animation: textRevealDown 1s ease-out 420ms both;
}

.slide.s8-play .s8-couple {
  animation: coupleBreathe 4.6s ease-in-out 1.4s infinite;
}

.slide.s8-play .s8-light {
  animation: lampGlow 2.8s ease-in-out 1.2s infinite;
}

.slide.s8-play .s8-pot {
  animation: potSettle 1.1s ease-out 800ms both;
}

.slide.s9-play .s9-design {
  animation: sceneDropIn 1.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.s9-play .event-copy-sufi {
  animation: textRevealUp 950ms ease-out 450ms both;
}

.slide.s9-play .s9-sufi {
  animation: sufiFloat 4.2s ease-in-out 1.4s infinite;
}

.slide.s9-play .s9-music,
.slide.s9-play .s9-lanterns {
  animation: lampGlow 3s ease-in-out 1.2s infinite;
}

.slide.s10-play .s10-resort {
  animation: venueRise 1.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.slide.is-active .float-slow {
  animation: floatSlow 5.5s ease-in-out infinite;
}

.slide.is-active .float-reverse {
  animation: floatReverse 6.2s ease-in-out infinite;
}

.slide.is-active .shimmer {
  animation: shimmer 4.8s ease-in-out infinite;
}

.slide.is-active .spin-soft {
  animation: spinSoft 16s linear infinite;
}

.slide.is-active .drift-bg {
  animation: driftBg 16s ease-in-out infinite;
}

@keyframes sealRotate {
  to { transform: rotate(360deg); }
}

@keyframes hintFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes scratchGlow {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  22% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.82;
    transform: scale(1.03);
  }
}

@keyframes scrollCue {
  0%, 100% { translate: 0 0; opacity: 0.72; }
  50% { translate: 0 12px; opacity: 1; }
}

@keyframes s3BgSettle {
  0% { transform: scale(1.08); opacity: 0.92; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes s3HeaderReveal {
  0% { opacity: 0; transform: translateY(-34px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes s3SceneRise {
  0% { opacity: 0; transform: translateY(90px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes s3BoatIn {
  0% { opacity: 0; transform: translateX(70px) scale(0.94); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes s3BoatFloat {
  0%, 100% { transform: translateY(-7px) rotate(-1.5deg); }
  50% { transform: translateY(8px) rotate(1.5deg); }
}

@keyframes s4SoftIn {
  0% { opacity: 0; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes s4MirrorRise {
  0% { opacity: 0; transform: translateY(135px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes s4CopyIn {
  0% { opacity: 0; transform: translateY(34px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes s4BirdIn {
  0% { opacity: 0; transform: translate(46px, -24px) scale(0.9); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes s4BirdBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@keyframes sceneSlideRight {
  0% { opacity: 0; transform: translateX(140px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes sceneSlideLeft {
  0% { opacity: 0; transform: translateX(-140px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes sceneDropIn {
  0% { opacity: 0; transform: translateY(-130px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes sceneRiseIn {
  0% { opacity: 0; transform: translateY(130px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes textRevealUp {
  0% { opacity: 0; transform: translateY(42px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes textRevealDown {
  0% { opacity: 0; transform: translateY(-34px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes gramophoneSettle {
  0% { opacity: 0; transform: translateX(-42px) rotate(-5deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes musicSwipe {
  0%, 100% { opacity: 0.58; transform: translateX(10px); }
  50% { opacity: 1; transform: translateX(0); }
}

@keyframes coupleBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.018); }
}

@keyframes partyFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-12px) rotate(4deg); }
}

@keyframes partySway {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  50% { transform: translateX(-12px) rotate(2deg); }
}

@keyframes lampGlow {
  0%, 100% { opacity: 0.88; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-4px) scale(1.012); }
}

@keyframes potSettle {
  0% { opacity: 0; transform: translate(50px, 30px) rotate(5deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}

@keyframes sufiFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-13px) rotate(1deg); }
}

@keyframes venueRise {
  0% { opacity: 0; transform: translateY(120px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes floatSlow {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@keyframes floatReverse {
  0%, 100% { translate: 0 0; }
  50% { translate: 10px 8px; }
}

@keyframes shimmer {
  0%, 100% { opacity: 0.86; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-5px) scale(1.01); }
}

@keyframes spinSoft {
  to { rotate: 360deg; }
}

@keyframes driftBg {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -40px; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .layer,
  .scratch-canvas,
  .scratch-stage,
  .envelope-layer,
  .scratch-hint,
  .scroll-cue,
  .float-slow,
  .float-reverse,
  .shimmer,
  .spin-soft,
  .drift-bg,
  .seal-pulse {
    animation: none !important;
    transition: none !important;
  }
}