/*
 * Tema Bento (moderna): grade de blocos estilo app, tipografia gigante, faixa correndo,
 * inclinação 3D ao toque e bloco que se expande até virar a página.
 * Tons dos blocos: a (destaque) b (accent-2) c (petal) d (petal2) dark (leaf) paper.
 */
.inv-moderna{--x-radius:26px;--x-btn-radius:16px;--x-title:var(--f-script);--dark-text:#141414;background:var(--t-backdrop);color:var(--t-cover-ink)}
.inv-moderna .stage{background:var(--t-cover);min-height:100svh}
.tone-a{background:var(--t-accent);color:var(--t-on-accent)}
.tone-b{background:var(--t-accent-2);color:var(--dark-text)}
.tone-c{background:var(--t-petal);color:var(--dark-text)}
.tone-d{background:var(--t-petal2);color:var(--dark-text)}
.tone-dark{background:var(--t-leaf);color:var(--t-line)}
.tone-paper{background:var(--t-paper);color:var(--t-ink)}

/* ---------- Abertura: contador ---------- */
.inv-moderna .cover{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:0 22px calc(40px + env(safe-area-inset-bottom));background:var(--t-cover);color:var(--t-cover-ink);transition:transform .8s cubic-bezier(.8,0,.2,1) .9s}
@media (min-width:560px){.inv-moderna .cover{left:50%;width:480px;transform:translateX(-50%)}}
.inv-moderna .cover.is-gone{display:none}
.load{margin:0;font-family:var(--f-script);font-weight:700;font-size:clamp(130px,42vw,200px);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.cover-name{margin:10px 0 24px;max-width:100%;font-family:var(--f-display);font-size:30px;font-weight:700;line-height:1.08;letter-spacing:-.02em}
.enter{display:inline-flex;align-items:center;gap:10px;padding:16px 22px;border:0;border-radius:999px;background:var(--t-accent);color:var(--t-on-accent);font-family:var(--f-display);font-size:16px;font-weight:700;transition:transform .2s}
.enter:active{transform:scale(.96)}
.bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:color-mix(in srgb,var(--t-cover-ink) 10%,transparent)}
.bar i{display:block;height:100%;width:0;background:var(--t-accent-2)}
.cover.is-open .bar i{width:100%;transition:width .9s cubic-bezier(.6,0,.2,1)}
.cover.is-open .enter{opacity:0;transform:translateY(10px);transition:all .3s}
.cover.is-open{transform:translateY(-102%)}
@media (min-width:560px){.cover.is-open{transform:translate(-50%,-102%)}}

/* ---------- Grade ---------- */
.inv-moderna .pg{min-height:100svh}
.bento-home{padding:0 12px calc(30px + env(safe-area-inset-bottom))}
.marquee{margin:0 -12px 12px;overflow:hidden;padding:10px 0;background:var(--t-cover-ink);color:var(--t-cover);font-family:var(--f-script);font-weight:700;font-size:22px;letter-spacing:-.01em;white-space:nowrap}
.marquee-in{display:inline-flex;gap:18px;align-items:center;animation:mq 20s linear infinite}
.marquee i{font-style:normal;color:var(--t-accent-2)}
@keyframes mq{to{transform:translateX(-50%)}}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:10px;perspective:900px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:150px;padding:16px;border-radius:var(--x-radius);overflow:hidden;text-decoration:none;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease,box-shadow .25s;box-shadow:0 1px 0 rgba(0,0,0,.04);-webkit-tap-highlight-color:transparent;will-change:transform}
.tile:active{transform:scale(.97)}
a.tile .t-go{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent)}
/* Bloco principal: formas no canto de cima, nome gigante embaixo (tamanho calculado em fx-moderna.js para a palavra mais longa caber inteira) */
.t-hero{grid-column:1/-1;min-height:290px;justify-content:space-between;padding:18px 18px 20px}
.t-kick{position:relative;z-index:1;margin:0;font-family:var(--f-display);font-size:15px;font-weight:700;letter-spacing:.02em}
.t-name{position:relative;z-index:1;margin:118px 0 0;font-family:var(--f-script);font-weight:700;font-size:clamp(44px,13vw,80px);line-height:.92;letter-spacing:-.045em;overflow-wrap:normal;word-break:normal;hyphens:none}
.t-name span{display:inline-block;white-space:nowrap;padding-bottom:.04em}
.is-opening .t-name span,.is-revealed .t-name span{animation:slideUp .9s cubic-bezier(.2,.9,.2,1) both}
.t-name span:nth-child(2){animation-delay:.1s!important}.t-name span:nth-child(3){animation-delay:.2s!important}
@keyframes slideUp{from{transform:translateY(100%);opacity:0;clip-path:inset(0 0 100% 0)}to{transform:none;opacity:1;clip-path:inset(0)}}
.shape{position:absolute;pointer-events:none}
.shape-1{right:-46px;top:-50px;width:180px;height:180px;color:var(--t-seal-ink);opacity:.9;animation:spin 22s linear infinite}
.shape-2{right:104px;top:26px;width:62px;height:62px;color:var(--t-accent-2);animation:spin 9s linear infinite reverse}
.shape svg{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}
.t-day{font-family:var(--f-script);font-weight:700;font-size:62px;line-height:.8;letter-spacing:-.05em}
.t-mon{font-family:var(--f-display);font-size:20px;font-weight:700;text-transform:lowercase}
.t-small{font-family:var(--f-display);font-size:13px;font-weight:600;opacity:.75}
.t-big{font-family:var(--f-display);font-size:22px;font-weight:700;line-height:1.05;letter-spacing:-.01em}
.cd-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px}
.cd-big > b{font-family:var(--f-script);font-weight:700;font-size:50px;line-height:.8;letter-spacing:-.05em}
.cd-big small{font-family:var(--f-display);font-size:16px;font-weight:700}
.cd-rest{flex-basis:100%;font-family:var(--f-display);font-size:14px;font-weight:600;opacity:.8;font-variant-numeric:tabular-nums}
.t-local{grid-column:1/-1;min-height:180px}
.t-map{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--t-line) 10%,transparent) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(color-mix(in srgb,var(--t-line) 10%,transparent) 1px,transparent 1px) 0 0/28px 28px;-webkit-mask:linear-gradient(90deg,transparent,#000 70%)}
.t-map::before{content:"";position:absolute;right:-20px;top:30px;width:240px;height:70px;border-top:6px solid color-mix(in srgb,var(--t-accent-2) 70%,transparent);border-radius:50%;transform:rotate(-14deg)}
.pin{position:absolute;right:64px;top:54px;display:grid;place-items:center;width:44px;height:44px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--t-accent-2);color:var(--dark-text);animation:bob 2s ease-in-out infinite}
.pin .ic{transform:rotate(45deg)}
@keyframes bob{50%{translate:0 -6px}}
.t-rsvp .ic,.t-gift .ic,.t-manual .ic{margin-bottom:auto}
/* Bloco sozinho na linha (sem presentes / sem fotos): ocupa a largura toda, mais baixo */
.tile.is-wide{grid-column:1/-1;min-height:120px}
.t-msg{grid-column:1/-1;min-height:0;justify-content:flex-start}
.t-msg p{margin:0 0 6px;font-family:var(--f-display);font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.t-photos{background-size:cover;background-position:center;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.t-photos::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.5))}
.t-photos > *{position:relative}
.is-closed .tile{opacity:0}
.is-opening .tile,.is-revealed .tile{animation:tileIn .8s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(1.1s + var(--i) * .07s)}
.is-opened .tile{animation:none}
@keyframes tileIn{from{opacity:0;transform:translateY(40px) scale(.9) rotate(-2deg)}}
.inv-moderna .brand{margin:20px 0 0;text-align:center;font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.78}

/* Bloco que se expande até virar a página */
.expander{position:fixed;z-index:40;pointer-events:none;border-radius:var(--x-radius);opacity:0}
.expander.is-on{opacity:1;transition:left .5s cubic-bezier(.7,0,.2,1),top .5s cubic-bezier(.7,0,.2,1),width .5s cubic-bezier(.7,0,.2,1),height .5s cubic-bezier(.7,0,.2,1),border-radius .5s}

/* ---------- Páginas ---------- */
.bpage{padding:calc(14px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom))}
.bpage > *{animation:fadeIn .45s ease both .15s}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}}
.bpage-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:.06em}
.close{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:color-mix(in srgb,currentColor 12%,transparent);color:inherit}
.bpage-title{margin:26px 0 26px;font-family:var(--f-script);font-weight:700;font-size:clamp(44px,12.5vw,60px);line-height:.92;letter-spacing:-.045em;overflow-wrap:normal}
.b-lead{margin:0 0 6px;font-family:var(--f-display);font-size:26px;font-weight:700;line-height:1.1}
.b-text{margin:0 0 10px;font-family:var(--f-body);font-size:16px;line-height:1.5;opacity:.85}
.b-card{--x-ink:var(--t-ink);--x-muted:var(--t-muted);--x-line:color-mix(in srgb,var(--t-ink) 12%,transparent);padding:18px;border-radius:22px;background:var(--t-paper);color:var(--t-ink)}
.tone-paper .b-card{background:color-mix(in srgb,var(--t-ink) 5%,var(--t-paper))}
.inv-moderna .pill{background:var(--t-accent);color:var(--t-on-accent);font-family:var(--f-display)}
.inv-moderna .pill b{font-family:var(--f-display);font-weight:700;letter-spacing:.02em;text-transform:none;font-size:16px}
.inv-moderna .pill--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.tone-dark .pill{background:var(--t-accent-2);color:var(--dark-text)}
.tone-dark .pill--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.inv-moderna .gifts .pill{align-items:flex-start;text-align:left;background:color-mix(in srgb,var(--t-ink) 6%,transparent);color:var(--t-ink);box-shadow:none;border-radius:16px}
.inv-moderna .gifts .pill b{font-size:18px}
.inv-moderna .seg{border-radius:14px}
.inv-moderna .seg span{font-family:var(--f-display);text-transform:none;font-size:14px;letter-spacing:0;color:var(--t-ink)}
.inv-moderna .seg input:checked + span{color:var(--t-on-accent)}
.inv-moderna .rsvp-person legend,.inv-moderna .rsvp-hello{font-family:var(--f-display);font-weight:600}
.inv-moderna .manual li span{font-family:var(--f-display);font-size:14px;font-weight:500}
.inv-moderna .gal-item{border-radius:20px}
.inv-moderna .music{color:var(--t-cover);background:var(--t-cover-ink);border:0;top:calc(52px + env(safe-area-inset-top))}

/* ---------- Capa: "15" desde o primeiro quadro, chips no topo e formas no espaço vazio ---------- */
.inv-moderna .cover{overflow:hidden}
.cover-top{position:absolute;left:22px;right:22px;top:calc(22px + env(safe-area-inset-top));display:flex;flex-wrap:wrap;gap:8px;z-index:1}
.cover-chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--t-cover-ink) 22%,transparent);font-family:var(--f-display);font-size:13px;font-weight:600;letter-spacing:.02em;animation:fadeIn .6s ease .5s both}
.cover-date{background:var(--t-cover-ink);color:var(--t-cover);border-color:transparent;animation-delay:.65s}
.cover-art{position:absolute;inset:0;pointer-events:none}
.cover-blob{position:absolute;right:-70px;top:14%;width:min(78vw,340px);aspect-ratio:1;color:var(--t-accent);opacity:.9;animation:coverPop .9s cubic-bezier(.2,.9,.3,1.2) .15s both,spin 40s linear 1s infinite}
.cover-burst{position:absolute;left:-26px;top:35%;width:120px;aspect-ratio:1;color:var(--t-accent-2);animation:coverPop .8s cubic-bezier(.2,.9,.3,1.3) .4s both,spin 14s linear 1.2s infinite reverse}
.cover-art svg{width:100%;height:100%}
.inv-moderna .cover > .load,.inv-moderna .cover > .cover-name,.inv-moderna .cover > .enter{position:relative;z-index:1}
#count{display:inline-flex}
#count i{display:inline-block;font-style:normal;min-width:.62em;text-align:center;animation:digitUp .7s cubic-bezier(.2,.8,.2,1) both}
#count i + i{animation-delay:.12s}
.cover-name{animation:fadeIn .6s ease .35s both}
.inv-moderna .cover .enter{animation:fadeIn .6s ease .55s both}
@keyframes digitUp{from{opacity:0;transform:translateY(40%)}}
@keyframes coverPop{from{opacity:0;transform:scale(.4) rotate(-30deg)}}
.cover.is-open #count{transition:transform .5s cubic-bezier(.6,0,.4,1);transform:scale(1.08)}
.inv-moderna .cover > .load{padding-bottom:.12em}.inv-moderna .cover > .cover-name{margin-top:14px}