:root {
  --night: #09111f;
  --deep-sky: #14264a;
  --violet-sky: #2b315f;
  --moon: #fff1ad;
  --moon-soft: #ffe6a1;
  --sea-dark: #0d5061;
  --sea: #147a86;
  --sea-light: #90d4d8;
  --sand: #d4a85e;
  --sand-shadow: #a7773e;
  --skin: #f3b38a;
  --skin-shadow: #cf7e5f;
  --hair: #4a2b24;
  --hair-dark: #2b1718;
  --shirt: #fff8ea;
  --dress: #fff8ea;
  --glow: #fff0a8;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--night);
  color: #fff8de;
}

.scene {
  --start-gap: clamp(110px, 28vw, 285px);
  --walk-distance: calc(var(--start-gap) - clamp(34px, 5vw, 58px));
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 237, 176, .1), transparent 44%),
    linear-gradient(180deg, var(--night) 0%, var(--deep-sky) 44%, var(--violet-sky) 70%);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 236, 174, .21), transparent 27%),
    linear-gradient(180deg, transparent 0 52%, rgba(5, 12, 22, .25) 100%);
}

.sky,
.ocean,
.sand,
.moon-shine,
.alien-disc,
.falling-flowers,
.ground-bouquet,
.sky-explosion,
.final-message,
.lovers,
.hug-light,
.heart-burst,
.love-note,
.heart-button {
  position: absolute;
}

.sky {
  inset: 0 0 38%;
  pointer-events: none;
}

.moon {
  position: absolute;
  top: clamp(68px, 11.5vh, 96px);
  left: 50%;
  z-index: 2;
  width: clamp(260px, 28vw, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 68% 31%, #dccb8f 0 8%, transparent 9%),
    radial-gradient(circle at 33% 61%, #e3d293 0 6%, transparent 7%),
    radial-gradient(circle at 54% 72%, #d7c785 0 4%, transparent 5%),
    var(--moon);
  box-shadow:
    0 0 0 9px rgba(255, 244, 186, .05),
    0 0 72px 22px rgba(255, 225, 149, .5),
    0 0 150px 42px rgba(255, 199, 126, .18);
  cursor: pointer;
  pointer-events: auto;
}

.scene.has-hugged .moon {
  animation: moon-ready 1.8s ease-in-out infinite;
}

.moon span {
  position: absolute;
  display: block;
  width: 7%;
  aspect-ratio: 1;
  background: rgba(174, 154, 99, .35);
  box-shadow: 0 0 0 2px rgba(255, 252, 218, .16);
}

.moon span:nth-child(1) {
  top: 24%;
  left: 38%;
}

.moon span:nth-child(2) {
  top: 53%;
  left: 62%;
}

.moon span:nth-child(3) {
  top: 66%;
  left: 29%;
}

.stars {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: #fff8c9;
  box-shadow:
    calc(var(--s) * -1) 0 rgba(255, 248, 201, .7),
    var(--s) 0 rgba(255, 248, 201, .7),
    0 calc(var(--s) * -1) rgba(255, 248, 201, .7),
    0 var(--s) rgba(255, 248, 201, .7);
  animation: twinkle 2.8s ease-in-out infinite;
  animation-delay: var(--d);
}

.palm {
  position: absolute;
  width: clamp(126px, 19vw, 240px);
  height: clamp(220px, 31vw, 390px);
  z-index: 7;
  opacity: .98;
  transform-origin: bottom center;
  filter:
    drop-shadow(0 10px 0 rgba(5, 13, 20, .14))
    contrast(1.08);
}

.palm-left {
  left: clamp(-58px, -2vw, -20px);
  bottom: clamp(-300px, -29vh, -184px);
  transform: rotate(-7deg);
}

.palm-left-small {
  left: clamp(114px, 13vw, 230px);
  bottom: clamp(-256px, -24vh, -154px);
  width: clamp(88px, 12vw, 148px);
  height: clamp(168px, 23vw, 258px);
  opacity: .86;
  transform: rotate(7deg);
}

.palm-right {
  right: clamp(-54px, -1vw, -14px);
  bottom: clamp(-306px, -30vh, -188px);
  transform: scaleX(-1) rotate(-6deg);
}

.palm-right-small {
  right: clamp(120px, 14vw, 240px);
  bottom: clamp(-250px, -23vh, -150px);
  width: clamp(84px, 11vw, 138px);
  height: clamp(160px, 21vw, 242px);
  opacity: .82;
  transform: scaleX(-1) rotate(8deg);
}

.trunk {
  position: absolute;
  left: 46%;
  bottom: 0;
  width: 18%;
  height: 76%;
  background:
    linear-gradient(90deg, rgba(255, 222, 142, .18), transparent 32% 100%),
    repeating-linear-gradient(
      180deg,
      #2a1a18 0 10px,
      #543324 10px 17px,
      #38211b 17px 24px
    );
  clip-path: polygon(26% 0, 72% 0, 100% 100%, 0 100%);
}

.leaf {
  position: absolute;
  left: 48%;
  top: 5%;
  width: 14%;
  height: 56%;
  background:
    linear-gradient(90deg, rgba(147, 198, 105, .18), transparent 43% 56%, rgba(0, 0, 0, .2)),
    repeating-linear-gradient(180deg, transparent 0 12px, rgba(185, 226, 127, .1) 12px 15px),
    #102b25;
  transform-origin: 50% 90%;
  clip-path: polygon(50% 0, 100% 88%, 48% 100%, 0 88%);
}

.palm::before {
  content: "";
  position: absolute;
  left: 49%;
  top: 28%;
  z-index: 2;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2f2119;
  box-shadow:
    -9px 5px 0 #231815,
    8px 7px 0 #3a281d;
}

.leaf-one {
  transform: rotate(-72deg);
}

.leaf-two {
  transform: rotate(-38deg);
  height: 63%;
}

.leaf-three {
  transform: rotate(2deg);
  height: 67%;
}

.leaf-four {
  transform: rotate(42deg);
  height: 63%;
}

.leaf-five {
  transform: rotate(76deg);
}

.leaf-six {
  transform: rotate(-108deg);
  height: 47%;
  top: 14%;
}

.leaf-seven {
  transform: rotate(108deg);
  height: 47%;
  top: 14%;
}

.ocean {
  left: 0;
  right: 0;
  bottom: 23%;
  height: 38%;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(255, 240, 171, .18), transparent 24%),
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(171, 231, 232, .14) 18px 20px),
    linear-gradient(180deg, #0b3d57 0%, var(--sea-dark) 46%, var(--sea) 100%);
}

.ocean::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3%;
  width: clamp(170px, 28vw, 420px);
  height: 96%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 16px,
      rgba(255, 243, 185, .16) 16px 22px,
      transparent 22px 34px
    ),
    radial-gradient(ellipse at 50% 22%, rgba(255, 242, 181, .4), rgba(255, 242, 181, .16) 42%, transparent 74%);
  filter: blur(6px);
  opacity: .92;
}

.wave {
  position: absolute;
  left: -12%;
  right: -12%;
  height: 7px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 24px,
    rgba(186, 244, 245, .82) 24px 54px,
    transparent 54px 98px
  );
  opacity: .76;
  animation: tide 7s linear infinite;
}

.wave-one {
  top: 27%;
}

.wave-two {
  top: 54%;
  animation-duration: 9s;
  animation-direction: reverse;
  opacity: .55;
}

.wave-three {
  bottom: 10%;
  height: 9px;
  animation-duration: 11s;
}

.sand {
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  z-index: 4;
  background:
    repeating-linear-gradient(90deg, rgba(255, 232, 163, .16) 0 6px, transparent 6px 20px),
    linear-gradient(180deg, #e0bf79 0%, var(--sand) 46%, var(--sand-shadow) 100%);
}

.sand::after {
  content: "";
  position: absolute;
  inset: 22% 0 0;
  background:
    radial-gradient(ellipse at 28% 52%, rgba(71, 47, 34, .16) 0 9%, transparent 10%),
    radial-gradient(ellipse at 68% 67%, rgba(71, 47, 34, .12) 0 8%, transparent 9%);
}

.moon-shine {
  left: 50%;
  top: clamp(190px, 27vh, 246px);
  bottom: 0;
  z-index: 5;
  width: clamp(250px, 48vw, 680px);
  transform: translateX(-50%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .95;
}

.moon-shine::before,
.moon-shine::after {
  content: "";
  position: absolute;
  inset: 0;
}

.moon-shine::before {
  bottom: 27%;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 252, 218, .48) 0 10%, rgba(255, 252, 218, .24) 22%, transparent 38%),
    repeating-linear-gradient(
      180deg,
      transparent 0 14px,
      rgba(255, 248, 203, .29) 14px 19px,
      transparent 19px 34px
    ),
    radial-gradient(ellipse at 50% 30%, rgba(255, 250, 212, .42) 0 13%, transparent 45%),
    linear-gradient(90deg, transparent, rgba(255, 241, 177, .45), transparent);
  clip-path: polygon(46% 0, 54% 0, 84% 100%, 16% 100%);
  filter: blur(2.5px);
}

.moon-shine::after {
  top: 52%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 15px,
      rgba(255, 248, 203, .14) 15px 27px,
      transparent 27px 48px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 20px,
      rgba(255, 249, 211, .16) 20px 26px,
      transparent 26px 42px
    ),
    radial-gradient(ellipse at 50% 35%, rgba(255, 237, 169, .62) 0 18%, rgba(255, 237, 169, .34) 42%, transparent 78%);
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  filter: blur(1.5px);
}

.moon-shine span {
  position: absolute;
  left: 50%;
  width: 22%;
  height: 6px;
  background: rgba(255, 252, 212, .62);
  box-shadow: 0 0 18px rgba(255, 244, 185, .72);
  transform: translateX(-50%);
  animation: moon-glint 3.4s ease-in-out infinite;
}

.moon-shine span:nth-child(1) {
  top: 24%;
  width: 28%;
}

.moon-shine span:nth-child(2) {
  top: 48%;
  width: 56%;
  animation-delay: .9s;
}

.moon-shine span:nth-child(3) {
  top: 76%;
  width: 88%;
  animation-delay: 1.7s;
}

.alien-disc {
  left: 50%;
  top: clamp(126px, 24vh, 190px);
  z-index: 14;
  width: clamp(108px, 14vw, 174px);
  height: clamp(48px, 6vw, 76px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-170vw) translateY(-22px) scale(.8);
  filter: drop-shadow(0 10px 12px rgba(8, 12, 24, .32));
}

.disc-glass {
  position: absolute;
  left: 50%;
  top: 0;
  width: 42%;
  height: 58%;
  border-radius: 50% 50% 10% 10%;
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, .7), transparent 18%),
    linear-gradient(180deg, #bdf7ff, #6887d8);
  border: 3px solid rgba(245, 255, 255, .65);
  transform: translateX(-50%);
}

.disc-body {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 100%;
  height: 45%;
  border-radius: 50%;
  background:
    linear-gradient(180deg, #f2f5fb 0 32%, #8d95ac 33% 68%, #545d7f 69% 100%);
  box-shadow:
    inset 0 -4px 0 rgba(31, 36, 60, .42),
    0 0 26px rgba(160, 242, 255, .36);
  transform: translateX(-50%);
}

.disc-light {
  position: absolute;
  bottom: 16%;
  z-index: 2;
  width: 8px;
  height: 8px;
  background: #fff4a3;
  box-shadow: 0 0 14px #fff4a3;
  animation: disc-light 1.2s steps(2, end) infinite;
}

.light-one {
  left: 26%;
}

.light-two {
  left: 48%;
  animation-delay: .25s;
}

.light-three {
  left: 70%;
  animation-delay: .5s;
}

.tractor-beam {
  position: absolute;
  left: 50%;
  top: 64%;
  width: clamp(94px, 18vw, 190px);
  height: clamp(210px, 39vh, 330px);
  opacity: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 18px,
      rgba(191, 255, 220, .18) 18px 23px,
      transparent 23px 38px
    ),
    linear-gradient(90deg, transparent, rgba(180, 255, 217, .52), transparent);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  mix-blend-mode: screen;
}

.falling-flowers {
  left: 50%;
  top: clamp(184px, 34vh, 256px);
  z-index: 13;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.falling-bouquet {
  position: absolute;
  width: 42px;
  height: 42px;
  opacity: 0;
  transform: translate(-50%, -20px) rotate(0deg) scale(.78);
}

.ground-bouquet {
  left: calc(50% - clamp(70px, 9vw, 118px));
  bottom: clamp(84px, 13vh, 124px);
  z-index: 12;
  width: 42px;
  height: 42px;
  opacity: 0;
  pointer-events: none;
}

.bouquet-stems {
  position: absolute;
  left: 18px;
  bottom: 5px;
  width: 4px;
  height: 30px;
  background: #3f9f62;
  transform: rotate(-17deg);
  box-shadow:
    8px -1px 0 #3f9f62,
    14px 1px 0 #3f9f62;
}

.bouquet-flower,
.held-bouquet,
.received-bouquet {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #ffffff;
  box-shadow:
    -6px 0 #fff7df,
    6px 0 #fff7df,
    0 -6px #ffffff,
    0 6px #f3ead6;
}

.flower-one {
  left: 6px;
  top: 8px;
}

.flower-two {
  left: 18px;
  top: 2px;
}

.flower-three {
  left: 30px;
  top: 10px;
}

.held-bouquet,
.received-bouquet {
  z-index: 5;
  width: 9px;
  height: 9px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    -8px 0 #fff7df,
    8px 0 #fff7df,
    0 -8px #ffffff,
    0 8px #f3ead6,
    -5px -6px #ffffff,
    5px -6px #fffaf0;
}

.held-bouquet {
  right: -5px;
  bottom: 40%;
  transform: rotate(-16deg) scale(1.12);
}

.received-bouquet {
  left: -7px;
  bottom: 41%;
  transform: rotate(12deg) scale(1.08);
}

.held-bouquet::after,
.received-bouquet::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 4px;
  height: 25px;
  background: #3f9f62;
  box-shadow:
    6px 2px 0 #3f9f62,
    11px 1px 0 #3f9f62;
  transform: rotate(18deg);
}

.scene.is-alien-show .alien-disc {
  animation: alien-arrive 10.6s ease-in-out forwards;
}

.scene.is-alien-show .tractor-beam {
  animation: beam-show 7s ease-in-out 1.25s forwards;
}

.scene.is-alien-show .falling-bouquet {
  animation: bouquet-fall 2.8s ease-in forwards;
  animation-delay: 2.15s;
}

.scene.is-alien-show .ground-bouquet {
  animation: bouquet-ground 7.2s steps(1, end) 4.8s forwards;
}

.scene.is-gifting .hug-arm {
  opacity: 0;
  transition-delay: 0s;
}

.scene.is-gifting .boy-person .arm-right,
.scene.is-gifting .boy-person .arm-right-shadow,
.scene.is-gifting .girl-person .arm-left,
.scene.is-gifting .girl-person .arm-left-shadow {
  opacity: 1;
}

.scene.is-gifting .boy-person,
.scene.is-gifting .girl-person {
  animation: idle 1.2s steps(2, end) infinite;
}

.scene.is-gifting .boy-wrap {
  animation: boy-gift-walk 6.4s ease-in-out forwards;
}

.scene.is-gifting .held-bouquet {
  animation: held-bouquet 6.4s steps(1, end) forwards;
}

.scene.is-gifting .received-bouquet {
  animation: received-bouquet 6.4s steps(1, end) forwards;
}

.scene.is-gifted .received-bouquet {
  animation: none;
  opacity: 1;
}

.sky-explosion {
  left: 50%;
  top: clamp(62px, 12vh, 112px);
  z-index: 16;
  width: clamp(120px, 17vw, 210px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.4);
}

.sky-explosion::before,
.sky-explosion::after {
  content: "";
  position: absolute;
  inset: 34%;
  background: #fff3a5;
  box-shadow:
    0 -38px 0 #fff3a5,
    0 38px 0 #ff7aaa,
    -38px 0 0 #9effe7,
    38px 0 0 #fff3a5,
    -54px -14px 0 #ffffff,
    54px 16px 0 #ffffff;
}

.sky-explosion::after {
  inset: 41%;
  background: #ff7aaa;
  box-shadow:
    -28px -28px 0 #fff3a5,
    28px -28px 0 #9effe7,
    -28px 28px 0 #9effe7,
    28px 28px 0 #ff7aaa,
    0 -48px 0 #ffffff,
    0 48px 0 #fff3a5;
  transform: rotate(45deg);
}

.sky-explosion span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: #fff8bf;
  box-shadow:
    0 -16px 0 #ffffff,
    0 16px 0 #9effe7,
    -16px 0 0 #fff3a5,
    16px 0 0 #ff8fbc;
  transform-origin: 50% 0;
}

.sky-explosion span:nth-child(1) {
  transform: rotate(0deg);
}

.sky-explosion span:nth-child(2) {
  transform: rotate(45deg);
}

.sky-explosion span:nth-child(3) {
  transform: rotate(90deg);
}

.sky-explosion span:nth-child(4) {
  transform: rotate(135deg);
}

.scene.is-exploding .sky-explosion {
  animation: sky-explode 1.35s steps(5, end) forwards;
}

.final-message {
  left: 50%;
  top: clamp(78px, 15vh, 126px);
  z-index: 17;
  display: grid;
  justify-items: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px) scale(.86);
  color: #fff6c7;
  text-align: center;
  text-shadow:
    0 3px 0 rgba(29, 20, 31, .48),
    0 0 22px rgba(255, 242, 172, .78);
}

.final-message span {
  position: relative;
  display: block;
  white-space: nowrap;
  font-weight: 900;
  font-size: clamp(1.7rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0;
  color: #fff9c9;
  text-shadow:
    0 2px 0 rgba(29, 20, 31, .46),
    0 0 7px #ffffff,
    0 0 18px rgba(255, 242, 172, .82);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .55));
}

.final-message span::before,
.final-message span::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #fff;
  box-shadow:
    14px -10px 0 #fff3a5,
    34px 4px 0 #ffffff,
    58px -13px 0 #fff3a5,
    82px 2px 0 #ffffff,
    112px -8px 0 #fff3a5;
  opacity: 0;
  transform: scale(.4);
}

.final-message span::before {
  left: -18px;
  top: -12px;
}

.final-message span::after {
  right: -6px;
  bottom: -2px;
  transform: scale(.4) rotate(45deg);
}

.final-message i {
  position: relative;
  display: block;
  width: clamp(24px, 5vw, 42px);
  aspect-ratio: 1;
  background: #06060a;
  transform: rotate(-45deg);
}

.final-message i::before,
.final-message i::after {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #06060a;
}

.final-message i::before {
  top: -50%;
  left: 0;
}

.final-message i::after {
  left: 50%;
  top: 0;
}

.scene.is-love-message .final-message {
  animation: love-message-in .8s cubic-bezier(.2, .9, .25, 1.25) forwards;
}

.scene.is-love-message .final-message span::before,
.scene.is-love-message .final-message span::after {
  animation: star-text-sparkle 1.2s steps(2, end) .15s infinite;
}

.shore {
  position: absolute;
  top: -13px;
  left: -4%;
  right: -4%;
  height: 27px;
  background: repeating-linear-gradient(
    90deg,
    rgba(224, 252, 244, .88) 0 36px,
    rgba(224, 252, 244, .4) 36px 57px,
    transparent 57px 84px
  );
  clip-path: polygon(0 28%, 7% 45%, 14% 34%, 24% 62%, 36% 36%, 47% 57%, 60% 33%, 73% 58%, 88% 37%, 100% 51%, 100% 100%, 0 100%);
  opacity: .82;
}

.sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(255, 244, 191, .75);
  z-index: 1;
  animation: sparkle 3s ease-in-out infinite;
}

.sparkle-one {
  left: 23%;
  bottom: 32%;
}

.sparkle-two {
  left: 72%;
  bottom: 46%;
  animation-delay: .7s;
}

.sparkle-three {
  left: 51%;
  bottom: 21%;
  animation-delay: 1.5s;
}

.lovers {
  left: 0;
  right: 0;
  bottom: clamp(72px, 12vh, 118px);
  height: clamp(150px, 28vh, 232px);
  z-index: 8;
  pointer-events: none;
}

.sprite-wrap {
  --walk: 0px;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: clamp(76px, 12vw, 118px);
  transform: translateX(calc(-50% + var(--walk)));
  transform-origin: bottom center;
  transition: transform 2.15s cubic-bezier(.22, .88, .26, 1);
}

.boy-wrap {
  left: calc(50% - var(--start-gap));
}

.girl-wrap {
  left: calc(50% + var(--start-gap));
}

.scene.is-hugging .boy-wrap {
  --walk: var(--walk-distance);
}

.scene.is-hugging .girl-wrap {
  --walk: calc(var(--walk-distance) * -1);
}

.ground-shadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 72%;
  height: 10px;
  transform: translateX(-50%);
  background: rgba(36, 27, 28, .28);
  filter: blur(1px);
}

.pixel-person {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  filter:
    drop-shadow(0 5px 0 rgba(28, 21, 25, .28))
    drop-shadow(0 0 1px rgba(255, 247, 221, .24));
  animation: idle 2.4s steps(2, end) infinite;
  transform-origin: bottom center;
}

.girl-person {
  animation-delay: .4s;
}

.scene.is-hugging .boy-person {
  animation: cuddle-boy 1.65s ease-in-out 2.25s infinite;
}

.scene.is-hugging .girl-person {
  animation: cuddle-girl 1.65s ease-in-out 2.25s infinite;
}

.hair {
  fill: var(--hair);
}

.hair-dark {
  fill: var(--hair-dark);
}

.skin {
  fill: var(--skin);
}

.skin-shadow,
.leg {
  fill: var(--skin-shadow);
}

.eye,
.shoe {
  fill: #171820;
}

.cheek {
  fill: #ff7b9a;
}

.arm-left,
.arm-right,
.arm-left-shadow,
.arm-right-shadow {
  transition: opacity .2s ease 2.02s;
}

.scene.is-hugging .boy-person .arm-right,
.scene.is-hugging .boy-person .arm-right-shadow,
.scene.is-hugging .girl-person .arm-left,
.scene.is-hugging .girl-person .arm-left-shadow {
  opacity: 0;
}

.scene.is-hugging.is-gifting .boy-person .arm-right,
.scene.is-hugging.is-gifting .boy-person .arm-right-shadow,
.scene.is-hugging.is-gifting .girl-person .arm-left,
.scene.is-hugging.is-gifting .girl-person .arm-left-shadow {
  opacity: 1;
}

.shirt {
  fill: var(--shirt);
}

.shirt-dark {
  fill: #d8d0be;
}

.shirt-light {
  fill: #ffffff;
}

.pants {
  fill: #eee6d7;
}

.dress {
  fill: var(--dress);
}

.dress-dark {
  fill: #d8d0be;
}

.dress-light,
.bow {
  fill: #ffffff;
}

.hug-arm {
  position: absolute;
  left: 50%;
  bottom: clamp(50px, 8vw, 76px);
  z-index: 12;
  width: clamp(54px, 8vw, 86px);
  height: clamp(11px, 1.5vw, 16px);
  opacity: 0;
  background: linear-gradient(180deg, var(--skin), var(--skin-shadow));
  box-shadow:
    0 0 0 2px rgba(71, 36, 33, .16),
    0 2px 0 rgba(47, 27, 29, .18);
  image-rendering: pixelated;
  transition: opacity .25s ease 2.05s, transform .42s steps(3, end) 2.05s;
}

.hug-arm::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 12px;
  height: 12px;
  background: var(--skin);
  box-shadow: 0 2px 0 var(--skin-shadow);
}

.hug-arm-boy::after {
  right: -6px;
}

.hug-arm-girl::after {
  left: -6px;
}

.hug-arm-boy {
  transform: translateX(-58%) translateY(12px) rotate(-7deg) scaleX(.72);
}

.hug-arm-girl {
  transform: translateX(-22%) translateY(18px) rotate(8deg) scaleX(.72);
}

.scene.is-hugging .hug-arm {
  opacity: 1;
}

.scene.is-hugging.is-gifting .hug-arm {
  opacity: 0;
  transition-delay: 0s;
}

.scene.is-hugging .hug-arm-boy {
  transform: translateX(-61%) translateY(0) rotate(-7deg) scaleX(1);
}

.scene.is-hugging .hug-arm-girl {
  transform: translateX(-38%) translateY(8px) rotate(8deg) scaleX(1);
}

.hug-light {
  left: 50%;
  bottom: clamp(96px, 15vh, 145px);
  z-index: 7;
  width: clamp(128px, 20vw, 238px);
  aspect-ratio: 1;
  transform: translateX(-50%) scale(.25);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 247, 180, .98) 0 12%,
    rgba(255, 177, 128, .62) 23%,
    rgba(255, 104, 166, .42) 41%,
    rgba(255, 233, 176, .17) 58%,
    transparent 72%
  );
  mix-blend-mode: screen;
  filter: blur(1px);
  transition: opacity .5s ease 1.9s, transform .7s cubic-bezier(.21, .91, .4, 1.25) 1.9s;
}

.scene.is-hugging .hug-light {
  opacity: .84;
  transform: translateX(-50%) scale(.88);
  animation: glow-pulse 1.8s ease-in-out 2.4s infinite;
}

.ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 64%;
  background: linear-gradient(180deg, rgba(255, 244, 163, .8), transparent);
  transform-origin: center top;
  opacity: .58;
}

.ray-one {
  transform: translateX(-50%) rotate(0deg);
}

.ray-two {
  transform: translateX(-50%) rotate(45deg);
}

.ray-three {
  transform: translateX(-50%) rotate(90deg);
}

.ray-four {
  transform: translateX(-50%) rotate(135deg);
}

.heart-burst {
  left: 50%;
  bottom: clamp(160px, 26vh, 248px);
  z-index: 13;
  pointer-events: none;
}

.heart-burst span {
  position: absolute;
  width: 6px;
  height: 6px;
  opacity: 0;
  background: #ff7aaa;
  box-shadow:
    -6px 0 #ff7aaa,
    6px 0 #ff7aaa,
    -6px 6px #ff7aaa,
    0 6px #ff7aaa,
    6px 6px #ff7aaa,
    0 12px #ff7aaa;
  transform: translate(0, 0) rotate(45deg) scale(.35);
}

.scene.is-hugging .heart-burst span {
  animation: heart-float 2.7s ease-out forwards;
  animation-delay: var(--delay);
}

.love-note {
  left: 50%;
  bottom: clamp(22px, 4vh, 36px);
  z-index: 10;
  width: min(88vw, 580px);
  margin: 0;
  transform: translate(-50%, 18px);
  opacity: 0;
  color: #fff8de;
  text-align: center;
  text-shadow: 0 2px 0 rgba(20, 18, 30, .42), 0 0 24px rgba(255, 218, 146, .45);
  font-size: clamp(1rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: 0;
  transition: opacity .55s ease 2.2s, transform .55s ease 2.2s;
}

.scene.is-hugging .love-note {
  opacity: 1;
  transform: translate(-50%, 0);
}

.heart-button {
  --button-heart-size: clamp(18px, 3.8vw, 24px);
  left: 50%;
  bottom: clamp(76px, 8vh, 94px);
  z-index: 20;
  display: grid;
  width: clamp(54px, 8vw, 72px);
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 247, 206, .82);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .48), transparent 22%),
    linear-gradient(180deg, #ff8cb6, #e54682);
  box-shadow:
    0 10px 0 rgba(53, 27, 43, .18),
    0 0 30px rgba(255, 124, 176, .42);
  transform: translateX(-50%);
  cursor: pointer;
  transition: transform .2s ease, opacity .3s ease, filter .3s ease;
}

.heart-button:hover {
  transform: translateX(-50%) translateY(-3px);
  filter: brightness(1.08);
}

.heart-button:active {
  transform: translateX(-50%) translateY(3px) scale(.96);
}

.heart-button:focus-visible {
  outline: 3px solid #fff7bd;
  outline-offset: 4px;
}

.scene.is-hugging .heart-button {
  z-index: 6;
  opacity: .16;
  pointer-events: none;
  transform: translateX(-50%) translateY(14px) scale(.84);
}

.heart-button:disabled {
  cursor: default;
}

.heart-shape {
  position: relative;
  width: var(--button-heart-size);
  height: var(--button-heart-size);
  transform: rotate(-45deg);
  background: #fff2f7;
  box-shadow: 0 2px 0 rgba(174, 49, 103, .25);
}

.heart-shape::before,
.heart-shape::after {
  content: "";
  position: absolute;
  width: var(--button-heart-size);
  height: var(--button-heart-size);
  border-radius: 50%;
  background: #fff2f7;
}

.heart-shape::before {
  top: calc(var(--button-heart-size) * -.5);
  left: 0;
}

.heart-shape::after {
  left: calc(var(--button-heart-size) * .5);
  top: 0;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: .42;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes tide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(96px);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: .28;
    transform: scale(.8);
  }

  50% {
    opacity: .9;
    transform: scale(1.25);
  }
}

@keyframes moon-glint {
  0%,
  100% {
    opacity: .28;
    transform: translateX(-50%) scaleX(.75);
  }

  50% {
    opacity: .9;
    transform: translateX(-50%) scaleX(1.18);
  }
}

@keyframes moon-ready {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.018);
  }
}

@keyframes alien-arrive {
  0% {
    opacity: 0;
    transform: translateX(-170vw) translateY(-26px) scale(.78);
  }

  12% {
    opacity: 1;
  }

  30% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  48% {
    transform: translateX(-50%) translateY(-9px) scale(1);
  }

  70% {
    opacity: 1;
    transform: translateX(-50%) translateY(4px) scale(1);
  }

  82% {
    opacity: 1;
    transform: translateX(-50%) translateY(-18px) scale(.96);
  }

  90% {
    opacity: 1;
    transform: translateX(-50%) translateY(-78px) scale(.64);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-104px) scale(.46);
  }
}

@keyframes disc-light {
  0%,
  100% {
    background: #fff4a3;
    box-shadow: 0 0 14px #fff4a3;
  }

  50% {
    background: #9effe7;
    box-shadow: 0 0 18px #9effe7;
  }
}

@keyframes beam-show {
  0%,
  12% {
    opacity: 0;
  }

  24%,
  74% {
    opacity: .82;
  }

  100% {
    opacity: 0;
  }
}

@keyframes sky-explode {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(.25) rotate(0deg);
    filter: brightness(1);
  }

  25% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
    filter: brightness(1.35);
  }

  58% {
    opacity: 1;
    transform: translateX(-50%) scale(1.25) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.55) rotate(90deg);
    filter: brightness(1.65);
  }
}

@keyframes love-message-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(.82);
  }

  72% {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes star-text-sparkle {
  0%,
  100% {
    opacity: .55;
    filter: brightness(1);
  }

  50% {
    opacity: 1;
    filter: brightness(1.6);
  }
}

@keyframes bouquet-fall {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) rotate(0deg) scale(.78);
  }

  12% {
    opacity: 1;
  }

  86% {
    opacity: 1;
    transform: translate(calc(-50% + clamp(-118px, -9vw, -70px)), clamp(245px, 44vh, 350px)) rotate(-12deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + clamp(-118px, -9vw, -70px)), clamp(258px, 46vh, 365px)) rotate(-12deg) scale(.96);
  }
}

@keyframes bouquet-ground {
  0%,
  21% {
    opacity: 1;
  }

  22%,
  100% {
    opacity: 0;
  }
}

@keyframes boy-gift-walk {
  0% {
    transform: translateX(calc(-50% + var(--walk-distance))) translateY(0);
  }

  18% {
    transform: translateX(calc(-50% + var(--walk-distance) - clamp(78px, 10vw, 118px))) translateY(0);
  }

  36% {
    transform: translateX(calc(-50% + var(--walk-distance) - clamp(78px, 10vw, 118px))) translateY(-2px);
  }

  68% {
    transform: translateX(calc(-50% + var(--walk-distance) + clamp(10px, 3vw, 34px))) translateY(0);
  }

  100% {
    transform: translateX(calc(-50% + var(--walk-distance) + clamp(10px, 3vw, 34px))) translateY(0);
  }
}

@keyframes held-bouquet {
  0%,
  20% {
    opacity: 0;
  }

  21%,
  76% {
    opacity: 1;
  }

  77%,
  100% {
    opacity: 0;
  }
}

@keyframes received-bouquet {
  0%,
  76% {
    opacity: 0;
  }

  77%,
  100% {
    opacity: 1;
  }
}

@keyframes idle {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes cuddle-boy {
  0%,
  100% {
    transform: translateX(3px) rotate(1.5deg);
  }

  50% {
    transform: translateX(7px) rotate(2.5deg);
  }
}

@keyframes cuddle-girl {
  0%,
  100% {
    transform: translateX(-3px) rotate(-1.5deg);
  }

  50% {
    transform: translateX(-7px) rotate(-2.5deg);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    filter: blur(1px) brightness(.98);
  }

  50% {
    filter: blur(2px) brightness(1.08);
  }
}

@keyframes heart-float {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(45deg) scale(.3);
  }

  16% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(45deg) scale(1);
  }
}

@media (max-width: 640px) {
  .scene {
    --start-gap: clamp(82px, 31vw, 150px);
  }

  .sky {
    inset: 0 0 42%;
  }

  .ocean {
    bottom: 27%;
    height: 35%;
  }

  .sand {
    height: 31%;
  }

  .lovers {
    bottom: clamp(94px, 15vh, 135px);
  }

  .sprite-wrap {
    width: clamp(66px, 21vw, 88px);
  }

  .palm {
    opacity: .92;
  }

  .moon {
    top: clamp(184px, 23vh, 206px);
    width: clamp(218px, 62vw, 260px);
  }

  .moon-shine {
    top: clamp(250px, 30vh, 276px);
    width: clamp(270px, 92vw, 360px);
  }

  .moon-shine::before {
    clip-path: polygon(43% 0, 57% 0, 90% 100%, 10% 100%);
  }

  .moon-shine::after {
    clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  }

  .moon-shine span:nth-child(1) {
    width: 46%;
  }

  .hug-light {
    bottom: clamp(124px, 18vh, 164px);
    z-index: 9;
    width: clamp(154px, 48vw, 220px);
    background: radial-gradient(
      circle,
      rgba(255, 251, 190, .95) 0 14%,
      rgba(255, 203, 126, .68) 28%,
      rgba(255, 103, 177, .5) 45%,
      rgba(255, 235, 178, .22) 61%,
      transparent 78%
    );
  }

  .scene.is-hugging .hug-light {
    opacity: .78;
    transform: translateX(-50%) scale(.94);
    filter: blur(1px) brightness(1.06);
  }

  .ray {
    width: 8px;
    opacity: .58;
  }

  .palm-left,
  .palm-right {
    width: clamp(122px, 38vw, 164px);
    height: clamp(220px, 60vw, 284px);
    bottom: clamp(-230px, -24vh, -164px);
  }

  .palm-left-small,
  .palm-right-small {
    display: none;
  }

  .heart-button {
    --button-heart-size: clamp(15px, 4vw, 18px);
    bottom: clamp(78px, 9vh, 98px);
    width: clamp(46px, 12vw, 50px);
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}