/* ===== Design System — XV Anos Maria Julia ===== */
:root {
    --bg:           #F5EEF4;
    --bg-card:      #FFFAF8;
    --rose:         #C8577A;
    --rose-mid:     #D4869E;
    --rose-light:   #EFC8D8;
    --rose-pale:    #FAE8F2;
    --gold:         #C8A882;
    --gold-light:   #E8D5B8;
    --text-dark:    #2D1020;
    --text-mid:     #7A4060;
    --text-light:   #B07090;
    --border-rose:  #E2B8C8;
    --border-gold:  #D4B890;
    --shadow:       rgba(180, 80, 120, 0.12);
    --white:        #ffffff;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Raleway', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== HOME PAGE ===== */
.home-body {
    background: linear-gradient(155deg, #FBF0F5 0%, #F2E5EE 60%, #EDE0EC 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.home-content {
    text-align: center;
    max-width: 460px;
    width: 100%;
}

.home-deco {
    font-size: 1.4rem;
    letter-spacing: 0.6rem;
    color: var(--rose-mid);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.1s;
}

.home-pre {
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.3s;
}

.home-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 8vw, 3.8rem);
    font-weight: 600;
    font-style: italic;
    color: var(--rose);
    line-height: 1.1;
    margin-bottom: 1.25rem;
    opacity: 0;
    animation: fadeUp 0.9s ease forwards 0.45s;
}

.home-ornament {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.6s;
}

.orn-line {
    display: block;
    width: 55px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-gold));
}

.orn-line:last-child {
    background: linear-gradient(to left, transparent, var(--border-gold));
}

.home-ornament span:not(.orn-line) { font-size: 1rem; }

.home-name-script {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2.8rem, 10vw, 4.5rem);
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    opacity: 0;
    animation: fadeUp 0.9s ease forwards 0.75s;
}

.home-sub {
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.9s;
}

.btn-open {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 3rem;
    background: var(--rose);
    color: var(--white);
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 1px;
    box-shadow: 0 8px 28px rgba(180, 80, 120, 0.28);
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 50px;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 1.05s;
}

.btn-open:hover {
    background: #B54870;
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(180, 80, 120, 0.35);
}

.home-deco-bottom {
    font-size: 1.4rem;
    letter-spacing: 0.6rem;
    color: var(--rose-mid);
    margin-top: 2rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 1.2s;
}

/* ===== CONVITE PAGE ===== */
.convite-body {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem 3rem;
}

.invite-page {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.invite-card {
    position: relative;
    width: 100%;
    box-shadow: 0 20px 70px rgba(180, 80, 120, 0.28), 0 4px 24px rgba(200, 130, 110, 0.18);
    text-align: center;
    border: 2px solid var(--border-rose);
    background: rgba(255, 252, 250, 0.97);
    padding: 3rem 2.5rem 2.5rem;
}

/* Moldura como overlay artístico — flutua sobre o conteúdo com opacidade suave */
.card-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 0;
}

/* Conteúdo em fluxo natural — define a altura do card, sem scroll */
.card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.card-inner::-webkit-scrollbar { display: none; }

/* Inner border — reativado */
.invite-card::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid var(--border-gold);
    pointer-events: none;
    z-index: 0;
}

/* Corner fleurons */
.corner {
    position: absolute;
    font-size: 1.3rem;
    color: var(--rose-mid);
    line-height: 1;
    z-index: 2;
}
.corner--tl { top: 13px; left: 17px; }
.corner--tr { top: 13px; right: 17px; display: inline-block; transform: scaleX(-1); }
.corner--bl { bottom: 13px; left: 17px; display: inline-block; transform: scaleY(-1); }
.corner--br { bottom: 13px; right: 17px; display: inline-block; transform: scale(-1); }

/* Badge XV */
.invite-top {
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 1;
}

.badge-xv {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border: 2px solid var(--border-gold);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose-pale), var(--bg-card));
    box-shadow: 0 2px 14px rgba(180, 80, 120, 0.1);
}

.badge-xv-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1;
}

.badge-xv-anos {
    font-family: 'Raleway', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

/* Quote */
.invite-quote {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1.65rem, 6vw, 2rem);
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 0.7rem;
    position: relative;
    z-index: 1;
    padding: 0 0.5rem;
    text-shadow: 0 0 8px rgba(255,252,250,0.98), 0 1px 6px rgba(255,248,244,0.92), 0 2px 12px rgba(255,245,240,0.85);
}

/* Name */
.invite-name {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(3.2rem, 13vw, 5.5rem);
    font-weight: 400;
    font-style: normal;
    color: var(--text-dark);
    line-height: 1.1;
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
}

/* Ornamental dividers */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    position: relative;
    z-index: 1;
}

.ornament-line {
    flex: 1;
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-rose));
    max-width: 90px;
}

.ornament-line:last-child {
    background: linear-gradient(to left, transparent, var(--border-rose));
}

.ornament-icon {
    color: var(--rose);
    font-size: 1.35rem;
    line-height: 1;
}

/* Personal message */
.invite-message {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.25rem, 4.5vw, 1.55rem);
    font-weight: 400;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.9;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 8px rgba(255,252,250,0.98), 0 1px 6px rgba(255,248,244,0.92), 0 2px 12px rgba(255,245,240,0.85);
}

/* Date display */
.date-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.75rem 0;
    position: relative;
    z-index: 1;
}

.date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.date-day, .date-time {
    font-family: 'Raleway', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-dark);
    text-transform: uppercase;
    line-height: 1;
}

.date-number {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 16vw, 5.5rem);
    font-weight: 600;
    color: var(--rose);
    line-height: 1.15;
    display: block;
    overflow: visible;
}

.date-month {
    font-family: 'Raleway', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-mid);
    text-transform: uppercase;
    margin-top: 0.25rem;
    display: block;
}

/* Action buttons */
.action-label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.action-buttons {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--text-mid);
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--border-gold);
    background: linear-gradient(135deg, var(--gold-light), #FDFAF6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(180, 80, 120, 0.1);
    transition: all 0.3s ease;
}

.btn-circle svg {
    width: 24px;
    height: 24px;
    stroke: var(--rose);
}

.action-btn:hover .btn-circle {
    background: linear-gradient(135deg, var(--rose-pale), var(--bg-card));
    border-color: var(--rose-mid);
    box-shadow: 0 8px 22px rgba(180, 80, 120, 0.2);
    transform: translateY(-3px);
}

.action-btn span {
    font-family: 'Raleway', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5;
}

/* Dress code */
.dress-code {
    border: 1.5px solid var(--border-gold);
    padding: 1.1rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, rgba(232,213,184,0.18), rgba(250,232,242,0.22));
    width: 100%;
    margin-top: 0.5rem;
    box-shadow: 0 2px 12px rgba(200,168,130,0.18), inset 0 0 0 4px rgba(232,213,184,0.12);
}

/* Cantos decorativos no dress-code */
.dress-code::before,
.dress-code::after {
    content: '✦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 0.75rem;
    opacity: 0.7;
}
.dress-code::before { left: 0.7rem; }
.dress-code::after  { right: 0.7rem; }

.dress-code-label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    color: var(--text-dark);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.dress-code-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 4vw, 1.55rem);
    font-weight: 600;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.5;
    text-shadow: 0 0 8px rgba(255,252,250,0.98), 0 1px 6px rgba(255,248,244,0.92), 0 2px 12px rgba(255,245,240,0.85);
}

/* Back button */
.btn-back-light {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.8rem;
    color: var(--text-light);
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid var(--border-rose);
    border-radius: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px;
    background: transparent;
}

.btn-back-light:hover {
    color: var(--rose);
    border-color: var(--rose-mid);
    background: var(--rose-pale);
}

/* ===== Animations ===== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Responsividade ===== */
@media (max-width: 520px) {
    .convite-body {
        padding: 0.6rem 0.5rem 0.8rem;
    }

    .invite-page { gap: 0.8rem; }

    .invite-card {
        padding: 1.6rem 1.2rem 1.3rem;
    }

    .invite-card::before { inset: 5px; }

    .invite-top { margin-bottom: 0.5rem; }
    .badge-xv { width: 64px; height: 64px; }

    .invite-quote { font-size: 1.2rem; margin-bottom: 0.4rem; }
    .invite-message { font-size: 1.05rem; line-height: 1.7; }
    .invite-name { font-size: clamp(2.4rem, 11vw, 3.5rem); margin-bottom: 0.1rem; }

    .ornament-divider { margin: 0.25rem 0; }
    .ornament-icon { font-size: 1rem; }

    .date-number { font-size: clamp(2.6rem, 12vw, 3.2rem); }
    .date-display { gap: 0.8rem; padding: 0.4rem 0; }
    .date-day, .date-time { font-size: 0.82rem; }
    .date-month { font-size: 0.73rem; }

    .action-label { font-size: 0.66rem; margin-bottom: 0.7rem; }
    .action-buttons { gap: 1.8rem; }
    .action-btn { gap: 0.5rem; }
    .action-btn span { font-size: 0.7rem; }
    .btn-circle { width: 60px; height: 60px; }
    .btn-circle svg { width: 21px; height: 21px; }

    .dress-code { padding: 0.7rem 1rem; margin-top: 0.3rem; }
    .dress-code-label { font-size: 0.58rem; margin-bottom: 0.2rem; }
    .dress-code-text { font-size: 1.05rem; }

    .home-pre { font-size: 0.8rem; letter-spacing: 0.2em; }
    .home-sub { font-size: 0.76rem; letter-spacing: 0.18em; }
    .btn-open { font-size: 0.86rem; padding: 1rem 2.2rem; }
}

@media (max-width: 380px) {
    .convite-body { padding: 0.4rem 0.35rem 0.6rem; }
    .invite-page { gap: 0.6rem; }
    .invite-card { padding: 1.3rem 0.9rem 1.1rem; }
    .invite-top { margin-bottom: 0.35rem; }
    .badge-xv { width: 58px; height: 58px; }
    .invite-quote { font-size: 1.05rem; margin-bottom: 0.3rem; }
    .invite-message { font-size: 0.95rem; line-height: 1.6; }
    .invite-name { font-size: clamp(2.1rem, 10.5vw, 3rem); }
    .ornament-divider { margin: 0.15rem 0; }
    .ornament-icon { font-size: 0.9rem; }
    .date-number { font-size: clamp(2.3rem, 11vw, 2.8rem); }
    .date-display { gap: 0.6rem; padding: 0.3rem 0; }
    .date-day, .date-time { font-size: 0.68rem; }
    .action-label { margin-bottom: 0.55rem; }
    .action-buttons { gap: 1.4rem; }
    .btn-circle { width: 54px; height: 54px; }
    .btn-circle svg { width: 19px; height: 19px; }
    .action-btn span { font-size: 0.64rem; }
    .dress-code { padding: 0.55rem 0.8rem; }
    .dress-code-text { font-size: 0.95rem; }
    .home-deco, .home-deco-bottom { letter-spacing: 0.3rem; font-size: 1.1rem; }
    .home-pre { font-size: 0.74rem; }
    .btn-open { font-size: 0.8rem; padding: 0.9rem 1.8rem; }
}

/* Touch feedback */
@media (hover: none) and (pointer: coarse) {
    .action-btn:active .btn-circle,
    .btn-open:active { transform: scale(0.96); opacity: 0.85; }
}

/* ===== Efeitos de Brilho ===== */

/* Canvas de glitter de fundo — fica atrás do conteúdo */
#bg-glitter {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Garante que o conteúdo fique acima do glitter de fundo */
.home-content {
    position: relative;
    z-index: 1;
}

.invite-page {
    position: relative;
    z-index: 1;
}

/* Canvas de estrelinhas — fica sobre tudo sem bloquear cliques */
#sparkles-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
}

/* Brilho DOURADO no nome (estilo Giovanna) */
.home-name-script {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #D4AF37;
    opacity: 1;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.9),
        0 0 12px rgba(255, 230, 120, 0.95),
        0 0 28px rgba(212, 175, 55, 0.85),
        0 0 55px rgba(180, 140, 30, 0.65),
        0 0 90px rgba(150, 110, 20, 0.40);
    animation: name-glow 2.8s ease-in-out infinite alternate;
}

.invite-name {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #D4AF37;
    opacity: 1;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.9),
        0 0 12px rgba(255, 230, 120, 0.95),
        0 0 28px rgba(212, 175, 55, 0.85),
        0 0 55px rgba(180, 140, 30, 0.65),
        0 0 90px rgba(150, 110, 20, 0.40);
    animation: name-glow 2.8s ease-in-out infinite alternate;
}

@keyframes name-glow {
    0% {
        text-shadow:
            0 0 4px rgba(255, 255, 255, 0.9),
            0 0 12px rgba(255, 230, 120, 0.95),
            0 0 28px rgba(212, 175, 55, 0.85),
            0 0 55px rgba(180, 140, 30, 0.65),
            0 0 90px rgba(150, 110, 20, 0.40);
    }
    100% {
        text-shadow:
            0 0 6px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 235, 130, 1),
            0 0 45px rgba(220, 185, 70, 0.95),
            0 0 80px rgba(190, 150, 40, 0.75),
            0 0 125px rgba(160, 120, 25, 0.50);
    }
}

@keyframes shimmer-text {
    0%   { background-position: 0% center; }
    100% { background-position: 250% center; }
}

/* Shimmer no número da data */
.date-number {
    background: linear-gradient(
        90deg,
        var(--rose) 0%,
        #F07AB0 35%,
        var(--rose) 65%,
        #D4186A 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer-text 3.5s linear infinite;
}

/* Glow pulsante na borda do card */
@keyframes card-glow {
    0%   { box-shadow: 0 16px 60px rgba(180, 80, 120, 0.12); }
    100% { box-shadow: 0 16px 60px rgba(180, 80, 120, 0.24),
                       0 0 40px rgba(200, 168, 130, 0.15),
                       inset 0 0 30px rgba(252, 232, 242, 0.4); }
}
.invite-card {
    animation: card-glow 3.5s ease-in-out infinite alternate;
}

/* Inner border shimmer (borda dourada interna) */
@keyframes inner-border-shimmer {
    0%, 100% { border-color: var(--border-gold); }
    50%       { border-color: var(--rose-mid); }
}
.invite-card::before {
    animation: inner-border-shimmer 4s ease-in-out infinite;
}

/* Badge XV — glow pulsante */
@keyframes badge-glow {
    0%   { box-shadow: 0 2px 14px rgba(180, 80, 120, 0.10); }
    100% { box-shadow: 0 4px 24px rgba(180, 80, 120, 0.25),
                       0 0 18px rgba(200, 168, 130, 0.2); }
}
.badge-xv {
    animation: badge-glow 2.5s ease-in-out infinite alternate;
}

/* Cintilação nos ícones ornamentais */
@keyframes twinkle {
    0%, 100% { opacity: 0.55; transform: scale(1)   rotate(0deg); }
    50%       { opacity: 1;    transform: scale(1.3) rotate(15deg); }
}
.ornament-icon {
    display: inline-block;
    animation: twinkle 1.8s ease-in-out infinite;
}
.ornament-icon:nth-child(2) { animation-delay: 0.3s; }
.ornament-icon:nth-child(3) { animation-delay: 0.6s; }
.ornament-icon:nth-child(4) { animation-delay: 0.9s; }

/* Cantos — brilho de entrada */
@keyframes corner-glow {
    0%, 100% { opacity: 0.55; text-shadow: none; }
    50%       { opacity: 1;    text-shadow: 0 0 8px var(--rose-light); }
}
.corner {
    animation: corner-glow 2.8s ease-in-out infinite;
}
.corner--tr { animation-delay: 0.7s; }
.corner--bl { animation-delay: 1.4s; }
.corner--br { animation-delay: 2.1s; }

/* Glow no botão da home */
@keyframes btn-glow {
    0%   { box-shadow: 0 8px 28px rgba(180, 80, 120, 0.28); }
    100% { box-shadow: 0 8px 28px rgba(180, 80, 120, 0.28),
                       0 0 25px rgba(200, 87, 122, 0.35); }
}
.btn-open {
    animation: btn-glow 2s ease-in-out infinite alternate, fadeUp 0.8s ease forwards 1.05s;
}

/* Shimmer nos botões circulares */
@keyframes circle-shimmer {
    0%, 100% { border-color: var(--border-gold); }
    50%       { border-color: var(--rose-mid); }
}
.btn-circle {
    animation: circle-shimmer 3s ease-in-out infinite;
}
.action-btn:nth-child(2) .btn-circle { animation-delay: 1.5s; }

/* Linha ornamental pulsante */
.ornament-line, .orn-line {
    transition: opacity 0.4s;
    animation: line-pulse 3s ease-in-out infinite alternate;
}
@keyframes line-pulse {
    0%   { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .home-content > * { opacity: 1 !important; }
    .home-name-script, .invite-name { color: #B8860B; background: none; text-shadow: none; animation: none; }
    .date-number { color: var(--rose); background: none; }
    #sparkles-canvas { display: none; }
}

/* ===== Botão de Música ===== */
.music-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--border-gold);
    background: linear-gradient(135deg, rgba(253,250,246,0.95), rgba(232,213,184,0.90));
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(180, 80, 120, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.music-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(180, 80, 120, 0.28);
}

.music-btn:active { transform: scale(0.95); }

.music-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--rose);
}

/* Ícone visível: mostra "on" quando tocando, "off" quando mudo */
.music-icon { position: absolute; transition: opacity 0.2s; }
.music-on  { opacity: 0; }
.music-off { opacity: 1; }

.music-btn.is-playing .music-on  { opacity: 1; }
.music-btn.is-playing .music-off { opacity: 0; }

/* Pulsa levemente enquanto toca */
@keyframes music-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(180, 80, 120, 0.18); }
    50%       { box-shadow: 0 4px 24px rgba(180, 80, 120, 0.38); }
}
.music-btn.is-playing {
    animation: music-pulse 2s ease-in-out infinite;
}

@media print {
    .music-btn { display: none !important; }
}

/* ===== Impressão / PDF ===== */
@media print {
    #bg-glitter, #sparkles-canvas { display: none !important; }
    .btn-back-light { display: none !important; }
    .convite-body {
        background: white !important;
        padding: 0 !important;
        min-height: unset;
    }
    .invite-page { gap: 0 !important; }
    .invite-card {
        box-shadow: none !important;
        border: 2px solid var(--border-rose) !important;
        break-inside: avoid;
    }
}