/* =========================================================
   Ilana cumple 3 — Invitación animada (v2)
   Estética: cinematográfica polinesia, fonts elegantes y finas
   ========================================================= */

:root {
  /* Paleta */
  --ink:        #0A1620;
  --deep:       #0B3A47;
  --lagoon:     #4DDFDF;
  --foam:       #E2FFFB;
  --sand:       #FFE9C7;
  --sand-soft:  #F5DDB8;
  --hibiscus:   #FF6FA1;
  --hibiscus-d: #E64980;
  --gold:       #FBB740;
  --gold-d:     #E69313;

  /* Tipos */
  --f-display:  "Berkshire Swash", "Georgia", serif;
  --f-fine:     "Cormorant Garamond", "Georgia", serif;
  --f-script:   "Caveat", "Brush Script MT", cursive;
  --f-body:     "Quicksand", system-ui, -apple-system, sans-serif;

  /* Sombras */
  --sh-card:  0 24px 60px -16px rgba(0,0,0,.6);
  --sh-text:  0 2px 12px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

/* =========================================================
   Layout host
   ========================================================= */

.invitation {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

/* ---- Backdrop (desktop) ----------------------------------- */

.backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, #033845 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% -10%, #1a6770 0%, transparent 55%),
    linear-gradient(180deg, #061a22 0%, #03101a 60%, #020a11 100%);
  z-index: 0;
}

.backdrop-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #FBB740 100%, transparent),
    radial-gradient(1px 1px at 78% 22%, #FFE9C7 100%, transparent),
    radial-gradient(1.5px 1.5px at 24% 75%, #FF8AB5 100%, transparent),
    radial-gradient(1px 1px at 88% 70%, #FBB740 100%, transparent),
    radial-gradient(1.5px 1.5px at 60% 12%, #BFFCF6 100%, transparent),
    radial-gradient(1px 1px at 32% 40%, #FBB740 100%, transparent),
    radial-gradient(1.5px 1.5px at 92% 50%, #FFE9C7 100%, transparent),
    radial-gradient(1px 1px at 6% 55%, #FF8AB5 100%, transparent);
  opacity: .5;
  animation: twinkle 6s ease-in-out infinite;
}

.backdrop-sun {
  position: absolute;
  bottom: -180px;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, #FBB740 0%, rgba(251,183,64,.6) 18%, rgba(251,183,64,0) 60%);
  filter: blur(20px);
  opacity: .3;
}

.backdrop-mist {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 30% at 20% 80%, rgba(77,223,223,.18), transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 75%, rgba(255,111,161,.14), transparent 70%);
  pointer-events: none;
}

/* =========================================================
   Card
   ========================================================= */

.card {
  position: relative;
  width: min(96vw, 440px);
  aspect-ratio: 1144 / 1812;
  max-height: 96vh;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--sh-card), 0 0 0 1px rgba(255,233,199,.08) inset;
  background: var(--ink);
  z-index: 1;
  isolation: isolate;
}

@media (max-width: 480px) {
  .card {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
  }
}

.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.06);
  transform-origin: center top;
}

.card-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,22,32,.55) 0%, rgba(10,22,32,0) 24%),
    linear-gradient(0deg, rgba(10,22,32,.65) 0%, rgba(10,22,32,0) 32%);
}

.card-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 80% at 50% 50%, transparent 50%, rgba(0,0,0,.45) 100%);
}

.card-grain {
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1.6s steps(6) infinite;
}

.poly-band {
  position: absolute;
  left: 50%;
  width: 70%;
  height: 14px;
  z-index: 3;
  opacity: 0;
  transform: translateX(-50%) scaleX(.3);
  animation: bandIn 1.2s ease-out 0.4s forwards;
}
.poly-band-top    { top: 16px; }
.poly-band-bottom { bottom: 16px; transform: translateX(-50%) scaleY(-1) scaleX(.3); animation-name: bandInBottom; }

/* =========================================================
   Sparkles (subtle gold ambient)
   ========================================================= */

.sparkles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.sparkles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold), 0 0 14px rgba(251,183,64,.6);
  opacity: 0;
  animation: float 11s ease-in-out infinite;
}
.sparkles span:nth-child(1)  { top: 22%; left: 14%; animation-delay:  0.5s; }
.sparkles span:nth-child(2)  { top: 32%; left: 82%; animation-delay:  2.4s; }
.sparkles span:nth-child(3)  { top: 56%; left: 24%; animation-delay:  4.2s; }
.sparkles span:nth-child(4)  { top: 64%; left: 76%; animation-delay:  6.0s; background: var(--hibiscus); box-shadow: 0 0 8px var(--hibiscus); }
.sparkles span:nth-child(5)  { top: 24%; left: 60%; animation-delay:  3.0s; }
.sparkles span:nth-child(6)  { top: 78%; left: 42%; animation-delay:  7.4s; }
.sparkles span:nth-child(7)  { top: 12%; left: 36%; animation-delay:  1.4s; }
.sparkles span:nth-child(8)  { top: 88%; left: 14%; animation-delay:  5.0s; background: var(--foam); box-shadow: 0 0 8px var(--foam); }

/* =========================================================
   HERO SLOT (titulares secuenciales)
   Vive en el primer tercio para no tapar el centro del video
   ========================================================= */

.hero-slot {
  position: absolute;
  top: 7%;
  left: 8%;
  right: 8%;
  z-index: 7;
  pointer-events: none;
}

.hero-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s cubic-bezier(.4,.0,.2,1), transform .9s cubic-bezier(.4,.0,.2,1);
}

.hero-text[data-state="visible"] {
  opacity: 1;
  transform: translateY(0);
}
.hero-text[data-state="leaving"] {
  opacity: 0;
  transform: translateY(-12px) scale(1.03);
}

.hero-eyebrow {
  font-family: var(--f-script);
  font-size: clamp(18px, 4.6vw, 22px);
  color: var(--lagoon);
  margin: 0 0 6px;
  letter-spacing: .02em;
  text-shadow: 0 0 18px rgba(77,223,223,.45), 0 2px 8px rgba(0,0,0,.4);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-eyebrow .wave-glyph {
  color: var(--lagoon);
  font-size: 1.3em;
  line-height: .7;
}

.hero-title {
  font-family: var(--f-display);
  font-weight: 400;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: .95;
  color: var(--sand);
  text-shadow: 0 3px 14px rgba(0,0,0,.55), 0 0 24px rgba(0,0,0,.4);
  font-size: clamp(40px, 11vw, 56px);
}
.ht-line { display: block; }
.hero-title em {
  font-style: normal;
  color: var(--hibiscus);
  font-family: var(--f-display);
}

/* Variantes especiales */
.hero-title-name .ht-name {
  font-size: 1.4em;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #FFE9C7 0%, #FBB740 60%, #E69313 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(230,73,128,.5)) drop-shadow(0 6px 14px rgba(0,0,0,.4));
}
.hero-title-name .ht-cumple {
  font-size: .78em;
  margin-top: 4px;
  color: var(--sand);
}
.hero-title-name .ht-cumple em {
  font-family: var(--f-display);
  font-size: 1.5em;
  color: var(--hibiscus);
  text-shadow: 0 3px 0 var(--hibiscus-d);
  vertical-align: -.05em;
  padding: 0 .04em;
}

/* =========================================================
   INFO CARDS — fecha y ubicación
   Estados: hidden, big (centrada arriba), mini (abajo)
   ========================================================= */

.info-card {
  position: absolute;
  z-index: 6;
  /* Posición ancla MINI: el DOM vive aquí, texto a tamaño nativo.
     Arquitectura: top/left son % del padre (deterministas en cualquier
     viewport); transform: scale es solo para el efecto visual de tamaño.
     Esto evita que la posición dependa de la altura del elemento (que
     varía entre dispositivos por font rendering, line-height, etc). */
  top: 64%;
  width: 42%;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(10, 22, 32, 0.32);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid rgba(255, 233, 199, 0.30);
  box-shadow:
    0 10px 26px -10px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,233,199,.06) inset;
  color: var(--sand);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transform-origin: top center;
  will-change: top, left, transform, opacity;
  transition:
    top 1.35s cubic-bezier(.65, 0, .12, 1),
    left 1.35s cubic-bezier(.65, 0, .12, 1),
    transform 1.35s cubic-bezier(.65, 0, .12, 1),
    opacity .75s cubic-bezier(.4, 0, .2, 1);
}

/* Postmark corner notches (decorative dots in opposite corners) */
.info-card::before,
.info-card::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 233, 199, 0.55);
  box-shadow: 0 0 6px rgba(255, 233, 199, 0.35);
  pointer-events: none;
}
.info-card::before { top: 6px; left: 6px; }
.info-card::after  { bottom: 6px; right: 6px; }

/* --- Eyebrow (small uppercase label) — tamaño MINI nativo --- */
.info-card .ic-eyebrow {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(10px, 2.6vw, 11px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--lagoon);
  margin: 0 0 6px;
  padding-left: .32em;
  text-shadow: 0 0 8px rgba(77, 223, 223, .55), 0 1px 4px rgba(0, 0, 0, .55);
}

/* --- Divider with star --- */
.info-card .ic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 8px auto;
  width: 64%;
}
.info-card .ic-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 233, 199, 0) 0%,
    rgba(255, 233, 199, .55) 50%,
    rgba(255, 233, 199, 0) 100%);
}
.info-card .ic-star {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 4px rgba(251, 183, 64, .6));
}

/* --- Date card — tamaños MINI nativos (crisp) --- */

.info-date .ic-num {
  font-family: var(--f-fine);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(60px, 16vw, 70px);
  line-height: .9;
  color: var(--hibiscus);
  margin: 4px 0 0;
  letter-spacing: -.02em;
  text-shadow:
    0 1.5px 0 rgba(230, 73, 128, .4),
    0 4px 12px rgba(0, 0, 0, .55);
}

.info-date .ic-month {
  font-family: var(--f-fine);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(19px, 5.4vw, 22px);
  color: var(--sand);
  line-height: 1;
  margin: 6px 0 0;
  letter-spacing: .01em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}

.info-date .ic-time {
  font-family: var(--f-fine);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(19px, 5.4vw, 22px);
  color: var(--gold);
  margin: 0;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6), 0 0 8px rgba(251, 183, 64, .35);
}
.info-date .ic-time em {
  font-style: normal;
  font-weight: 700;
  font-size: .78em;
  margin-left: 3px;
  letter-spacing: .08em;
}

/* --- Location card — tamaños MINI nativos --- */

.info-loc .ic-line {
  font-family: var(--f-fine);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(15px, 4.2vw, 19px);
  line-height: 1.18;
  color: var(--sand);
  margin: 0;
  letter-spacing: .005em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.info-loc .ic-line + .ic-line {
  margin-top: 3px;
  font-size: clamp(13px, 3.7vw, 16px);
  font-weight: 600;
}

.info-loc .ic-time {
  font-family: var(--f-fine);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(13px, 3.6vw, 15px);
  color: var(--gold);
  margin: 0;
  line-height: 1;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.info-loc .ic-waze {
  width: clamp(15px, 4vw, 17px);
  height: clamp(15px, 4vw, 17px);
  border-radius: 24%;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
}

/* =========================================================
   State machine — top/left = posición (% del padre, deterministas),
   transform: scale = solo efecto de tamaño (GPU).
   El BIG state ancla su top edge en 4% del card (justo bajo la
   cenefa) en cualquier dispositivo/resolución.
   ========================================================= */

/* Date card vive en bottom-left, loc en bottom-right (ambas usan
   left + transform-origin centered para que el scale crezca
   simétricamente desde el centro de la card). */
.info-card.info-date { left: 4%; }
.info-card.info-loc  { left: 54%; /* 100% - 4% - 42% width */ }

/* En viewports angostos (mobile portrait), ensancha la card un poco
   para que "Vereda Rancherías" quepa en una sola línea sin sacrificar
   tamaño de letra. */
@media (max-width: 480px) {
  .info-card { width: 45%; }
  .info-card.info-loc { left: 51%; /* 100% - 4% - 45% */ }
}

/* Hidden = invisible en la pose mini (lista para entrar). */
.info-card[data-state="hidden"] {
  opacity: 0;
  pointer-events: none;
}
.info-card.info-date[data-state="hidden"] { transform: scale(1) rotate(-3deg); }
.info-card.info-loc[data-state="hidden"]  { transform: scale(1) rotate(3deg); }

/* Big = top: 4% del card (justo bajo la cenefa), centrada horizontalmente
   con left: 50% + translateX(-50%), y escalada 2.05x.
   El top edge queda en 4% sin importar la altura natural del elemento
   ni el tamaño del viewport. */
.info-card[data-state="big"] {
  opacity: 1;
  pointer-events: auto;
  top: 4%;
  left: 50%;
}
.info-card.info-date[data-state="big"] {
  transform: translateX(-50%) scale(2.05) rotate(-2deg);
}
.info-card.info-loc[data-state="big"] {
  transform: translateX(-50%) scale(2.05) rotate(2deg);
}

/* Mini = posición ancla (scale 1, inclinación leve). */
.info-card[data-state="mini"] {
  opacity: 1;
  pointer-events: auto;
}
.info-card.info-date[data-state="mini"] { transform: scale(1) rotate(-3deg); }
.info-card.info-loc[data-state="mini"]  { transform: scale(1) rotate(3deg); }
.info-card.info-loc[data-state="mini"]:hover  { transform: scale(1.04) rotate(3deg); }
.info-card.info-date[data-state="mini"]:hover { transform: scale(1.04) rotate(-3deg); }

/* =========================================================
   RSVP CTA — todo el bloque "Confirma tu asistencia" es clickeable
   El icono WhatsApp va inline con "asistencia" y la manito de
   Mickey aparece insinuando el click en el icono.
   ========================================================= */

.hero-rsvp {
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease;
}
.hero-rsvp:hover .ht-wa-glyph { transform: scale(1.08); }
.hero-rsvp:active { transform: scale(.985); }

/* Línea con "asistencia" + icono — todo en la misma baseline */
.ht-rsvp-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .18em;
}

/* Contenedor del glyph + manito Mickey */
.ht-wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: .72em;
  height: .72em;
  margin-left: .02em;
  vertical-align: -0.08em;
}

.ht-wa-glyph {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--sand);
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, .55))
    drop-shadow(0 0 10px rgba(255, 233, 199, .25));
  transition: transform .25s ease;
}

/* Manito Mickey — apunta al icono de WhatsApp con loop de tap */
.ht-mickey {
  position: absolute;
  width: .8em;
  height: auto;
  left: 78%;
  top: 62%;
  transform-origin: 10% 10%; /* esquina donde está el dedo */
  transform: rotate(8deg);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45));
  animation: mickeyClick 2.4s cubic-bezier(.5, 0, .3, 1) infinite;
  z-index: 2;
}

/* =========================================================
   Controls
   ========================================================= */

.replay,
.sound {
  position: absolute;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(10,22,32,.45);
  color: var(--sand);
  border: 1px solid rgba(255,233,199,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  transition: opacity .4s ease, background .2s ease, transform .2s ease;
}
.replay svg, .sound svg { width: 18px; height: 18px; }
.replay { top: 14px; left: 14px; }
.sound  { top: 14px; right: 14px; }

.sound .ico-sound { display: none; }
.sound[data-muted="false"] .ico-sound { display: block; }
.sound[data-muted="false"] .ico-mute  { display: none; }

.replay[data-state="visible"],
.sound { opacity: 1; }
.replay:hover, .sound:hover { background: rgba(10,22,32,.7); transform: scale(1.08); }

/* Cuando el video está muteado, el botón pulsa suavemente
   para invitar al usuario a tocar y activar el sonido */
.sound[data-muted="true"] {
  animation: soundHint 2.6s ease-in-out infinite;
}
@keyframes soundHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77, 223, 223, .45); }
  50%      { box-shadow: 0 0 0 10px rgba(77, 223, 223, 0); }
}

/* =========================================================
   Keyframes
   ========================================================= */

@keyframes bandIn {
  from { opacity: 0; transform: translateX(-50%) scaleX(.3); }
  to   { opacity: .65; transform: translateX(-50%) scaleX(1); }
}
@keyframes bandInBottom {
  from { opacity: 0; transform: translateX(-50%) scaleY(-1) scaleX(.3); }
  to   { opacity: .65; transform: translateX(-50%) scaleY(-1) scaleX(1); }
}
@keyframes twinkle {
  0%, 100% { opacity: .35; }
  50%      { opacity: .6; }
}
@keyframes float {
  0%, 100% { opacity: 0; transform: translate(0, 0) scale(.8); }
  20%, 80% { opacity: .9; }
  50%      { transform: translate(-8px, -14px) scale(1.1); }
}
@keyframes grain {
  0% { transform: translate(0,0); }
  20% { transform: translate(-3%,-2%); }
  40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,3%); }
  80% { transform: translate(3%,2%); }
  100% { transform: translate(0,0); }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .35; }
  100% { transform: scale(1.45); opacity: 0; }
}
/* Manito hace "click" — se acerca al icono (escala/translada hacia él)
   y luego vuelve a su posición de reposo, en loop. */
@keyframes mickeyClick {
  0%, 50%, 100% { transform: rotate(8deg) translate(0, 0)   scale(1);    }
  62%           { transform: rotate(-4deg) translate(-22%, -18%) scale(.85); }
  72%           { transform: rotate(2deg)  translate(-10%, -8%)  scale(.92); }
  84%           { transform: rotate(-2deg) translate(-18%, -14%) scale(.88); }
}

/* =========================================================
   Reduced motion
   ========================================================= */

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