/* 02 · Vôlei de praia internacional em SC — 06:30, o sol acaba de sair de trás da Ilha.
   Cena fixada: a foto (s-convite) se abre devagar em volta do sol; o título fica no céu à direita (o sol,
   à esquerda, fica livre); os três pilares sobem na faixa de baixo e a bola, que sai do sol, liga um cartão
   ao outro. O título é medido pela coluna (cqi): a display expandida é larga e não pode passar da grade. */
#convite .vi-stage { background: #22324a; }
#convite .vi-fallback { position: absolute; inset: 0; background: linear-gradient(180deg, #33476a 0%, #8a7f9a 22%, #e9b08e 32%, #f6d2b0 34%, #c9a996 36%, #7d8a96 52%, #cfc3b0 62%, #e4dccd 100%); }
#convite .vi-bg { position: absolute; inset: 0; will-change: transform; }
#convite .vi-img { object-position: 50% 50%; }
/* véu do título: céu à direita, forte atrás das duas linhas do título; o sol (~36% da largura) fica livre —
   a máscara abre um furo em volta dele (--vi-sx/--vi-sy medidos no JS). Medido no contrast.mjs (p95 ≥ 3:1). */
#convite .vi-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 60% at calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .7) 22%, rgba(8, 18, 27, .88) 0%, rgba(8, 18, 27, .82) 46%, rgba(8, 18, 27, .42) 70%, rgba(8, 18, 27, 0) 90%),
    linear-gradient(180deg, rgba(10, 24, 34, .8) 0%, rgba(10, 24, 34, .34) 14%, rgba(10, 24, 34, 0) 26%);
  --vi-m: radial-gradient(circle at var(--vi-sx, 36%) var(--vi-sy, 32%), transparent 0, transparent var(--vi-hole, 56px), rgba(0, 0, 0, .3) calc(var(--vi-hole, 56px) * 1.6), rgba(0, 0, 0, .66) calc(var(--vi-hole, 56px) * 2.3), rgba(0, 0, 0, .9) calc(var(--vi-hole, 56px) * 2.9), #000 calc(var(--vi-hole, 56px) * 3.4));
  -webkit-mask: var(--vi-m); mask: var(--vi-m); }
/* pé: os cartões têm placa própria; o véu só tira o brilho da areia atrás deles */
#convite .vi-foot-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(10, 24, 34, .78) 0%, rgba(10, 24, 34, .42) 20%, rgba(10, 24, 34, 0) 42%); }

#convite .vi-arcs { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
#convite .vi-mk { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; }
/* a trajetória lê no projetor: pontos maiores e um contorno escuro fino (sobre o céu pêssego claro) */
#convite .vi-arc { stroke-width: 5; stroke-dasharray: 1 13; filter: drop-shadow(0 0 1.2px rgba(10, 24, 34, .75)) drop-shadow(0 0 7px rgba(242, 151, 109, .5)); }
#convite .vi-ball { position: absolute; left: 0; top: 0; z-index: 4; --ball: clamp(40px, 3.4vw, 64px); --ball-word: 1; width: var(--ball); height: var(--ball); margin: calc(var(--ball) / -2) 0 0 calc(var(--ball) / -2); opacity: 0; pointer-events: none; }

#convite .vi-wrap { position: relative; z-index: 3; }
#convite .vi-lay { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 0; padding-top: calc(var(--hud-h) + clamp(22px, 6vh, 72px)); padding-bottom: clamp(46px, 7.4vh, 84px); }
#convite .vi-head { grid-row: 1; grid-column: 6 / 13; display: grid; gap: clamp(12px, 2vh, 22px); justify-items: start; container-type: inline-size; }
#convite .vi-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#convite .vi-title { display: grid; font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -.015em; color: var(--sand); padding-top: .05em; }
#convite .vi-t1, #convite .vi-t2 { display: block; font-size: min(calc(5.8cqi * var(--ts, 1)), 6.4cqi); }
#convite .vi-t2 { color: var(--sun); }
#convite .vi-lede { max-width: none; }

#convite .vi-cards { grid-row: 3; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
#convite .vi-card { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 14px); padding: clamp(18px, 1.7vw, 28px); opacity: 0; }
#convite .vi-card .body { font-size: calc((clamp(15px, .5vw + 9.6px, 18px)) * var(--ts, 1)); line-height: 1.5; }
#convite .vi-card .h3 { color: var(--sand); }
#convite .vi-tokens { margin-top: auto; padding-top: 4px; }
/* chips no tamanho do núcleo; só o respiro encurta para as três frentes caberem numa linha (1440–1920) */
#convite .vi-tokens.chips { gap: 6px; }
#convite .vi-tokens .chip { padding-inline: .9em; }
#convite .vi-flags { display: flex; gap: 8px; }
#convite .vi-flags img { width: clamp(24px, 2vw, 32px); height: auto; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px rgba(244, 239, 229, .85), 0 3px 10px rgba(0, 0, 0, .35); }
/* o toque da bola: a borda de cima do cartão acende */
#convite .vi-glow { position: absolute; left: 12%; right: 12%; top: -1px; height: 3px; transform-origin: 50% 50%; border-radius: 3px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--sun) 30%, var(--flare) 50%, var(--sun) 70%, transparent); box-shadow: 0 0 18px rgba(255, 200, 138, .7); }

#convite .vi-credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(14px, 2.4vh, 26px); }

/* sem movimento: tudo no estado final */
.reduced #convite .vi-card { opacity: 1; }

@media (orientation: portrait) {
  #convite .vi-head { grid-column: 1 / -1; }
  #convite .vi-t1, #convite .vi-t2 { font-size: min(calc(5.6cqi * var(--ts, 1)), 6.1cqi); }
  /* em pé o sol fica logo abaixo da linha fina (~32% da altura): véu de cima, sem furo, forte até o pé do
     cabeçalho (--vi-hb, medido no JS) e sumindo logo abaixo. Em % da tela ele afinava sobre a linha fina
     (3,9:1 em 820 × 1180) e, em 768 × 1024, já sob a 2ª linha do título */
  #convite .vi-veil { -webkit-mask: none; mask: none; background:
    linear-gradient(180deg, rgba(8, 18, 27, .84) 0%, rgba(8, 18, 27, .8) calc(var(--vi-hb, 28%) + 4px), rgba(8, 18, 27, .6) calc(var(--vi-hb, 28%) + 16px), rgba(8, 18, 27, .36) calc(var(--vi-hb, 28%) + 30px), rgba(8, 18, 27, .16) calc(var(--vi-hb, 28%) + 46px), rgba(8, 18, 27, .05) calc(var(--vi-hb, 28%) + 62px), rgba(8, 18, 27, 0) calc(var(--vi-hb, 28%) + 80px)); }
  #convite .vi-cards { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  #convite .vi-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 20px; row-gap: 6px; align-items: start; }
  #convite .vi-card .h3 { grid-column: 1; }
  #convite .vi-card .body { grid-column: 1; }
  #convite .vi-tokens { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-top: 0; padding-top: 0; }
  #convite .vi-foot-veil { background: linear-gradient(0deg, rgba(10, 24, 34, .86) 0%, rgba(10, 24, 34, .5) 30%, rgba(10, 24, 34, 0) 56%); }
}