:root {
  --pink: #f9d8de;
  --lavender: #b1a6d2;
  --lavender-soft: #d4cce8;
  --sky: #a2ddf2;
  --peach: #f6c9a8;
  --ink: #5a4a63;
  --card-w: 400px;
  --img-ratio: 1080 / 1920;
  --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath fill='%23000' d='M16 28.2C16 28.2 1.5 18.4 1.5 9.6 1.5 4.8 5.2 1.5 9.6 1.5c2.7 0 5.1 1.4 6.4 3.5C17.3 2.9 19.7 1.5 22.4 1.5c4.4 0 8.1 3.3 8.1 8.1 0 8.8-14.5 18.6-14.5 18.6z'/%3E%3C/svg%3E");
  color-scheme: only light;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  background: #ffe4ec;
}

body {
  font-family: "Quicksand", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, #ffe8ef 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 80%, #e8e0f7 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 15% 70%, #d9f0fa 0%, transparent 45%),
    linear-gradient(165deg, #ffe4ec 0%, #f3eef9 45%, #eaf6fb 100%);
  overflow-x: hidden;
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}

body.is-opening,
body.is-open {
  overflow: hidden;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient__glow {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  animation: drift 12s ease-in-out infinite;
  /* En desktop usamos blur; en móvil, gradiente suave (más barato) */
  background: radial-gradient(circle, var(--pink) 0%, transparent 70%);
}

.ambient__glow--a {
  width: min(55vw, 420px);
  height: min(55vw, 420px);
  top: -8%;
  left: 10%;
  background: radial-gradient(circle, var(--pink) 0%, transparent 70%);
}

.ambient__glow--b {
  width: min(45vw, 360px);
  height: min(45vw, 360px);
  bottom: 5%;
  right: 5%;
  background: radial-gradient(circle, var(--lavender-soft) 0%, transparent 70%);
  animation-delay: -4s;
  animation-duration: 14s;
}

.ambient__glow--c {
  width: min(40vw, 300px);
  height: min(40vw, 300px);
  top: 40%;
  left: -5%;
  background: radial-gradient(circle, var(--sky) 0%, transparent 70%);
  animation-delay: -7s;
  animation-duration: 16s;
}

.sparkles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  display: block;
  background: transparent !important;
  /* En móvil: el negro residual del canvas se vuelve invisible */
  mix-blend-mode: screen;
}

body.is-open .sparkles {
  opacity: 0.55;
}

.invite {
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 6;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: linear-gradient(165deg, #ffe4ec 0%, #f3eef9 45%, #eaf6fb 100%);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.invite.is-revealing,
.invite.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
  animation: none;
}

/* La imagen siempre a tamaño final; el velo es el que se abre en forma de corazón */
.invite.is-revealing .invite__aperture {
  opacity: 1;
  -webkit-mask-image: var(--heart-mask), linear-gradient(#000 0 0);
  mask-image: var(--heart-mask), linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% var(--hy, 61%), 0 0;
  mask-position: 50% var(--hy, 61%), 0 0;
  -webkit-mask-size: 22px 20px, 100% 100%;
  mask-size: 22px 20px, 100% 100%;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: invite-aperture 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.invite.is-open .invite__aperture {
  opacity: 0;
  pointer-events: none;
  animation: none;
  transition: opacity 0.2s ease;
}

.invite.is-open.is-settled .invite__aperture {
  display: none;
}

.invite__sheet {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 16px 40px rgba(154, 120, 150, 0.26);
}

.invite__frame {
  position: relative;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #fff8fb;
}

.invite__aperture {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(165deg, #ffe4ec 0%, #f3eef9 45%, #eaf6fb 100%);
}

.map-hotspot {
  position: absolute;
  left: 27%;
  top: 87.5%;
  width: 30%;
  height: 3.2%;
  border-radius: 0.45em;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: map-pulse 1.8s ease-in-out infinite;
}

.map-hotspot::before,
.map-hotspot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.map-hotspot::before {
  background: rgba(239, 127, 156, 0.22);
  animation: map-pulse-glow 1.8s ease-in-out infinite;
}

.map-hotspot::after {
  border: 1.5px solid rgba(239, 127, 156, 0.5);
  opacity: 0;
  animation: map-pulse-ring 1.8s ease-out infinite;
}

@keyframes map-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes map-pulse-glow {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.65;
  }
}

@keyframes map-pulse-ring {
  0% {
    opacity: 0.65;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

.footprints {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
}

.footprint {
  position: absolute;
  width: 3.5rem;
  height: 4rem;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.7);
  filter: drop-shadow(0 3px 5px rgba(120, 90, 120, 0.25));
  animation: footprint-stomp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0ms);
  color: var(--print, #ef7f9c);
}

.footprint svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.footprint--alt {
  --print: #b1a6d2;
}

.footprint--sky {
  --print: #7ec8e3;
}

.footprint--left {
  animation-name: footprint-stomp-left;
}

@keyframes footprint-stomp {
  0% {
    opacity: 0;
    transform: translate(-50%, -62%) rotate(var(--rot, 0deg)) scale(0.4);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.12);
  }
  55% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.96);
  }
  100% {
    opacity: 0.92;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }
}

@keyframes footprint-stomp-left {
  0% {
    opacity: 0;
    transform: translate(-50%, -62%) scaleX(-1) rotate(var(--rot, 0deg)) scale(0.4);
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(-1) rotate(var(--rot, 0deg)) scale(1.12);
  }
  55% {
    transform: translate(-50%, -50%) scaleX(-1) rotate(var(--rot, 0deg)) scale(0.96);
  }
  100% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scaleX(-1) rotate(var(--rot, 0deg)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footprint {
    animation: none !important;
    opacity: 0.9;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }

  .footprint--left {
    transform: translate(-50%, -50%) scaleX(-1) rotate(var(--rot, 0deg)) scale(1);
  }
}

.stage {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Móvil: ancho completo, con bordes redondeados */
.cover {
  position: relative;
  width: 100%;
  max-width: 100%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 2.4s cubic-bezier(0.33, 0, 0.2, 1),
    transform 2.6s cubic-bezier(0.33, 0, 0.2, 1),
    filter 2.4s ease;
  z-index: 3;
}

.cover.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.cover__halo {
  position: absolute;
  inset: -12% -8%;
  border-radius: 40% 40% 32% 32%;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.8) 0%, transparent 55%),
    radial-gradient(circle at 50% 55%, rgba(177, 166, 210, 0.45) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0.85);
  animation: halo-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
  z-index: 0;
  pointer-events: none;
}

.cover__frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 16px 40px rgba(154, 120, 150, 0.26),
    0 0 70px rgba(255, 200, 220, 0.4);
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  animation: magic-reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.cover__image,
.invite__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--img-ratio);
  object-fit: fill;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: none;
  background: #fff8fb;
  transform: none;
}

.cover__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.12) 42%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.14) 58%,
    transparent 72%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: sheen 3.2s ease-in-out 1.4s infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
  z-index: 2;
}

@media (max-width: 767px) {
  .cover__sheen {
    mix-blend-mode: overlay;
    opacity: 0.95;
  }
}

.heart-hotspot {
  position: absolute;
  left: 50%;
  /* 1080x1920: el sello queda más arriba que en el formato anterior */
  top: 76.4%;
  width: max(18%, 58px);
  max-width: 92px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 4;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-clip-path: url(#heartHotspotClip);
  clip-path: url(#heartHotspotClip);
}

.heart-hotspot__pulse,
.heart-hotspot__ring {
  position: absolute;
  inset: 4%;
  pointer-events: none;
  border-radius: 0;
  -webkit-clip-path: url(#heartHotspotClip);
  clip-path: url(#heartHotspotClip);
}

.heart-hotspot__pulse {
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 190, 210, 0.7) 0%,
    rgba(239, 127, 156, 0.4) 48%,
    transparent 74%
  );
  animation: heart-glow 1.8s ease-in-out infinite;
}

.heart-hotspot__ring {
  inset: 0;
  border: 0;
  background: rgba(239, 127, 156, 0.35);
  opacity: 0;
  transform: scale(0.78);
  animation: heart-ring 2.2s ease-out infinite;
}

.heart-hotspot:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 3px rgba(239, 127, 156, 0.9));
}

.cover__hint {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 5.5%;
  z-index: 4;
  margin: 0;
  padding: 0 0.85rem;
  text-align: center;
  font-size: clamp(0.85rem, 2.8vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.95);
  opacity: 0;
  animation: hint-in 0.9s ease 1.7s forwards, hint-pulse 2.4s ease-in-out 2.6s infinite;
  pointer-events: none;
}

@media (min-width: 768px) {
  .stage {
    padding: 1.5rem 1rem;
  }

  .sparkles {
    mix-blend-mode: normal;
  }

  .ambient__glow {
    filter: blur(40px);
  }

  .ambient__glow--a {
    background: var(--pink);
  }

  .ambient__glow--b {
    background: var(--lavender-soft);
  }

  .ambient__glow--c {
    background: var(--sky);
  }

  .cover__halo {
    filter: blur(18px);
  }

  .cover__frame {
    border-radius: 18px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.55),
      0 20px 50px rgba(154, 120, 150, 0.28),
      0 0 80px rgba(255, 200, 220, 0.45);
    animation-name: magic-reveal-desktop;
  }

  .cover {
    width: min(96vw, var(--card-w));
    max-width: var(--card-w);
  }

  .cover.is-leaving {
    filter: blur(8px) brightness(1.15);
  }

  .cover__hint {
    bottom: 6%;
  }

  .invite {
    padding: 1.5rem 1rem;
    /* start evita recentrar al habilitar scroll tras la animación */
    align-items: start;
  }

  .invite.is-revealing .invite__aperture {
    -webkit-mask-position: 50% var(--hy, 60%), 0 0;
    mask-position: 50% var(--hy, 60%), 0 0;
  }

  .invite__sheet {
    width: min(96vw, var(--card-w));
    max-width: var(--card-w);
    border-radius: 18px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.55),
      0 24px 60px rgba(154, 120, 150, 0.3);
  }

  .invite__frame {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .heart-hotspot {
    top: 76.4%;
  }

  .map-hotspot {
    left: 27%;
    top: 87.5%;
    width: 30%;
    height: 3.2%;
  }
}

@keyframes magic-reveal-desktop {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.92) rotate(-1.5deg);
    filter: blur(8px) brightness(1.2);
  }
  55% {
    opacity: 1;
    filter: blur(0) brightness(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0) brightness(1);
  }
}

@keyframes drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(18px, -24px) scale(1.08);
  }
}

@keyframes magic-reveal {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes halo-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes sheen {
  0%,
  40% {
    transform: translateX(-120%) skewX(-12deg);
  }
  70%,
  100% {
    transform: translateX(140%) skewX(-12deg);
  }
}

@keyframes heart-glow {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@keyframes heart-ring {
  0% {
    opacity: 0.7;
    transform: scale(0.75);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

@keyframes hint-in {
  to {
    opacity: 0.72;
  }
}

@keyframes hint-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: translateY(0);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}

@keyframes invite-aperture {
  0% {
    -webkit-mask-size: 22px 20px, 100% 100%;
    mask-size: 22px 20px, 100% 100%;
  }
  18% {
    -webkit-mask-size: 14vmin 12.5vmin, 100% 100%;
    mask-size: 14vmin 12.5vmin, 100% 100%;
  }
  100% {
    -webkit-mask-size: 340vmax 310vmax, 100% 100%;
    mask-size: 340vmax 310vmax, 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient__glow,
  .cover__frame,
  .cover__halo,
  .cover__sheen,
  .cover__hint,
  .heart-hotspot__pulse,
  .heart-hotspot__ring,
  .map-hotspot,
  .map-hotspot::before,
  .map-hotspot::after,
  .invite.is-revealing,
  .invite.is-revealing .invite__aperture {
    animation: none !important;
  }

  .cover__frame,
  .cover__halo,
  .cover__hint {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .invite.is-revealing .invite__aperture {
    opacity: 0;
    display: none;
  }
}