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

:root {
  --purple-deep: #2d0a5e;
  --purple-mid: #5b1fa8;
  --purple-bright: #9b4dff;
  --gold: #ffd54f;
  --gold-dark: #f5a623;
  --whatsapp: #25d366;
  --whatsapp-dark: #128c7e;
  --white: #ffffff;
  --shadow: rgba(20, 0, 50, 0.55);

  /* Escala fluida — recalculada pelo JS em resize */
  --vw: 1vw;
  --vh: 1vh;
  --vmin: 1vmin;
  --vmax: 1vmax;
  --content-max: min(92vw, 28rem);
  --content-gap: clamp(0.75rem, 2.5vmin, 1.75rem);
  --content-pad-x: clamp(1rem, 4vw, 2.5rem);
  --content-pad-bottom: clamp(1.25rem, 10vmin, 14vh);
  --title-size: clamp(1.1rem, 4.5vmin + 0.5rem, 2.75rem);
  --title-stroke: clamp(1px, 0.35vmin, 2px);
  --cta-font: clamp(0.875rem, 2.8vmin + 0.35rem, 1.35rem);
  --cta-pad-y: clamp(0.75rem, 2vmin, 1.15rem);
  --cta-pad-x: clamp(1.25rem, 5vw, 2.5rem);
  --cta-icon: clamp(1.25rem, 4vmin, 1.85rem);
  --cta-max-width: min(100%, 26rem);
  --bg-position: center top;
  --content-justify: flex-end;
  --overlay-height: 50%;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  min-height: 100%;
  min-height: 100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
}

body {
  font-family: "Fredoka", system-ui, sans-serif;
  color: var(--white);
  background: var(--purple-deep);
  overflow: hidden;
}

/* ---- Cena animada (background) ---- */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Cor de fallback atrás da imagem */
.scene__backdrop {
  position: absolute;
  inset: 0;
  background: var(--purple-deep);
  pointer-events: none;
}

.scene__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  contain: strict;
}

.scene__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Fundo em tela cheia; micro-movimento sem zoom (mantém nitidez) */
.scene__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-position);
  filter: none;
  image-rendering: auto;
  image-rendering: high-quality;
  transform: translateZ(0);
  animation: bg-drift 18s ease-in-out infinite alternate;
}

@keyframes bg-drift {
  0%   { object-position: var(--bg-position); }
  100% { object-position: center 3%; }
}

/* Efeitos acima da imagem — opacidade baixa para não “lavar” a arte */
.scene__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene__overlay {
  position: absolute;
  inset: auto 0 0;
  height: min(var(--overlay-height), 42vh);
  background: linear-gradient(
    to top,
    rgba(35, 8, 72, 0.88) 0%,
    rgba(45, 10, 94, 0.4) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.scene__rays,
.scene__glow {
  position: absolute;
  inset: 0;
}

.scene__rays {
  background: conic-gradient(
    from 0deg at 50% 32%,
    transparent 0deg,
    rgba(180, 100, 255, 0.12) 30deg,
    transparent 60deg,
    rgba(200, 120, 255, 0.1) 120deg,
    transparent 150deg,
    rgba(160, 80, 255, 0.1) 210deg,
    transparent 240deg,
    rgba(190, 110, 255, 0.08) 300deg,
    transparent 360deg
  );
  animation: rays-spin 22s linear infinite;
  opacity: 0.75;
  mix-blend-mode: screen;
}

.scene__glow {
  background: radial-gradient(
    ellipse 70% 50% at 50% 32%,
    rgba(200, 130, 255, 0.35) 0%,
    rgba(120, 40, 200, 0.12) 45%,
    transparent 70%
  );
  animation: glow-pulse 3.5s ease-in-out infinite;
  opacity: 0.85;
}

.scene__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 60%
  );
  background-size: 200% 200%;
  animation: shimmer-sweep 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; opacity: 0.3; }
  50%  { opacity: 0.7; }
  100% { background-position: -100% 0; opacity: 0.3; }
}

.scene__halftone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(8%, 18vw, 18%);
  opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1.5px, transparent 1.5px);
  background-size: clamp(6px, 1.5vmin, 10px) clamp(6px, 1.5vmin, 10px);
  animation: halftone-drift 6s ease-in-out infinite alternate;
}

.scene__halftone--left { left: 0; }
.scene__halftone--right { right: 0; animation-delay: -3s; }

.spark {
  position: absolute;
  width: clamp(4px, 1.2vmin, 10px);
  height: clamp(4px, 1.2vmin, 10px);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px 4px rgba(255, 213, 79, 0.7);
  animation: spark-float 5s ease-in-out infinite;
}

.spark--1 { top: 18%; left: 12%; }
.spark--2 { top: 28%; right: 15%; animation-delay: -1.2s; }
.spark--3 { top: 55%; left: 8%; animation-delay: -2.4s; }
.spark--4 { top: 62%; right: 10%; animation-delay: -0.8s; }
.spark--5 { top: 40%; left: 50%; animation-delay: -3.5s; }
.spark--6 { top: 12%; right: 22%; width: 5px; height: 5px; animation-delay: -4.5s; }

/* Partículas decorativas */
.particle {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: particle-float 7s ease-in-out infinite;
}

.particle--coin {
  width: clamp(10px, 2.5vmin, 18px);
  height: clamp(10px, 2.5vmin, 18px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6b0, var(--gold) 45%, var(--gold-dark) 100%);
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.8);
}

.particle--star {
  font-size: clamp(0.65rem, 2vmin, 1rem);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 213, 79, 0.9);
  animation-name: star-twinkle;
}

.particle--1 { top: 72%; left: 6%; animation-delay: 0s; }
.particle--2 { top: 48%; right: 6%; animation-delay: -2.5s; animation-duration: 9s; }
.particle--3 { top: 30%; left: 18%; animation-delay: -4s; animation-duration: 8s; }
.particle--4 { top: 22%; right: 28%; animation-delay: -1s; }
.particle--5 { top: 65%; right: 20%; animation-delay: -3.2s; }

@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translateY(20px) translateX(0) rotate(0deg) scale(0.6);
  }
  15% { opacity: 1; }
  50% {
    transform: translateY(-40px) translateX(12px) rotate(180deg) scale(1);
  }
  85% { opacity: 0.8; }
  100% {
    opacity: 0;
    transform: translateY(-80px) translateX(-8px) rotate(360deg) scale(0.5);
  }
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  20%      { opacity: 1; transform: scale(1.2) rotate(20deg); }
  50%      { opacity: 0.6; transform: scale(0.9) rotate(-10deg); }
  70%      { opacity: 1; transform: scale(1.1) rotate(15deg); }
}

@keyframes rays-spin {
  from { transform: rotate(0deg) scale(1.15); }
  to   { transform: rotate(360deg) scale(1.15); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

@keyframes halftone-drift {
  0%   { opacity: 0.2; transform: translateY(0); }
  100% { opacity: 0.45; transform: translateY(12px); }
}

@keyframes spark-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50%      { transform: translateY(-18px) scale(1.3); opacity: 1; }
}

/* ---- Conteúdo sobre o fundo ---- */

.content {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: var(--content-justify);
  width: 100%;
  padding:
    max(0.75rem, env(safe-area-inset-top))
    max(var(--content-pad-x), env(safe-area-inset-right))
    max(var(--content-pad-bottom), env(safe-area-inset-bottom))
    max(var(--content-pad-x), env(safe-area-inset-left));
  text-align: center;
  gap: var(--content-gap);
  pointer-events: none;
}

.content a {
  pointer-events: auto;
}

.content__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-max);
  gap: var(--content-gap);
}

.title--enter {
  animation:
    title-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
    title-glow 3s ease-in-out 0.9s infinite;
}

.cta--enter {
  animation:
    cta-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
    cta-gradient 5s ease 1.2s infinite,
    cta-float 3s ease-in-out 1.2s infinite,
    cta-glow 2.5s ease-in-out 1.2s infinite;
}

@keyframes title-enter {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cta-enter {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.title {
  width: 100%;
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--white);
  text-shadow:
    0 0 20px rgba(180, 100, 255, 0.8),
    0 3px 0 var(--purple-deep),
    0 4px 0 #3d0d7a,
    0 5px 0 #2a0650,
    0 6px 12px var(--shadow);
  -webkit-text-stroke: var(--title-stroke) #4a148c;
  paint-order: stroke fill;
}

@keyframes title-glow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(200, 140, 255, 0.5));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(255, 213, 79, 0.75));
    transform: scale(1.02);
  }
}

/* ---- Botão CTA ---- */

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 2vmin, 0.75rem);
  width: 100%;
  max-width: var(--cta-max-width);
  min-height: max(44px, 2.75rem);
  padding: var(--cta-pad-y) var(--cta-pad-x);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--cta-font);
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--white);
  background: linear-gradient(
    135deg,
    var(--whatsapp) 0%,
    #2ee06a 35%,
    var(--gold) 65%,
    var(--whatsapp-dark) 100%
  );
  background-size: 300% 300%;
  box-shadow:
    0 0 0 clamp(2px, 0.5vmin, 3px) rgba(255, 255, 255, 0.35),
    0 0 0 clamp(4px, 1vmin, 6px) rgba(91, 31, 168, 0.5),
    0 clamp(4px, 1.2vmin, 8px) 0 #0d5c34,
    0 clamp(8px, 2vmin, 12px) clamp(16px, 4vmin, 28px) var(--shadow),
    0 0 40px rgba(37, 211, 102, 0.45);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta:not(.cta--enter) {
  animation:
    cta-gradient 5s ease infinite,
    cta-float 3s ease-in-out infinite,
    cta-glow 2.5s ease-in-out infinite;
}

.cta:hover {
  animation: cta-gradient 3s ease infinite, cta-glow 1.5s ease-in-out infinite;
  transform: translateY(-5px) scale(1.04);
}

.cta__pulse {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: cta-pulse-ring 2.2s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes cta-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  70%, 100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

.cta:active {
  transform: translateY(4px) scale(0.98);
}

.cta__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: cta-shine 3s ease-in-out infinite;
  pointer-events: none;
}

.cta__icon {
  display: flex;
  flex-shrink: 0;
  width: var(--cta-icon);
  height: var(--cta-icon);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  animation: icon-wiggle 4s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes icon-wiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  90%           { transform: rotate(-12deg); }
  94%           { transform: rotate(10deg); }
  97%           { transform: rotate(-6deg); }
}

.cta__icon svg {
  width: 100%;
  height: 100%;
}

.cta__text {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  text-wrap: balance;
}

@keyframes cta-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes cta-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes cta-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.35),
      0 0 0 6px rgba(91, 31, 168, 0.5),
      0 8px 0 #0d5c34,
      0 12px 28px var(--shadow),
      0 0 30px rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.45),
      0 0 0 6px rgba(155, 77, 255, 0.65),
      0 8px 0 #0d5c34,
      0 12px 28px var(--shadow),
      0 0 55px rgba(255, 213, 79, 0.55),
      0 0 45px rgba(37, 211, 102, 0.55);
  }
}

@keyframes cta-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Estados via JS (data-* no html) ---- */

/* Celular retrato */
html[data-viewport="xs"][data-orientation="portrait"],
html[data-viewport="sm"][data-orientation="portrait"] {
  --overlay-height: 55%;
  --content-max: min(94vw, 22rem);
}

/* Celular paisagem / altura baixa */
html[data-orientation="landscape"],
html[data-short="true"] {
  --overlay-height: 65%;
  --content-justify: center;
  --content-pad-bottom: clamp(0.75rem, 4vmin, 2rem);
  --content-gap: clamp(0.5rem, 2vmin, 1rem);
  --title-size: clamp(0.95rem, 3.5vmin + 0.25rem, 1.65rem);
  --cta-font: clamp(0.8rem, 2.5vmin, 1rem);
  --cta-pad-y: clamp(0.6rem, 1.5vmin, 0.85rem);
}

html[data-short="true"] .spark,
html[data-short="true"] .particle {
  opacity: 0.35;
  transform: scale(0.7);
  animation-duration: 10s;
}

/* Tablet */
html[data-viewport="md"] {
  --content-max: min(85vw, 32rem);
  --cta-max-width: min(100%, 22rem);
}

/* Desktop */
html[data-viewport="lg"],
html[data-viewport="xl"] {
  --content-max: 36rem;
  --cta-max-width: 24rem;
  --content-pad-bottom: clamp(2rem, 8vh, 10rem);
}

/* Telas muito largas */
/* Telas muito altas e estreitas */
@media (max-aspect-ratio: 9/16) {
  :root {
    --overlay-height: 58%;
    --content-pad-bottom: clamp(1.5rem, 12vmin, 18vh);
  }
}

@media (min-aspect-ratio: 21/9) {
  :root {
    --content-max: 40rem;
  }
}

@media (max-width: 479px) and (orientation: portrait) {
  :root {
    --overlay-height: 55%;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --content-justify: center;
    --content-pad-bottom: 1rem;
    --title-size: clamp(0.9rem, 4vw, 1.4rem);
  }
}

@media (min-width: 768px) {
  :root {
    --content-max: min(80vw, 32rem);
  }
}

@media (min-width: 1200px) {
  :root {
    --content-max: 36rem;
    --title-size: clamp(1.75rem, 2.5vw, 2.75rem);
  }
}

@media (min-width: 1920px) {
  :root {
    --title-size: 2.75rem;
    --cta-font: 1.35rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .cta:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene__img,
  .scene__fx .scene__rays,
  .scene__fx .scene__glow,
  .scene__shimmer,
  .scene__halftone,
  .spark,
  .particle,
  .title,
  .title--enter,
  .cta,
  .cta--enter,
  .cta__pulse,
  .cta__icon {
    animation: none;
  }

  .title--enter,
  .cta--enter {
    opacity: 1;
    transform: none;
  }
}