/* ==========================================================================
   Presente Brilho Notável — microexperiência
   Mobile-first (360–430px). Animações apenas com opacity/transform.
   ========================================================================== */

:root {
  /* Paleta */
  --preto-avermelhado: #0e0406;
  --vinho-escuro: #22070d;
  --vinho-profundo: #3a0d17;
  --vinho: #6e1426;
  --dourado: #c9a96a;
  --dourado-claro: #e6cf9c;
  --champagne: #e8d9bc;
  --off-white: #f5eee4;

  /* Tipografia (sem dependência de fontes externas) */
  --serif: "Cormorant Garamond", "Cormorant", "EB Garamond", "Bodoni 72", "Didot",
    "Hoefler Text", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
    Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
    Roboto, system-ui, sans-serif;

  /* Ritmo */
  --suave: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-revelar: 1.6s;
  --dur-cena: 1.2s;
  --deslocamento: 10px;
  --atraso-linha: 700ms;
  --dur-luz: 6s;

  /* Espaçamento com safe-area */
  --margem: 1.5rem;
  --topo: max(var(--margem), env(safe-area-inset-top));
  --base: max(var(--margem), env(safe-area-inset-bottom));
  --lado-esq: max(var(--margem), env(safe-area-inset-left));
  --lado-dir: max(var(--margem), env(safe-area-inset-right));

  /* Rosa */
  --rosa-largura: min(70vw, 38vh, 380px);
  --rosa-alto: -13vh;
}

@supports (height: 100dvh) {
  :root {
    --rosa-largura: min(70vw, 38dvh, 380px);
    --rosa-alto: -13dvh;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--preto-avermelhado);
  color: var(--off-white);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

p,
h1 {
  margin: 0;
}

button,
a {
  font: inherit;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

:focus-visible {
  outline: 1px solid var(--dourado);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Ambiente
   -------------------------------------------------------------------------- */

.ambiente {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 65% at 50% 45%, var(--vinho-profundo) 0%, var(--vinho-escuro) 48%, var(--preto-avermelhado) 100%);
}

.ambiente__luz {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 150vmax;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(236, 196, 156, 0.11) 0%, rgba(150, 34, 56, 0.08) 28%, transparent 58%);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0.35;
  animation: respirar 10s ease-in-out infinite alternate;
  transition: opacity var(--dur-luz) var(--suave);
}

/* Partículas: duas camadas com pontos desenhados por gradiente (nada de dezenas de nós no DOM) */
.ambiente__particulas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  will-change: transform;
}

.ambiente__particulas--a {
  bottom: -320px;
  background-image:
    radial-gradient(circle at 34px 58px, rgba(230, 200, 140, 0.5) 0, rgba(230, 200, 140, 0.5) 0.8px, transparent 1.5px),
    radial-gradient(circle at 182px 22px, rgba(230, 200, 140, 0.35) 0, rgba(230, 200, 140, 0.35) 0.6px, transparent 1.3px),
    radial-gradient(circle at 120px 196px, rgba(230, 200, 140, 0.42) 0, rgba(230, 200, 140, 0.42) 0.9px, transparent 1.6px),
    radial-gradient(circle at 236px 268px, rgba(230, 200, 140, 0.3) 0, rgba(230, 200, 140, 0.3) 0.6px, transparent 1.3px);
  background-size: 260px 320px;
  animation: entrar-particulas 4s var(--suave) 0.6s forwards, subir-a 80s linear infinite;
}

.ambiente__particulas--b {
  bottom: -460px;
  background-image:
    radial-gradient(circle at 70px 300px, rgba(240, 214, 165, 0.45) 0, rgba(240, 214, 165, 0.45) 1px, transparent 1.8px),
    radial-gradient(circle at 300px 120px, rgba(240, 214, 165, 0.3) 0, rgba(240, 214, 165, 0.3) 0.7px, transparent 1.4px),
    radial-gradient(circle at 210px 410px, rgba(240, 214, 165, 0.35) 0, rgba(240, 214, 165, 0.35) 0.8px, transparent 1.5px);
  background-size: 380px 460px;
  animation: entrar-particulas 5s var(--suave) 1.2s forwards, subir-b 120s linear infinite;
}

.ambiente__veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(6, 1, 3, 0.35) 0%, rgba(6, 1, 3, 0.85) 100%);
  opacity: 0.5;
  transition: opacity var(--dur-luz) var(--suave);
}

/* Progressão de luz (body[data-luz], definido pela narrativa).
   O véu fica acima das partículas, então também regula a visibilidade delas.
   penumbra → aurora → revelacao → plena → recolhimento → suspensao → repouso */
body[data-luz="aurora"] .ambiente__luz       { opacity: 0.6; }
body[data-luz="revelacao"] .ambiente__luz    { opacity: 0.8; }
body[data-luz="plena"] .ambiente__luz        { opacity: 1; }
body[data-luz="recolhimento"] .ambiente__luz { opacity: 0.45; }
body[data-luz="suspensao"] .ambiente__luz    { opacity: 0.2; }
body[data-luz="repouso"] .ambiente__luz      { opacity: 0.55; }

body[data-luz="aurora"] .ambiente__veu       { opacity: 0.22; }
body[data-luz="revelacao"] .ambiente__veu    { opacity: 0.1; }
body[data-luz="plena"] .ambiente__veu        { opacity: 0; }
body[data-luz="recolhimento"] .ambiente__veu { opacity: 0.8; }
body[data-luz="suspensao"] .ambiente__veu    { opacity: 1; }
body[data-luz="repouso"] .ambiente__veu      { opacity: 0.35; }

/* Somente escala: a opacidade da luz é controlada pela progressão acima */
@keyframes respirar {
  from { transform: translate3d(-50%, -50%, 0) scale(0.96); }
  to   { transform: translate3d(-50%, -50%, 0) scale(1.04); }
}

@keyframes entrar-particulas {
  to { opacity: 1; }
}

@keyframes subir-a {
  to { transform: translate3d(0, -320px, 0); }
}

@keyframes subir-b {
  to { transform: translate3d(0, -460px, 0); }
}

/* --------------------------------------------------------------------------
   Estrutura de cenas
   -------------------------------------------------------------------------- */

.experiencia {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.cena {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--topo) var(--lado-dir) var(--base) var(--lado-esq);
  text-align: center;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-cena) var(--suave), visibility 0s linear var(--dur-cena);
}

.cena.is-ativa {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-cena) var(--suave), visibility 0s;
}

.sobreposicao {
  display: grid;
  place-items: center;
}

.sobreposicao > * {
  grid-area: 1 / 1;
}

/* Revelação: fade + poucos pixels de movimento vertical */
.revelar {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, var(--deslocamento), 0);
  transition:
    opacity var(--dur-revelar) var(--suave),
    transform var(--dur-revelar) var(--suave),
    visibility 0s linear var(--dur-revelar);
}

.revelar.is-visivel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-revelar) var(--suave),
    transform var(--dur-revelar) var(--suave),
    visibility 0s;
}

.revelar.is-visivel.is-oculto {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(var(--deslocamento) * -0.6), 0);
  transition:
    opacity 1.2s var(--suave),
    transform 1.2s var(--suave),
    visibility 0s linear 1.2s;
}

/* Variante linha a linha (estrofes) */
.revelar--linhas,
.revelar--linhas.is-visivel {
  opacity: 1;
  transform: none;
}

.revelar--linhas > span {
  display: block;
  opacity: 0;
  transform: translate3d(0, var(--deslocamento), 0);
  transition:
    opacity var(--dur-revelar) var(--suave),
    transform var(--dur-revelar) var(--suave);
  transition-delay: calc(var(--i) * var(--atraso-linha));
}

.revelar--linhas.is-visivel > span {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

.frase {
  max-width: 21ch;
  font-size: clamp(1.4rem, 5.8vw, 2rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* Hierarquia: frases de preparação um pouco mais contidas */
.frase--preparo {
  font-size: clamp(1.25rem, 5.2vw, 1.8rem);
  color: rgba(232, 217, 188, 0.88);
}

/* Frase com quebra manual: permite a linha "alguém pensou em você." inteira */
.frase--ampla {
  max-width: 24ch;
}

.estrofe {
  font-size: clamp(1.12rem, 4.9vw, 1.8rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--off-white);
}

/* --------------------------------------------------------------------------
   FASE 1 — Abertura
   -------------------------------------------------------------------------- */

.toque {
  position: relative;
  margin-top: 3.4rem;
  min-height: 48px;
  padding: 1.05rem 2rem;
  border: 1px solid rgba(201, 169, 106, 0.5);
  border-radius: 999px;
  background: rgba(14, 4, 6, 0.35);
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.toque__texto {
  position: relative;
  /* compensa o letter-spacing final para centralizar opticamente */
  margin-right: -0.24em;
}

.toque::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 22px 2px rgba(201, 169, 106, 0.22);
  opacity: 0;
  animation: halo 3.6s ease-in-out infinite;
}

.toque:active {
  background: rgba(201, 169, 106, 0.12);
}

@media (hover: hover) {
  .toque:hover {
    border-color: rgba(201, 169, 106, 0.8);
  }
}

.toque:disabled {
  cursor: default;
}

@keyframes halo {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Rosa
   -------------------------------------------------------------------------- */

.rosa {
  --rosa-y: 0px;
  --rosa-escala: 0.94;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--rosa-largura);
  aspect-ratio: 4 / 5;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + var(--rosa-y)), 0) scale(var(--rosa-escala));
  transition:
    opacity 3.4s var(--suave),
    transform 4s var(--suave);
  /* micro-respiração: propriedade "scale" independe do transform de posição */
  animation: respirar-rosa 9s ease-in-out infinite alternate;
}

@keyframes respirar-rosa {
  from { scale: 1; }
  to   { scale: 1.012; }
}

/* Presença da rosa: posição pela cena, intensidade pela luz */
body[data-cena="rosa"] .rosa {
  --rosa-y: var(--rosa-alto);
  --rosa-escala: 1;
  opacity: 0.8;
}

body[data-cena="rosa"][data-luz="revelacao"] .rosa {
  opacity: 1;
  transition-duration: var(--dur-luz), 4s;
}

body[data-cena="mensagem"] .rosa {
  --rosa-escala: 1.04;
  opacity: 0.2;
}

body[data-cena="mensagem"][data-luz="plena"] .rosa {
  opacity: 0.34;
  transition-duration: var(--dur-luz), 4s;
}

body[data-cena="climax"] .rosa {
  --rosa-escala: 1.06;
  opacity: 0.06;
}

body[data-cena="climax"][data-luz="suspensao"] .rosa {
  opacity: 0;
}

body[data-cena="assinatura"] .rosa {
  --rosa-escala: 1;
  opacity: 0.14;
}

.rosa__luz {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 48%, rgba(240, 200, 160, 0.16) 0%, rgba(160, 36, 58, 0.12) 30%, transparent 62%);
  opacity: 0;
  transition: opacity 4s var(--suave) 0.8s;
}

body[data-cena="rosa"] .rosa__luz {
  opacity: 0.7;
}

body[data-luz="revelacao"] .rosa__luz,
body[data-luz="plena"] .rosa__luz {
  opacity: 1;
}

.rosa__imagem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
}

.rosa--com-imagem .rosa__imagem {
  visibility: visible;
}

.rosa--com-imagem .rosa__fallback {
  display: none;
}

/* Fallback: rosa estilizada vista de cima, traço dourado fino sobre vinho */
.rosa__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px rgba(110, 20, 38, 0.55));
}

.petala {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  border: 1px solid rgba(201, 169, 106, 0.42);
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse 80% 70% at 50% 16%, rgba(118, 24, 42, 0.5) 0%, rgba(58, 10, 22, 0.55) 55%, rgba(26, 4, 10, 0.7) 100%);
  box-shadow: inset 0 12px 20px rgba(240, 200, 170, 0.04);
  transform-origin: 50% 100%;
  transform: rotate(var(--r));
}

.petala--externa {
  --w: 38%;
  --h: 47%;
}

.petala--media {
  --w: 28%;
  --h: 34%;
  border-color: rgba(214, 184, 122, 0.45);
}

.petala--interna {
  --w: 18%;
  --h: 21%;
  border-color: rgba(230, 207, 156, 0.55);
  background: radial-gradient(ellipse 80% 70% at 50% 20%, rgba(132, 30, 50, 0.7) 0%, rgba(66, 10, 24, 0.85) 70%);
}

.rosa__miolo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11%;
  aspect-ratio: 1;
  border: 1px solid rgba(230, 207, 156, 0.55);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(150, 44, 64, 0.9), rgba(52, 8, 18, 1) 75%);
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   FASE 2 — texto sob a rosa
   -------------------------------------------------------------------------- */

.cena--rosa {
  justify-content: flex-end;
  padding-bottom: calc(var(--base) + 11vh);
}

/* --------------------------------------------------------------------------
   FASE 4 — Clímax
   -------------------------------------------------------------------------- */

.climax__par {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.destaque {
  position: relative;
  padding-bottom: 1.6rem;
  text-wrap: balance;
  font-size: clamp(2.2rem, 10.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--dourado-claro);
  /* brilho suave atrás da frase (funciona também com background-clip: text) */
  filter: drop-shadow(0 0 22px rgba(201, 169, 106, 0.28));
  --dur-revelar: 2.6s;
  --deslocamento: 6px;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .destaque {
    background: linear-gradient(180deg, #f6e8c8 0%, var(--dourado-claro) 45%, var(--dourado) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Filete dourado que se abre */
.destaque::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3.5rem;
  height: 1px;
  margin-left: -1.75rem;
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
  transform: scaleX(0);
  transition: transform 2.4s var(--suave) 1.2s;
}

.destaque.is-visivel::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   FASE 5 — Assinatura
   -------------------------------------------------------------------------- */

.marca {
  position: relative;
  padding-bottom: 1.1rem;
  font-size: clamp(1.3rem, 6vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--champagne);
  /* compensa o letter-spacing final */
  margin-right: -0.24em;
  --dur-revelar: 2.2s;
}

.marca::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.5rem;
  height: 1px;
  margin-left: calc(-1.25rem - 0.12em);
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
}

.slogan {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  font-style: italic;
  color: rgba(232, 217, 188, 0.82);
}

.eco {
  max-width: 24ch;
  margin-top: 2.6rem;
  font-size: clamp(1.02rem, 4.3vw, 1.25rem);
  line-height: 1.5;
  color: rgba(245, 238, 228, 0.8);
  text-wrap: balance;
}

/* Ação principal (compra): o único elemento com contorno e fundo */
.convite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  max-width: 22rem;
  margin-top: 2rem;
  padding: 1rem 1.8rem;
  border: 1px solid rgba(201, 169, 106, 0.6);
  border-radius: 999px;
  background: rgba(201, 169, 106, 0.08);
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
}

.convite:active {
  background: rgba(201, 169, 106, 0.16);
}

@media (hover: hover) {
  .convite:hover {
    border-color: rgba(201, 169, 106, 0.85);
  }
}

/* Ação secundária (indicação): texto + link sublinhado, sem contorno de botão */
.indicacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
}

.indicacao__pergunta {
  font-size: clamp(0.95rem, 4vw, 1.1rem);
  font-style: italic;
  color: rgba(232, 217, 188, 0.72);
}

.indicacao__acao {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  color: var(--dourado-claro);
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: rgba(201, 169, 106, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
}

@media (hover: hover) {
  .indicacao__acao:hover {
    text-decoration-color: var(--dourado);
  }
}

/* --------------------------------------------------------------------------
   Controle de áudio
   -------------------------------------------------------------------------- */

.audio {
  position: fixed;
  z-index: 10;
  top: calc(env(safe-area-inset-top) + 0.9rem);
  right: calc(env(safe-area-inset-right) + 0.9rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(201, 169, 106, 0.3);
  border-radius: 999px;
  background: rgba(14, 4, 6, 0.5);
  color: var(--champagne);
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1.6s var(--suave);
}

.audio.is-visivel {
  opacity: 0.85;
}

.audio__icone {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio__icone--som {
  display: none;
}

.audio.is-tocando {
  justify-content: center;
  padding: 0.55rem;
}

.audio.is-tocando .audio__icone--som {
  display: block;
}

.audio.is-tocando .audio__icone--mudo,
.audio.is-tocando .audio__rotulo {
  display: none;
}

/* --------------------------------------------------------------------------
   Telas maiores
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --margem: 3rem;
  }

  .cena--rosa {
    padding-bottom: calc(var(--base) + 7vh);
  }
}

/* --------------------------------------------------------------------------
   Movimento reduzido: sem deslocamentos, sem animações contínuas,
   fades curtos. A narrativa e os textos permanecem os mesmos.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-revelar: 0.8s;
    --dur-cena: 0.6s;
    --deslocamento: 0px;
    --atraso-linha: 250ms;
    --dur-luz: 1.2s;
  }

  .ambiente__luz,
  .toque::before,
  .rosa {
    animation: none;
  }

  .ambiente__particulas {
    animation: none;
    opacity: 0.7;
  }

  .rosa,
  body[data-cena] .rosa {
    --rosa-y: var(--rosa-alto);
    --rosa-escala: 1;
    transition: opacity 1.2s ease;
  }

  .rosa__luz,
  .ambiente__veu,
  .ambiente__luz {
    transition-duration: 1.2s;
  }

  .destaque {
    --dur-revelar: 1s;
  }

  .destaque::after {
    transform: none;
    transition: none;
  }
}