/* =====================================================================
   flash.css — Camada "site em Flash": intro, fundo vivo, botões animados,
   transições e efeitos. Carregar DEPOIS do style.css.
   Tudo fica sob .fx (adicionado pelo flash.js).
   ===================================================================== */

/* ===== Fundo vivo ===== */
.fx body { background: var(--cream); overflow-x: clip; }
.fx-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.fx-aurora { position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; overflow: hidden; }
.fx-aurora i {
    position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: .55;
    animation: fx-drift 26s ease-in-out infinite alternate; will-change: transform;
}
.fx-aurora i:nth-child(1) { background: radial-gradient(circle, rgba(239, 192, 188, .55), transparent 65%); top: 0; left: 5%; }
.fx-aurora i:nth-child(2) { background: radial-gradient(circle, rgba(160, 171, 137, .45), transparent 65%); bottom: 0; right: 0; animation-duration: 32s; animation-delay: -8s; }
.fx-aurora i:nth-child(3) { background: radial-gradient(circle, rgba(231, 220, 195, .7), transparent 65%); top: 30%; left: 35%; animation-duration: 38s; animation-delay: -16s; }
@keyframes fx-drift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(8vmax, -6vmax) scale(1.12); }
    66% { transform: translate(-6vmax, 7vmax) scale(.92); }
    100% { transform: translate(5vmax, 4vmax) scale(1.06); }
}

/* Seções deixam o fundo vivo aparecer */
.fx .section { position: relative; background: transparent; overflow-x: clip; }
.fx .section-alt { background: rgba(243, 238, 223, .62); }
.fx .section-blush { background: rgba(248, 236, 234, .62); }
.fx .footer { background: rgba(251, 247, 236, .8); position: relative; }
.fx .hero-bg {
    background:
        radial-gradient(circle at 20% 30%, rgba(239, 192, 188, .22), transparent 40%),
        radial-gradient(circle at 80% 75%, rgba(160, 171, 137, .2), transparent 45%);
}
.fx .hero-logo { mix-blend-mode: multiply; }

/* Lírios decorativos flutuando nas laterais das seções */
.fx-orn {
    position: absolute; z-index: 0; width: clamp(110px, 16vw, 230px); opacity: .35; pointer-events: none;
    animation: fx-float 9s ease-in-out infinite; mix-blend-mode: multiply;
}
.fx-orn.right { right: -30px; top: 40px; }
.fx-orn.left { left: -30px; bottom: 30px; animation-delay: -4s; }
.fx .section > *:not(.fx-orn) { position: relative; z-index: 1; }
@keyframes fx-float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-16px) rotate(3deg); }
}

/* ===== Barra de progresso de rolagem ===== */
.fx-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 70; pointer-events: none;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--sage), var(--gold), var(--rose));
    box-shadow: 0 0 10px rgba(184, 151, 90, .6);
}

/* ===== Intro ===== */
.fx-locked { overflow: hidden; }
.fx-intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; overflow: hidden; }
.fx-curtain {
    position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--cream);
    transition: transform 1.3s cubic-bezier(.77, 0, .18, 1);
}
.fx-curtain::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(239, 192, 188, .35), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(160, 171, 137, .3), transparent 50%);
}
.fx-curtain.l { left: 0; border-right: 1px solid var(--gold-soft); }
.fx-curtain.r { right: 0; border-left: 1px solid var(--gold-soft); }
.fx-intro.open .fx-curtain.l { transform: translateX(-102%); }
.fx-intro.open .fx-curtain.r { transform: translateX(102%); }

.fx-intro-stage { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; transition: opacity .6s, transform .8s; }
.fx-intro.open .fx-intro-stage { opacity: 0; transform: scale(1.15); filter: blur(6px); }
.fx-ring { width: min(300px, 68vw); height: auto; overflow: visible; }
.fx-ring circle, .fx-ring path { fill: none; stroke-linecap: round; }
.fx-ring .r1 { stroke: var(--olive); stroke-width: 1.4; stroke-dasharray: 760; stroke-dashoffset: 760; animation: fx-draw 2.4s .2s cubic-bezier(.6, 0, .2, 1) forwards; }
.fx-ring .r2 { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 160; stroke-dashoffset: 160; animation: fx-draw 1.4s 1.2s ease forwards; }
.fx-ring .r3 { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 160; stroke-dashoffset: 160; animation: fx-draw 1.4s 1.5s ease forwards; }
.fx-ring .dot { fill: var(--gold); opacity: 0; animation: fx-pop .5s 2.2s ease forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

.fx-intro-mono {
    position: absolute; top: 0; left: 0; right: 0; height: min(300px, 68vw); display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: clamp(3.4rem, 12vw, 5.4rem); color: var(--green); letter-spacing: .06em;
}
.fx-intro-mono span { display: inline-block; opacity: 0; transform: translateY(30px) rotateX(80deg); animation: fx-letter .9s cubic-bezier(.2, .9, .3, 1.3) forwards; }
.fx-intro-mono span.bar { color: var(--gold); font-weight: 300; margin: 0 .25em; }
@keyframes fx-letter { to { opacity: 1; transform: none; } }

.fx-intro-names {
    font-family: var(--script); font-size: clamp(2rem, 6vw, 2.8rem); color: var(--olive); margin-top: 6px;
    opacity: 0; animation: fx-fade-up 1s 1.6s ease forwards;
}
.fx-intro-tag { font-size: .7rem; letter-spacing: .4em; text-transform: uppercase; color: var(--gold); opacity: 0; animation: fx-fade-up 1s 1.9s ease forwards; }
@keyframes fx-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.fx-load { width: min(260px, 70vw); margin-top: 26px; display: grid; gap: 8px; justify-items: center; transition: opacity .4s; }
.fx-load-track { width: 100%; height: 2px; background: var(--gold-soft); border-radius: 2px; overflow: hidden; }
.fx-load-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sage), var(--gold)); box-shadow: 0 0 8px var(--gold); }
.fx-load b { font-family: var(--serif); font-weight: 500; font-size: 1rem; letter-spacing: .2em; color: var(--muted); }
.fx-load.done { opacity: 0; height: 0; margin: 0; }

.fx-enter { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.fx-enter[hidden] { display: none !important; }
.fx-enter .btn { animation: fx-fade-up .7s ease both; }
.fx-enter .btn + .btn { animation-delay: .12s; }
.fx-enter .btn-primary { animation: fx-fade-up .7s ease both, fx-pulse 2.2s 1s ease-in-out infinite; }
.fx .hero-actions .btn-primary, .fx .cta-bar .btn-primary { animation: fx-pulse 2.2s 2s ease-in-out infinite; }
.fx .cta-bar.open .cta-bell { animation: fx-jelly .6s; }
@keyframes fx-pulse {
    0%, 100% { box-shadow: 0 8px 20px rgba(63, 79, 61, .25), 0 0 0 0 rgba(108, 106, 63, .35); }
    50% { box-shadow: 0 8px 20px rgba(63, 79, 61, .25), 0 0 0 14px rgba(108, 106, 63, 0); }
}
.fx-skip {
    position: absolute; right: 22px; bottom: 20px; z-index: 3; background: none; border: 0; cursor: pointer;
    font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.fx-skip:hover { color: var(--green); }

/* ===== Entrada do hero (depois da intro) ===== */
.fx .hero-content { animation: none; }
.fx .hero-content > * { opacity: 0; }
.fx-ready .hero-content > * { animation: fx-hero-in 1s cubic-bezier(.2, .8, .2, 1) forwards; }
.fx-ready .hero-content > :nth-child(1) { animation-delay: .1s; }
.fx-ready .hero-content > :nth-child(2) { animation-delay: .25s; }
.fx-ready .hero-content > :nth-child(3) { animation-delay: .25s; }
.fx-ready .hero-content > :nth-child(4) { animation-delay: .7s; }
.fx-ready .hero-content > :nth-child(5) { animation-delay: .85s; }
.fx-ready .hero-content > :nth-child(6) { animation-delay: 1s; }
.fx-ready .hero-content > :nth-child(7) { animation-delay: 1.15s; }
.fx-ready .hero-content > :nth-child(8) { animation-delay: 1.35s; }
@keyframes fx-hero-in { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.fx-ready .hero-logo { animation: fx-bloom 1.8s cubic-bezier(.2, .8, .2, 1) .2s forwards; }
@keyframes fx-bloom {
    0% { opacity: 0; transform: scale(.7) rotate(-6deg); filter: blur(12px); clip-path: circle(0% at 50% 50%); }
    60% { opacity: 1; filter: blur(0); clip-path: circle(75% at 50% 50%); }
    100% { opacity: 1; transform: none; clip-path: circle(75% at 50% 50%); }
}

.fx-rays {
    position: absolute; z-index: -1; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax;
    pointer-events: none; opacity: .5;
    background: repeating-conic-gradient(from 0deg, rgba(231, 220, 195, .55) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 0%, transparent 45%); mask: radial-gradient(circle, #000 0%, transparent 45%);
    animation: fx-spin 90s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

.fx .lily { transition: transform .9s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.fx .lily-top { transform: translate(var(--px, 0), var(--py, 0)); animation: fx-sway 8s ease-in-out infinite; transform-origin: 100% 0; }
.fx .lily-bottom { transform: translate(calc(var(--px, 0) * -1), calc(var(--py, 0) * -1)); animation: fx-sway 10s ease-in-out infinite reverse; transform-origin: 0 100%; }
@keyframes fx-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }
.fx .lily { opacity: 0; }
.fx-ready .lily { animation-name: fx-sway, fx-lily-in; animation-duration: 8s, 1.6s; animation-iteration-count: infinite, 1; animation-fill-mode: none, forwards; animation-timing-function: ease-in-out, cubic-bezier(.2, .8, .2, 1); }
@keyframes fx-lily-in { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }

.fx .hero-names .amp { animation: fx-shimmer 3s linear infinite; background: linear-gradient(110deg, var(--gold) 30%, #f4e3b5 50%, var(--gold) 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes fx-shimmer { to { background-position: -200% 0; } }

.fx .scroll-hint { animation: fx-bounce 2s infinite; }
@keyframes fx-bounce { 0%, 100% { transform: translate(-50%, 0); opacity: .6; } 50% { transform: translate(-50%, 10px); opacity: 1; } }

/* ===== Contagem regressiva (placar) ===== */
.fx .countdown div {
    position: relative; overflow: hidden; perspective: 400px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55));
    box-shadow: 0 10px 24px rgba(95, 97, 56, .1), inset 0 1px 0 #fff;
    transition: transform .3s;
}
.fx .countdown div::after {
    content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 1px; background: rgba(184, 151, 90, .25);
}
.fx .countdown div:hover { transform: translateY(-4px) scale(1.04); }
.fx .countdown strong { display: block; transform-origin: 50% 50%; }
.fx .countdown strong.fx-flip { animation: fx-flip .5s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fx-flip {
    0% { transform: rotateX(90deg); opacity: .2; }
    100% { transform: rotateX(0); opacity: 1; }
}

/* ===== Menu ===== */
@media (min-width: 961px) { .fx .nav-links { position: relative; } }
.fx-pill {
    position: absolute; z-index: -1; top: 50%; height: 34px; margin-top: -17px; left: 0; width: 0; border-radius: 999px;
    background: linear-gradient(135deg, rgba(160, 171, 137, .28), rgba(239, 192, 188, .32));
    border: 1px solid rgba(184, 151, 90, .35); opacity: 0;
    transition: left .45s cubic-bezier(.5, 1.6, .4, 1), width .45s cubic-bezier(.5, 1.6, .4, 1), opacity .3s;
}
.fx .nav-links a { display: inline-block; padding: 6px 4px; }
.fx .nav-links a::after { display: none; }
.fx .nav-links a .ch { display: inline-block; transition: transform .3s, color .3s; }
.fx .nav-links a:hover .ch { animation: fx-wave .5s ease calc(var(--i) * 28ms); color: var(--olive); }
.fx .nav-links a.active { color: var(--olive); }
.fx .nav-links a.active::before {
    content: ''; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: fx-pop .4s ease both;
}
@keyframes fx-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.15); } }
.fx .nav-brand { transition: letter-spacing .4s, text-shadow .4s; }
.fx .nav-brand:hover { letter-spacing: .3em; text-shadow: 0 0 14px rgba(184, 151, 90, .5); }
@media (max-width: 960px) {
    .fx-pill { display: none; }
    .fx .nav-links.open li { animation: fx-fade-up .5s ease both; }
    .fx .nav-links.open li:nth-child(2) { animation-delay: .04s; } .fx .nav-links.open li:nth-child(3) { animation-delay: .08s; }
    .fx .nav-links.open li:nth-child(4) { animation-delay: .12s; } .fx .nav-links.open li:nth-child(5) { animation-delay: .16s; }
    .fx .nav-links.open li:nth-child(6) { animation-delay: .2s; } .fx .nav-links.open li:nth-child(7) { animation-delay: .24s; }
    .fx .nav-links.open li:nth-child(8) { animation-delay: .28s; } .fx .nav-links.open li:nth-child(9) { animation-delay: .32s; }
}

/* ===== Botões ===== */
.fx .btn, .fx .chip, .fx .amounts button { position: relative; overflow: hidden; isolation: isolate; }
.fx .btn {
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .25s, box-shadow .25s, color .25s, opacity .2s;
}
.fx .btn:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 3px)) scale(1.04); }
.fx .btn:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.96); }
.fx .btn:disabled { transform: none; }
.fx .btn::before {
    content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -80%; width: 50%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
    transition: left .7s ease;
}
.fx .btn:hover::before { left: 130%; }
.fx .btn-primary:hover { box-shadow: 0 12px 28px rgba(63, 79, 61, .35), 0 0 0 4px rgba(160, 171, 137, .25); }
.fx .btn-outline::after {
    content: ''; position: absolute; z-index: -2; inset: 0; border-radius: inherit; background: var(--green);
    transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.fx .btn-outline:hover { background: transparent; }
.fx .btn-outline:hover::after { transform: scale(1); }
.fx .hero.has-photo .btn-outline::after { background: rgba(255, 255, 255, .2); }
.fx-ripple {
    position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; transform: scale(0);
    background: rgba(255, 255, 255, .45); animation: fx-ripple .7s ease-out forwards;
}
.fx .btn-outline .fx-ripple, .fx .chip .fx-ripple { background: rgba(184, 151, 90, .35); }
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }
.fx .chip { transition: background .25s, color .25s, border-color .25s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.fx .chip:hover { transform: translateY(-2px) scale(1.06); }
.fx .chip.active { box-shadow: 0 6px 16px rgba(95, 97, 56, .25); }
.fx .amounts button { transition: background .2s, color .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.fx .amounts button:hover { transform: translateY(-3px) scale(1.05); }
.fx .choice span { transition: background .3s, color .3s, transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s; }
.fx .choice label:hover span { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(95, 97, 56, .12); }
.fx .choice input:checked + span { animation: fx-jelly .6s; }
@keyframes fx-jelly { 0% { transform: scale(1); } 30% { transform: scale(1.08, .92); } 50% { transform: scale(.95, 1.05); } 70% { transform: scale(1.03, .97); } 100% { transform: scale(1); } }

.fx .field input, .fx .field textarea { transition: border .3s, box-shadow .3s, background .3s, transform .3s; }
.fx .field input:focus, .fx .field textarea:focus { background: #fff; transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(138, 154, 132, .2), 0 8px 20px rgba(95, 97, 56, .08); }

/* ===== Cartões 3D ===== */
.fx .fx-tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important;
    transition: transform .12s ease-out, box-shadow .3s !important; box-shadow: 0 24px 44px rgba(63, 79, 61, .16);
}
.fx .fx-tilt-out { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, opacity .8s !important; }
.fx-glare {
    position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .5), transparent 55%);
}
.fx .fx-tilt > .fx-glare { opacity: 1; }
.fx .gift, .fx .event, .fx .wish, .fx .manual-card { position: relative; }
.fx .gift-img img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.fx .gift:hover .gift-img img { transform: scale(1.06); }
.fx .progress-bar { position: relative; overflow: hidden; }
.fx .progress-bar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: fx-sweep 2.4s ease-in-out infinite;
}
@keyframes fx-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Padrinhos */
.fx .godparent-photo { position: relative; overflow: visible; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), box-shadow .4s; }
.fx .godparent-photo::before {
    content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed var(--gold);
    opacity: 0; transform: scale(.85) rotate(0); transition: opacity .4s, transform .6s;
}
.fx .godparent:hover .godparent-photo { transform: translateY(-6px) scale(1.06); box-shadow: 0 18px 36px rgba(95, 97, 56, .2); }
.fx .godparent:hover .godparent-photo::before { opacity: 1; transform: scale(1); animation: fx-spin 12s linear infinite; }
.fx .godparent strong { transition: color .3s, letter-spacing .4s; }
.fx .godparent:hover strong { color: var(--olive); letter-spacing: .02em; }

/* Linha do tempo: bolinhas pulsando */
.fx .timeline::before { background: linear-gradient(var(--gold-soft), var(--gold), var(--gold-soft)); }
.fx .timeline li.visible::before { animation: fx-beat 2.4s ease-in-out infinite; background: var(--gold); }
@keyframes fx-beat { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 151, 90, .5); } 50% { box-shadow: 0 0 0 9px rgba(184, 151, 90, 0); } }

.fx .faq details { transition: transform .3s, box-shadow .3s; }
.fx .faq details:hover { transform: translateX(6px); box-shadow: 0 14px 30px rgba(95, 97, 56, .12); }
.fx .faq details[open] { box-shadow: 0 14px 30px rgba(95, 97, 56, .14), inset 3px 0 0 var(--gold); }
.fx .faq details[open] p { animation: fx-fade-up .5s ease; }

.fx .schedule li { transition: transform .3s, background .3s; border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.fx .schedule li:hover { transform: translateX(8px); background: rgba(255, 255, 255, .6); }

/* ===== Revelação ao rolar (mais teatral) ===== */
.fx .reveal {
    opacity: 0; transform: perspective(900px) translateY(60px) rotateX(16deg) scale(.95); filter: blur(6px);
    transition: opacity .9s ease, transform 1s cubic-bezier(.2, .8, .2, 1), filter .9s ease;
    transition-delay: var(--d, 0ms);
}
.fx .timeline li.reveal:nth-child(odd) { transform: translateX(-80px) rotate(-3deg); }
.fx .timeline li.reveal:nth-child(even) { transform: translateX(80px) rotate(3deg); }
.fx .godparent.reveal { transform: scale(.5) rotate(-10deg); }
.fx .wish.reveal { transform: translateY(40px) rotate(calc((var(--n, 0) - 1) * 2deg)) scale(.9); }
.fx .reveal.visible,
.fx .timeline li.reveal.visible,
.fx .godparent.reveal.visible,
.fx .wish.reveal.visible { opacity: 1; transform: none; filter: none; }

.fx .fx-head .eyebrow { opacity: 0; letter-spacing: 1em; transition: opacity 1s, letter-spacing 1.2s cubic-bezier(.2, .8, .2, 1); }
.fx .fx-head h2 { clip-path: inset(0 0 100% 0); transform: translateY(30px); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1) .15s, transform 1s cubic-bezier(.2, .8, .2, 1) .15s; }
.fx .fx-head .divider span { width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1) .5s; }
.fx .fx-head .heart { display: inline-block; transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.8, .5, 1) .8s; }
.fx .fx-head .section-lead { opacity: 0; transform: translateY(16px); transition: opacity .8s .6s, transform .8s .6s; }
.fx .fx-head.visible .eyebrow { opacity: 1; letter-spacing: .3em; }
.fx .fx-head.visible h2 { clip-path: inset(0 0 -20% 0); transform: none; }
.fx .fx-head.visible .divider span { width: 70px; }
.fx .fx-head.visible .heart { transform: scale(1); animation: fx-heart 1.6s 1.4s ease-in-out infinite; }
.fx .fx-head.visible .section-lead { opacity: 1; transform: none; }
@keyframes fx-heart { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(1); } 45% { transform: scale(1.2); } }

/* ===== Transição entre seções ===== */
.fx-wipe {
    position: fixed; inset: 0; z-index: 250; pointer-events: none; display: grid; place-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5), transparent 60%),
        linear-gradient(135deg, var(--cream) 0%, var(--blush) 50%, var(--cream-2) 100%);
    clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%));
    transition: clip-path .55s cubic-bezier(.7, 0, .3, 1);
}
.fx-wipe.in { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); }
.fx-wipe span {
    font-family: var(--script); font-size: clamp(2.6rem, 8vw, 4.4rem); color: var(--olive);
    opacity: 0; transform: scale(.7); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.fx-wipe.in span { opacity: 1; transform: none; transition-delay: .2s; }

/* ===== Cursor ===== */
.fx-cursor {
    position: fixed; left: 0; top: 0; z-index: 400; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
    border: 1.5px solid var(--gold); border-radius: 50%; will-change: transform;
    transition: width .3s, height .3s, margin .3s, background .3s, border-color .3s, opacity .3s;
}
.fx-cursor.hover { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(184, 151, 90, .14); border-color: var(--olive); }
.fx-cursor.down { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: rgba(184, 151, 90, .3); }
.fx-cursor.hide { opacity: 0; }

/* ===== Botões flutuantes (som / topo) ===== */
.fx-dock { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: flex; gap: 10px; }
.fx-dock button {
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-soft); cursor: pointer;
    background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); box-shadow: 0 8px 20px rgba(95, 97, 56, .15);
    display: grid; place-items: center; color: var(--green); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .4s;
}
.fx-dock button:hover { transform: scale(1.12) rotate(-6deg); }
.fx-eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.fx-eq i { width: 3px; height: 4px; background: var(--olive); border-radius: 2px; transition: height .3s; }
.fx-sound.on .fx-eq i { animation: fx-eq .9s ease-in-out infinite; }
.fx-sound.on .fx-eq i:nth-child(2) { animation-delay: -.3s; } .fx-sound.on .fx-eq i:nth-child(3) { animation-delay: -.6s; } .fx-sound.on .fx-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes fx-eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.fx-top { opacity: 0; pointer-events: none; font-size: 1.1rem; }
.fx-top.show { opacity: 1; pointer-events: auto; }

/* ===== Colaboradores ===== */
.fx .colab-tab { position: relative; overflow: hidden; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.fx .colab-tab:hover { transform: translateY(-3px) scale(1.05); }
.fx .colab-tab.active { animation: fx-jelly .6s; }
.fx .colab-in .colab-sub { animation: fx-fade-up .6s ease both; }
.fx .colab-in .podium-step { animation: fx-podium .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * .18s); }
.fx .colab-in .p1 { animation-delay: .5s; }
.fx .colab-in .podium-base { transform-origin: 50% 100%; animation: fx-rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: inherit; }
.fx .colab-in .rank-list li { animation: fx-slide-in .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.8s + var(--i) * .08s); }
.fx .colab-in .colab-person { animation: fx-card-in .8s cubic-bezier(.3, 1.3, .5, 1) backwards; animation-delay: calc(var(--i) * .12s); }
.fx .p1 .medal { position: relative; overflow: hidden; animation: fx-medal 3s 1.4s ease-in-out infinite; }
.fx .p1 .podium-photo .medal { position: absolute; }
.fx .colab-in .podium-photo .rank-avatar { animation: fx-avatar-in .8s .3s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.fx .p1 .rank-avatar { box-shadow: 0 0 0 4px rgba(227, 196, 119, .35), 0 12px 30px rgba(184, 151, 90, .35); }
.fx .rank-avatar img { transition: transform .5s; }
.fx .rank-list li:hover .rank-avatar { transform: scale(1.12) rotate(-4deg); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fx-avatar-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.fx .p1 .medal::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .8) 50%, transparent 70%); background-size: 250% 100%;
    animation: fx-shimmer 2.6s linear infinite;
}
.fx .p1 strong { background: linear-gradient(110deg, var(--green) 35%, var(--gold) 50%, var(--green) 65%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-shimmer 3.5s linear infinite; }
.fx .rank-list li { transition: transform .3s, box-shadow .3s; }
.fx .rank-list li:hover { transform: translateX(8px) scale(1.01); box-shadow: 0 14px 30px rgba(95, 97, 56, .14); }
.fx .colab-person .godparent-photo { position: relative; overflow: visible; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.fx .colab-person:hover .godparent-photo { transform: scale(1.06) rotate(-3deg); }
@keyframes fx-podium { from { opacity: 0; transform: translateY(60px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes fx-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fx-slide-in { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes fx-card-in { from { opacity: 0; transform: perspective(800px) rotateY(-25deg) translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fx-medal { 0%, 100% { transform: rotate(0) scale(1); } 10% { transform: rotate(-12deg) scale(1.08); } 20% { transform: rotate(10deg) scale(1.08); } 30% { transform: rotate(0) scale(1); } }

/* ===== Modo leve (celular / aparelho fraco) ===== */
.fx-lite .fx-aurora i { animation: none; }
.fx-lite .fx-rays { animation: none; }
.fx-lite .reveal { filter: none; }
.fx-lite .fx-dock button, .fx-lite .nav { backdrop-filter: none; }
.fx-lite .fx-dock button { background: rgba(255, 255, 255, .95); }

/* Modal e lightbox com entrada animada */
.fx .modal.open .modal-box { animation: fx-modal .55s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes fx-modal { from { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
.fx .lightbox.open #lightbox-img { animation: fx-zoom-in .5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes fx-zoom-in { from { opacity: 0; transform: scale(.7) rotate(-3deg); } to { opacity: 1; transform: none; } }
.fx .toast.show { animation: fx-toast .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fx-toast { from { transform: translate(-50%, 140%) scale(.8); } to { transform: translate(-50%, 0) scale(1); } }