/*
 * Tema Reino (princesa): céu em tons de algodão-doce, brilhos subindo, pergaminho que se desenrola,
 * castelo e tiara em traço dourado, estandartes como menu e páginas com filigranas nos cantos.
 * Fontes: --f-script (caligrafia real) --f-display (maiúsculas romanas) --f-body (serifa clássica)
 */
.inv-princesa{--x-radius:18px;--x-btn-radius:999px;--x-title:var(--f-script);background:var(--t-backdrop);color:var(--t-cover-ink)}
.inv-princesa .book{position:relative;z-index:1}

/* ---------- Céu do reino ---------- */
.realm{position:fixed;z-index:0;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--t-cover) 70%,#fff),var(--t-cover) 45%,color-mix(in srgb,var(--t-cover) 80%,var(--t-accent-2)))}
.glow{position:absolute;left:50%;top:20%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.75),transparent 60%);animation:glowP 8s ease-in-out infinite alternate}
@keyframes glowP{to{opacity:.6;transform:translate(-50%,-48%) scale(1.08)}}
.glitter{position:absolute;inset:0}
.glitter i{position:absolute;bottom:-10px;width:var(--s,4px);height:var(--s,4px);background:var(--t-leaf);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.9;filter:drop-shadow(0 0 3px var(--t-line));animation:rise var(--d,9s) linear var(--dl,0s) infinite}
@keyframes rise{to{transform:translate(var(--mx,20px),-110svh) rotate(240deg);opacity:0}}
.fx-sparkles--off .glitter{display:none}

/* ---------- Abertura: pergaminho ---------- */
.inv-princesa .cover{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 16px;cursor:pointer;background:radial-gradient(70% 50% at 50% 45%,rgba(255,255,255,.7),transparent 70%),color-mix(in srgb,var(--t-cover) 85%,transparent);transition:opacity .6s ease 2.8s}
.inv-princesa .cover.is-gone{display:none}
.herald{margin:0;padding-left:.42em;font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--t-cover-ink)}
.scroll{position:relative;width:min(80vw,320px);padding:0;border:0;background:none;display:flex;flex-direction:column;align-items:stretch;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 20px 26px rgba(0,0,0,.25))}
.roller{position:relative;z-index:2;height:26px;margin:0 -14px;border-radius:13px;background:linear-gradient(180deg,color-mix(in srgb,var(--t-paper) 80%,#b89868),var(--t-paper) 35%,color-mix(in srgb,var(--t-paper) 70%,#8e6d45));box-shadow:inset 0 -3px 5px rgba(0,0,0,.15)}
.roller::before,.roller::after{content:"";position:absolute;top:3px;width:16px;height:20px;border-radius:5px;background:linear-gradient(180deg,var(--t-line),color-mix(in srgb,var(--t-line) 60%,#000))}
.roller::before{left:-10px}.roller::after{right:-10px}
.sheet{position:relative;display:block;height:30px;overflow:hidden;margin:-6px 0;background:linear-gradient(90deg,color-mix(in srgb,var(--t-paper) 88%,#c9a877),var(--t-paper) 12%,var(--t-paper) 88%,color-mix(in srgb,var(--t-paper) 88%,#c9a877));transition:height 1.3s cubic-bezier(.6,0,.2,1) .3s}
.sheet-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:100%;padding:30px 20px;text-align:center;color:var(--t-ink);opacity:0;transition:opacity .6s ease .9s}
.decree-kicker{font-family:var(--f-display);font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--t-muted);text-wrap:balance}
.decree-name{font-family:var(--f-script);font-size:clamp(40px,12vw,54px);line-height:1.1;text-wrap:balance}
.name--long .decree-name{font-size:clamp(36px,10vw,44px)}
.decree-text{font-family:var(--f-body);font-size:17px;line-height:1.5;font-style:italic;text-wrap:balance}
.ribbon{position:absolute;z-index:3;left:50%;top:50%;width:52px;height:120%;margin-left:-26px;transform:translateY(-50%);background:linear-gradient(90deg,color-mix(in srgb,var(--t-seal-ink) 80%,#000),var(--t-seal-ink) 30%,color-mix(in srgb,var(--t-seal-ink) 70%,#fff) 50%,var(--t-seal-ink) 70%,color-mix(in srgb,var(--t-seal-ink) 80%,#000));transition:transform .6s cubic-bezier(.6,0,.4,1),opacity .5s}
.ribbon-seal{position:absolute;left:50%;top:50%;width:82px;height:82px;margin:-41px 0 0 -41px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--t-line) 40%,#fff),var(--t-line) 60%,color-mix(in srgb,var(--t-line) 60%,#000));box-shadow:0 6px 12px rgba(0,0,0,.3),inset 0 0 0 3px rgba(255,255,255,.35)}
.ribbon-seal .mono{width:58px;height:auto;margin:0}
.cover-hint{margin:0;font-family:var(--f-script);font-size:26px;color:var(--t-cover-ink);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{50%{opacity:.5;transform:translateY(-3px)}}
.cover.is-open .ribbon{transform:translateY(-50%) scaleY(0);opacity:0}
.cover.is-open .sheet{height:min(64svh,440px)}
.cover.is-open .sheet-in{opacity:1}
.cover.is-open .cover-hint{opacity:0}
.cover.is-open{opacity:0;pointer-events:none}

/* ---------- Início ---------- */
.inv-princesa .pg{min-height:100svh;padding:calc(26px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
.kingdom{text-align:center;color:var(--t-cover-ink)}
.tiara{width:120px;height:auto;color:var(--t-line);filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--t-line) 50%,transparent));animation:shine 3s ease-in-out infinite}
@keyframes shine{50%{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--t-line) 90%,transparent))}}
.name{margin:-4px 0 0;font-family:var(--f-script);font-weight:400;font-size:clamp(56px,17vw,86px);line-height:1;text-wrap:balance;text-shadow:0 2px 20px rgba(255,255,255,.8)}
.name--long .name{font-size:clamp(46px,13vw,62px);line-height:1.05}
.xv{margin:4px 0 6px;font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:.6em;padding-left:.6em;color:color-mix(in srgb,var(--t-line) 62%,var(--t-ink))}
.when{margin:0;font-family:var(--f-display);font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.castle-wrap{margin:14px -6px 0;color:var(--t-line)}
.castle{width:100%;height:auto;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.castle path,.castle circle{stroke-dasharray:1;stroke-dashoffset:0}
.is-revealed .castle path{animation:drawC 3.2s ease both .3s}
.is-opened .castle path{animation:none}
@keyframes drawC{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.is-closed .kingdom > *,.is-opening #s-menu > *{opacity:0}
.is-revealed .kingdom > :not(.castle-wrap){animation:fadeUp 1s ease both}
.is-revealed #s-menu > .bunting{animation:fadeUp 1s ease both .7s}
.is-opened #s-menu > .bunting{animation:none}
.kingdom > :nth-child(1){animation-delay:0s!important}.kingdom > :nth-child(2){animation-delay:.15s!important}.kingdom > :nth-child(3){animation-delay:.3s!important}.kingdom > :nth-child(4){animation-delay:.45s!important}
.is-opened .kingdom > *{animation:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Estandartes pendurados */
.bunting{position:relative;display:flex;justify-content:space-between;gap:2px;margin:-6px -6px 10px;padding:0 4px;height:156px;color:var(--t-line)}
.rope{position:absolute;left:0;right:0;top:0;width:100%;height:40px}
.banner{position:relative;flex:1 1 0;min-width:0;max-width:84px;margin-top:calc(8px + var(--drop));text-decoration:none;transform-origin:50% 0;animation:sway 3.6s ease-in-out calc(var(--i) * -.7s) infinite;-webkit-tap-highlight-color:transparent}
.banner-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 3px 28px;color:var(--t-ink);background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 40%),var(--t-petal);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);box-shadow:inset 0 0 0 1px var(--t-line)}
.banner:nth-child(odd) .banner-in{background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 40%),var(--t-petal2)}
.banner-in::before{content:"";position:absolute;inset:4px 4px 12px;border:1px solid color-mix(in srgb,var(--t-line) 80%,transparent);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%)}
.banner-in .ic{color:var(--t-accent)}
.banner-in b{font-family:var(--f-body);font-size:14.5px;font-size-adjust:.42;font-weight:700;letter-spacing:0;line-height:1.15;text-align:center}
.banner::before{content:"";position:absolute;left:50%;top:-10px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--t-line)}
.banner:active{transform:scale(.96)}
@keyframes sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}

/* Pergaminho com filigranas */
.parch{--x-ink:var(--t-ink);--x-muted:var(--t-muted);--x-line:color-mix(in srgb,var(--t-ink) 14%,transparent);position:relative;padding:40px 26px 56px;color:var(--t-ink);text-align:center;border-radius:6px;
  background:radial-gradient(120% 80% at 50% 0%,#fff,transparent 60%),radial-gradient(100% 80% at 50% 100%,color-mix(in srgb,var(--t-line) 12%,transparent),transparent 70%),var(--t-paper);
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--t-ink) 60%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--t-line) 60%,transparent)}
.fil{position:absolute;width:74px;height:74px;color:var(--t-line)}
.fil svg{width:100%;height:100%}
.fil-tl{left:6px;top:6px}.fil-tr{right:6px;top:6px;transform:scaleX(-1)}.fil-bl{left:6px;bottom:6px;transform:scaleY(-1)}.fil-br{right:6px;bottom:6px;transform:scale(-1)}
.div-gold{display:block;width:170px;height:auto;margin:6px auto 16px;color:var(--t-line)}
.parch-title{margin:6px 0 0;font-family:var(--f-script);font-weight:400;font-size:clamp(40px,12vw,52px);line-height:1.1}
.msg{margin:0;font-family:var(--f-body);font-size:18px;line-height:1.6;font-style:italic;color:var(--t-muted)}
.sign{margin:12px 0 0;font-family:var(--f-script);font-size:30px;color:var(--t-ink)}
.cd-title{margin:0 0 6px;padding-left:.3em;font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--t-accent)}
.inv-princesa .cd-u b{font-family:var(--f-display);font-size:30px;color:var(--t-accent)}
.inv-princesa .cd-u small{font-family:var(--f-display)}
.inv-princesa .brand{margin-top:24px;font-family:var(--f-display)}

/* Páginas */
.royal-page .back{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--t-paper) 70%,transparent);color:var(--t-ink);text-decoration:none;font-family:var(--f-display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--t-line);backdrop-filter:blur(6px)}
.pg.bow-in .parch{animation:bowIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes bowIn{from{opacity:0;transform:translateY(24px) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.loc-name{margin:0 0 4px;font-family:var(--f-display);font-size:20px;letter-spacing:.1em;text-transform:uppercase}
.loc-addr,.lead{margin:0 0 6px;font-family:var(--f-body);font-size:17px;line-height:1.5;color:var(--t-muted)}
.loc-when{margin:0 0 16px;font-family:var(--f-body);font-style:italic;font-size:17px}
.inv-princesa .pill{background:linear-gradient(180deg,color-mix(in srgb,var(--t-accent-2) 18%,var(--t-accent)),var(--t-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px var(--t-line),0 10px 20px -12px var(--t-accent)}
.inv-princesa .pill b{font-family:var(--f-display);letter-spacing:.14em}
.inv-princesa .pill--line{background:transparent;color:var(--t-accent);box-shadow:inset 0 0 0 1.5px var(--t-accent)}
.inv-princesa .gifts .pill{background:color-mix(in srgb,var(--t-petal) 35%,transparent);color:var(--t-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-line) 70%,transparent)}
.inv-princesa .gifts .pill small{font-family:var(--f-body);font-size:14px}
.inv-princesa .rsvp-person legend,.inv-princesa .rsvp-hello{font-family:var(--f-body);font-size:18px}
.inv-princesa .rsvp-form{text-align:left}
.inv-princesa .manual li span{font-family:var(--f-body);font-size:15px}
.inv-princesa .gal-item{border-radius:6px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--t-line)}
.inv-princesa .music{color:var(--t-ink);background:color-mix(in srgb,var(--t-paper) 70%,transparent);border-color:var(--t-line)}
.is-closed #s-menu > *{opacity:0}
.inv-princesa .cover{background:radial-gradient(70% 50% at 50% 45%,rgba(255,255,255,.75),transparent 70%),var(--t-cover)}