/* ═══════════════════════════════════════════════════════════════════════
   invitation-seal.css
   Wedding envelope / wax-seal intro overlay
   Shared by: index.html · invite.html · rsvp/familia.html
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────────────── */
:root {
  --seal-red:          #8B1A1A;   /* deep crimson wax */
  --seal-red-light:    #A52020;   /* wax highlight */
  --seal-red-dark:     #5C0E0E;   /* wax deep shadow */
  --seal-gold:         #C9A84C;   /* wax embossed edge */
  --envelope-outer:    #F5EFE6;   /* cream card stock */
  --envelope-inner:    #EDE4D8;   /* inner envelope tone */
  --envelope-flap:     #E8DFCF;   /* flap colour */
  --envelope-shadow:   rgba(44, 58, 93, 0.22);
  --letter-cream:      #FDFAF5;   /* letter paper */
  --letter-border:     rgba(218, 189, 157, 0.6);
  --overlay-bg:        rgba(28, 37, 64, 0.88);
  --seal-anim-dur:     0.65s;
  --flap-anim-dur:     0.7s;
  --card-anim-dur:     0.6s;
}

/* ── Full-screen overlay ─────────────────────────────────────────────── */
#invitation-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg);

  /* Subtle bokeh texture via radial gradient */
  background-image:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(184, 149, 106, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 70% 60%, rgba(44, 58, 93, 0.18) 0%, transparent 55%);

  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 20px;

  /* Entrance: fades in on page load */
  animation: overlayReveal 0.6s ease both;
}

@keyframes overlayReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Overlay exit animation class (added by JS) */
#invitation-overlay.is-dismissing {
  animation: overlayDismiss 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

@keyframes overlayDismiss {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(0.96); }
}

/* ── Outer scene container ───────────────────────────────────────────── */
#invitation-scene {
  position: relative;
  width: min(480px, calc(100vw - 40px));

  /* Subtle entrance drop */
  animation: sceneEntrance 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) 0.15s both;
}

@keyframes sceneEntrance {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Envelope body ───────────────────────────────────────────────────── */
#envelope {
  position: relative;
  width: 100%;
  border-radius: 6px 6px 12px 12px;
  background: var(--envelope-outer);
  box-shadow:
    0 24px 64px var(--envelope-shadow),
    0 8px 24px rgba(44, 58, 93, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.6);

  /* Fixed height drives all proportions */
  padding-bottom: 66%;  /* 3:2 aspect ratio */
  overflow: visible;

  /* The whole envelope is the single click/tap target. */
  cursor: pointer;
}

/* ── Envelope flap (top triangle) ───────────────────────────────────── */
#envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  border-left:   calc(min(480px, calc(100vw - 40px)) / 2) solid transparent;
  border-right:  calc(min(480px, calc(100vw - 40px)) / 2) solid transparent;
  border-top:    calc(min(480px, calc(100vw - 40px)) * 0.36) solid var(--envelope-flap);
  transform-origin: top center;
  transform: rotateX(0deg);
  z-index: 20;
  filter: drop-shadow(0 4px 8px rgba(44,58,93,0.15));

  /* Flap uses perspective-based 3-D fold */
  transition:
    transform var(--flap-anim-dur) cubic-bezier(0.4, 0, 0.2, 1),
    filter     var(--flap-anim-dur) ease;
}

/* Subtle linen texture on flap */
#envelope-flap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.06) 3px,
    rgba(255,255,255,0.06) 4px
  );
  pointer-events: none;
}

/* Envelope body — bottom fold lines */
#envelope::before,
#envelope::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* Bottom-left triangle */
#envelope::before {
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  border-left:   calc(min(480px, calc(100vw - 40px)) / 2) solid var(--envelope-inner);
  border-right:  calc(min(480px, calc(100vw - 40px)) / 2) solid var(--envelope-inner);
  border-bottom: calc(min(480px, calc(100vw - 40px)) * 0.3) solid transparent;
}

/* Horizontal centre crease line */
#envelope-crease {
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44,58,93,0.08) 20%, rgba(44,58,93,0.08) 80%, transparent);
  z-index: 1;
}

/* ── Wax seal ────────────────────────────────────────────────────────── */
#wax-seal {
  position: absolute;
  /* Centred on the flap / body boundary */
  top: calc(36% - 38px);
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  z-index: 30;
  cursor: pointer;
  border-radius: 50%;

  /* Default resting state */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#wax-seal:hover {
  transform: translateX(-50%) scale(1.08);
}

#wax-seal:active {
  transform: translateX(-50%) scale(0.95);
}

/* Pulsing "click me" hint — starts after 0.5s delay */
#wax-seal.is-breathing {
  animation: sealBreathe 2.4s ease-in-out 0.5s infinite;
}

@keyframes sealBreathe {
  0%, 100% { transform: translateX(-50%) scale(1);    filter: drop-shadow(0 4px 14px rgba(139,26,26,0.4)); }
  50%       { transform: translateX(-50%) scale(1.07); filter: drop-shadow(0 6px 22px rgba(139,26,26,0.65)); }
}

/* Remove breathing when clicked */
#wax-seal.is-clicked {
  animation: sealBreak var(--seal-anim-dur) cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
  cursor: default;
  pointer-events: none;
}

@keyframes sealBreak {
  0%   { transform: translateX(-50%) scale(1)    rotate(0deg); filter: drop-shadow(0 4px 14px rgba(139,26,26,0.4)); }
  25%  { transform: translateX(-50%) scale(1.15) rotate(-6deg); }
  50%  { transform: translateX(-50%) scale(0.92) rotate(4deg);  filter: drop-shadow(0 2px 6px rgba(139,26,26,0.3)); }
  75%  { transform: translateX(-50%) scale(0.7)  rotate(-3deg); opacity: 0.6; }
  100% { transform: translateX(-50%) scale(0.4)  rotate(8deg);  opacity: 0; }
}

/* SVG seal disc */
#wax-seal svg {
  width: 100%;
  height: 100%;
  display: block;
  /* Sem border-radius: a borda agora é irregular (filtro waxEdge no SVG),
     então recortar em círculo perfeito anularia o aspecto de cera. */

  /* Relevo de cera pressionada sobre o papel:
     - sombra projetada solta + difusa = a "gota" de cera lança sombra no envelope
     - drop-shadow segue o contorno irregular do SVG (ao contrário de box-shadow) */
  filter:
    drop-shadow(0 3px 5px rgba(74, 11, 11, 0.45))
    drop-shadow(0 1px 1px rgba(40, 6, 6, 0.35));
}

/* O brilho/sombra de relevo acompanha o hover sem perder o aspecto carimbado */
#wax-seal:hover svg {
  filter:
    drop-shadow(0 5px 9px rgba(74, 11, 11, 0.5))
    drop-shadow(0 1px 1px rgba(40, 6, 6, 0.35));
}

/* ── Perspective wrapper for flap fold ──────────────────────────────── */
#flap-perspective {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  perspective: 900px;
  perspective-origin: 50% 0%;
  z-index: 20;
  overflow: visible;
}

/* ── When open — flap folds back (class added by JS) ─────────────────── */
#invitation-scene.is-opening #envelope-flap {
  transform: rotateX(-180deg);
  filter: drop-shadow(0 -8px 16px rgba(44,58,93,0.22));
}

/* ── Envelope front face — addressee only ("Para: {Nome}") ───────────── */
/* The flap covers the top ~36% of the envelope, so the addressee sits in
   the lower portion of the body, vertically centred within that area.    */
#letter-card {
  position: absolute;
  top: 36%;
  left: 8%;
  right: 8%;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;  /* clicks pass through to the envelope */
}

.seal-addressee-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.8rem, 2.6vw, 1rem);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #B8956A;
}

.seal-letter-name {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(1.5rem, 6vw, 2.3rem);
  color: #2C3A5D;
  line-height: 1.2;
  max-width: 100%;
  word-break: break-word;
}

/* Thin handwritten underline beneath the name */
.seal-name-rule {
  width: clamp(90px, 40%, 180px);
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, rgba(218,189,157,0.7), transparent);
}

/* ── "Tap to open" hint ──────────────────────────────────────────────── */
#seal-skip-hint {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  pointer-events: none;
  /* Gentle fade-in/out to invite the tap */
  animation: hintPulse 2.6s ease-in-out 1s infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.8; }
}

/* Hint disappears once the envelope starts opening */
#invitation-scene.is-opening #seal-skip-hint {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  #seal-skip-hint { animation: none; opacity: 0.6; }
}

/* ── Prefers-reduced-motion: skip directly to open state ─────────────── */
@media (prefers-reduced-motion: reduce) {
  #invitation-overlay,
  #invitation-scene,
  #wax-seal,
  #wax-seal.is-breathing,
  #wax-seal.is-clicked,
  #envelope-flap,
  #letter-card {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Mobile adjustments ──────────────────────────────────────────────── */
@media (max-width: 440px) {
  #letter-card {
    left: 5%;
    right: 5%;
  }

  #wax-seal {
    width: 64px;
    height: 64px;
    top: calc(36% - 32px);
  }
}