/* Hero "monte seu copo" — quadros do vídeo do copo sendo montado, avançando conforme o scroll.
   Cores e fontes herdam do site (--lime, --deep, --cream, --heading, --body) com fallback. */
.hc {
  --hc-accent: var(--lime, #78D449);
  --hc-bg: var(--deep, #260b3b);
  --hc-bg-deep: var(--deeper, #190625);
  --hc-text: var(--cream, #fffaf1);
  --hc-top: calc(var(--header-height, 78px) + env(safe-area-inset-top, 0px));
  --hc-distance: 165vh;
  position: relative;
  isolation: isolate;
  /* Fundo escuro da seção = cor da borda do véu (gerar-veu-hero.py); o brilho roxo em volta do copo vem do véu */
  background: radial-gradient(ellipse 75% 60% at 50% 55%, #1b0234 0%, #1a0232 45%, #18022e 66%, #130125 100%);
  color: var(--hc-text);
}
.hc--live { height: calc(100vh + var(--hc-distance)); height: calc(100svh + var(--hc-distance)); }
.hc-sticky { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.hc--live .hc-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; }
.hc-inner {
  position: relative; height: 100%; min-height: inherit;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px;
  padding: calc(var(--hc-top) + 22px) 0 22px; text-align: center;
}

/* (2026-10-04) Letreiro gigante "Mais Acai" atras do copo removido por decisao da Sofia. */

/* Texto */
.hc-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hc .eyebrow { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--hc-accent); }
.hc h1 { font-size: clamp(2.3rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -.035em; margin: 12px 0 0; max-width: 13ch; text-shadow: 0 4px 30px rgba(25, 6, 37, .6); }
.hc h1 span { color: var(--hc-accent); }
.hc-copy { display: none; }
.hc-steps { display: none; }

/* Palco do copo */
.hc-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
/* Quadros do Mais Açaí são 600×800 / 960×1280 (3:4). A caixa precisa ter a mesma proporção: o canvas
   desenha o quadro no tamanho da caixa, e com 9:16 (proporção do vídeo do molde) o copo saía esticado. */
.hc-cup { position: relative; height: 100%; max-height: 100%; aspect-ratio: 3 / 4; }
/* Máscara: o vídeo daqui tem cenário próprio (estúdio escuro, mesa, morango, pote de granola) até a borda
   do quadro, sem o fundo roxo do vídeo do molde. Quatro camadas que se cruzam (intersect):
   - elipse centrada no copo: apaga os cantos (sobretudo os de cima, que liam como "caixa escura");
   - duas rampas laterais inclinadas (84,6° / 275,4°) acompanhando a lateral do copo, que afunila
     de 16–84% da largura na boca (~24% da altura) para ~25–75% na base (~96%): nesse ângulo boca e
     base caem em ~22,7% do gradiente, então o copo fica opaco e o morango/pote de granola das
     laterais somem aos poucos em vez de serem cortados por uma linha vertical;
   - rampa vertical: topo e mesa da base somem no roxo.
   Elipse pura cortaria a base do copo (encosta em ~96% da altura), por isso as camadas. */
.hc-poster, .hc-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image:
    radial-gradient(ellipse 58% 62% at 50% 60%, #000 78%, rgba(0,0,0,.6) 90%, transparent 100%),
    linear-gradient(84.6deg, transparent 0%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.75) 14%, #000 20%),
    linear-gradient(275.4deg, transparent 0%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.75) 14%, #000 20%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 6%, #000 16%, #000 86%, rgba(0,0,0,.55) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 58% 62% at 50% 60%, #000 78%, rgba(0,0,0,.6) 90%, transparent 100%),
    linear-gradient(84.6deg, transparent 0%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.75) 14%, #000 20%),
    linear-gradient(275.4deg, transparent 0%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.75) 14%, #000 20%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 6%, #000 16%, #000 86%, rgba(0,0,0,.55) 94%, transparent 100%);
  mask-composite: intersect;
}
/* Véu: as cores da borda do vídeo estendidas pra fora do quadro (hero-veil.webp, gerado do próprio vídeo).
   Cobre só uma faixa fina na borda do quadro e vai sumindo até meia largura de distância, então não
   aparece recorte nenhum e os confeitos do chão não são cortados por uma caixa.
   A imagem tem o quadro no meio com margem de 50% da largura em cada lado (28,125% da altura). */
.hc-veil {
  /* caixa 3:4: margem de 50% da largura = 37,5% da altura (no molde 9:16 era 28,125%) */
  position: absolute; inset: -37.5% -50%; pointer-events: none;
  background: url(hero-veil.webp) center / 100% 100% no-repeat;
}
.hc-canvas { display: none; }
.hc--live .hc-canvas { display: block; }
.hc-js .hc-poster { opacity: 0; } /* JS vai animar: começa no copo vazio, sem flash do copo pronto */
.hc--live .hc-poster { display: none; }

/* Legenda da etapa (mobile) */
.hc-caption { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; min-height: 52px; }
.hc-caption-label { font-family: var(--heading, sans-serif); font-weight: 700; font-size: 1.05rem; transition: opacity .25s, transform .25s; }
.hc-caption-label.is-swapping { opacity: 0; transform: translateY(6px); }
.hc-dots { display: flex; gap: 6px; }
.hc-dots span { width: 22px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); transition: background .3s, width .3s; }
.hc-dots span.is-on { background: var(--hc-accent); }
.hc-dots span.is-current { width: 34px; }

.hc-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hc-actions .hero-delivery { justify-content: center; margin-top: 0; }
.hc-hint { position: absolute; right: 0; bottom: 26px; display: none; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; opacity: calc(1 - var(--hc-p, 0) * 8); }
.hc-hint i { display: block; width: 1px; height: 38px; background: linear-gradient(var(--hc-accent), transparent); animation: hc-hint 1.6s ease-in-out infinite; transform-origin: top; }

.hc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.hc-bar span { display: block; height: 100%; background: var(--hc-accent); transform: scaleX(var(--hc-p, 0)); transform-origin: left; }

/* Entrada */
.hc-enter { animation: hc-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hc-enter--2 { animation-delay: .15s; }
.hc-enter--3 { animation-delay: .3s; }
.hc-stage.hc-enter { animation: hc-cup-in 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }

@keyframes hc-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes hc-cup-in { from { opacity: 0; transform: translateY(40px) scale(.92); } }
@keyframes hc-hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 559px) {
  .hc .hero-delivery { flex-direction: column; gap: 6px; font-size: .8rem; }
  .hc .hero-delivery-sep { display: none; }
  .hc-actions .action-button { min-height: 52px; padding-block: 12px; }
}

/* Desktop: texto à esquerda com a lista de etapas, copo à direita */
@media (min-width: 900px) {
  .hc { --hc-distance: 180vh; background: radial-gradient(ellipse 32% 75% at 73% 56%, #1b0234 0%, #1a0232 48%, #18022e 70%, #130125 100%); }
  /* "safe center": se o conteúdo passar da altura, ele não sobe por baixo do cabeçalho fixo (fica preso ao padding de cima) */
  .hc-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-content: safe center; gap: 0 40px; padding: calc(var(--hc-top) + 24px) 0 40px; text-align: left; }
  .hc-text { grid-column: 1; grid-row: 1; }
  .hc-actions { grid-column: 1; grid-row: 2; }
  .hc-stage { grid-column: 2; grid-row: 1 / 3; height: calc(100svh - var(--hc-top) - 64px); }
  .hc-text { align-items: flex-start; }
  .hc .eyebrow { justify-content: flex-start; }
  .hc-copy { display: block; max-width: 40ch; margin: 22px 0 0; color: #f0e4f6; font-size: 1.08rem; }
  .hc-steps { display: grid; gap: 4px; list-style: none; margin: 30px 0 30px; padding: 0; counter-reset: none; }
  .hc-step button {
    display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 0 14px; padding: 6px 0; background: none; color: inherit; text-align: left;
    opacity: .38; transition: opacity .3s, scale .16s ease;
  }
  .hc-step button:hover { opacity: .75; }
  .hc-step-n { font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: var(--hc-accent); display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(120, 212, 73, .4); border-radius: 50%; transition: background .3s, color .3s; }
  .hc-step-t { font-family: var(--heading, sans-serif); font-weight: 700; font-size: 1.12rem; line-height: 1.2; }
  .hc-step-d { grid-column: 2; font-size: .85rem; color: #d9c8e3; max-height: 0; overflow: hidden; transition: max-height .35s; }
  .hc-step.is-done button { opacity: .7; }
  .hc-step.is-done .hc-step-n { background: rgba(120, 212, 73, .16); }
  .hc-step.is-current button { opacity: 1; }
  .hc-step.is-current .hc-step-n { background: var(--hc-accent); color: var(--hc-bg); }
  .hc-step.is-current .hc-step-d { max-height: 2.6em; }
  .hc-cup { height: 100%; }
  .hc-caption { display: none; }
  .hc-actions { align-items: flex-start; }
  .hc-actions .hero-delivery { justify-content: flex-start; }
  .hc-hint { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-enter, .hc-stage.hc-enter, .hc-hint i { animation: none; }
}

/* O copo ocupa o espaço que sobra na coluna (a legenda nunca é empurrada pra fora) */
.hc-stage .hc-cup { flex: 1 1 0; min-height: 0; height: auto; }
@media (min-width: 900px) { .hc-stage .hc-cup { flex: none; height: 100%; } }

/* Celular em pé com tela baixa: tira o selo de cima e a linha de horário pra sobrar espaço pro copo */
@media (max-width: 899px) and (max-height: 700px) and (orientation: portrait) {
  .hc .eyebrow, .hc .hero-delivery { display: none; }
  .hc h1 { margin-top: 0; }
  .hc-inner { padding-top: calc(var(--hc-top) + 14px); padding-bottom: 14px; }
}

/* Celular deitado (tela baixa): texto à esquerda, copo à direita, sem lista de etapas */
@media (max-height: 520px) and (orientation: landscape) {
  .hc-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-content: safe center; gap: 0 24px; padding: calc(var(--hc-top) + 10px) 0 12px; text-align: left; }
  .hc-text { grid-column: 1; grid-row: 1; align-items: flex-start; }
  .hc .eyebrow { justify-content: flex-start; }
  .hc h1 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
  .hc-copy, .hc-steps, .hc-caption, .hc-hint, .hc .hero-delivery-time, .hc .hero-delivery-sep { display: none; }
  .hc-actions { grid-column: 1; grid-row: 2; align-items: flex-start; margin-top: 16px; }
  .hc-actions .hero-delivery { justify-content: flex-start; }
  .hc-stage { grid-column: 2; grid-row: 1 / 3; height: calc(100svh - var(--hc-top) - 22px); }
  .hc-stage .hc-cup { flex: none; height: 100%; }
}

/* Notebook com tela baixa (ex.: 1366×768): texto mais compacto pra o selo não ficar atrás do cabeçalho */
@media (min-width: 900px) and (max-height: 820px) {
  .hc h1 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); }
  .hc-copy { margin-top: 14px; }
  .hc-steps { margin: 18px 0 20px; }
}

/* Notebook/janela ainda mais baixa (1280×720, 1366×768 com barra do navegador): o bloco de texto inteiro
   precisa caber entre o cabeçalho e o rodapé da tela; senão o centro empurrava selo e título pra baixo do header. */
@media (min-width: 900px) and (max-height: 720px) and (min-height: 521px) {
  .hc-inner { padding: calc(var(--hc-top) + 14px) 0 24px; }
  .hc h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); margin-top: 8px; }
  .hc-copy { display: none; }
  .hc-steps { margin: 14px 0 16px; }
  .hc-step button { padding: 4px 0; }
}
@media (min-width: 900px) and (max-height: 640px) and (min-height: 521px) {
  .hc h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
  .hc-steps { margin: 10px 0 12px; gap: 2px; }
  .hc-step button { padding: 2px 0; grid-template-columns: 28px 1fr; gap: 0 12px; }
  .hc-step-n { width: 28px; height: 28px; }
  .hc-step-t { font-size: 1rem; }
  .hc-step-d, .hc-step.is-current .hc-step-d { display: none; }
  .hc-actions { gap: 8px; }
}

/* Correções 2026-10-02 — a faixa seguinte (.trust-strip) sobe --sec-r com topo arredondado sobre o hero.
   Espaço extra no fim do hero (fundo escuro) pra curva não cobrir o copo, os botões nem a barra de progresso. */
.hc { padding-bottom: var(--sec-r, 28px); }
/* Com o espaço extra, a barra de progresso cheia virava um fio amarelo solto acima da curva: some nos últimos ~8% */
.hc-bar { opacity: clamp(0, (1 - var(--hc-p, 0)) * 12, 1); }
.hc--live { height: calc(100vh + var(--hc-distance) + var(--sec-r, 28px)); height: calc(100svh + var(--hc-distance) + var(--sec-r, 28px)); }

/* Fernanda Dev 2026-10-04 (item C): o fio de acai e os ingredientes que caem entram pela borda de cima do
   quadro (recorte.json: corte comeca em y=0). O canvas sobe 3,8% por tras do titulo, mas a borda dele
   ficava logo abaixo de "do seu jeito." e o fio aparecia cortado em linha reta, saindo das letras.
   Correcao por camada, sem mascara nem veu sobre o produto:
   - .hc-fio: canvas encostado em cima do canvas do copo, com a mesma largura. O hero-copo.js estica nele a
     linha de cima do quadro atual (so onde ha fio/ingrediente), entao o fio continua reto para cima, por
     tras do titulo, e some aos poucos embaixo do cabecalho. O quadro do produto nao muda de tamanho.
   - a mascara de topo do acabamento.css (bloco 9) cortava justamente essa emenda: fica sem efeito aqui. */
.hc .hc-cup .hc-canvas, .hc .hc-cup .hc-poster { -webkit-mask-image: none; mask-image: none; }
.hc-fio {
  display: none; position: absolute; left: 0; width: 100%; z-index: 0; pointer-events: none;
  bottom: calc(100% / (1 - var(--hc-sobra, 0)) - 1px); /* 1px sobre a borda do canvas: sem fresta na emenda */
  height: 34%;
}
.hc--live .hc-fio { display: block; }