/*
 * Coleção Encanto: diorama de conto de fadas em três camadas.
 * Cores: --t-cover (céu) --t-cover-ink (texto na cena) --t-paper (pergaminho)
 *        --t-petal (partículas) --t-petal2 (névoa) --t-leaf (silhuetas) --t-line (ornamentos)
 */
.inv-encanto{--x-radius:18px;--x-btn-radius:999px;--x-title:var(--f-script);--tx:0;--ty:0;--sy:0;background:var(--t-backdrop);color:var(--t-cover-ink)}
.inv-encanto.fx-depth--soft{--depth:.5}
.inv-encanto{--depth:1}

/* ---------- Diorama ---------- */
.diorama{position:fixed;z-index:0;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);overflow:hidden;background:var(--t-cover);perspective:900px}
.layer{position:absolute;inset:0;will-change:transform;transition:transform 2.4s cubic-bezier(.16,.8,.2,1),filter 2s ease,opacity 1s}
.l-sky{inset:-8%;background:linear-gradient(180deg,var(--t-cover) 0%,color-mix(in srgb,var(--t-cover) 60%,var(--t-petal2)) 62%,color-mix(in srgb,var(--t-petal2) 70%,#fff) 100%);
  transform:translate3d(calc(var(--tx) * 6px * var(--depth)),calc(var(--ty) * 6px * var(--depth) - var(--sy) * .05px),0) scale(var(--s-sky,1))}
.stars{position:absolute;inset:0 0 40% 0;background-image:radial-gradient(1.4px 1.4px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 32% 8%,#fff,transparent),radial-gradient(1.6px 1.6px at 58% 16%,#fff,transparent),radial-gradient(1px 1px at 76% 30%,#fff,transparent),radial-gradient(1.2px 1.2px at 88% 10%,#fff,transparent),radial-gradient(1px 1px at 22% 38%,#fff,transparent),radial-gradient(1.3px 1.3px at 46% 34%,#fff,transparent),radial-gradient(1px 1px at 66% 46%,#fff,transparent);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.45}}
.moon{position:absolute;right:16%;top:12%;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 36% 36%,#fff,color-mix(in srgb,var(--t-petal) 60%,#fff) 60%,transparent 72%);box-shadow:0 0 60px 20px color-mix(in srgb,var(--t-petal) 35%,transparent)}
.l-mist{top:auto;height:60%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--t-petal2) 45%,transparent) 55%,transparent);filter:blur(14px);animation:mist 18s ease-in-out infinite alternate;transform:translateY(calc(var(--sy) * -.08px))}
@keyframes mist{from{translate:-6% 0}to{translate:6% -3%}}
.l-mid{transform:translate3d(calc(var(--tx) * 14px * var(--depth)),calc(var(--ty) * 10px * var(--depth) - var(--sy) * .16px),0) scale(var(--s-mid,1));transform-origin:50% 100%}
.l-mid img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.castle{position:absolute;left:0;right:0;bottom:0;width:100%;height:58%}
.l-front{transform:translate3d(calc(var(--tx) * 26px * var(--depth)),calc(var(--ty) * 16px * var(--depth) + var(--sy) * .3px),0);opacity:calc(1 - var(--sy) / 1400)}
.front-half{position:absolute;inset:-4%;transition:transform 2.4s cubic-bezier(.16,.8,.2,1),filter 2.4s ease;will-change:transform}
.front-half img{width:100%;height:100%;object-fit:cover}
.front-l{clip-path:inset(0 50% 0 0)}
.front-r{clip-path:inset(0 0 0 50%)}
.front-fb{position:absolute;inset:0}
.front-fb .ff{position:absolute;width:78%;height:auto}
.front-fb .ff-l{left:-18%;bottom:-8%;transform:rotate(180deg)}
.front-fb .ff-r{right:-18%;bottom:-8%;transform:scaleY(-1)}
/* Fechado: câmera perto, flores da frente cobrindo a cena */
.is-closed{--s-sky:1.12;--s-mid:1.28}
.is-closed .front-l{transform:translateX(30%) scale(1.35);filter:blur(3px)}
.is-closed .front-r{transform:translateX(-30%) scale(1.35);filter:blur(3px)}
.is-closed .l-mid{filter:blur(2px) brightness(.8)}

/* Partículas */
.particles{position:absolute;inset:0;pointer-events:none}
.particles span{position:absolute;display:block;border-radius:50%}
.fx-particles--fireflies .particles span{width:5px;height:5px;background:var(--t-petal);box-shadow:0 0 10px 3px color-mix(in srgb,var(--t-petal) 70%,transparent);animation:fly var(--d,9s) ease-in-out var(--dl,0s) infinite alternate,glow 2.4s ease-in-out var(--dl,0s) infinite alternate}
.fx-particles--sparkles .particles span{width:3px;height:3px;background:#fff;box-shadow:0 0 6px 2px var(--t-petal);animation:fall var(--d,9s) linear var(--dl,0s) infinite,glow 1.2s ease-in-out var(--dl,0s) infinite alternate}
.fx-particles--petals .particles span{width:12px;height:9px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#fff,var(--t-petal2));opacity:.85;animation:fall var(--d,9s) linear var(--dl,0s) infinite,spin 3s linear infinite}
.fx-particles--none .particles{display:none}
@keyframes fly{from{transform:translate(0,0)}to{transform:translate(var(--mx,30px),var(--my,-40px))}}
@keyframes glow{from{opacity:.2}to{opacity:1}}
@keyframes fall{from{transform:translate(0,-10vh)}to{transform:translate(var(--mx,30px),110vh)}}
@keyframes spin{to{rotate:360deg}}

/* ---------- Abertura ---------- */
.inv-encanto .cover{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;text-align:center;background:radial-gradient(60% 40% at 50% 50%,color-mix(in srgb,var(--t-cover) 55%,transparent),transparent);transition:opacity 1.2s ease}
.inv-encanto .cover.is-gone{display:none}
.once{margin:0;font-family:var(--f-script);font-size:clamp(46px,14vw,68px);line-height:1;color:var(--t-cover-ink);text-shadow:0 2px 24px rgba(0,0,0,.4);animation:once 3s ease-in-out infinite alternate}
@keyframes once{from{opacity:.75;transform:translateY(0)}to{opacity:1;transform:translateY(-6px)}}
.cover-for{margin:0;padding:0 28px;max-width:440px;text-wrap:balance;font-family:var(--f-display);font-size:13px;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:var(--t-cover-ink);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.book-btn{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border:0;background:none;color:var(--t-cover-ink);font-family:var(--f-display);font-size:12px;letter-spacing:.3em;text-transform:uppercase}
.book-btn .mono{width:112px;height:112px;padding:20px;margin:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--t-paper) 55%,color-mix(in srgb,var(--t-line) 40%,var(--t-paper)));box-shadow:0 0 0 2px var(--t-line),0 0 0 7px color-mix(in srgb,var(--t-paper) 40%,transparent),0 0 40px 6px color-mix(in srgb,var(--t-petal) 45%,transparent);overflow:visible;animation:pulseGlow 2.6s ease-in-out infinite}
@keyframes pulseGlow{50%{box-shadow:0 0 0 2px var(--t-line),0 0 0 11px color-mix(in srgb,var(--t-paper) 20%,transparent),0 0 60px 14px color-mix(in srgb,var(--t-petal) 55%,transparent)}}
.cover.is-open{opacity:0;pointer-events:none}

/* ---------- Página ---------- */
.page{position:relative;z-index:1}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:calc(15svh + env(safe-area-inset-top)) 18px 40px}
.hero-kicker{margin:0;font-family:var(--f-display);font-size:12px;letter-spacing:.4em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.hero-name{margin:6px 0 10px;font-family:var(--f-script);font-weight:400;font-size:clamp(54px,16vw,84px);line-height:1;text-shadow:0 0 30px color-mix(in srgb,var(--t-petal) 55%,transparent),0 2px 18px rgba(0,0,0,.35)}
.hero-date{margin:0 0 18px;font-family:var(--f-display);font-size:14px;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.ribbons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:360px}
.ribbons a{display:inline-flex;align-items:center;min-height:40px;padding:10px 18px;border-radius:999px;background:color-mix(in srgb,var(--t-paper) 82%,transparent);color:var(--t-ink);text-decoration:none;font-family:var(--f-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 0 1px var(--t-line),0 8px 20px -10px rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.is-closed .hero > *{opacity:0}
.is-opening .hero > *,.is-revealed .hero > *{animation:heroIn 1.4s cubic-bezier(.2,.7,.2,1) both}
.hero > :nth-child(1){animation-delay:1.2s!important}.hero > :nth-child(2){animation-delay:1.45s!important}.hero > :nth-child(3){animation-delay:1.7s!important}.hero > :nth-child(4){animation-delay:1.95s!important}
.is-opened .hero > *{animation:none}
@keyframes heroIn{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

.chapters{padding:0 16px calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px}
.scroll-card{--x-ink:var(--t-ink);--x-muted:var(--t-muted);position:relative;padding:34px 24px 28px;text-align:center;color:var(--t-ink);border-radius:var(--x-radius);scroll-margin-top:24px;
  background:radial-gradient(120% 80% at 50% 0%,#fff,transparent 60%),radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--t-line) 16%,transparent),transparent 70%),var(--t-paper);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-line) 70%,transparent),inset 0 0 0 6px var(--t-paper),inset 0 0 0 7px color-mix(in srgb,var(--t-line) 45%,transparent),0 30px 60px -30px rgba(0,0,0,.6)}
.scroll-card::before{content:"";position:absolute;left:50%;top:-11px;width:22px;height:22px;margin-left:-11px;transform:rotate(45deg);background:var(--t-paper);box-shadow:inset 0 0 0 1px var(--t-line)}
.chap{margin:0 0 8px;font-family:var(--f-display);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--t-accent)}
.card-title{margin:0 0 16px;font-family:var(--f-script);font-weight:400;font-size:clamp(36px,10.5vw,46px);line-height:1.05}
.tale{margin:0;font-family:var(--f-body);font-size:17px;line-height:1.7;color:var(--t-muted)}
.tale::first-letter{float:left;font-family:var(--f-script);font-size:62px;line-height:.8;padding:6px 8px 0 0;color:var(--t-accent)}
.sign{margin:14px 0 0;font-family:var(--f-script);font-size:26px}
.cd-wrap{margin-top:22px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--t-line) 50%,transparent)}
.cd-wrap .cd-u b{color:var(--t-accent)}
.loc-name{margin:0 0 4px;font-family:var(--f-display);font-size:18px;letter-spacing:.1em;text-transform:uppercase}
.loc-addr{margin:0;font-size:15px;line-height:1.6;color:var(--t-muted)}
.loc-when{margin:12px 0 18px;font-size:15px}
.inv-encanto .pill{background:linear-gradient(180deg,color-mix(in srgb,var(--t-accent-2) 40%,var(--t-accent)),var(--t-accent));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px var(--t-line)}
.inv-encanto .pill--line{background:transparent;box-shadow:inset 0 0 0 1.5px var(--t-accent)}
.inv-encanto .gifts .pill{background:color-mix(in srgb,var(--t-accent) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-line) 80%,transparent)}
.fin{margin:18px 0 0;text-align:center;font-family:var(--f-script);font-size:30px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.inv-encanto .brand{margin:0;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.is-revealed .layer,.is-revealed .front-half{transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .6s,opacity .3s}
.castle{color:color-mix(in srgb,var(--t-leaf) 65%,var(--t-cover))}
.castle .win{filter:drop-shadow(0 0 6px var(--t-petal));animation:flicker 4s ease-in-out infinite alternate}
@keyframes flicker{50%{opacity:.75}}

/* Chão do castelo continua abaixo da silhueta: ao rolar até o fim a cena não mostra faixa clara nem buraco */
.l-mid::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:300%;background:color-mix(in srgb,var(--t-leaf) 65%,var(--t-cover))}
/* Confirmação: botões Vou/Não vou com área de toque confortável */
.inv-encanto .seg span{padding:11px 15px}
.inv-encanto .cd-u small{font-size:11px}
/* Marca no fim, sobre o chão escuro da cena */
.inv-encanto{--brand-bg:color-mix(in srgb,var(--t-cover) 55%,transparent);--brand-ink:var(--t-cover-ink)}