/*
 * Coleção Cristal: vidro líquido sobre uma cena que respira.
 * Cores: --t-cover (cena) --t-cover-ink (texto na cena) --t-paper (tom do vidro)
 *        --t-petal / --t-petal2 / --t-leaf (reflexos iridescentes) --t-line (borda do vidro)
 */
.inv-cristal{--x-radius:28px;--x-title:var(--f-script);--glass-a:76%;--glass-blur:26px;--tx:0px;--ty:0px;--sheen:0;background:var(--t-backdrop);color:var(--t-ink)}
.inv-cristal.fx-glass--light{--glass-a:70%;--glass-blur:22px}
.inv-cristal.fx-glass--frost{--glass-a:80%;--glass-blur:30px}
.inv-cristal.fx-glass--dark{--x-ink:var(--t-cover-ink);--x-muted:color-mix(in srgb,var(--t-cover-ink) 78%,transparent);--x-line:color-mix(in srgb,var(--t-cover-ink) 20%,transparent)}

/* ---------- Cena ---------- */
.scene{position:fixed;z-index:0;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);overflow:hidden;background:var(--t-cover)}
.scene-img,.scene-blobs{position:absolute;inset:-6%;transform:translate3d(var(--tx),var(--ty),0);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.scene-img{background:none;animation:breatheBg 28s ease-in-out infinite alternate}
.fx-drift--off .scene-img{animation:none}
@keyframes breatheBg{from{scale:1.02}to{scale:1.14;translate:-1.5% -2%}}
.scene-blobs{filter:blur(46px) saturate(130%)}
.scene-blobs i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;opacity:.85;animation:blob 22s ease-in-out infinite alternate}
.scene-blobs i:nth-child(1){background:var(--t-petal);left:-10%;top:-5%}
.scene-blobs i:nth-child(2){background:var(--t-petal2);right:-18%;top:22%;animation-duration:26s;animation-delay:-6s}
.scene-blobs i:nth-child(3){background:var(--t-leaf);left:5%;bottom:-10%;animation-duration:30s;animation-delay:-12s}
.scene-blobs i:nth-child(4){background:var(--t-accent-2);right:-5%;bottom:10%;width:45%;animation-duration:19s;animation-delay:-3s;opacity:.6}
@keyframes blob{0%{transform:translate(0,0) scale(1)}33%{transform:translate(18%,12%) scale(1.15)}66%{transform:translate(-12%,20%) scale(.9)}100%{transform:translate(8%,-14%) scale(1.08)}}
.scene-veil{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--t-cover) 10%,transparent),transparent 30%,transparent 70%,color-mix(in srgb,var(--t-cover) 35%,transparent))}

/* ---------- Vidro líquido ---------- */
.glass{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--t-paper) calc(var(--glass-a) + 12%),transparent),color-mix(in srgb,var(--t-paper) calc(var(--glass-a) - 8%),transparent));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(175%) brightness(1.04);backdrop-filter:blur(var(--glass-blur)) saturate(175%) brightness(1.04);
  border-radius:var(--x-radius);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 75%,transparent),inset 0 -1px 0 color-mix(in srgb,#fff 18%,transparent),inset 1px 0 0 color-mix(in srgb,#fff 25%,transparent),0 24px 60px -28px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.08)}
.fx-glass--dark .glass{background:linear-gradient(160deg,rgba(18,14,30,.46),rgba(18,14,30,.3));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.08),0 24px 60px -28px rgba(0,0,0,.6)}
/* Borda iridescente (só o filete) */
.glass::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:conic-gradient(from calc(var(--sheen) * 1turn + 200deg),var(--t-line),var(--t-petal),var(--t-line) 30%,var(--t-leaf),var(--t-line) 60%,var(--t-petal2),var(--t-line));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.85}
/* Reflexo que corre pela superfície com a rolagem */
.glass::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.08) 53%,transparent 58%) no-repeat;
  background-size:300% 100%;background-position:calc(100% - var(--sheen) * 100%) 0;mix-blend-mode:soft-light}

/* ---------- Abertura: gota ---------- */
.inv-cristal .cover{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;cursor:pointer;
  background:color-mix(in srgb,var(--t-cover) 22%,transparent);-webkit-backdrop-filter:blur(34px) saturate(140%);backdrop-filter:blur(34px) saturate(140%);
  transition:backdrop-filter 1.4s ease,-webkit-backdrop-filter 1.4s ease,background 1.4s ease}
.inv-cristal .cover.is-gone{display:none}
.drop{position:relative;width:188px;height:188px;padding:0;border:0;background:none;border-radius:50%;-webkit-tap-highlight-color:transparent;animation:dropFloat 5s ease-in-out infinite}
.drop-glass{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,.55),rgba(255,255,255,.12) 42%,rgba(255,255,255,.05) 60%,color-mix(in srgb,var(--t-petal) 30%,transparent) 100%);
  -webkit-backdrop-filter:blur(6px) saturate(180%);backdrop-filter:blur(6px) saturate(180%);
  box-shadow:inset 6px 8px 18px rgba(255,255,255,.55),inset -10px -14px 26px color-mix(in srgb,var(--t-petal) 45%,transparent),inset 0 0 0 1px rgba(255,255,255,.6),0 30px 60px -20px rgba(0,0,0,.45);
  transition:transform 1.3s cubic-bezier(.7,0,.2,1),opacity 1s ease .25s}
.drop-glass::before{content:"";position:absolute;left:18%;top:10%;width:38%;height:20%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));transform:rotate(-24deg)}
.drop-glass .mono{width:58%;height:auto;margin:0;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.drop-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--t-cover-ink) 60%,transparent);animation:ripple 3.2s ease-out infinite;pointer-events:none}
.drop-ring + .drop-ring{animation-delay:1.6s}
@keyframes ripple{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
@keyframes dropFloat{50%{transform:translateY(-8px)}}
.cover-hint{margin:0;font-family:var(--f-display);font-size:12px;letter-spacing:.32em;text-indent:.32em;text-align:center;text-transform:uppercase;color:var(--t-cover-ink);text-shadow:0 1px 10px rgba(0,0,0,.3);animation:hint 2.4s ease-in-out infinite}
.cover-for{margin:-10px 0 0;padding:0 28px;max-width:440px;text-align:center;text-wrap:balance;font-family:var(--f-display);font-size:13px;line-height:1.6;letter-spacing:.14em;text-transform:uppercase;color:var(--t-cover-ink);text-shadow:0 1px 10px rgba(0,0,0,.3)}
@keyframes hint{50%{opacity:.45}}
.cover.is-open{background:transparent;-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%);pointer-events:none}
.cover.is-open .drop{animation:none}
.cover.is-open .drop-glass{transform:scale(9);opacity:0}
.cover.is-open .drop-ring{animation:burst 1s ease-out forwards}
.cover.is-open .drop-ring + .drop-ring{animation-delay:.12s}
.cover.is-open .cover-hint,.cover.is-open .cover-for{opacity:0;transition:opacity .3s}
@keyframes burst{from{transform:scale(1);opacity:1}to{transform:scale(4.5);opacity:0}}

/* ---------- Página ---------- */
.page{position:relative;z-index:1;padding:0 16px calc(40px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(56px + env(safe-area-inset-top)) 4px 60px;color:var(--t-cover-ink)}
.orb{width:min(46vw,190px);aspect-ratio:1;margin-bottom:8px;animation:orb 7s ease-in-out infinite;filter:drop-shadow(0 26px 30px rgba(0,0,0,.28))}
.orb img,.orb svg{width:100%;height:100%;object-fit:contain}
@keyframes orb{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(4deg)}}
.hero-kicker{margin:0 0 6px;font-family:var(--f-display);font-size:13px;font-weight:500;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;text-shadow:0 1px 3px color-mix(in srgb,var(--t-cover) 70%,transparent),0 1px 14px color-mix(in srgb,var(--t-cover) 80%,transparent)}
.hero-name{margin:0 0 20px;font-family:var(--f-script);font-weight:400;font-size:clamp(52px,16vw,82px);line-height:1;word-spacing:.08em;overflow-wrap:break-word;text-wrap:balance;text-shadow:0 1px 2px color-mix(in srgb,var(--t-cover) 75%,transparent),0 2px 24px color-mix(in srgb,var(--t-cover) 85%,transparent)}
.hero-date{margin:0 0 12px;padding:10px 20px 10px 24px;max-width:100%;white-space:nowrap;border-radius:999px;font-family:var(--f-display);font-size:17px;letter-spacing:.18em;color:var(--x-ink);display:inline-flex;align-items:center;gap:10px}
.hero-date i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.glass--cd{padding:12px 16px;border-radius:24px;margin-bottom:14px;color:var(--x-ink)}
.quick{display:flex;gap:2px;padding:6px;border-radius:26px;width:100%;max-width:400px;justify-content:space-around}
.quick a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:20px;color:var(--x-ink);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.04em;transition:background .2s}
.quick a:active{background:color-mix(in srgb,var(--t-paper) 40%,transparent)}
.quick .ic{color:var(--x-accent)}
.scroll-cue{margin-top:26px;width:22px;height:36px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--t-cover-ink) 70%,transparent);position:relative}
.scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--t-cover-ink);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{from{transform:translateY(0);opacity:1}to{transform:translateY(12px);opacity:0}}

/* Entrada do topo depois da abertura */
.is-closed .hero > *{opacity:0}
.is-opening .hero > *,.is-revealed .hero > *{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.hero > :nth-child(1){animation-delay:.35s!important}.hero > :nth-child(2){animation-delay:.5s!important}.hero > :nth-child(3){animation-delay:.62s!important}
.hero > :nth-child(4){animation-delay:.74s!important}.hero > :nth-child(5){animation-delay:.86s!important}.hero > :nth-child(6){animation-delay:.98s!important}
.is-opened .hero > *{animation:none}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

.card{padding:26px 22px;scroll-margin-top:20px}
.card-title{margin:0 0 16px;text-align:center;font-family:var(--f-script);font-weight:400;font-size:clamp(34px,10vw,44px);line-height:1.1;color:var(--x-ink)}
.card--msg{text-align:center}
.msg{margin:0;font-family:var(--f-display);font-size:15px;line-height:1.7;letter-spacing:.02em;color:var(--x-muted)}
.sign{margin:14px 0 0;font-family:var(--f-script);font-size:26px;color:var(--x-ink)}
.loc-name{margin:0 0 4px;text-align:center;font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.loc-addr{margin:0;text-align:center;font-size:15px;line-height:1.6;color:var(--x-muted)}
.loc-when{margin:12px 0 18px;text-align:center;font-size:15px}
.inv-cristal .pill{background:linear-gradient(180deg,color-mix(in srgb,var(--t-accent-2) 22%,var(--t-accent)),color-mix(in srgb,#000 8%,var(--t-accent)));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -12px var(--t-accent)}
.inv-cristal .pill--line{background:color-mix(in srgb,var(--t-paper) 88%,transparent);box-shadow:inset 0 0 0 1.5px var(--x-accent)}
.inv-cristal .gifts .pill{background:color-mix(in srgb,var(--t-paper) 35%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-line) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.5)}
.inv-cristal .brand{margin:10px 0 0;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-cover-ink);opacity:.7}
.orb{position:relative}

/* Véu suave atrás do topo: garante leitura do nome e do "Meus 15 anos" sobre qualquer ponto da cena */
.hero::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;top:18%;bottom:6%;pointer-events:none;
  background:radial-gradient(72% 46% at 50% 47%,color-mix(in srgb,var(--t-cover) 74%,transparent),color-mix(in srgb,var(--t-cover) 42%,transparent) 55%,transparent 82%)}
/* Contagem: rótulos legíveis */
.inv-cristal .glass--cd .cd-u small{font-size:11px;font-weight:600;opacity:1;color:var(--x-muted)}
/* Confirmação: botões Vou/Não vou sobre base sólida e com área de toque confortável */
.inv-cristal .seg{background:color-mix(in srgb,var(--t-paper) 90%,transparent)}
.inv-cristal .seg span{padding:11px 15px}
.inv-cristal .rsvp-dead{font-weight:600}
/* Marca no fim: pequena placa para não sumir sobre a cena clara */
.inv-cristal{--brand-bg:color-mix(in srgb,var(--t-cover) 72%,transparent);--brand-ink:var(--t-cover-ink)}
.inv-cristal .brand{align-self:center}