/* A carta é a primeira página; o convite continua no mesmo papel. */
body.fechado main, body.abrindo main { position: fixed; inset: 0 0 auto; width: 100%; }
main { background: var(--kraft) url('assets/textura.jpg') center top / 100% auto repeat-y; transform: translateY(105svh); opacity: 1; }
body.abrindo main { z-index: 21; transform: translateY(0); transition: transform 1050ms cubic-bezier(.32,.72,0,1); box-shadow: 0 -18px 60px #142e4140; }
body.aberto main { position: relative; transform: none; transition: none; }
.envelope { max-width: 560px; margin: auto; box-shadow: 0 20px 80px #142e4133; }
.envelope.saindo { transform: translateY(5%); }
.selo-cera .anel { animation: none; }
.env-aba { transition: transform 650ms cubic-bezier(.32,.72,0,1); }
.env-cartao { transition: transform 650ms var(--ease-out) 130ms, opacity 180ms ease 130ms; }
.envelope.aberto .env-cartao { transform: translateY(-35%); }
.rolar svg { animation-iteration-count: 3; }
.revela { opacity: 1; transform: none; transition: none; }
.motion-part { opacity: 0; translate: 0 14px; transition: opacity 420ms ease, translate 650ms var(--ease-out); transition-delay: var(--delay,0ms); }
.visivel .motion-part { opacity: 1; translate: 0 0; }
.photo-card { position: relative; cursor: grab; touch-action: pan-y; user-select: none; transform: translate(var(--dx,0px),var(--dy,0px)) rotate(var(--tilt,-1deg)) !important; transition: transform 260ms var(--ease-out); box-shadow: 0 2px 3px #28536b0d, 0 9px 18px -8px #28536b66 !important; outline: 2px solid transparent; outline-offset: 4px; }
.photo-card:nth-child(even) { --tilt: 1.4deg; }
.photo-card:nth-child(3n) { --tilt: -.7deg; }
.photo-card[aria-pressed=true] { z-index: 2; outline-color: var(--batom); --dy: -5px; }
.photo-card.dragging { cursor: grabbing; z-index: 3; transition: none; }
.photo-card img { pointer-events: none; }
.photo-card:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--laranja); outline-offset: 5px; }
.galeria .photo-card { min-width: 0; padding: 3px; border: 0; background: var(--filete); }
.galeria { gap: 9px; }
.botao:active { transform: scale(.97); transition: transform 120ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .photo-card:hover { --dy: -4px; } }
@media (min-width:620px) { body.fechado { background-color: #d9ceb9; } main { max-width: 680px; margin: auto; box-shadow: 0 0 70px #28536b18; } }
@media (prefers-reduced-motion:reduce) {
  main, body.abrindo main { transform: none; transition: none; }
  .motion-part { translate: none; transition: opacity 120ms ease; transition-delay: 0ms; }
  .photo-card { transform: none !important; transition: none; }
  .env-aba, .env-cartao, .envelope, .selo-cera { transition: none !important; }
  .rolar svg, .selo-cera .anel { animation: none; }
}

/* Um mesmo ritmo para todas as superfícies, sem transformar links em arrastes. */
.motion-box { transition: transform 260ms var(--ease-out), translate 260ms var(--ease-out), opacity 420ms ease; }
.motion-box:not(.photo-card) { transform: rotate(-.7deg); box-shadow: 0 2px 3px #28536b0d, 0 9px 18px -8px #28536b66; }
.motion-box:not(.photo-card):nth-child(even) { transform: rotate(.7deg); }
.local-foto { padding: 7px; margin: 18px auto; background: var(--filete); max-width: 400px; }
.local-foto img { width: 100%; height: auto; }
.local-descricao { margin-bottom: 18px; }
.frase p { max-width: 27ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
@media (hover:hover) and (pointer:fine) { .motion-box:not(.photo-card):hover { translate: 0 -4px; } }
@media (prefers-reduced-motion:reduce) { .motion-box, .motion-box:not(.photo-card):nth-child(even), .motion-box:not(.photo-card):hover { transform: none; translate: none; transition: none; } }
.music-controls { position:fixed; top:calc(12px + env(safe-area-inset-top,0px)); right:12px; z-index:25; font-size:12px; background:var(--creme); border-radius:12px; box-shadow:var(--sombra-leve); }
.music-controls summary { cursor:pointer; padding:9px 13px; }
.music-controls[open] { width:min(320px,calc(100vw - 24px)); padding:4px 8px 8px; }
.music-controls p { margin:8px; font-size:12px; }
.music-controls iframe { border:0; border-radius:8px; }