/* Mária Cecília 15 Anos — layout da página de RSVP e movimento.
   Cores, espaços e bordas vêm de design-system/tokens.css. Tokens de movimento definidos aqui. */
:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-s: .2s;
  --dur-m: .5s;
  --dur-l: .8s;
  --dur-xl: 1.6s;
}

html { background: var(--black); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--black); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
p { margin: 0; }
.noscript { color: var(--gold-200); text-align: center; padding: var(--space-16) var(--space-4); }

.site { position: relative; isolation: isolate; }

/* Ornament — left edge, behind the content, once */
.ornament {
  position: fixed; left: 0; top: 0; z-index: -1;
  height: 118vh; width: auto; max-width: none;
  pointer-events: none; user-select: none;
  will-change: transform;
  animation: fade-in 2.4s var(--ease-out) .2s backwards;
}
@media (max-width: 1180px) { .ornament { opacity: .55; } }
@media (max-width: 760px) { .ornament { opacity: .35; height: 88vh; } }

/* Opening */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-8); padding: var(--space-16) var(--space-4) var(--space-24);
  text-align: center;
}
.hero-script { width: min(520px, 84vw); }
.hero-lockup { width: clamp(260px, 62vw, 420px); margin-top: calc(var(--space-2) * -1); }
.hero-count { margin-top: var(--space-4); }
.hero-cue {
  position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-decoration: none; color: var(--gold-400);
}
.hero-cue .sa-eyebrow { font-size: 12px; color: var(--gold-400); transition: color var(--dur-s); }
.hero-cue:hover .sa-eyebrow { color: var(--gold-100); }
.hero-cue:focus-visible { outline: var(--border-strong) solid var(--gold-100); outline-offset: 3px; }
.cue-line { position: relative; display: block; width: 1px; height: 48px; overflow: hidden; background: var(--hairline); }
.cue-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%;
  background: var(--gold-300); animation: cue 2.8s var(--ease-inout) infinite;
}

@media (max-width: 480px) {
  .hero { gap: var(--space-6); }
  .hero .sa-countdown { gap: var(--space-3); }
  .hero .sa-count-unit { min-width: 52px; }
  .hero .sa-count-num { font-size: 38px; }
  .hero .sa-count-sep { font-size: 30px; }
}

/* Janelas baixas (desktop encurtado, celular em landscape): comprime o hero
   para a contagem não encostar no "Confirme abaixo". */
@media (max-height: 720px) and (min-width: 481px) {
  .hero { gap: var(--space-4); padding-top: var(--space-8); padding-bottom: var(--space-16); }
  .hero-script { width: min(420px, 76vw); }
  .hero-lockup { width: clamp(230px, 48vw, 330px); }
  .hero-count { margin-top: var(--space-2); }
}

/* Opening sequence: script "writes" in, lockup comes into focus, then the countdown */
.hero > * { opacity: 0; }
.is-ready .hero > * { opacity: 1; }
.is-ready .hero-script {
  -webkit-mask-image: linear-gradient(90deg, var(--black) 44%, transparent 56%);
          mask-image: linear-gradient(90deg, var(--black) 44%, transparent 56%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  animation: write 1.9s var(--ease-inout) .15s backwards;
}
.is-ready .hero-lockup { animation: focus-in 1.5s var(--ease-out) 1.2s backwards; }
.is-ready .hero-count { animation: rise var(--dur-l) var(--ease-out) 2.1s backwards; }
.is-ready .hero-cue { animation: fade-in 1.2s var(--ease-out) 2.7s backwards; }

/* Sections */
.section { padding: var(--space-16) var(--space-4); }
@media (min-width: 768px) { .section { padding: var(--space-24) var(--space-4); } }
.narrow { max-width: 560px; margin: 0 auto; }
.text { max-width: 720px; margin: 0 auto; }
.intro { text-align: center; margin-bottom: var(--space-12); }
.intro p { max-width: 34ch; margin: 0 auto; font-size: 22px; line-height: 1.5; color: var(--gold-200); }

.section-head { text-align: center; margin-bottom: var(--space-12); }
.section-title {
  margin: var(--space-2) 0 0; font-family: var(--font-script); font-weight: 400;
  font-size: 48px; line-height: 1.15;
}
@media (max-width: 480px) { .section-title { font-size: 42px; } }

/* Form */
.row + .row, .collapse + .row { padding-top: var(--space-6); }
.guests-block { padding-top: var(--space-6); }
.guest-row { padding-top: var(--space-4); }
.choice-error { display: block; margin-top: var(--space-2); }
.row-submit { padding-top: var(--space-8) !important; }
.submit-error { margin-top: var(--space-4); text-align: center; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sa-btn { transition: background var(--dur-s), color var(--dur-s), box-shadow var(--dur-m), opacity var(--dur-s); }

/* Collapse — animates height with grid rows; the inner padding keeps focus rings unclipped */
.collapse {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out);
}
.collapse.is-open { grid-template-rows: 1fr; opacity: 1; }
.collapse-inner { min-height: 0; overflow: hidden; padding: 0 6px 6px; margin: 0 -6px -6px; }

/* Form ↔ confirmation */
.swap-pane { transition: opacity .32s var(--ease-out), transform .32s var(--ease-out); }
.swap.is-leaving .swap-pane { opacity: 0; transform: translateY(-8px); }
.swap-pane.is-entering { animation: rise var(--dur-l) var(--ease-out) backwards; }

.confirm { outline: none; text-align: center; }
.seal {
  width: 88px; height: 88px; margin: 0 auto var(--space-6);
  display: grid; place-items: center; border-radius: var(--radius-full); box-shadow: var(--glow-gold);
}
.seal img { width: 56px; }
.is-entering .seal { animation: focus-in 1.2s var(--ease-out) .2s backwards; }
.confirm-guests { margin: var(--space-4) auto 0; max-width: 36ch; color: var(--gold-300); }
.confirm-action { margin-top: var(--space-8); }

/* Foil sweep — one slow pass of light across gold-leaf text when it appears */
.shine, .sa-event-date, .sa-confirm-title {
  background-image:
    linear-gradient(100deg, transparent 40%, var(--gold-100) 50%, transparent 60%),
    linear-gradient(100deg, var(--gold-500) 0%, var(--gold-100) 28%, var(--gold-300) 52%, var(--gold-100) 74%, var(--gold-400) 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0, 0 0;
}
.is-in .shine, .is-in .sa-event-date, .is-entering .sa-confirm-title { animation: sweep 2.4s var(--ease-inout) .5s backwards; }

/* Scroll reveal */
[data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-l) var(--ease-out) var(--d, 0s), transform var(--dur-l) var(--ease-out) var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Footer */
.footer { padding: var(--space-12) var(--space-4) var(--space-16); text-align: center; }
.footer img { display: block; height: 48px; width: auto; margin: var(--space-8) auto 0; }
.footer-date { margin-top: var(--space-3); color: var(--gold-500); }

@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes focus-in { from { opacity: 0; filter: blur(8px); transform: scale(.985); } }
@keyframes write { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes sweep { from { background-position: 100% 0, 0 0; } to { background-position: 0 0, 0 0; } }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .hero > * { opacity: 1; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .collapse, .swap-pane { transition: none; }
}

/* Botão de música (canto inferior direito) */
.music-toggle {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 10;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: var(--black); color: var(--gold-300);
  border: var(--border-hairline) solid var(--hairline); border-radius: var(--radius-full);
  cursor: pointer; transition: border-color var(--dur-s), color var(--dur-s);
}
.music-toggle:hover { border-color: var(--gold-400); color: var(--gold-100); }
.music-toggle:focus-visible { outline: var(--border-strong) solid var(--gold-100); outline-offset: 3px; }
.music-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.music-bars i { width: 3px; height: 30%; background: currentColor; }
.music-toggle.is-playing .music-bars i { animation: music-bar 1s ease-in-out infinite alternate; }
.music-toggle.is-playing .music-bars i:nth-child(2) { animation-delay: -.4s; }
.music-toggle.is-playing .music-bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes music-bar { from { height: 25%; } to { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-bars i { animation: none; height: 70%; }
}

/* Gesto "toque na tela" (aparece só se o navegador bloquear a música) */
.tap-hint {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6);
  padding: var(--space-6); border: 0; margin: 0;
  background: color-mix(in srgb, var(--black) 72%, transparent); color: var(--gold-200);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
}
.tap-hint.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .6s var(--ease-out) .8s, visibility 0s;
}
.tap-hint:focus-visible { outline: var(--border-strong) solid var(--gold-100); outline-offset: -6px; }
.tap-text { color: var(--gold-200); text-align: center; }
.tap-gesture { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.tap-dot {
  width: 22px; height: 22px; border-radius: var(--radius-full);
  background: var(--gold-200); box-shadow: var(--glow-gold);
  animation: tap-press 1.6s var(--ease-out) infinite;
}
.tap-ring {
  position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
  border: var(--border-hairline) solid var(--gold-300); border-radius: var(--radius-full);
  opacity: 0; animation: tap-ring 1.6s var(--ease-out) infinite;
}
.tap-ring:nth-child(2) { animation-delay: .35s; }
@keyframes tap-press { 0%, 100% { transform: scale(1); } 15% { transform: scale(.72); } 35% { transform: scale(1); } }
@keyframes tap-ring { 0% { opacity: 0; transform: scale(1); } 15% { opacity: .9; } 100% { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: reduce) {
  .tap-dot, .tap-ring { animation: none; }
  .tap-ring:first-child { opacity: .6; transform: scale(2); }
}

/* ---------------------------------------------------------------
   Presentes + Pix (valor livre — sem campo de valor na página) */
.gift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gift-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--hairline);
  transition: border-color var(--dur-s), background var(--dur-s), transform var(--dur-s);
}
.gift-item:hover { border-color: var(--gold-600); background: var(--surface-hover); transform: translateX(3px); }
.gift-main { display: grid; gap: 3px; min-width: 0; }
.gift-title { font-family: var(--font-serif); font-size: 20px; line-height: 1.3; color: var(--gold-100); }
.gift-desc { font-family: var(--font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); }
.gift-value {
  font-family: var(--font-sans); font-size: 13px; letter-spacing: .12em;
  color: var(--gold-300); white-space: nowrap;
}

.pix-card {
  margin-top: var(--space-8);
  display: grid; gap: var(--space-6); justify-items: center; text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--hairline);
}
.pix-qr a {
  display: inline-block; padding: 10px; line-height: 0;
  background: #ffffff; border-radius: var(--radius-sm);
  box-shadow: var(--glow-gold);
  transition: transform var(--dur-s), box-shadow var(--dur-m);
}
.pix-qr a:hover { transform: translateY(-3px); }
.pix-qr a:focus-visible { outline: var(--border-strong) solid var(--gold-100); outline-offset: 4px; }
.pix-qr img { display: block; width: 188px; height: 188px; }
.pix-body { display: grid; gap: var(--space-4); justify-items: center; }
.pix-text { color: var(--gold-300); font-size: 17px; max-width: 42ch; }
.pix-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.pix-link code {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: .1em;
  color: var(--gold-500); word-break: break-all;
}

@media (min-width: 720px) {
  .pix-card {
    grid-template-columns: auto 1fr; gap: var(--space-8);
    padding: var(--space-8); text-align: left;
    justify-items: start; align-items: center;
  }
  .pix-body { justify-items: start; text-align: left; }
  .pix-actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .gift-item { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .pix-qr img { width: 168px; height: 168px; }
  .pix-actions { width: 100%; }
  .pix-actions .sa-btn { flex: 1 1 auto; }
}