/* ============================================================
   CARD.CSS
   Estilos del save-the-date público.
   Sección 1: SOBRE — CSS puro derivado literal del SCSS que dio
   el usuario (basado en el codepen de lisafolkerson), con los
   valores de $variables ya resueltos a px/colores fijos, y los
   colores de marca cambiados para usar nuestras --variables de
   paleta en vez de estar hardcodeados. La estructura, los
   nombres de clase, los timings de transición y el orden de
   z-index se mantienen IDÉNTICOS al original a propósito.
   Sección 2: TARJETA SAVE THE DATE — diseño clásico nuevo, con
   layout de posiciones FIJAS (ver nota en .std-card más abajo).
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% 15%, var(--color-bg-1) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 80%, var(--color-bg-2) 0%, transparent 55%),
    var(--color-bg-3);
  font-family: var(--font-body);
  color: var(--color-ink);
  overflow-x: hidden;
  transition: background 0.4s ease;
}

.stage {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 40px 16px;
}

.dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.dust span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-accent-light);
  opacity: 0.5;
  animation: drift 14s linear infinite;
}
@keyframes drift {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.4; }
  to   { transform: translateY(-90vh) translateX(20px); opacity: 0; }
}

.prompt-text {
  text-align: center;
  font-family: var(--font-caps);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--color-accent-deep);
  margin-bottom: 36px;
  opacity: 0.85;
}

/* ============================================================
   SECCIÓN 1 — SOBRE
   Valores $env-width:280px / $env-height:180px / $env-border-
   radius:6px ya resueltos. El sobre es fluido (max-width) para
   verse bien en cualquier pantalla, manteniendo la MISMA
   proporción 280:180 del original (relación ancho:alto ≈ 1.56:1)
   usando aspect-ratio en vez de px fijos.
   ============================================================ */
.envlope-wrapper {
  position: relative;
  width: 320px;
  max-width: 88vw;
  /* alto total = alto del sobre + espacio para que la carta suba
     (60px, ver #envelope.open .letter) + un pequeño margen de aire */
  height: calc(320px * 180 / 280 + 76px);
  max-height: calc(88vw * 180 / 280 + 76px);
}

#envelope {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 280px;
  height: 180px;
  max-width: 88vw;
  aspect-ratio: 280 / 180;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: var(--color-cream-deep);
  box-shadow: 0 4px 20px rgba(110, 84, 38, 0.25);
  cursor: pointer;
}

/* .front .flap / .front .pocket — construidos con border-tricks
   igual que el original: cada uno es un div de 0x0 con bordes
   gigantes que forman los triángulos del sobre. */
.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 3;
}

.flap {
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
  border-bottom: 82px solid transparent;   /* (180/2) - 8 */
  border-top: 98px solid var(--color-cream-warm); /* (180/2) + 8 */
  transform-origin: top;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(110, 84, 38, 0.12));
}

.pocket {
  border-left: 140px solid var(--color-cream);
  border-right: 140px solid var(--color-cream);
  border-bottom: 90px solid var(--color-cream-deep); /* 180/2 */
  border-top: 90px solid transparent;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Sello de cera, centrado sobre la punta del flap */
.wax-seal {
  position: absolute;
  left: 50%;
  top: 98px; /* altura del flap */
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  z-index: 6;
  background: radial-gradient(circle at 32% 28%, var(--color-accent-light), var(--color-accent) 55%, var(--color-accent-deep) 100%);
  box-shadow:
    0 3px 8px rgba(110, 84, 38, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -3px 6px rgba(110, 84, 38, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: #fffdf8;
  pointer-events: none;
  transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
}
#envelope.open .wax-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* La carta: blanca, centrada dentro del sobre, con degradado
   sutil como en el original (letter:after). */
.letter {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background-color: #fff;
  width: 90%;
  height: 90%;
  border-radius: 6px;
  box-shadow: 0 2px 26px rgba(0, 0, 0, 0.12);
  z-index: 2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.letter-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 10% 8%;
}

/* Estados open/close — mismos timings y curvas que el original */
#envelope.close .flap {
  transform: rotateX(0deg);
  transition: transform 0.4s 0.6s ease, z-index 1s;
  z-index: 5;
}
#envelope.open .flap {
  transform: rotateX(180deg);
  transition: transform 0.4s ease, z-index 0.6s;
  z-index: 1;
}
#envelope.close .letter {
  transform: translateX(-50%) translateY(0px);
  transition: transform 0.4s ease, z-index 1s;
  z-index: 1;
}
#envelope.open .letter {
  transform: translateX(-50%) translateY(-60px); /* -(180/3) */
  transition: transform 0.4s 0.6s ease, z-index 0.6s;
  z-index: 2;
}

.hearts {
  position: absolute;
  top: 90px; /* env-height / 2 */
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.heart {
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.heart::before,
.heart::after {
  position: absolute;
  content: "";
  left: 25px;   /* heart-width */
  top: 0;
  width: 25px;
  height: 40px; /* heart-width * 1.6 */
  background: var(--color-accent);
  border-radius: 25px 25px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  pointer-events: none;
}
.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
#envelope.close .heart {
  opacity: 0;
  animation: none;
}
.heart.a1 {
  left: 20%;
  transform: scale(0.6);
  opacity: 1;
  animation: slideUp 4s linear 1, sideSway 2s ease-in-out 4 alternate;
  animation-fill-mode: forwards;
  animation-delay: 0.7s;
}
.heart.a2 {
  left: 55%;
  transform: scale(1);
  opacity: 1;
  animation: slideUp 5s linear 1, sideSway 4s ease-in-out 2 alternate;
  animation-fill-mode: forwards;
  animation-delay: 0.7s;
}
.heart.a3 {
  left: 10%;
  transform: scale(0.8);
  opacity: 1;
  animation: slideUp 7s linear 1, sideSway 2s ease-in-out 6 alternate;
  animation-fill-mode: forwards;
  animation-delay: 0.7s;
}
@keyframes slideUp {
  0%   { top: 0; }
  100% { top: -400px; }
}
@keyframes sideSway {
  0%   { margin-left: 0px; }
  100% { margin-left: 50px; }
}

/* Contenido de texto dentro de la carta */
.letter .monogram {
  font-family: var(--font-display);
  font-size: clamp(26px, 7vw, 32px);
  color: var(--color-accent-deep);
  line-height: 1;
  margin-bottom: 6px;
}
.letter .sub {
  font-family: var(--font-caps);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--color-ink-soft);
}
.letter .tap {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity 0.5s ease 0.9s;
}
#envelope.open .letter .tap { opacity: 0.85; }
.letter .tap-icon {
  display: inline-block;
  margin-left: 4px;
  animation: tapPulse 1.8s ease-in-out infinite;
}
@keyframes tapPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.25); opacity: 1; }
}

.envelope-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}
#envelope.open ~ .envelope-hint,
.envlope-wrapper:has(#envelope.open) + .envelope-hint {
  opacity: 0;
}

/* ============================================================
   FLASH TRANSITION
   ============================================================ */
.flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, var(--color-accent-light) 35%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}
.flash.fire { animation: flashPop 0.75s ease-out forwards; }
@keyframes flashPop {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ============================================================
   SECCIÓN 2 — TARJETA SAVE THE DATE (diseño clásico)
   Inspirado en tarjetas físicas tipo Basic Invite/Minted: media
   grande arriba (foto o ilustración), nombres en script, fecha
   y lugar, frase final. El scratch-off es opcional y su alcance
   se controla desde el JSON (diseno.scratchAlcance).

   IMPORTANTE — sistema de layout FIJO:
   Las posiciones de cada bloque (imagen, título, nombres, fecha,
   frase final) ya NO se calculan midiendo dónde caería cada uno
   en flujo normal (eso causaba que, si el contenido no cabía en
   el alto fijo de la tarjeta, varios elementos se amontonaran en
   el mismo punto). Ahora card.js/editor.js aplican un conjunto de
   posiciones fijas (ver DEFAULT_LAYOUT en esos archivos), pensadas
   a mano con suficiente aire entre cada bloque. .std-card solo
   necesita ser lo bastante alta para contener ese layout fijo.
   ============================================================ */
.reveal-scene {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  background:
    radial-gradient(ellipse at 50% 30%, var(--color-cream) 0%, var(--color-bg-2) 70%, var(--color-cream-deep) 100%);
  padding: 24px;
  overflow-y: auto;
}
.reveal-scene .std-card {
  margin: auto;
}
.reveal-scene.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.std-card {
  position: relative;
  width: min(400px, 90vw);
  background: #fff;
  border-radius: 4px;
  box-shadow:
    0 24px 60px -20px rgba(110, 84, 38, 0.35),
    0 0 0 1px rgba(201, 161, 92, 0.15);
  padding-bottom: 34px;
  text-align: center;
  margin: auto;
}

/* Ya no existe una versión "flujo normal" vs "layout libre": tanto
   el editor como la página pública usan siempre posiciones fijas
   (ver nota arriba) DENTRO de este contenedor interno. Vive aparte
   de .std-card para que el botón de guardar-en-calendario (que sí
   está en flujo normal, ver .cal-save) pueda ir DEBAJO sin que el
   overflow:hidden del área de posiciones fijas lo recorte, y sin
   depender de adivinar un aspect-ratio que incluya su alto. */
.std-fixed-layout,
.std-card.free-layout {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 7.6;
  overflow: hidden;
  /* FIX (bug de escalado de texto): antes .std-eyebrow y .std-names
     usaban clamp(..., Xvw, ...), que se mide contra el ancho de TODA
     la ventana del navegador — así que el texto se veía distinto en
     el editor (tarjeta de 300px, ventana grande) que en la vista
     pública (tarjeta de 400px), sin relación real con el tamaño de
     la tarjeta. container-type convierte a este contenedor en el
     punto de referencia para unidades `cqw`, así el texto escala
     según el ancho REAL de la tarjeta sin importar dónde se muestre. */
  container-type: inline-size;
  container-name: stdcard;
}

.std-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #fffef9 0%, var(--color-cream-warm) 100%);
  overflow: hidden;
}
.std-photo,
.std-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.std-illustration {
  object-fit: contain;
  padding: 16%;
  background: linear-gradient(180deg, #fffef9 0%, var(--color-cream-warm) 100%);
}

.std-eyebrow {
  font-family: var(--font-serif);
  /* cqw en vez de vw — ver nota en .std-card */
  font-size: clamp(20px, 9cqw, 36px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.15;
}
.std-eyebrow em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-serif);
}

.std-forwed {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--color-ink-soft);
}

.std-names {
  font-family: var(--font-display);
  /* cqw en vez de vw — ver nota en .std-card */
  font-size: clamp(30px, 13cqw, 50px);
  color: var(--color-accent-deep);
  line-height: 1.15;
}

.std-details {
  /* el espaciado vertical entre fecha/lugar/ramita ahora vive
     dentro de este bloque, que se posiciona como una unidad */
}
.std-date {
  font-family: var(--font-caps);
  letter-spacing: 0.13em;
  font-size: 17px;
  color: var(--color-ink);
  font-weight: 600;
}
.std-venue {
  font-family: var(--font-caps);
  letter-spacing: 0.1em;
  font-size: 14px;
  color: var(--color-ink-soft);
  margin-top: 6px;
}
.std-sprig {
  width: 84px;
  margin: 14px auto 0;
  color: var(--color-accent);
  opacity: 0.7;
}
.std-sprig svg { width: 100%; height: auto; display: block; }

.std-footer {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--color-ink-soft);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.std-footer.show { opacity: 0.9; }

/* ---------- scratch-off (alcance configurable) ---------- */
.scratch-canvas {
  position: absolute;
  z-index: 6;
  cursor: grab;
  touch-action: none;
  display: none; /* se activa vía JS según diseno.scratchAlcance */
}
.scratch-canvas:active { cursor: grabbing; }
.scratch-canvas.active { display: block; }
.scratch-canvas.cleared {
  opacity: 0;
  transition: opacity 0.5s ease 0.1s;
  pointer-events: none;
}

/* scope-completo cubre toda std-card (top:0/left:0/100% se fija por JS) */
/* scope-foto cubre solo std-media (foto o ilustración) */
/* scope-fecha cubre solo el bloque de fecha + lugar, con el marco
   (óvalo/corazón) que corresponda según diseno.scratchForma */

.scratch-instructions {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: opacity 0.5s ease;
  height: 0;
  overflow: hidden;
}
/* Como todo ahora vive en layout fijo (position:absolute), este
   texto también se ancla cerca del pie de la tarjeta en vez de
   depender del flujo del documento. */
.std-fixed-layout .scratch-instructions,
.std-card.free-layout .scratch-instructions {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  height: auto;
  overflow: visible;
}
.std-fixed-layout .scratch-instructions:not(.active),
.std-card.free-layout .scratch-instructions:not(.active) {
  display: none;
}
.scratch-instructions.active {
  opacity: 0.8;
  height: auto;
  overflow: visible;
}
.scratch-instructions.fade { opacity: 0; }
.scratch-instructions svg { width: 12px; height: 12px; }

/* ---------- guardar en calendario (aparece tras el scratch-off) ---------- */
@keyframes calRise {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.015);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes calGlint {
  0%, 100% { box-shadow: 0 4px 14px -6px rgba(138, 110, 61, 0.45); }
  50% { box-shadow: 0 4px 20px -4px rgba(201, 161, 92, 0.6); }
}

.cal-save {
  position: relative;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 22px;
}
.cal-save.show {
  pointer-events: auto;
  animation: calRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.cal-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--color-cream);
  color: var(--color-accent-deep);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.cal-save.show .cal-btn {
  animation: calGlint 2.6s ease-in-out 1.2s 2;
}
.cal-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.cal-btn:hover {
  background: var(--color-accent-light);
  transform: translateY(-1px);
}
.cal-btn:active { transform: translateY(0); }

.cal-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 180px;
  background: var(--color-cream);
  border: 1px solid var(--color-paper-line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.cal-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.cal-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.cal-option svg { color: var(--color-accent-deep); flex-shrink: 0; }
.cal-option:hover { background: var(--color-cream-warm); }

@media (prefers-reduced-motion: reduce) {
  .cal-save.show { animation: none; opacity: 1; transform: translateY(0); }
  .cal-save.show .cal-btn { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.load-error {
  text-align: center;
  font-family: var(--font-serif);
  color: var(--color-ink-soft);
  padding: 40px 24px;
  max-width: 340px;
  margin: 0 auto;
}
.load-error h1 {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--color-accent-deep);
  margin-bottom: 12px;
}