/*
 * Tema Celeste (mística, sem exageros): céu com três camadas de estrelas e paralaxe, nebulosa,
 * constelações que se desenham, lua na abertura e uma constelação como menu.
 * Fontes: --f-script (decorativa com serifas) --f-display (maiúsculas romanas) --f-body (serifa clássica)
 */
.inv-mistica{--x-radius:10px;--x-btn-radius:999px;--x-title:var(--f-script);--px:0;--py:0;--sy:0;background:var(--t-backdrop);color:var(--t-cover-ink)}
.inv-mistica .stage{min-height:100svh}
.inv-mistica .book{position:relative;z-index:1}

/* ---------- Céu ---------- */
.sky{position:fixed;z-index:0;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--t-cover) 70%,var(--t-petal2)),var(--t-cover) 60%)}
.nebula{position:absolute;inset:-20%;background:radial-gradient(40% 30% at 30% 30%,color-mix(in srgb,var(--t-petal2) 55%,transparent),transparent 70%),radial-gradient(35% 28% at 75% 65%,color-mix(in srgb,var(--t-accent) 30%,transparent),transparent 70%);filter:blur(30px);opacity:.7;animation:neb 30s ease-in-out infinite alternate}
@keyframes neb{to{transform:rotate(12deg) scale(1.1)}}
.stars{position:absolute;inset:-10%;background-repeat:repeat;will-change:transform}
.s1{background-image:radial-gradient(1px 1px at 20px 30px,var(--t-petal),transparent),radial-gradient(1px 1px at 90px 120px,var(--t-petal),transparent),radial-gradient(1px 1px at 160px 60px,var(--t-petal),transparent),radial-gradient(1px 1px at 40px 170px,var(--t-petal),transparent);background-size:200px 200px;opacity:.6;transform:translate3d(calc(var(--px) * 6px),calc(var(--py) * 6px - var(--sy) * .04px),0)}
.s2{background-image:radial-gradient(1.5px 1.5px at 60px 80px,var(--t-petal),transparent),radial-gradient(1.5px 1.5px at 210px 20px,var(--t-petal),transparent),radial-gradient(1.2px 1.2px at 130px 230px,var(--t-petal),transparent);background-size:280px 280px;opacity:.8;transform:translate3d(calc(var(--px) * 14px),calc(var(--py) * 14px - var(--sy) * .1px),0);animation:twk 4s ease-in-out infinite alternate}
.s3{background-image:radial-gradient(2px 2px at 150px 100px,#fff,transparent),radial-gradient(2.4px 2.4px at 40px 300px,var(--t-petal),transparent);background-size:380px 380px;transform:translate3d(calc(var(--px) * 26px),calc(var(--py) * 26px - var(--sy) * .2px),0);animation:twk 2.6s ease-in-out infinite alternate-reverse;filter:drop-shadow(0 0 3px var(--t-petal))}
.fx-stars--soft .s1{display:none}
@keyframes twk{to{opacity:.35}}
.cst{position:absolute;width:62%;color:var(--t-line);opacity:.4}
.cst path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3s ease forwards}
.cst-1{left:-6%;top:6%}.cst-2{right:-10%;top:52%;transform:rotate(18deg)}
.cst-2 path{animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}

/* Letras douradas com brilho correndo */
.foil{background:linear-gradient(100deg,var(--t-accent) 0%,var(--t-accent-2) 22%,#fff8e1 30%,var(--t-accent-2) 38%,var(--t-accent) 60%,var(--t-accent-2) 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 6s linear infinite}
.fx-foil--off .foil{animation:none}
@keyframes foil{to{background-position:-250% 0}}

/* ---------- Abertura: a lua ---------- */
.inv-mistica .cover{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(60% 40% at 50% 45%,color-mix(in srgb,var(--t-petal2) 28%,transparent),transparent),color-mix(in srgb,var(--t-cover) 72%,transparent);transition:opacity .9s ease .6s}
.inv-mistica .cover.is-gone{display:none}
.moon-btn{position:relative;display:grid;place-items:center;width:min(62vw,250px);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;color:var(--t-line);-webkit-tap-highlight-color:transparent;transition:transform 1.3s cubic-bezier(.6,0,.2,1)}
.moon-halo{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--t-line) 34%,transparent) 30%,transparent 68%);animation:breathe 4s ease-in-out infinite}
.moon-big{position:relative;width:62%;height:62%;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--t-line) 70%,transparent))}
.orbit{position:absolute;inset:0;animation:rot 36s linear infinite}
.orbit i{--k:0;position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--t-accent-2);box-shadow:0 0 8px 2px color-mix(in srgb,var(--t-accent-2) 60%,transparent);transform:rotate(calc(var(--k) * 60deg)) translateY(min(-31vw,-125px))}
.orbit i:nth-child(2){--k:1;opacity:.6}.orbit i:nth-child(3){--k:2}.orbit i:nth-child(4){--k:3;opacity:.5}.orbit i:nth-child(5){--k:4}.orbit i:nth-child(6){--k:5;opacity:.7}
@keyframes rot{to{transform:rotate(360deg)}}
.cover-name{margin:10px 0 0;padding:0 20px;text-align:center;text-wrap:balance;font-family:var(--f-script);font-weight:700;font-size:min(clamp(30px,8.4vw,44px),calc((min(100vw,480px) - 48px) / (var(--w,8) * .84)));line-height:1.1;color:var(--t-cover-ink)}
.cover-for{margin:-4px 0 0;padding:0 28px;max-width:440px;text-align:center;text-wrap:balance;font-family:var(--f-display);font-size:12px;line-height:1.7;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;color:var(--t-cover-ink)}
.cover-hint{margin:0;padding:0 24px;text-align:center;font-family:var(--f-display);font-size:12px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--t-accent-2);animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5}}
.cover.is-open{opacity:0;pointer-events:none}
.cover.is-open .moon-btn{transform:translateY(-40svh) scale(.4)}
.cover.is-open .cover-name,.cover.is-open .cover-for,.cover.is-open .cover-hint{opacity:0;transition:opacity .4s}

/* ---------- Início ---------- */
.inv-mistica .pg{min-height:100svh;padding:calc(40px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom));text-align:center}
.hero{position:relative;padding:30px 0 6px}
.omen{margin:0 0 8px;font-family:var(--f-display);font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--t-accent-2)}
.name{position:relative;margin:4px 0 6px;font-family:var(--f-script);font-weight:700;font-size:min(clamp(44px,13vw,66px),calc((min(100vw,480px) - 40px) / (var(--w,6) * .84)));line-height:1.08;letter-spacing:.01em;text-wrap:balance}
.ndate{position:relative;margin:4px 0 16px;font-family:var(--f-display);font-size:15px;letter-spacing:.16em;color:var(--t-cover-ink)}
.moon-line{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px 8px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--t-accent) 45%,transparent);font-family:var(--f-body);font-size:15px;font-style:italic;color:var(--t-cover-ink);background:color-mix(in srgb,var(--t-cover) 40%,transparent)}
.moon-mini{width:26px;height:26px;color:var(--t-line);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--t-line) 60%,transparent))}
.prophecy{margin:26px auto 6px;max-width:30ch;font-family:var(--f-body);font-style:italic;font-size:19px;line-height:1.55;color:var(--t-cover-ink)}
.sign{margin:0 0 10px;font-family:var(--f-display);font-size:12.5px;letter-spacing:.18em;color:var(--t-accent-2)}
.is-closed #s-menu > *{opacity:0}
.is-opening #s-menu > :not(.constel),.is-revealed #s-menu > :not(.constel){animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:.7s}
.is-opening .hero > *,.is-revealed .hero > *{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero > :nth-child(1){animation-delay:.7s!important}.hero > :nth-child(2){animation-delay:.85s!important}.hero > :nth-child(3){animation-delay:1s!important}.hero > :nth-child(4){animation-delay:1.15s!important}
.is-opened #s-menu > *,.is-opened .hero > *{animation:none!important}
@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Constelação: cada estrela abre uma parte do convite */
.constel{position:relative;margin:30px auto 0;max-width:400px}
.constel-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.constel-line path{fill:none;stroke:var(--t-line);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;vector-effect:non-scaling-stroke}
.is-opening .constel-line path,.is-revealed .constel-line path{animation:draw 2.4s ease 1.2s forwards}
.is-opened .constel-line path{stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.star{position:absolute;display:flex;align-items:center;gap:10px;margin:-22px 0 0 -22px;text-decoration:none;color:var(--t-cover-ink);-webkit-tap-highlight-color:transparent}
.star--r{flex-direction:row-reverse;margin-left:0;transform:translateX(calc(-100% + 22px))}
.star-dot{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center}
.star-dot::before{content:"";width:22px;height:22px;background:var(--t-accent-2);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 6px var(--t-accent-2));animation:twinkle 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
.star-dot::after{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--t-accent-2) 45%,transparent),transparent 70%)}
@keyframes twinkle{50%{transform:scale(.72) rotate(20deg);opacity:.8}}
.star-label{padding:8px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--t-accent) 50%,transparent);background:color-mix(in srgb,var(--t-cover) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--f-display);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s}
.star:hover .star-label,.star:focus-visible .star-label{background:var(--t-accent);color:var(--t-on-accent)}
.star:active .star-dot::before{transform:scale(1.4)}
.is-closed .star{opacity:0}
.is-opening .star,.is-revealed .star{animation:starIn .7s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(1.4s + var(--i) * .35s)}
.is-opened .star{animation:none}
@keyframes starIn{from{opacity:0;transform:scale(.4)}}
.is-opening .star--r,.is-revealed .star--r{animation-name:starInR}
@keyframes starInR{from{opacity:0;transform:translateX(calc(-100% + 22px)) scale(.4)}to{transform:translateX(calc(-100% + 22px))}}

.cd-wrap{margin:30px 0 0}
.inv-mistica .cd-u b{font-family:var(--f-display);font-size:30px;color:var(--t-accent-2)}
.inv-mistica .cd-u small{font-family:var(--f-display);font-size:11px;opacity:.9}
.inv-mistica .brand{margin:30px 0 0;font-family:var(--f-display);font-size:11px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;opacity:.75}

/* ---------- Páginas ---------- */
.sky-page{text-align:left}
.back{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:0 0 16px;padding:9px 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--t-accent) 60%,transparent);color:var(--t-accent-2);text-decoration:none;font-family:var(--f-display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;background:color-mix(in srgb,var(--t-cover) 60%,transparent);backdrop-filter:blur(6px)}
.celest{--x-ink:var(--t-ink);--x-muted:var(--t-muted);--x-accent:color-mix(in srgb,var(--t-accent) 82%,#000);--x-line:color-mix(in srgb,var(--t-ink) 14%,transparent);position:relative;padding:0 16px 18px;border-radius:24px;color:var(--t-ink);background:var(--t-paper);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--t-accent) 40%,transparent);overflow:hidden}
.pg.glide-in .celest{animation:glide .6s cubic-bezier(.2,.9,.3,1) both}
@keyframes glide{from{opacity:0;transform:translateY(34px) scale(.97)}}
.celest-head{position:relative;margin:0 -16px 18px;padding:26px 16px 20px;text-align:center;color:var(--t-accent-2);background:radial-gradient(90% 120% at 50% 0%,color-mix(in srgb,var(--t-petal2) 50%,var(--t-leaf)),var(--t-leaf));overflow:hidden}
.celest-head::before{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1.4px 1.4px at 78% 22%,#fff,transparent),radial-gradient(1px 1px at 60% 75%,#fff,transparent),radial-gradient(1.2px 1.2px at 12% 80%,#fff,transparent),radial-gradient(1px 1px at 90% 70%,#fff,transparent);opacity:.7}
.celest-ic{position:relative;display:grid;place-items:center;width:68px;height:68px;margin:0 auto 10px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 60%,transparent);box-shadow:0 0 24px -4px currentColor}
.celest-ic .ic{stroke-width:1.2}
.celest-title{position:relative;margin:0;font-family:var(--f-script);font-weight:700;font-size:30px;line-height:1.1;color:var(--t-cover-ink)}
.celest-body{padding:0 2px}
.loc-name{margin:0 0 4px;font-family:var(--f-display);font-size:20px;letter-spacing:.06em;text-align:center}
.loc-addr,.lead{margin:0 0 6px;font-family:var(--f-body);font-size:17px;line-height:1.5;text-align:center;color:var(--t-muted)}
.loc-when{margin:0 0 16px;font-family:var(--f-body);font-style:italic;font-size:17px;text-align:center}
.inv-mistica .pill{background:linear-gradient(180deg,color-mix(in srgb,#fff 10%,var(--x-accent)),var(--x-accent));font-family:var(--f-display);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.inv-mistica .pill b{font-family:var(--f-display);letter-spacing:.14em}
.inv-mistica .pill--line{background:transparent;color:var(--x-accent);box-shadow:inset 0 0 0 1.5px var(--x-accent)}
.inv-mistica .gifts .pill{background:transparent;color:var(--t-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-accent) 60%,transparent)}
.inv-mistica .gifts .pill small{font-family:var(--f-body);font-size:14px}
.inv-mistica .rsvp-person legend,.inv-mistica .rsvp-hello{font-family:var(--f-body);font-size:18px}
.inv-mistica .manual li span{font-family:var(--f-body);font-size:15px}
.inv-mistica .gal-item{border-radius:12px;box-shadow:0 0 0 1px color-mix(in srgb,var(--t-accent) 50%,transparent)}
.inv-mistica .music{top:calc(14px + env(safe-area-inset-top));color:var(--t-accent-2);border-color:color-mix(in srgb,var(--t-accent) 60%,transparent)}
@media (hover:hover){.sparkle{position:fixed;z-index:60;width:6px;height:6px;border-radius:50%;pointer-events:none;background:var(--t-accent-2);box-shadow:0 0 8px 2px var(--t-accent-2);animation:spark .9s ease-out forwards}}
@keyframes spark{to{transform:translateY(18px) scale(0);opacity:0}}
.inv-mistica .seg span{padding:11px 15px}
/* Marca no fim, discreta sobre o céu noturno */
.inv-mistica{--brand-bg:color-mix(in srgb,var(--t-cover) 70%,transparent);--brand-ink:var(--t-cover-ink)}
.inv-mistica .brand.brand{margin-top:30px;font-weight:500;letter-spacing:.3em;box-shadow:0 0 0 1px color-mix(in srgb,var(--t-accent) 40%,transparent)}