/* Maria 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; }

/* Moldura dupla dourada (cantos retos) em volta da página — como no convite */
body::before, body::after {
  content: ""; position: fixed; z-index: 60; pointer-events: none;
  border: var(--border-hairline) solid var(--gold-200);
}
body::before { inset: 10px; }
body::after { inset: 16px; border-color: rgba(211, 175, 55, .45); }
@media (max-width: 760px) {
  body::before { inset: 7px; }
  body::after { inset: 12px; }
}

/* Ornament — rosas de linha fina nos cantos, atrás do conteúdo */
.ornament {
  position: fixed; top: 0; left: 0; z-index: -1;
  width: min(40vw, 430px); height: auto; max-width: none;
  pointer-events: none; user-select: none;
  opacity: .55;
  will-change: transform;
  animation: fade-in 2.4s var(--ease-out) .2s backwards;
}
.ornament--br { top: auto; left: auto; right: 0; bottom: 0; }
@media (max-width: 1180px) { .ornament { opacity: .42; } }
@media (max-width: 760px) { .ornament { width: 64vw; opacity: .3; } }

/* Opening */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-6); padding: var(--space-16) var(--space-6) var(--space-24);
  text-align: center;
}
.hero-mono { width: clamp(112px, 22vw, 156px); height: auto; }
.hero-script {
  margin: 0; font-family: var(--font-script); font-weight: 400;
  font-size: clamp(40px, 8vw, 60px); line-height: 1.1;
  background-image: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lockup { display: grid; gap: var(--space-3); margin-top: calc(var(--space-1) * -1); }
.hero-name {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(30px, 7vw, 58px); line-height: 1.08;
  letter-spacing: .14em; text-transform: uppercase; text-indent: .14em;
}
.hero-age {
  margin: 0; font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(13px, 2.4vw, 15px); letter-spacing: .52em; text-indent: .52em;
  text-transform: uppercase; color: var(--gold-200);
}
.hero-date {
  margin: 0; font-family: var(--font-sans); font-weight: 400;
  font-size: clamp(11px, 2vw, 12.5px); letter-spacing: .3em; text-indent: .3em;
  text-transform: uppercase; color: var(--gold-300);
}
.hero-count { margin-top: var(--space-4); }
.hero-cue {
  margin-top: var(--space-2);
  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-mono { width: clamp(88px, 16vw, 120px); }
  .hero-script { font-size: clamp(34px, 6vw, 46px); }
  .hero-name { font-size: clamp(26px, 5vw, 42px); }
  .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-6); }
@media (min-width: 768px) { .section { padding: var(--space-24) var(--space-6); } }
.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-display); font-weight: 500;
  font-size: clamp(25px, 4.6vw, 33px); line-height: 1.3;
  letter-spacing: .15em; text-transform: uppercase; text-indent: .15em;
}
@media (max-width: 480px) { .section-title { font-size: 23px; } }

/* 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, .seal svg { width: 64px; height: auto; display: block; }
.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-6) var(--space-16); text-align: center; }
.footer .footer-mono { display: block; width: clamp(120px, 30vw, 150px); height: auto; margin: var(--space-8) auto 0; }
.footer-date { margin-top: var(--space-3); color: var(--gold-400); }

@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-8); bottom: var(--space-8); z-index: 10;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: var(--surface-raised); color: var(--gold-300);
  border: var(--border-hairline) solid var(--gold-400); border-radius: var(--radius-full);
  cursor: pointer; transition: border-color var(--dur-s), color var(--dur-s);
}
.music-toggle:hover { border-color: var(--gold-100); 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(--gold-200);
  transition: border-color var(--dur-s), background var(--dur-s), transform var(--dur-s);
}
.gift-item:hover { border-color: var(--gold-100); background: var(--surface-hover); transform: translateX(3px); }
.gift-main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1 1 auto; }
.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;
}

/* escolha do presente pelo convidado ("Vou levar este") */
.gift-choose-btn { margin-top: var(--space-2); }
.gift-choose-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  width: 100%; margin-top: var(--space-2);
}
.gift-choose-input { flex: 1 1 170px; width: auto; min-width: 0; min-height: 44px; }
.gift-choose-erro { flex-basis: 100%; font-family: var(--font-sans); font-size: 12.5px; color: var(--danger); }
.gift-choose-ok { margin-top: var(--space-2); font-family: var(--font-sans); font-size: 13px; letter-spacing: .06em; color: var(--gold-200); }

.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(--gold-200);
}
.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-400); 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; }
}

/* ---------------------------------------------------------------
   Mural de recados (mensagem + foto, moderação no /admin) */
.wall-form {
  padding: var(--space-6);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--gold-200);
}
.wall-file {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-4) var(--space-5);
  background: var(--surface-hover);
  border: 1px dashed var(--hairline);
  color: var(--gold-400);
  font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer;
  transition: border-color var(--dur-s), color var(--dur-s), background var(--dur-s);
}
.wall-file:hover { border-color: var(--gold-300); color: var(--gold-200); }
.wall-file:focus-within { outline: var(--border-strong) solid var(--gold-100); outline-offset: 3px; }
.wall-file.has-file { border-style: solid; border-color: var(--gold-300); color: var(--gold-200); }
.wall-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wall-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wall-thanks {
  display: grid; gap: var(--space-5); justify-items: center; text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--gold-200);
}
.wall-thanks .body { color: var(--gold-200); }

.wall-grid-wrap { margin-top: var(--space-10); }
.wall-grid { display: grid; gap: var(--space-5); }
.wall-card {
  display: grid; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--gold-200);
  transition: border-color var(--dur-s), transform var(--dur-s);
}
.wall-card:hover { border-color: var(--gold-100); transform: translateY(-2px); }
.wall-card-head { display: flex; align-items: center; gap: var(--space-4); }
.wall-avatar {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-hover);
  border: 1px solid var(--gold-400);
  font-family: var(--font-serif); font-size: 18px; color: var(--gold-200);
}
.wall-who { display: grid; gap: 2px; min-width: 0; }
.wall-name {
  font-family: var(--font-serif); font-size: 18px; color: var(--gold-100);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-date {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-400);
}
.wall-msg {
  margin: 0; color: var(--gold-300);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.wall-photo {
  display: block; width: 100%; max-height: 340px; object-fit: cover;
  border: var(--border-hairline) solid var(--hairline);
  background: var(--surface-hover);
}

@media (min-width: 720px) {
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}