/* --------------------------------------------------------------------------
   Invitación — Fase 1 (solo presentación)
   Convención: prefijo .inv- evitado; scope por #invitation-app en capas críticas
   Rails: este archivo puede pasar a app/assets/stylesheets/invitation.scss
--------------------------------------------------------------------------- */

:root {
  --color-bg-envelope: #d9d9db;
  --color-paper: #f7f6f4;
  --color-paper-edge: #e6e4e0;
  --color-ink: #1a1a1a;
  --color-gold-mid: #c9a227;
  --color-gold-light: #e8d48b;
  --color-gold-dark: #8a6f1c;
  --color-forest: #10403b;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-script: "Great Vibes", cursive;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  min-height: 100vh;
  font-family: var(--font-serif);
  color: var(--color-ink);
  background: var(--color-bg-envelope);
}

#invitation-app {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  overflow-x: hidden;
}

.music-widget {
  position: fixed;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 0.2rem);
  z-index: 45;
}

.music-widget--audio-only {
  right: -9999px;
  bottom: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.music-widget__iframe {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
}

.music-widget__audio {
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.music-widget__button {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  text-decoration: none;
  color: #f7efe0;
  background: rgba(8, 75, 70, 0.86);
  border: 1px solid rgba(193, 157, 98, 0.7);
  box-shadow:
    inset 0 0.1rem 0.22rem rgba(255, 255, 255, 0.28),
    0 0.22rem 0.6rem rgba(0, 0, 0, 0.22);
  font-size: 1.25rem;
}

.transition-heart {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(120% 85% at 50% 40%, rgba(20, 103, 96, 0.96) 0%, rgba(9, 62, 57, 0.98) 100%);
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.transition-heart__pulse {
  font-size: clamp(3rem, 18vw, 5.6rem);
  color: rgba(247, 238, 229, 0.95);
  text-shadow:
    0 0 1.2rem rgba(255, 255, 255, 0.25),
    0 0 2.2rem rgba(252, 233, 212, 0.25);
  transform: scale(0.92);
  opacity: 0.2;
}

#invitation-app.is-transitioning .transition-heart {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

#invitation-app.is-transitioning .transition-heart__pulse {
  animation: heart-soft-blink 880ms ease-in-out infinite;
}

/* --- Pantalla sobre --- */

.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(130% 95% at 50% 35%, #ededee 0%, #d8d9db 52%, #cfd1d3 100%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.05));
  transition:
    opacity 0.9s var(--ease-out-expo),
    visibility 0s linear 0.9s;
}

#invitation-app.is-revealed .envelope-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-stage {
  width: min(88vw, 22rem);
  aspect-ratio: 3 / 4.2;
  perspective: 1380px;
  perspective-origin: 50% 38%;
}

.envelope {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0.6rem 1.9rem rgba(0, 0, 0, 0.2));
  transition: transform 1.1s var(--ease-out-expo);
}

#invitation-app.is-opening .envelope {
  transform: translateY(-2%) scale(0.98);
}

#invitation-app.is-revealed .envelope {
  transform: translateY(-6%) scale(0.94);
}

.envelope__shadow {
  position: absolute;
  inset: 10% 7% 2%;
  border-radius: 4px;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.04) 70%),
    rgba(0, 0, 0, 0.08);
  filter: blur(14px);
  transform: translateY(9%);
  z-index: 0;
}

.envelope__sheet {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 18%;
  bottom: 12%;
  background:
    linear-gradient(180deg, #fff 0%, var(--color-paper) 100%),
    repeating-linear-gradient(
      165deg,
      rgba(0, 0, 0, 0.02) 0 2px,
      rgba(255, 255, 255, 0.02) 2px 4px
    );
  border: 1px solid rgba(170, 164, 152, 0.32);
  box-shadow:
    inset 0 -0.45rem 0.8rem rgba(151, 145, 135, 0.14),
    0 0.25rem 0.35rem rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  z-index: 1;
  opacity: 0;
  transform: translateY(12%);
  transition:
    opacity 0.5s var(--ease-in-out-soft),
    transform 1s var(--ease-out-expo);
}

#invitation-app.is-opening .envelope__sheet {
  opacity: 1;
  transform: translateY(0);
}

.envelope__body {
  position: absolute;
  inset: 12% 0 0;
  background:
    linear-gradient(168deg, #fefdfb 0%, #f4f2ed 42%, #e4e0d8 100%),
    repeating-linear-gradient(
      160deg,
      rgba(255, 255, 255, 0.08) 0 2px,
      rgba(0, 0, 0, 0.03) 2px 4px
    );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  border-radius: 3px;
  border: 1px solid rgba(191, 183, 169, 0.7);
  box-shadow:
    inset 0 0.85rem 1.2rem rgba(255, 255, 255, 0.5),
    inset 0 -0.85rem 1rem rgba(120, 112, 100, 0.16);
  z-index: 2;
  overflow: hidden;
}

.envelope__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, transparent 46%, rgba(156, 147, 133, 0.22) 50%, transparent 54%),
    linear-gradient(30deg, transparent 46%, rgba(156, 147, 133, 0.22) 50%, transparent 54%);
  opacity: 0.9;
  pointer-events: none;
}

.envelope__fold {
  position: absolute;
  z-index: 3;
  background:
    linear-gradient(145deg, #faf9f6 0%, #ece8e1 62%, #dfd9cf 100%),
    repeating-linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.08) 0 2px,
      rgba(0, 0, 0, 0.03) 2px 4px
    );
  box-shadow: inset 0 0 0 1px rgba(194, 186, 172, 0.7);
}

.envelope__fold--left {
  left: 0;
  bottom: 0;
  width: 50.5%;
  height: 78%;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transform-origin: 0 100%;
  box-shadow:
    inset -0.45rem -0.3rem 0.65rem rgba(134, 124, 109, 0.18),
    inset 0.35rem 0.1rem 0.5rem rgba(255, 255, 255, 0.32);
}

.envelope__fold--right {
  right: 0;
  bottom: 0;
  width: 50.5%;
  height: 78%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform-origin: 100% 100%;
  box-shadow:
    inset 0.45rem -0.3rem 0.65rem rgba(134, 124, 109, 0.18),
    inset -0.35rem 0.1rem 0.5rem rgba(255, 255, 255, 0.32);
}

.envelope__fold--bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  z-index: 4;
  background:
    linear-gradient(180deg, #f6f3ef 0%, #e3ddd3 62%, #d7d1c5 100%),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0 2px,
      rgba(0, 0, 0, 0.03) 2px 4px
    );
  box-shadow:
    inset 0 0.55rem 0.75rem rgba(255, 255, 255, 0.3),
    inset 0 -0.65rem 0.9rem rgba(114, 104, 89, 0.22);
}

.envelope__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 12%;
  height: 48%;
  z-index: 5;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background:
    linear-gradient(180deg, #fefefd 0%, #f0ede6 56%, #ddd7cd 100%),
    repeating-linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.12) 0 2px,
      rgba(0, 0, 0, 0.04) 2px 4px
    );
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(194, 186, 172, 0.72),
    inset 0 0.5rem 0.8rem rgba(255, 255, 255, 0.35),
    inset 0 -0.5rem 0.9rem rgba(117, 107, 93, 0.22);
  transition: transform 1.15s var(--ease-out-expo);
  will-change: transform;
}

.envelope__flap::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(128, 116, 101, 0.42), transparent);
}

.envelope__flap::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: radial-gradient(circle at 50% 75%, rgba(0, 0, 0, 0.16), transparent 60%);
  opacity: 0.75;
}

#invitation-app.is-opening .envelope__flap {
  transform: rotateX(-178deg);
}

.envelope__seal {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 6;
  width: clamp(4.5rem, 28vw, 5.75rem);
  height: clamp(4.5rem, 28vw, 5.75rem);
  margin-left: calc(clamp(4.5rem, 28vw, 5.75rem) / -2);
  margin-top: calc(clamp(4.5rem, 28vw, 5.75rem) / -2);
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--color-gold-light) 0%,
    var(--color-gold-mid) 42%,
    var(--color-gold-dark) 100%
  );
  box-shadow:
    0 0.15rem 0.35rem rgba(0, 0, 0, 0.18),
    inset 0 0.1rem 0.2rem rgba(255, 255, 255, 0.45);
  color: #1a1208;
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 7vw, 1.75rem);
  letter-spacing: 0.02em;
  transition:
    transform 0.65s var(--ease-out-expo),
    opacity 0.55s var(--ease-in-out-soft),
    box-shadow 0.3s ease;
}

.envelope__seal:hover {
  transform: scale(1.04);
  box-shadow:
    0 0.25rem 0.55rem rgba(0, 0, 0, 0.22),
    inset 0 0.1rem 0.2rem rgba(255, 255, 255, 0.5);
}

.envelope__seal:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.envelope__seal-ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0.08rem 0.2rem rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.envelope__seal-text {
  position: relative;
}

#invitation-app.is-opening .envelope__seal {
  transform: scale(0.35);
  opacity: 0;
  pointer-events: none;
}

/* --- Sobre imagen (mobile-first, sin efecto de apertura) --- */

.envelope-screen {
  transition: none;
}

.envelope-stage {
  position: relative;
  width: min(94vw, 24rem);
  aspect-ratio: 607 / 1000;
  perspective: none;
}

.envelope--image {
  filter: drop-shadow(0 0.65rem 1.6rem rgba(0, 0, 0, 0.2));
  background: url("/images/envelope-mobile.png") center / cover no-repeat;
  border-radius: 2px;
}

.envelope--image .envelope__shadow,
.envelope--image .envelope__sheet,
.envelope--image .envelope__body,
.envelope--image .envelope__fold,
.envelope--image .envelope__flap {
  display: none;
}

.envelope__seal.envelope__seal--image {
  all: unset;
  display: block;
  position: absolute;
  left: 49.7%;
  top: 50.5%;
  width: clamp(4.3rem, 24vw, 5.5rem);
  height: clamp(4.3rem, 24vw, 5.5rem);
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}

.envelope__seal.envelope__seal--image:hover,
.envelope__seal.envelope__seal--image:focus-visible {
  transform: translate(-50%, -50%) scale(1.04);
}

.envelope__seal.envelope__seal--image:focus,
.envelope__seal.envelope__seal--image:active,
.envelope__seal.envelope__seal--image:focus-visible,
.envelope__seal.envelope__seal--image:visited {
  background: transparent;
  box-shadow: none;
  border: 0;
  outline: none;
}

.envelope__seal--image .envelope__seal-ring,
.envelope__seal--image .envelope__seal-text {
  display: none;
}

/* --- Hero --- */

.hero {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  opacity: 0;
  transform: scale(1.02);
  transition: none;
}

#invitation-app.is-revealed .hero {
  opacity: 1;
  transform: scale(1);
}

#invitation-app.is-revealed .hero__media::before {
  animation: hero-bg-settle 1.9s var(--ease-out-expo) forwards;
}

#invitation-app.is-revealed .hero__media::after {
  animation: hero-image-load 2.1s var(--ease-out-expo) 160ms forwards;
}

.hero:focus {
  outline: none;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #151515;
}

.hero__media::before {
  content: "";
  position: absolute;
  inset: -2%;
  background: url("/images/hero-couple.png") center 24% / cover no-repeat;
  filter: blur(12px) brightness(0.62) saturate(0.9);
  transform: scale(1.06);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/hero-couple.png") center 22% / contain no-repeat;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(7px) saturate(0.9);
}

.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.5) 12%,
    rgba(0, 0, 0, 0.12) 30%,
    rgba(0, 0, 0, 0.1) 65%,
    rgba(0, 0, 0, 0.5) 86%,
    rgba(0, 0, 0, 0.74) 100%
  );
}

.hero__veil::before,
.hero__veil::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(5rem, 18vh, 8.5rem);
}

.hero__veil::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  filter: blur(10px);
}

.hero__veil::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  filter: blur(12px);
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem 5.5rem;
  max-width: 26rem;
  margin: 0 auto;
  width: 100%;
}

.hero__kicker {
  margin: 0 0 0.35rem;
  font-size: clamp(0.68rem, 2.8vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.hero__names {
  margin: 0 0 0.85rem;
  font-family: var(--font-script);
  font-size: clamp(2.65rem, 12vw, 3.75rem);
  font-weight: 400;
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  position: relative;
  padding-bottom: 0.55em;
}

.hero__name {
  display: inline-block;
  opacity: inherit;
}

.hero__ampersand {
  display: inline-block;
  margin: 0 0.15em;
  font-size: 0.55em;
  vertical-align: middle;
  opacity: 0.95;
}

.hero__plane {
  position: absolute;
  left: 50%;
  top: 62%;
  font-size: 0.45em;
  line-height: 1;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.5));
  transform: translate(-50%, -50%) translate(0, 0) rotate(8deg);
}

.hero__trail {
  position: absolute;
  inset: -3.8rem -2.2rem -3.8rem -2.2rem;
  pointer-events: none;
  z-index: 2;
}

.hero__trail-dot {
  position: absolute;
  width: 0.2rem;
  height: 0.11rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0.15rem rgba(255, 255, 255, 0.22);
  animation: trail-dot-life 2400ms linear forwards;
}

.hero__datetime {
  margin: 0 0 1rem;
  font-size: clamp(0.72rem, 3vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.hero__message {
  margin: 0;
  font-size: clamp(1.08rem, 4.1vw, 1.22rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0.02em;
  opacity: 0.92;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.hero__kicker,
.hero__names,
.hero__datetime,
.hero__message {
  opacity: 0;
  transform: scale(1.22);
  filter: blur(7px);
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

#invitation-app.is-revealed .hero__kicker,
#invitation-app.is-revealed .hero__names,
#invitation-app.is-revealed .hero__datetime,
#invitation-app.is-revealed .hero__message {
  animation: text-from-outside 1.45s var(--ease-out-expo) forwards;
}

#invitation-app.is-revealed .hero__kicker {
  animation-delay: 60ms;
}

#invitation-app.is-revealed .hero__names {
  animation-delay: 330ms;
}

#invitation-app.is-revealed .hero__datetime {
  animation-delay: 610ms;
}

#invitation-app.is-revealed .hero__message {
  animation-delay: 860ms;
}

#invitation-app.is-revealed .hero__plane {
  animation:
    plane-fade-in 420ms ease-out 1650ms forwards,
    plane-orbit 8.6s linear 2050ms infinite;
}

@keyframes text-from-outside {
  0% {
    opacity: 0;
    transform: scale(1.22);
    filter: blur(7px);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes plane-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.92;
  }
}

@keyframes trail-dot-life {
  0%,
  83% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.78);
  }
}

@keyframes plane-orbit {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(7.1rem) rotate(90deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(7.1rem) rotate(450deg);
  }
}

@media (min-width: 48rem) {
  @keyframes plane-orbit {
    0% {
      transform: translate(-50%, -50%) rotate(0deg) translateX(8.8rem) rotate(90deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg) translateX(8.8rem) rotate(450deg);
    }
  }
}

.hero__scroll-hint {
  all: unset;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  width: fit-content;
  margin: -0.45rem auto 0.95rem;
  padding: 0.38rem 0.72rem 0.45rem;
  border-radius: 999px;
  color: #f4efe5;
  background: rgba(8, 68, 63, 0.52);
  border: 1px solid rgba(201, 162, 39, 0.62);
  box-shadow:
    inset 0 0.08rem 0.2rem rgba(232, 212, 139, 0.24),
    0 0.2rem 0.45rem rgba(0, 0, 0, 0.2);
  opacity: 0.98;
  animation: scroll-hint-pulse 1.8s ease-in-out infinite;
  cursor: pointer;
}

.hero__scroll-hint:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 2px;
}

.hero__scroll-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  animation: bounce-soft 1.35s var(--ease-in-out-soft) infinite;
}

.hero__chev {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.28rem;
  opacity: 0.9;
}

.hero__chev:first-child {
  margin-top: 0;
  opacity: 0.55;
}

.hero__scroll-label {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero__footer {
  position: relative;
  z-index: 2;
  height: clamp(0.65rem, 2vw, 0.85rem);
  flex-shrink: 0;
  background: var(--color-forest);
}

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

@keyframes bounce-soft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.28rem);
  }
}

@keyframes scroll-hint-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0.08rem 0.2rem rgba(232, 212, 139, 0.24),
      0 0.2rem 0.45rem rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow:
      inset 0 0.08rem 0.28rem rgba(232, 212, 139, 0.33),
      0 0.28rem 0.75rem rgba(0, 0, 0, 0.26);
  }
}

@keyframes heart-soft-blink {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.22;
  }
  35% {
    transform: scale(1.08);
    opacity: 0.95;
  }
  60% {
    transform: scale(0.98);
    opacity: 0.55;
  }
}

@keyframes hero-bg-settle {
  0% {
    filter: blur(16px) brightness(0.5) saturate(0.8);
    transform: scale(1.1);
  }
  100% {
    filter: blur(12px) brightness(0.62) saturate(0.9);
    transform: scale(1.06);
  }
}

@keyframes hero-image-load {
  0% {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(7px) saturate(0.9);
  }
  55% {
    opacity: 0.82;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
  }
}

/* --- Sección contador --- */

.below-fold {
  position: relative;
  padding: 3.25rem 1.2rem 4.5rem;
  background:
    radial-gradient(120% 90% at 50% 10%, #0f5b54 0%, #0c4540 55%, #083632 100%);
  color: #f4efe5;
  overflow: hidden;
}

.below-fold::before {
  content: none;
}

.countdown-orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.countdown-orbit__svg {
  position: absolute;
  inset: 4% 3% 4% 3%;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.countdown-orbit__path {
  fill: none;
  stroke: transparent;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.countdown-orbit__path-erase {
  fill: none;
  stroke: transparent;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-dasharray: none;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

.countdown-orbit__plane {
  position: absolute;
  left: 0;
  top: 0;
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  color: rgba(238, 223, 191, 0.95);
  text-shadow:
    0 0 0.4rem rgba(255, 239, 200, 0.42),
    0 0 0.1rem rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform;
}

.countdown-wrap {
  max-width: 27rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.countdown-wrap__kicker {
  margin: 0 0 1.15rem;
  font-family: var(--font-script);
  font-size: clamp(2rem, 11vw, 2.65rem);
  line-height: 1;
  color: #f4efe5;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.countdown-frame {
  position: relative;
  width: min(100%, 23.5rem);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

.countdown-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("/images/countdown-world-circle-clean.png") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.96;
  filter:
    sepia(0.55)
    saturate(0.85)
    hue-rotate(344deg)
    brightness(0.95)
    contrast(1.08);
  pointer-events: none;
}

.countdown-frame::after {
  content: none;
}

.countdown-card {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 63%;
  margin: 0;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem 0.52rem 0.7rem;
  border-radius: 0.9rem;
  background: rgba(7, 93, 88, 0.72);
  border: 1px solid rgba(183, 149, 93, 0.68);
  box-shadow:
    inset 0 0.12rem 0.45rem rgba(255, 255, 255, 0.16),
    0 0.35rem 0.8rem rgba(0, 0, 0, 0.2);
}

.countdown-card::before {
  content: "";
  position: absolute;
  inset: -0.28rem;
  border-radius: 1rem;
  border: 1px solid rgba(185, 149, 93, 0.26);
  pointer-events: none;
}

.countdown-card__item {
  min-width: 0;
}

.countdown-card__value {
  margin: 0 0 0.15rem;
  font-size: clamp(1.25rem, 7vw, 1.7rem);
  line-height: 1;
  font-weight: 500;
  color: #f7f1e8;
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
}

.countdown-card__label {
  margin: 0;
  font-size: clamp(0.52rem, 2.3vw, 0.66rem);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(244, 239, 229, 0.94);
}

.countdown-card__divider {
  width: 1px;
  height: 2.2rem;
  background: rgba(244, 239, 229, 0.56);
}

.countdown-wrap__event {
  margin: 1.2rem 0 0;
  font-size: clamp(1.14rem, 5.6vw, 1.55rem);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(244, 239, 229, 0.95);
  font-weight: 500;
}

.countdown-wrap__done {
  margin: 1.15rem 0 0;
  font-size: 1rem;
  font-style: italic;
  color: #f7f1e8;
}

/* --- Sección ceremonia --- */

.ceremony-section {
  position: relative;
  padding: 3.6rem 1.2rem 4.4rem;
  background:
    radial-gradient(130% 95% at 50% 2%, #f7f5ef 0%, #f0eee8 46%, #ece9e2 100%);
  color: #4f4a43;
  overflow: hidden;
}

.ceremony-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 15%, rgba(130, 126, 119, 0.12) 0 16%, transparent 16%),
    radial-gradient(circle at 77% 76%, rgba(130, 126, 119, 0.1) 0 19%, transparent 19%);
  opacity: 0.2;
}

.ceremony-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url("/images/treasure-map-overlay.png") center / cover no-repeat;
  opacity: 0.24;
  pointer-events: none;
}

.ceremony-orbit {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ceremony-orbit__plane {
  position: absolute;
  left: 8%;
  top: 16%;
  font-size: clamp(1.2rem, 4.8vw, 1.65rem);
  color: #0c4f4a;
  text-shadow:
    0 0 0.22rem rgba(255, 255, 255, 0.45),
    0 0 0.08rem rgba(12, 79, 74, 0.22);
  transform: translate(-50%, -50%) rotate(12deg);
  will-change: transform;
  animation: ceremony-plane-route 14s linear infinite;
}

.agenda {
  position: relative;
  z-index: 2;
  max-width: 30rem;
  margin: 0 auto;
  display: grid;
  gap: 2.4rem;
}

.agenda__block {
  text-align: center;
  padding: 1.2rem 0.75rem 1.1rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(173, 162, 147, 0.32);
}

.agenda__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 12vw, 3rem);
  line-height: 1;
  color: #6e6380;
  text-shadow: 0 1px 9px rgba(255, 255, 255, 0.35);
}

.agenda__place {
  margin: 0 0 0.75rem;
  font-size: clamp(0.84rem, 3.8vw, 1.08rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5f556f;
}

.agenda__address {
  margin: 0 0 0.8rem;
  font-size: clamp(0.8rem, 3.4vw, 0.96rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #5f556f;
}

.agenda__time {
  margin: 0 0 1rem;
  font-size: clamp(0.95rem, 4.2vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5b5168;
}

.agenda__photo {
  width: 100%;
  max-height: 13rem;
  object-fit: cover;
  border-radius: 0.8rem;
  border: 1px solid rgba(173, 162, 147, 0.45);
  margin: 0.2rem 0 1rem;
  box-shadow: 0 0.3rem 0.9rem rgba(71, 65, 57, 0.16);
}

.agenda__map-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  color: var(--color-gold-light);
  border: 1px solid rgba(201, 162, 39, 0.72);
  background: linear-gradient(180deg, #15564f 0%, var(--color-forest) 100%);
  box-shadow:
    inset 0 0.08rem 0.2rem rgba(232, 212, 139, 0.22),
    0 0.25rem 0.6rem rgba(11, 40, 35, 0.24);
  cursor: pointer;
}

.agenda__map-btn:hover {
  filter: brightness(1.07);
}

.agenda__map-btn:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 2px;
}

.agenda__map-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

.agenda__map-icon-svg {
  width: 100%;
  height: 100%;
}

.agenda__map-label {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.agenda__map-panel {
  margin-top: 0.85rem;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.36);
  background: rgba(16, 64, 59, 0.1);
}

.agenda__map-embed {
  width: 100%;
  height: 15rem;
  border: 0;
  display: block;
}

.agenda__map-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.55rem;
  background: rgba(16, 64, 59, 0.16);
}

.agenda__map-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2rem;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  color: var(--color-gold-light);
  border: 1px solid rgba(201, 162, 39, 0.58);
  background: linear-gradient(180deg, #15564f 0%, var(--color-forest) 100%);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.28rem 0.44rem;
}

.agenda__map-link:hover {
  filter: brightness(1.07);
}

.agenda__map-link:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 1px;
}

.dresscode-section {
  position: relative;
  padding: 3.3rem 1.2rem 4.4rem;
  background: radial-gradient(120% 90% at 50% 8%, #146158 0%, var(--color-forest) 62%, #0a332f 100%);
  color: #f4efe5;
  overflow: hidden;
}

.dresscode-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    radial-gradient(circle at 12% 20%, rgba(232, 212, 139, 0.28) 0 14%, transparent 14%),
    radial-gradient(circle at 84% 72%, rgba(232, 212, 139, 0.2) 0 18%, transparent 18%);
}

.dresscode-card {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
  padding: 1.6rem 1rem 1.6rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(201, 162, 39, 0.52);
  background: rgba(5, 52, 48, 0.42);
  box-shadow:
    inset 0 0.1rem 0.3rem rgba(232, 212, 139, 0.18),
    0 0.35rem 0.95rem rgba(0, 0, 0, 0.2);
}

.dresscode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(244, 239, 229, 0) 0%,
    rgba(244, 239, 229, 0.24) 42%,
    rgba(244, 239, 229, 0) 68%
  );
  transform: translateX(-130%);
  opacity: 0;
}

.dresscode-card__icon {
  display: inline-flex;
  width: 3.05rem;
  height: 3.05rem;
  margin-bottom: 0.62rem;
  color: var(--color-gold-light);
  filter: drop-shadow(0 0 0.22rem rgba(232, 212, 139, 0.45));
  transform-origin: top center;
  animation: hanger-sway 2.1s ease-in-out infinite;
}

.dresscode-card__icon-svg {
  width: 100%;
  height: 100%;
}

.dresscode-card__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-script);
  font-size: clamp(2.1rem, 11vw, 2.9rem);
  line-height: 1;
  color: var(--color-gold-light);
}

.dresscode-card__text {
  margin: 0;
  font-size: clamp(1.02rem, 4.4vw, 1.22rem);
  line-height: 1.5;
  color: #f4efe5;
  letter-spacing: 0.01em;
}

/* Poster único de código de vestimenta */
.dresscode-poster {
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.38);
  box-shadow:
    0 0.4rem 1.2rem rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dresscode-poster__image {
  width: 100%;
  display: block;
  border-radius: inherit;
}

.dresscode-lookbook {
  margin-top: 1.15rem;
  display: grid;
  gap: 0.95rem;
}

.dresscode-lookbook__item {
  margin: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: rgba(7, 58, 54, 0.52);
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.2);
}

.dresscode-lookbook__label {
  margin: 0;
  padding: 0.48rem 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  background: rgba(16, 64, 59, 0.72);
}

.dresscode-lookbook__image {
  width: 100%;
  display: block;
}

.itinerary-section {
  position: relative;
  padding: 4rem 1.35rem 5.25rem;
  isolation: isolate;
  overflow-x: clip;
  background: linear-gradient(180deg, #f7f6f3 0%, #eeece8 55%, #ebe8e3 100%);
  color: #4a433c;
}

.itinerary-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 3% 18%, rgba(201, 162, 39, 0.28) 0%, transparent 42%),
    radial-gradient(circle at 97% 72%, rgba(201, 162, 39, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 8% 62%, rgba(184, 154, 74, 0.12) 0%, transparent 28%),
    radial-gradient(circle at 94% 28%, rgba(176, 148, 68, 0.14) 0%, transparent 32%),
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 52%);
}

.itinerary-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Ccircle cx='22' cy='38' r='1.2' fill='%23c9a227' fill-opacity='0.35'/%3E%3Ccircle cx='140' cy='24' r='0.9' fill='%23c9a227' fill-opacity='0.28'/%3E%3Ccircle cx='12' cy='112' r='0.8' fill='%23c9a227' fill-opacity='0.22'/%3E%3Ccircle cx='148' cy='96' r='1.1' fill='%23c9a227' fill-opacity='0.3'/%3E%3Ccircle cx='44' cy='8' r='0.65' fill='%23c9a227' fill-opacity='0.25'/%3E%3Ccircle cx='128' cy='142' r='0.75' fill='%23c9a227' fill-opacity='0.28'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.itinerary-wrap {
  position: relative;
  z-index: 1;
  max-width: 22.5rem;
  margin: 0 auto;
  padding: 0 0.35rem;
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.itinerary-wrap__kicker {
  margin: 0 auto 0.55rem;
  max-width: 20rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(0.84rem, 3.4vw, 1rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: #5c554c;
}

.itinerary-wrap__title {
  margin: 0 0 2.85rem;
  text-align: center;
  font-family: var(--font-script);
  font-size: clamp(2.35rem, 11vw, 3.15rem);
  font-weight: 400;
  color: #4e463a;
}

.itinerary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  --itinerary-progress: 0;
}

.itinerary-list::before,
.itinerary-list::after {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 1.375rem;
  width: 2px;
  height: calc(100% - 2.75rem);
  border-radius: 999px;
  z-index: 0;
}

.itinerary-list::before {
  background: repeating-linear-gradient(
    180deg,
    rgba(16, 64, 59, 0.18) 0px,
    rgba(16, 64, 59, 0.18) 4px,
    transparent 4px,
    transparent 12px
  );
  width: 2px;
}

.itinerary-list::after {
  background: repeating-linear-gradient(
    180deg,
    var(--color-gold-mid) 0px,
    var(--color-gold-mid) 4px,
    transparent 4px,
    transparent 12px
  );
  width: 2px;
  transform-origin: top center;
  transform: scaleY(var(--itinerary-progress));
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.28);
  filter: drop-shadow(0 0 3px rgba(201, 162, 39, 0.35));
}

.itinerary-item {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  padding-bottom: 3.75rem;
  cursor: pointer;
  outline: none;
  transition: transform 420ms var(--ease-out-expo);
}

.itinerary-item:last-child {
  padding-bottom: 0.35rem;
}

.itinerary-item__track {
  flex: 0 0 2.75rem;
  display: flex;
  justify-content: center;
  padding-top: 0.12rem;
}

.itinerary-item__node {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1a6b63 0%, var(--color-forest) 55%, #0c302d 100%);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0.15rem 0.45rem rgba(16, 64, 59, 0.28),
    inset 0 0.08rem 0.18rem rgba(255, 255, 255, 0.22);
  transition:
    transform 360ms var(--ease-out-expo),
    box-shadow 320ms ease,
    filter 320ms ease,
    opacity 320ms ease;
}

.itinerary-item__node-heart {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0.06rem 0.12rem rgba(0, 0, 0, 0.2);
}

.itinerary-item:not(.is-active) .itinerary-item__node {
  opacity: 0.78;
  filter: saturate(0.85);
}

.itinerary-item.is-active .itinerary-item__node {
  opacity: 1;
  filter: saturate(1);
  transform: scale(1.05);
  box-shadow:
    0 0.22rem 0.65rem rgba(16, 64, 59, 0.34),
    0 0 0 3px rgba(201, 162, 39, 0.22),
    inset 0 0.08rem 0.18rem rgba(255, 255, 255, 0.28);
}

.itinerary-item__body {
  flex: 1;
  min-width: 0;
  padding-top: 0.08rem;
  transition: transform 420ms var(--ease-out-expo);
}

.itinerary-item__time {
  margin: 0 0 0.35rem;
  font-family: var(--font-script);
  font-size: clamp(1.55rem, 7vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #6e6380;
  line-height: 1.1;
  text-shadow: 0 1px 6px rgba(110, 99, 128, 0.18);
}

.itinerary-item__name {
  margin: 0 0 1.35rem;
  font-family: var(--font-script);
  font-size: clamp(1.85rem, 8.5vw, 2.45rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #454038;
}

.itinerary-item__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(5.5rem, 28vw, 7rem);
  padding-left: 0.15rem;
}

.itinerary-item__splash {
  position: absolute;
  left: -2%;
  top: 50%;
  width: min(92%, 13.5rem);
  height: min(130%, 9.5rem);
  transform: translateY(-50%) rotate(-6deg);
  pointer-events: none;
  z-index: 0;
  border-radius: 52% 48% 58% 42% / 48% 55% 45% 52%;
  opacity: 0.72;
  background:
    radial-gradient(ellipse 68% 72% at 42% 48%, rgba(255, 248, 228, 0.72) 0%, rgba(241, 226, 188, 0.38) 42%, transparent 74%),
    radial-gradient(ellipse 48% 52% at 72% 58%, rgba(255, 243, 210, 0.48) 0%, rgba(232, 216, 175, 0.22) 55%, transparent 70%),
    radial-gradient(ellipse 35% 40% at 28% 72%, rgba(255, 252, 242, 0.55) 0%, transparent 64%);
  filter: blur(0.35px);
  transition:
    transform 520ms var(--ease-out-expo),
    opacity 320ms ease;
}

.itinerary-item__marker {
  --step-progress: 0;
  position: relative;
  z-index: 1;
  width: clamp(5.35rem, 40vw, 8.65rem);
  height: clamp(5.35rem, 40vw, 8.65rem);
  display: block;
  transition: transform 420ms var(--ease-out-expo);
}

.itinerary-item__marker-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.itinerary-item__marker-icon--base {
  opacity: 0.52;
  filter: grayscale(0.04) brightness(0.98);
}

.itinerary-item__marker-icon--fill {
  clip-path: inset(calc((1 - var(--step-progress)) * 100%) 0 0 0);
  transition: clip-path 280ms ease-out;
  filter: drop-shadow(0 0.06rem 0.14rem rgba(42, 42, 42, 0.14)) contrast(1.08) saturate(1.06);
}

.itinerary-item.is-active .itinerary-item__marker-icon--fill {
  filter:
    drop-shadow(0 0.06rem 0.14rem rgba(42, 42, 42, 0.16))
    drop-shadow(0 0.12rem 0.28rem rgba(16, 64, 59, 0.22))
    drop-shadow(0 0 0.52rem rgba(201, 162, 39, 0.48))
    contrast(1.12)
    saturate(1.1);
  animation: itinerary-icon-pop 880ms ease-out;
}

.itinerary-item--picked .itinerary-item__marker-icon--fill {
  filter:
    drop-shadow(0 0.06rem 0.14rem rgba(42, 42, 42, 0.14))
    drop-shadow(0 0.14rem 0.34rem rgba(16, 64, 59, 0.2))
    drop-shadow(0 0 0.62rem rgba(201, 162, 39, 0.52))
    contrast(1.14)
    saturate(1.12);
}

.itinerary-item--picked .itinerary-item__splash {
  opacity: 0.84;
  transform: translateY(-50%) rotate(-4deg) scale(1.04);
}

.itinerary-item--picked .itinerary-item__marker {
  transform: scale(1.03);
}

/* Ícono sorpresa: fondo negro → invisible con multiply */
.itinerary-item__marker-icon[src*="sorpresa"] {
  mix-blend-mode: multiply;
  filter: none;
}

.itinerary-item__marker-icon--fill[src*="sorpresa"] {
  mix-blend-mode: multiply;
}

@media (hover: hover) and (pointer: fine) {
  .itinerary-item:hover {
    transform: translateY(-3px);
  }

  .itinerary-item:hover .itinerary-item__splash {
    transform: translateY(-50%) rotate(-3deg) scale(1.06);
    opacity: 0.8;
  }

  .itinerary-item:hover .itinerary-item__marker {
    transform: scale(1.04);
  }

  .itinerary-item:hover .itinerary-item__node {
    transform: scale(1.08);
    box-shadow:
      0 0.26rem 0.72rem rgba(16, 64, 59, 0.36),
      0 0 0 3px rgba(201, 162, 39, 0.18),
      inset 0 0.08rem 0.18rem rgba(255, 255, 255, 0.28);
  }

  .itinerary-item.is-active:hover .itinerary-item__node {
    transform: scale(1.1);
  }
}

.itinerary-item:focus-visible {
  outline: none;
}

.itinerary-item:focus-visible .itinerary-item__body {
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.45);
  border-radius: 0.35rem;
}

@keyframes itinerary-icon-pop {
  0% {
    transform: scale(0.88);
  }
  55% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.dresscode-card[data-reveal] .dresscode-card__icon[data-reveal-item] {
  transform: translateY(-2.6rem) scale(0.84);
}

.dresscode-card[data-reveal] .dresscode-card__title[data-reveal-item] {
  transform: translateX(-2.8rem) scale(0.96);
}

.dresscode-card[data-reveal] .dresscode-card__text[data-reveal-item] {
  transform: translateX(2.8rem) scale(0.96);
}

.dresscode-card[data-reveal].is-visible::after {
  opacity: 1;
  animation: dresscode-sheen 1.7s ease-out forwards;
}

.dresscode-card[data-reveal].is-visible .dresscode-card__icon[data-reveal-item] {
  animation: dresscode-in-top 1500ms var(--ease-out-expo) forwards;
}

.dresscode-card[data-reveal].is-visible .dresscode-card__title[data-reveal-item] {
  animation: dresscode-in-left 1600ms var(--ease-out-expo) 140ms forwards;
}

.dresscode-card[data-reveal].is-visible .dresscode-card__text[data-reveal-item] {
  animation: dresscode-in-right 1720ms var(--ease-out-expo) 260ms forwards;
}

@keyframes hanger-sway {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-8deg) scale(1.03);
  }
  75% {
    transform: rotate(8deg) scale(1.03);
  }
}

@keyframes dresscode-sheen {
  from {
    transform: translateX(-130%);
    opacity: 0.45;
  }
  to {
    transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes dresscode-in-top {
  0% {
    opacity: 0;
    transform: translateY(-2.6rem) scale(0.84);
    filter: blur(7px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dresscode-in-left {
  0% {
    opacity: 0;
    transform: translateX(-2.8rem) scale(0.96);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dresscode-in-right {
  0% {
    opacity: 0;
    transform: translateX(2.8rem) scale(0.96);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes ceremony-plane-route {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(8deg);
  }
  18% {
    transform: translate(-50%, -50%) translate(15rem, 1.2rem) rotate(18deg);
  }
  36% {
    transform: translate(-50%, -50%) translate(18.5rem, 7rem) rotate(48deg);
  }
  54% {
    transform: translate(-50%, -50%) translate(11.5rem, 15.5rem) rotate(198deg);
  }
  72% {
    transform: translate(-50%, -50%) translate(2rem, 11.7rem) rotate(242deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(368deg);
  }
}

[data-reveal-item] {
  opacity: 0;
  transform: translateY(1.05rem) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 950ms var(--ease-out-expo),
    transform 950ms var(--ease-out-expo),
    filter 950ms var(--ease-out-expo);
}

[data-reveal].is-visible [data-reveal-item] {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

[data-reveal].is-visible [data-reveal-item]:nth-child(1) { transition-delay: 50ms; }
[data-reveal].is-visible [data-reveal-item]:nth-child(2) { transition-delay: 140ms; }
[data-reveal].is-visible [data-reveal-item]:nth-child(3) { transition-delay: 220ms; }
[data-reveal].is-visible [data-reveal-item]:nth-child(4) { transition-delay: 300ms; }
[data-reveal].is-visible [data-reveal-item]:nth-child(5) { transition-delay: 380ms; }

/* --- Tablet / escritorio --- */

@media (min-width: 48rem) {
  .envelope-stage {
    width: min(24rem, 32vw);
  }

  .hero__content {
    padding-bottom: 6rem;
    max-width: 32rem;
  }

  .hero__media {
    background: #1d1d1d url("/images/hero-couple.png") center 24% / cover no-repeat;
  }

  .hero__media::before,
  .hero__media::after {
    content: none;
  }

  .below-fold {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }

  .countdown-wrap {
    max-width: 31rem;
  }

  .countdown-orbit__plane {
    font-size: 1.35rem;
  }

  .countdown-orbit__svg {
    inset: 3% 2% 3% 2%;
  }

  .countdown-frame {
    width: min(100%, 25rem);
  }

  .countdown-card {
    width: 62%;
    top: 50%;
    gap: 0.4rem;
    padding: 0.95rem 0.72rem 0.88rem;
    border-radius: 1.1rem;
  }

  .countdown-card__value {
    font-size: 1.95rem;
  }

  .countdown-card__divider {
    height: 2.5rem;
  }

  .ceremony-section {
    padding-top: 4.1rem;
    padding-bottom: 5rem;
  }

  .dresscode-section {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }

  .dresscode-card {
    max-width: 34rem;
    padding: 1.8rem 1.4rem 1.9rem;
  }

  .dresscode-card__title {
    font-size: 3rem;
  }

  .dresscode-card__text {
    font-size: 1.2rem;
  }

  .dresscode-lookbook {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .itinerary-section {
    padding-top: 4.75rem;
    padding-bottom: 5.75rem;
  }

  .itinerary-wrap {
    max-width: 26rem;
    padding: 0 0.75rem;
  }

  .itinerary-wrap__title {
    font-size: 3.25rem;
  }

  .itinerary-item__marker {
    width: clamp(5.75rem, 34vw, 9.25rem);
    height: clamp(5.75rem, 34vw, 9.25rem);
  }

  .agenda {
    max-width: 34rem;
    gap: 2.8rem;
  }

  .ceremony-orbit__plane {
    font-size: 1.35rem;
    color: #0b4743;
  }

  .agenda__title {
    font-size: 3.1rem;
  }

  .agenda__place {
    font-size: 1.08rem;
  }

  .agenda__time {
    font-size: 1.28rem;
  }
}

/* --- Accesibilidad: menos movimiento --- */

@media (prefers-reduced-motion: reduce) {
  .envelope,
  .envelope__flap,
  .envelope__sheet,
  .envelope__seal,
  .envelope-screen,
  .hero,
  .hero__scroll-icon,
  .hero__kicker,
  .hero__names,
  .hero__datetime,
  .hero__message,
  .hero__plane,
  .hero__trail-dot,
  .transition-heart,
  .transition-heart__pulse {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero__media::before,
  .hero__media::after {
    animation: none !important;
    transition: none !important;
  }

  .countdown-orbit__plane,
  .countdown-orbit__path,
  .countdown-orbit__path-erase,
  .ceremony-orbit__plane,
  .dresscode-card__icon {
    animation: none !important;
  }

  [data-reveal-item] {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    animation: none !important;
  }

  #invitation-app.is-opening .envelope__flap {
    transform: rotateX(-178deg);
  }

  .itinerary-item {
    transition: none !important;
  }

  .itinerary-item:hover {
    transform: none !important;
  }

  .itinerary-item__body,
  .itinerary-item__marker,
  .itinerary-item__node,
  .itinerary-item__splash {
    transition: none !important;
  }

  .itinerary-item__marker-icon--fill {
    transition: none !important;
  }

  .itinerary-item.is-active .itinerary-item__marker-icon--fill {
    animation: none !important;
  }
}

/* ---------- RSVP (enlace personalizado) ---------- */

.invitation-flash {
  position: sticky;
  top: 0;
  z-index: 80;
  margin: 0;
  padding: 0.85rem 1rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
}

.invitation-flash--notice {
  background: rgba(16, 64, 59, 0.92);
  color: #f6f3ed;
}

.invitation-flash--alert {
  background: rgba(124, 45, 18, 0.94);
  color: #fff;
}

.invitation-rsvp {
  padding: 5.5rem 1.15rem 4rem;
  background: radial-gradient(120% 90% at 50% 8%, #146158 0%, var(--color-forest) 62%, #0a332f 100%);
  color: #f4efe5;
}

.invitation-rsvp__inner {
  max-width: 30rem;
  margin: 0 auto;
}

.invitation-rsvp__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-script);
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 400;
  color: var(--color-gold-light);
  text-align: center;
}

.invitation-rsvp__lead,
.invitation-rsvp__capacity {
  margin: 0 0 0.85rem;
  font-family: var(--font-serif);
  font-size: clamp(0.88rem, 3.6vw, 1rem);
  line-height: 1.55;
  text-align: center;
}

.invitation-rsvp__capacity {
  margin-bottom: 1.35rem;
  font-size: 0.86rem;
  color: #10403b;
}

.invitation-rsvp__table-wrap {
  overflow-x: auto;
  border-radius: 0.75rem;
  border: 1px solid rgba(30, 27, 22, 0.12);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0.2rem 0.65rem rgba(16, 64, 59, 0.07);
}

.invitation-rsvp__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-serif);
  font-size: clamp(0.82rem, 3.2vw, 0.92rem);
}

.invitation-rsvp__table th,
.invitation-rsvp__table td {
  padding: 0.55rem 0.45rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(30, 27, 22, 0.08);
}

.invitation-rsvp__table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c574f;
  background: rgba(247, 245, 241, 0.95);
}

.invitation-rsvp__col-event {
  text-align: center;
  min-width: 4.5rem;
}

.invitation-rsvp__col-icon {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.invitation-rsvp__name {
  font-weight: 600;
  color: #35322e;
  max-width: 9rem;
}

/* Fila marcada como asistente */
.invitation-rsvp__table tbody tr {
  transition: background 0.22s ease;
}

.invitation-rsvp__table tbody tr.is-attending {
  background: rgba(76, 175, 138, 0.18);
}

.invitation-rsvp__table tbody tr.is-attending .invitation-rsvp__name {
  color: #0d4f3c;
}

.invitation-rsvp__select {
  width: 100%;
  min-width: 8.5rem;
  padding: 0.35rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(16, 64, 59, 0.28);
  font: inherit;
  background: #fff;
  color: #1e1b16;
}

/* Celda centrada para el checkbox */
.invitation-rsvp__check-cell {
  text-align: center;
}

/* Checkbox estilizado — forma de corazón */
.invitation-rsvp__checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: transform 0.18s var(--ease-out-expo);
}

/* Corazón vacío (sin marcar) — usando ::before como corazón outline */
.invitation-rsvp__checkbox::before {
  content: "♡";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  line-height: 1;
  color: rgba(244, 239, 229, 0.55);
  transition: color 0.2s ease, transform 0.2s var(--ease-out-expo);
}

/* Corazón relleno (marcado) */
.invitation-rsvp__checkbox:checked::before {
  content: "♥";
  color: #4caf8a;
  transform: scale(1.18);
  text-shadow: 0 0 0.5rem rgba(76, 175, 138, 0.5);
}

.invitation-rsvp__checkbox:checked::after {
  content: none;
}

.invitation-rsvp__checkbox:hover::before {
  color: rgba(244, 239, 229, 0.85);
  transform: scale(1.1);
}

.invitation-rsvp__checkbox:focus-visible {
  outline: 2px solid var(--color-gold-mid);
  outline-offset: 2px;
  border-radius: 50%;
}

.invitation-rsvp__actions {
  margin-top: 1.35rem;
  display: flex;
  justify-content: center;
}

.invitation-rsvp__submit {
  cursor: pointer;
  padding: 0.65rem 1.65rem;
  border-radius: 999px;
  border: none;
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  background: linear-gradient(145deg, #1a6b63 0%, var(--color-forest) 100%);
  color: #f6f3ed;
  box-shadow: 0 0.2rem 0.55rem rgba(16, 64, 59, 0.25);
}

.invitation-rsvp__submit:hover {
  filter: brightness(1.05);
}

@media (min-width: 48rem) {
  .invitation-rsvp__table th,
  .invitation-rsvp__table td {
    padding: 0.65rem 0.75rem;
  }
}

/* ── Sección Regalos ─────────────────────────────────────────────────────── */

.gifts-section {
  position: relative;
  padding: 4.5rem 1.2rem 5rem;
  background: linear-gradient(180deg, #f7f6f3 0%, #eeece8 55%, #ebe8e3 100%);
  color: #4a433c;
  text-align: center;
  overflow: hidden;
}

.gifts-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(circle at 8% 18%, rgba(201, 162, 39, 0.22) 0%, transparent 38%),
    radial-gradient(circle at 92% 78%, rgba(201, 162, 39, 0.18) 0%, transparent 40%);
}

.gifts-inner {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.gifts-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 12vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #2e2a24;
  line-height: 1;
}

.gifts-lead {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  color: var(--color-gold-mid);
  line-height: 1.35;
}

.gifts-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  color: var(--color-gold-mid);
  filter: drop-shadow(0 0 0.3rem rgba(201, 162, 39, 0.3));
  animation: gifts-icon-float 3s ease-in-out infinite;
}

.gifts-icon__svg {
  width: 100%;
  height: 100%;
}

@keyframes gifts-icon-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Botón Ver más */
.gifts-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 2rem;
  border-radius: 999px;
  border: 1.5px solid rgba(201, 162, 39, 0.55);
  background: rgba(255, 255, 255, 0.72);
  color: #5a4e3a;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease-out-expo);
}

.gifts-btn:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.gifts-btn:focus-visible {
  outline: 2px solid var(--color-gold-mid);
  outline-offset: 3px;
}

.gifts-btn__chevron {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.3s var(--ease-out-expo);
}

.gifts-btn[aria-expanded="true"] .gifts-btn__chevron {
  transform: rotate(-135deg) translateY(-1px);
}

.gifts-btn[aria-expanded="true"] .gifts-btn__label {
  /* opcional: cambiar texto vía CSS attr no es posible, se maneja en JS */
}

/* Panel expandible */
.gifts-detail {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.55s var(--ease-out-expo),
    opacity 0.4s ease;
}

.gifts-detail.is-open {
  max-height: 20rem;
  opacity: 1;
}

.gifts-detail__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 1.4rem 1.2rem 0.4rem;
  border-radius: 1rem;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0.1rem 0.3rem rgba(201, 162, 39, 0.1);
}

.gifts-detail__heart {
  font-size: 1rem;
  color: var(--color-gold-mid);
  opacity: 0.7;
}

.gifts-detail__text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(0.95rem, 4vw, 1.08rem);
  line-height: 1.7;
  color: #4a433c;
  text-align: center;
}

.gifts-detail__text strong {
  color: #2e2a24;
  font-style: italic;
}

/* ── Sección Playlist ────────────────────────────────────────────────────── */

.playlist-section {
  position: relative;
  padding: 4.5rem 1.2rem 5rem;
  background: radial-gradient(120% 90% at 50% 8%, #146158 0%, var(--color-forest) 62%, #0a332f 100%);
  color: #f4efe5;
  overflow: hidden;
}

.playlist-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    radial-gradient(circle at 10% 20%, rgba(232, 212, 139, 0.35) 0%, transparent 40%),
    radial-gradient(circle at 90% 75%, rgba(232, 212, 139, 0.28) 0%, transparent 42%);
}

.playlist-inner {
  position: relative;
  z-index: 1;
  max-width: 28rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.playlist-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.playlist-header__note {
  font-size: 1.4rem;
  color: var(--color-gold-light);
  opacity: 0.7;
  animation: note-float 2.4s ease-in-out infinite;
}

.playlist-header__note:last-child {
  animation-delay: 1.2s;
}

@keyframes note-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.7; }
  50%       { transform: translateY(-5px) rotate(8deg); opacity: 1; }
}

.playlist-title {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 11vw, 3.2rem);
  font-weight: 400;
  color: var(--color-gold-light);
  line-height: 1;
}

.playlist-lead {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 4.2vw, 1.15rem);
  line-height: 1.6;
  color: rgba(244, 239, 229, 0.9);
  text-align: center;
  font-style: italic;
}

.playlist-toast {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(76, 175, 138, 0.22);
  border: 1px solid rgba(76, 175, 138, 0.45);
  color: #a8f0d8;
  font-size: 0.92rem;
  text-align: center;
  font-family: var(--font-serif);
}

/* Formulario */
.playlist-form {
  width: 100%;
}

.playlist-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.2rem;
}

.playlist-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.playlist-form__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}

.playlist-form__label-icon {
  font-size: 0.95rem;
}

.playlist-form__required {
  color: rgba(232, 212, 139, 0.6);
}

.playlist-form__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: rgba(5, 52, 48, 0.55);
  color: #f4efe5;
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 3.8vw, 1rem);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.playlist-form__input::placeholder {
  color: rgba(244, 239, 229, 0.38);
}

.playlist-form__input:focus {
  border-color: rgba(201, 162, 39, 0.8);
  background: rgba(5, 52, 48, 0.72);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

.playlist-form__actions {
  display: flex;
  justify-content: center;
}

.playlist-form__submit {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #1a6b63 0%, var(--color-forest) 100%);
  border: 1px solid rgba(201, 162, 39, 0.65);
  color: var(--color-gold-light);
  font-family: var(--font-serif);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 0.08rem 0.2rem rgba(232, 212, 139, 0.2),
    0 0.25rem 0.65rem rgba(0, 0, 0, 0.22);
  transition: filter 0.2s ease, transform 0.2s var(--ease-out-expo);
}

.playlist-form__submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.playlist-form__submit:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

.playlist-form__submit:active {
  transform: translateY(0);
  filter: brightness(0.97);
}