/* v6.29 — final art direction & motion.
   Mantém a composição aprovada da v6.28 e reduz a sensação de "UI/template".
   Foco: papelaria fina, hierarquia, fluidez e movimento discreto. */

:root {
  --v629-gold: rgba(176, 126, 45, .56);
  --v629-gold-soft: rgba(176, 126, 45, .15);
  --v629-paper: rgba(255, 252, 247, .82);
  --v629-shadow: rgba(91, 66, 46, .055);
}

/* Molduras: mais papelaria, menos card de aplicativo */
.ornate-frame,
.hero-copy,
.venue-block {
  box-shadow: 0 7px 20px var(--v629-shadow), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.name-plaque {
  min-height: 96px;
  padding: 8px 44px 10px;
  border-width: 1px;
  border-color: var(--v629-gold);
  border-radius: 30px;
  background:
    radial-gradient(ellipse at 0% 48%, rgba(242,187,205,.16), transparent 34%),
    radial-gradient(ellipse at 100% 48%, rgba(175,216,239,.18), transparent 34%),
    rgba(255,252,247,.80);
  box-shadow: 0 7px 18px rgba(91,66,46,.052), inset 0 1px 0 rgba(255,255,255,.74);
}

.name-paw { opacity: .15; }
.name-paw > .ph { font-size: 13px !important; }
.choice-word { color: #8f6a2d; font-size: 10.5px; }
.name-plaque .name { letter-spacing: -.012em; }

.hero-copy {
  min-height: 124px;
  margin-top: 15px;
  padding: 19px 28px 18px;
  border-color: rgba(176,126,45,.48);
  border-radius: 20px;
  background: rgba(255,252,247,.76);
  line-height: 1.42;
}

/* Data e horário — mais editorial e compacto */
.event-fact-unified {
  min-height: 103px;
  padding: 16px 15px 14px;
  border-color: rgba(176,126,45,.49);
  background: rgba(255,252,247,.80);
}

.event-fact-header {
  width: min(100%, 205px);
  grid-template-columns: 22px minmax(0,1fr) 22px;
  column-gap: 7px;
}
.event-fact-header small {
  font-size: 8.4px;
  letter-spacing: .13em;
  font-weight: 650;
}
.event-icon .ph { font-size: 18px !important; opacity: .70; }
.event-fact-unified > strong {
  margin-top: 4px;
  font-size: clamp(27px, 7vw, 31px);
  letter-spacing: -.018em;
}
.event-fact-meta {
  gap: 6px;
  margin-top: 5px;
  font-size: clamp(13px, 3.55vw, 15px);
}
.event-day { opacity: .80; }
.event-time { color: #5b514b; }
.event-time b { font-size: 1.13em; color: #493f39; font-weight: 700; }
.event-separator { color: rgba(176,126,45,.68); }

/* Cards secundários ficam mais silenciosos */
.countdown,
.gift-block,
.pix-block {
  background: rgba(255,252,247,.76);
  border-color: rgba(176,126,45,.43);
}
.countdown { min-height: 116px; }
.gift-block { min-height: 119px; }
.pix-block { min-height: 207px; }

.pix-copy { color: #71665f; }
.pix-data { background: rgba(255,255,255,.42); }
.copy-pix,
.map-button { background: rgba(255,255,255,.57); }

.venue-block {
  background: rgba(238,247,251,.72);
  border-color: rgba(76,142,181,.34);
}

/* Motion: entrada menor, sem zoom perceptível */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .reveal-on-scroll {
    transform: translateY(12px) !important;
    transition-duration: .82s !important;
    transition-timing-function: cubic-bezier(.2,.78,.25,1) !important;
  }

  .js-motion .reveal-on-scroll.is-visible { transform: none !important; }

  /* A informação surge em camadas, como composição editorial */
  .js-motion .event-facts .event-fact-header,
  .js-motion .event-facts .event-fact-unified > strong,
  .js-motion .event-facts .event-fact-meta {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .58s ease, transform .72s cubic-bezier(.2,.8,.25,1);
  }
  .js-motion .event-facts.is-visible .event-fact-header { opacity: 1; transform: none; transition-delay: .10s; }
  .js-motion .event-facts.is-visible .event-fact-unified > strong { opacity: 1; transform: none; transition-delay: .19s; }
  .js-motion .event-facts.is-visible .event-fact-meta { opacity: 1; transform: none; transition-delay: .29s; }

  /* Mantém os ursos vivos sem parecer animação explícita */
  .bear-hero { animation: bear-breathe-v629 7.8s 1.6s ease-in-out infinite !important; }
  @keyframes bear-breathe-v629 {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.004); }
  }

  /* Aquarela respira quase imperceptivelmente; parallax do JS continua funcionando */
  .watercolor-layer { animation: paper-drift-v629 22s ease-in-out infinite alternate; }
  @keyframes paper-drift-v629 {
    from { background-position: 50% 0; }
    to   { background-position: 50% 2px; }
  }

  /* Retira movimentos repetitivos que deixam cara de template */
  .name-plaque,
  .name-plaque::before,
  .ornate-frame,
  .hero-copy,
  .venue-block,
  .frame-corners,
  .frame-emblem,
  .gift-block .ph-gift { animation: none !important; }

  .twinkle-star { animation-duration: 6.8s !important; opacity: .42; }

  /* CTA se destaca uma vez ao entrar, depois fica estável */
  .rsvp-button { animation: none !important; box-shadow: 0 7px 15px rgba(131,47,73,.20); }
  .js-motion .rsvp-button.is-visible { animation: rsvp-arrive-v629 .9s ease-out .12s 1 both !important; }
  @keyframes rsvp-arrive-v629 {
    0% { box-shadow: 0 7px 15px rgba(131,47,73,.20); }
    55% { box-shadow: 0 9px 23px rgba(131,47,73,.30); }
    100% { box-shadow: 0 7px 15px rgba(131,47,73,.20); }
  }
  .rsvp-button:active { transform: scale(.985) !important; }
}

@media (max-width: 699px) {
  .name-plaque {
    min-height: 0;
    padding: 7px 36px 9px;
    border-radius: 26px;
  }
  .name-plaque .name { font-size: clamp(31px, 9vw, 38px); }
  .name-paw-rose { left: 14px; }
  .name-paw-blue { right: 14px; }

  .hero-copy {
    min-height: 124px;
    padding: 18px 23px 17px;
    font-size: clamp(13.8px, 3.58vw, 15.2px);
  }

  .event-panel { gap: 17px; margin-top: 17px; }
  .event-fact-unified { min-height: 103px; padding: 16px 11px 13px; }
}

@media (max-width: 359px) {
  .name-plaque { padding-inline: 29px; }
  .name-paw { opacity: .10; }
  .event-fact-unified > strong { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .watercolor-layer,
  .bear-hero,
  .rsvp-button { animation: none !important; }
}