/* ============================================================
   HERO "REVELAÇÃO" sobre FOTO — O Jardim da Elis
   · fullscreen mobile, "travado" (sticky) — o conteúdo sobe por cima
   · fundo = a fotografia anexada (ambiente, levemente suave)
   · header escondido sobre a hero (revelado só após o scroll)
   · ANIMAÇÃO das memórias: 3 fotos entram, respiram, cedem o palco;
     a 4ª nasce dominante.

   Seguranca de captura: o ESTADO-BASE (sem .is-playing)
   já é o ESTADO FINAL. .is-playing replica a linha do tempo (~5.8s);
   .is-settled força o final se o relógio de animação não avançar.
   ============================================================ */

.hero-reveal{
  position:sticky;          /* "travado" */
  top:0;
  /* o header (sticky) reserva sua caixa no topo do fluxo; puxamos a hero
     p/ cima p/ ela começar colada no topo do device e preencher 100% */
  margin-top:calc(-1 * (var(--header-h) + var(--safe-top)));
  height:100%;              /* preenche EXATAMENTE a altura do device */
  min-height:0;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  z-index:0;                /* atrás das seções (que sobem por cima) */
  background:#EAD9D2;       /* cor-ponte enquanto a foto carrega */
}

/* a fotografia É o fundo — ambiente, suave, p/ as memórias se destacarem */
.hero-reveal__img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 36%;
  transform:scale(1.06); transform-origin:50% 40%;
  filter:blur(1.2px) saturate(1) brightness(1);
  will-change:transform;
}
@media (min-width:0px){
  .hero-reveal.is-playing .hero-reveal__img{ animation:heroKenBurns 24s ease-in-out .2s infinite alternate; }
}
@keyframes heroKenBurns{ from{ transform:scale(1.06); } to{ transform:scale(1.14); } }

/* véu de profundidade: assenta as memórias e abre espaço p/ o texto embaixo,
   sem virar "cor de fundo" — segue lendo a foto */
.hero-reveal__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 30%, rgba(43,27,31,.13), transparent 60%),
    linear-gradient(0deg, rgba(255,249,244,.76) 0%, rgba(255,249,244,.32) 20%, transparent 42%);
}

/* grão de filme quase imperceptível */
.hero-reveal__grain{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- palco das memórias ---------- */
.hero-reveal__prelude{
  position:absolute; left:50%; bottom:calc(var(--space-20) + var(--safe-bottom));
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px;
  width:min(58vw,220px); transform:translateX(-50%);
  opacity:.94; pointer-events:none;
  filter:drop-shadow(0 1px 10px rgba(255,253,251,.62));
}
.hero-reveal__prelude img{ display:block; width:100%; height:auto; }
.hero-reveal__prelude span{
  font-family:var(--font-sans); font-size:.58rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--color-accent-secondary);
}
@media (min-width:0px){
  .hero-reveal.is-playing .hero-reveal__prelude{ animation:preludeFade 5600ms var(--motion-ease-soft) both; }
}
@keyframes preludeFade{
  0%, 64% { opacity:.94; transform:translateX(-50%) translateY(0); filter:drop-shadow(0 1px 10px rgba(255,253,251,.62)); }
  100% { opacity:0; transform:translateX(-50%) translateY(8px); filter:drop-shadow(0 1px 10px rgba(255,253,251,0)); }
}

.hero-reveal__stage{ position:absolute; inset:0; z-index:2; }

.memory-photo{
  position:absolute; margin:0; overflow:hidden;
  border:9px solid #F7F2EC;
  border-bottom-width:26px;
  border-radius:2px;
  aspect-ratio:4 / 5; background:#F7F2EC;
  will-change:transform, opacity, filter;
}
.memory-photo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* gradientes-placeholder (somem quando há foto real) */
.memory-photo--a{ background:linear-gradient(155deg,#e7c3cd,#b98e9b 60%,#8a6a72); }
.memory-photo--b{ background:linear-gradient(150deg,#c2ddd1,#8fb1a8 55%,#6b8a82); }
.memory-photo--c{ background:linear-gradient(160deg,#ecd6ac,#caa672 60%,#9a7c54); }
.memory-photo--main{ background:linear-gradient(150deg,#f0cdd6,#dca6b8 45%,#b07f8e); }

/* posições COMPOSTAS (posicao-inicial.png): onde cada foto assenta após entrar.
   --rot = inclinação composta. O transform BASE já é a posição APARTADA
   (posicao-final.png) com opacity:0, para capturas abrirem
   direto no estado final. Durante a animação, memEnter* (offscreen→composto)
   e memPart* (composto→apartado) sobrepõem este base. */
.memory-photo--a{ width:min(48vw,205px); left:-4%; top:11%; --rot:-8deg; z-index:1;
  opacity:0; filter:none; transform:translate(-44px,86px) scale(.66) rotate(14deg); }
.memory-photo--b{ width:min(52vw,224px); right:-6%; top:20%; --rot:11deg; z-index:2;
  opacity:0; filter:none; transform:translate(70px,90px) scale(.56) rotate(-14deg); }
.memory-photo--c{ width:min(61vw,262px); left:16%; top:47%; --rot:-6deg; z-index:3;
  opacity:0; filter:none; transform:translate(-120px,188px) scale(.70) rotate(14deg); }
/* FOTO 4 (principal) — foto real, ocupa 100% da hero (full-bleed), vira o novo
   fundo. NÃO surge com movimento: só opacidade 0→1 e desfoque forte→0.
   z-index:0 → atrás das memórias 1/2/3, que seguem visíveis por cima. */
.memory-photo--main{ position:absolute; inset:0; width:100%; height:100%;
  border:none; border-radius:0; box-shadow:none; aspect-ratio:auto; overflow:hidden;
  z-index:0; --rot:0deg; opacity:1; filter:none; transform:none; }
/* topo alinhado (rosto no alto, como na referência); sem zoom — escala 1. */
.memory-photo--main > .memory-photo__img{ object-position:top center; }

/* ---- linha do tempo SEQUENCIAL (só com .is-playing) ----
   Cada foto tem ENTRADA própria (duração + atraso independentes). Ao fim,
   as 3 memórias ABREM ESPAÇO (memPart*) enquanto a foto 4 surge em 100%
   da hero (só opacidade + desfoque), virando o novo fundo.
   Cadência: foto1 0→2,8s · (1s) · foto2 3,8→6,6s · (1s) · foto3 7,6→10,4s
   · (1s) · abre espaço + foto4 11,4s · texto 13s. */
@media (min-width:0px){
  .hero-reveal.is-playing .memory-photo--a{ animation:memEnterA 2800ms linear 0ms both, memPartA 1200ms cubic-bezier(.33,0,.25,1) 11400ms forwards; }
  .hero-reveal.is-playing .memory-photo--b{ animation:memEnterB 2800ms linear 3800ms both, memPartB 1200ms cubic-bezier(.33,0,.25,1) 11400ms forwards; }
  .hero-reveal.is-playing .memory-photo--c{ animation:memEnterC 2800ms linear 7600ms both, memPartC 1200ms cubic-bezier(.33,0,.25,1) 11400ms forwards; }
  .hero-reveal.is-playing .memory-photo--main{ animation:memMain 1600ms cubic-bezier(.4,0,.2,1) 11400ms both; }
  .hero-reveal.is-playing .hero-reveal__copy{ animation:letteringReveal 2000ms cubic-bezier(.22,.61,.27,1) 12300ms both; }
  .hero-reveal.is-playing .hero-reveal__scroll{ animation:scrollRise 800ms cubic-bezier(.16,1,.3,1) 14500ms both; }
}

/* ===== ENTRADAS (cada foto entra e assenta no enquadramento composto) ===== */
/* FOTO 1 — entrada em profundidade (eixo Z), ORGÂNICA e CALMA:
   surge gigante e fora de foco (objeto colado na lente), recua numa única
   desaceleração suave (sem overshoot, sem inverter o lado), com leve deriva
   lateral; o blur "segura" enquanto está perto e desvanece sutilmente,
   zerando exatamente quando a foto chega ao enquadramento final e nítido. */
@keyframes memEnterA{
  0%    { opacity:0; filter:blur(28px); transform:translate(40px,0) scale(2.9) rotate(var(--rot)); animation-timing-function:cubic-bezier(.22,.61,.27,1); }
  16%   { opacity:1; }
  78.5% { filter:blur(8px); }
  100%  { opacity:1; filter:blur(0) saturate(1) brightness(1); transform:translate(0,0) scale(1) rotate(var(--rot)); }
}
/* FOTO 2 — entra pela LATERAL (vem da borda direita da tela), com leve
   deslize no eixo X, um pouco mais próxima da câmera (maior + à frente).
   Mesma assinatura da foto 1: calma, orgânica, blur que desvanece na chegada. */
@keyframes memEnterB{
  0%   { opacity:0; filter:blur(22px); transform:translate(86px,0) scale(1.55) rotate(var(--rot)); animation-timing-function:cubic-bezier(.22,.61,.27,1); }
  16%  { opacity:1; }
  72%  { filter:blur(6px); }
  100% { opacity:1; filter:blur(0) saturate(1) brightness(1); transform:translate(0,0) scale(1) rotate(var(--rot)); }
}
/* FOTO 3 — entra ainda MAIS próxima da câmera que a foto 2 (eixo Z): começa
   maior e mais à frente (z-index acima), com leve deslize lateral pelo outro
   lado. Mesma assinatura calma e orgânica; blur segura e desvanece na chegada. */
@keyframes memEnterC{
  0%   { opacity:0; filter:blur(26px); transform:translate(-64px,0) scale(2.05) rotate(var(--rot)); animation-timing-function:cubic-bezier(.22,.61,.27,1); }
  16%  { opacity:1; }
  74%  { filter:blur(7px); }
  100% { opacity:1; filter:blur(0) saturate(1) brightness(1); transform:translate(0,0) scale(1) rotate(var(--rot)); }
}
/* ABRIR ESPAÇO (as 3 memórias se afastam quando a foto 4 toma a tela).
   O 0% é idêntico ao fim de cada entrada → transição contínua, sem salto. */
@keyframes memPartA{ /* foto 1 → sup-esquerdo, girada à esquerda (libera o letreiro) */
  0%   { opacity:1; transform:translate(0,0) scale(1) rotate(var(--rot)); }
  100% { opacity:1; transform:translate(-44px,86px) scale(.66) rotate(14deg); }
}
@keyframes memPartB{ /* foto 2 → direita-meio, girada à direita (libera o letreiro) */
  0%   { opacity:1; transform:translate(0,0) scale(1) rotate(var(--rot)); }
  100% { opacity:1; transform:translate(70px,90px) scale(.56) rotate(-14deg); }
}
@keyframes memPartC{ /* foto 3 → base-esquerda, girada à esquerda (libera o “Deslize”) */
  0%   { opacity:1; transform:translate(0,0) scale(1) rotate(var(--rot)); }
  100% { opacity:1; transform:translate(-120px,188px) scale(.70) rotate(14deg); }
}
/* FOTO 4 — sem movimento: só revela (opacidade) e foca (desfoque some). */
@keyframes memMain{
  0%  { opacity:0; filter:blur(34px); }
  60% { opacity:1; }
  100%{ opacity:1; filter:blur(0); }
}
@keyframes memFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -3px; } }

/* memEnter de cada foto deve terminar exatamente na sua posição COMPOSTA (translate 0). */

/* ---- letras (SVG) + data, centralizadas ---- */
.hero-reveal__copy{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-44%);
  z-index:5; padding:0 var(--gutter); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  pointer-events:none;
}
.hero-reveal__eyebrow{
  font-family:var(--font-sans); font-size:.625rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent-secondary);
}
/* lettering = SVG (já vem com o desenho em rosa + leve halo branco no arquivo) */
.hero-reveal__lettering{
  width:min(50vw,212px); height:auto; display:block;
}
@keyframes letteringReveal{
  0%   { opacity:0; filter:blur(26px); }
  55%  { opacity:1; }
  100% { opacity:1; filter:blur(0); }
}

/* ---- DESLIZE + ícone de scroll (terço inferior, pressionável) ---- */
.hero-reveal__scroll{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:max(var(--space-10), calc(var(--space-8) + var(--safe-bottom)));
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:11px;
  background:none; border:none; padding:8px 14px; cursor:pointer; opacity:0;
  -webkit-tap-highlight-color:transparent;
}
.hero-reveal__scroll-text{
  font-family:var(--font-sans); font-size:9px; font-weight:700; opacity:.78;
  letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent-primary);
  transition:color var(--motion-duration-base) var(--motion-ease-soft);
}
.hero-reveal__scroll:hover .hero-reveal__scroll-text{ color:var(--color-accent-primary-hover); }
.hero-reveal__scroll:active{ transform:translateX(-50%) scale(.96); }
.hero-reveal__scroll:focus-visible{ outline:2px solid var(--color-focus-ring); outline-offset:2px; border-radius:16px; }
.scroll-mouse{
  width:22px; height:36px; border:1.5px solid var(--color-accent-primary);
  border-radius:999px; position:relative; flex:none;
}
.scroll-mouse__dot{
  position:absolute; left:50%; top:7px; width:4.5px; height:4.5px; border-radius:50%;
  background:var(--color-accent-primary); transform:translate(-50%,0);
}
@media (min-width:0px){
  .scroll-mouse__dot{ animation:scrollDot 1.9s var(--motion-ease-soft) infinite; }
}
@keyframes scrollDot{
  0%   { opacity:0; transform:translate(-50%,16px); }
  18%  { opacity:1; }
  55%  { opacity:1; transform:translate(-50%,0); }
  72%  { opacity:0; transform:translate(-50%,0); }
  100% { opacity:0; transform:translate(-50%,16px); }
}
@keyframes scrollRise{ from{ opacity:0; transform:translate(-50%,16px); } to{ opacity:1; transform:translate(-50%,0); } }

@media (min-width:860px){
  body:not(.shell-preview) .hero-reveal__img{ object-position:50% 32%; transform:scale(1.035); }
  body:not(.shell-preview) .hero-reveal__veil{
    background:
      radial-gradient(72% 74% at 50% 34%, rgba(43,27,31,.12), transparent 64%),
      linear-gradient(0deg, rgba(255,249,244,.7) 0%, rgba(255,249,244,.22) 22%, transparent 46%);
  }
  body:not(.shell-preview) .hero-reveal__prelude{ width:clamp(220px,22vw,350px); bottom:calc(var(--space-20) + var(--safe-bottom)); }
  body:not(.shell-preview) .hero-reveal__prelude span{ font-size:.68rem; }
  body:not(.shell-preview) .memory-photo{ border-width:10px; border-bottom-width:30px; }
  body:not(.shell-preview) .memory-photo--a{ width:clamp(210px,18vw,290px); left:13%; top:12%; }
  body:not(.shell-preview) .memory-photo--b{ width:clamp(220px,19vw,310px); right:13%; top:18%; }
  body:not(.shell-preview) .memory-photo--c{ width:clamp(260px,22vw,350px); left:18%; top:48%; }
  body:not(.shell-preview) .hero-reveal__copy{ gap:var(--space-5); transform:translateY(-38%); }
  body:not(.shell-preview) .hero-reveal__eyebrow{ font-size:.72rem; letter-spacing:.24em; }
  body:not(.shell-preview) .hero-reveal__lettering{ width:clamp(260px,24vw,390px); }
  body:not(.shell-preview) .hero-reveal__skip{ top:max(var(--space-8), calc(var(--space-6) + var(--safe-top))); right:clamp(30px,5vw,72px); }
}

/* ---- bot\u00e3o PULAR (s\u00f3 durante a entrada das fotos 1/2/3) ---- */
/* usa o botão primary do DS (.btn .btn--primary); aqui só posição/visibilidade/tamanho */
.hero-reveal__skip{
  position:absolute; top:max(var(--space-6), calc(var(--space-4) + var(--safe-top))); right:var(--gutter);
  z-index:6; min-height:44px; padding:0 var(--space-5); font-size:var(--fs-caption);
  opacity:0; pointer-events:none;
  transition:opacity 600ms var(--motion-ease-soft), background var(--motion-duration-base) var(--motion-ease-soft),
             transform 150ms var(--motion-ease-organic);
}
.hero-reveal.is-playing:not(.is-parting):not(.is-settled) .hero-reveal__skip{ opacity:1; pointer-events:auto; }

/* ---- PULAR como botão de CONTORNO Coral Doce + explosão de pétalas ---- */
/* a .btn-pular é um contêiner transparente de 44px (mesma altura do botão de áudio)
   para que os dois fiquem com o centro perfeitamente alinhado no mesmo eixo. */
.btn-pular{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; min-height:44px; padding:0; background:transparent; border:0;
  cursor:pointer; overflow:visible;
  -webkit-tap-highlight-color:transparent; user-select:none;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), opacity 600ms var(--motion-ease-soft);
}
/* a pílula visível (contorno + texto) — menor que o contêiner */
.btn-pular__label{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Nunito', var(--font-sans, system-ui), sans-serif;
  font-weight:400; font-size:12px; line-height:1; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; background:#EE8A94; border:0; border-radius:999px;
  padding:11px 18px 11px 21px;
}
/* somente Coral Doce (#EE8A94) no traço e no texto — sem mudança de cor em hover/active/focus */
.btn-pular:hover{ transform:translateY(-1px); }
.btn-pular:active{ transform:scale(.95); }
.btn-pular:focus-visible{ outline:none; }
.btn-pular:focus-visible .btn-pular__label{ outline:2px solid #EE8A94; outline-offset:3px; }
.btn-pular.is-bursting{ animation:btnPularPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes btnPularPop{ 0%{transform:scale(1)} 24%{transform:scale(.9)} 55%{transform:scale(1.06)} 100%{transform:scale(1)} }

/* camada da explosão — fora do botão, para não desaparecer com o fade do PULAR */
.hero-burst{ position:absolute; z-index:7; pointer-events:none; }
.hero-burst__petal{
  position:absolute; left:0; top:0;
  border-radius:78% 22% 78% 22% / 78% 78% 22% 22%;
  will-change:transform,opacity;
}
.hero-burst__ring{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  border-radius:999px; border:3px solid #EE8A94;
}

/* ---- botão DESLIGAR MÚSICA na hero (ao lado do Pular; aparece/some com ele) ---- */
.hero-reveal__mute{
  position:absolute; top:max(var(--space-6), calc(var(--space-4) + var(--safe-top)));
  left:var(--gutter);
  z-index:6; width:44px; height:44px; display:grid; place-items:center;
  border-radius:50%; border:1.5px solid var(--color-accent-primary);
  background:rgba(247,242,236,.12); color:var(--color-accent-primary); cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;
  opacity:0; pointer-events:none;
  transition:opacity 600ms var(--motion-ease-soft), transform 150ms var(--motion-ease-organic),
             background var(--motion-duration-base) var(--motion-ease-soft);
}
.hero-reveal.is-playing:not(.is-parting):not(.is-settled) .hero-reveal__mute{ opacity:1; pointer-events:auto; }
.hero-reveal__mute:hover{ background:rgba(247,242,236,.2); }
.hero-reveal__mute:active{ transform:scale(.92); }
.hero-reveal__mute:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.hero-reveal__mute svg{ width:21px; height:21px; }
.hero-reveal__mute-ic--off{ display:none; }
.hero-reveal__mute.is-muted .hero-reveal__mute-ic--on{ display:none; }
.hero-reveal__mute.is-muted .hero-reveal__mute-ic--off{ display:block; }

/* PRÉ-ROLL: antes de a animação iniciar (refresh/carregamento), mostra só a
   foto-fundo (1º quadro) e esconde foto 4, letreiro/data e o hint — evita o
   "flash" do estado final ao recarregar a página. */
.hero-reveal.is-preroll .memory-photo--main,
.hero-reveal.is-preroll .hero-reveal__copy,
.hero-reveal.is-preroll .hero-reveal__scroll{ opacity:0 !important; }

/* estado assentado: garante final mesmo com relógio de animação parado.
   Base (apartado) + opacidade plena = posicao-final.png. */
.hero-reveal.is-settled .memory-photo,
.hero-reveal.is-settled .hero-reveal__copy,
.hero-reveal.is-settled .hero-reveal__scroll,
.hero-reveal.is-settled .memory-photo > .memory-photo__img{ animation:none !important; }
.hero-reveal.is-settled .memory-photo{ opacity:1 !important; filter:none !important; }
.hero-reveal.is-settled .memory-photo--main{ opacity:1 !important; filter:none !important; transform:none !important; }
.hero-reveal.is-settled .hero-reveal__copy{ opacity:1 !important; filter:none !important; }
.hero-reveal.is-settled .hero-reveal__scroll{ opacity:1 !important; }
.hero-reveal.is-settled .hero-reveal__prelude,
.hero-reveal.is-parting .hero-reveal__prelude{ opacity:0 !important; }