/*
 * CareHub+ — Apresentação premium / Palco, fundo e cromo
 *
 * Palco fixo 1920x1080 escalado por transform: scale() (letterbox em fundo
 * roxo profundo). Aqui ficam: a aurora animada, o grão, a vinheta, a barra de
 * progresso de marca, o HUD (pontinhos + atalhos), o cursor auto-oculto, a
 * tipografia cinética base e a vitrine do celular (moldura 3D flutuante com
 * glow e sombra longa, composição herdada do game-site). Só anima transform e
 * opacity. Respeita prefers-reduced-motion.
 *
 * Author: Vitoria Lana
 * Created on: 23/10/2026
 * Version: 1.0.0
 * Squad: CareHub Plus
 */

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

html,
body {
  margin: 0;
  height: 100%;
  background: var(--letterbox);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--text-primary);
}

body {
  display: grid;
  place-items: center;
}

body.is-hud-hidden,
body.is-hud-hidden * {
  cursor: none;
}

/* ---------- Viewport escalado ---------- */
#viewport {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: center center;
  will-change: transform;
}

/* ---------- Palco 1920x1080 ---------- */
#stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(130% 120% at 50% 0%, #241a4d 0%, #14102B 55%, #0d0a1f 100%);
}

/* ---------- Aurora (3 blobs com blur grande, movimento lento) ---------- */
.aurora {
  position: absolute;
  inset: -20%;
  z-index: var(--z-aurora);
  filter: blur(120px);
  opacity: .9;
  pointer-events: none;
}

.aurora .blob {
  position: absolute;
  width: 48%;
  height: 48%;
  border-radius: var(--radius-full);
  will-change: transform;
}

.blob-1 {
  left: 2%;
  top: 6%;
  background: var(--primary);
  animation: drift-1 26s var(--ease-in-out) infinite alternate;
}

.blob-2 {
  right: 0%;
  top: 18%;
  background: var(--accent-pink);
  animation: drift-2 32s var(--ease-in-out) infinite alternate;
}

.blob-3 {
  left: 28%;
  bottom: -8%;
  background: var(--info);
  opacity: .7;
  animation: drift-3 38s var(--ease-in-out) infinite alternate;
}

.blob-4 {
  right: 24%;
  top: -10%;
  background: var(--primary-light);
  opacity: .6;
  animation: drift-1 30s var(--ease-in-out) infinite alternate-reverse;
}

@keyframes drift-1 { to { transform: translate3d(14%, 10%, 0) scale(1.15); } }
@keyframes drift-2 { to { transform: translate3d(-12%, 14%, 0) scale(1.2); } }
@keyframes drift-3 { to { transform: translate3d(10%, -12%, 0) scale(1.1); } }

/* Cenas claras: a aurora recua e o palco fica branco/lilás para dar ritmo. */
#stage[data-tone="light"] {
  background: radial-gradient(130% 120% at 50% 0%, #FFFFFF 0%, #F3EFFF 55%, #ECE4FB 100%);
}

#stage[data-tone="light"] .aurora { opacity: .35; }

/* ---------- Grão + vinheta ---------- */
.grain {
  position: absolute;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgb(10 7 20 / .55) 100%);
}

#stage[data-tone="light"] .vignette {
  background: radial-gradient(120% 100% at 50% 50%, transparent 60%, rgb(90 68 168 / .14) 100%);
}

/* ---------- Barra de progresso de marca ---------- */
#progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  z-index: var(--z-progress);
  background: rgb(255 255 255 / .08);
}

#progress .bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-progress);
  box-shadow: 0 0 16px var(--glow-primary);
  transform-origin: left center;
}

/* ---------- HUD (pontinhos de cena + dica de atalhos) ---------- */
#hud {
  position: absolute;
  left: 50%;
  bottom: var(--space-32);
  transform: translateX(-50%);
  z-index: var(--z-hud);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  transition: opacity var(--dur-standard) var(--ease-soft);
}

body.is-hud-hidden #hud { opacity: 0; pointer-events: none; }

.hud-dots {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  background: rgb(20 16 43 / .5);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .1);
}

.hud-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / .3);
  cursor: pointer;
  transition: transform var(--dur-micro), background var(--dur-micro);
}

.hud-dots button:hover { transform: scale(1.3); }

.hud-dots button.is-active {
  background: var(--primary);
  box-shadow: 0 0 10px var(--glow-primary);
  transform: scale(1.3);
}

.hud-hint {
  font-size: var(--fs-11);
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  color: rgb(255 255 255 / .55);
}

/* ---------- Cenas ---------- */
.scene {
  position: absolute;
  inset: 0;
  z-index: var(--z-scene);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- Tipografia cinética base ---------- */
.kicker {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-24);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
}

/* A cor base (--primary) some sobre os blobs da aurora (mesma cor) e sobre o
   fundo claro quase branco. Cada tom ganha uma cor com contraste garantido,
   no mesmo padrão já usado em .headline/.subline/.caption abaixo. */
#stage[data-tone="dark"] .kicker {
  color: var(--pink-light);
  text-shadow: 0 2px 14px rgb(13 10 31 / .65);
}
#stage[data-tone="light"] .kicker { color: var(--primary-dark); }

#stage[data-tone="dark"] .headline { color: var(--text-inverse); }
#stage[data-tone="light"] .headline { color: var(--text-primary); }

.headline {
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--fs-96);
  line-height: var(--lh-tight);
  margin: 0;
  max-width: 1400px;
}

.headline .word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Palavra em destaque: o recorte em gradiente (background-clip: text) usava
   um gradiente claro (lilás/rosa/azul) que quase desaparece tanto sobre o
   fundo claro quase branco quanto sobre os blobs da aurora no fundo escuro
   — nem o halo de text-shadow por trás resolvia. Uma cor sólida, com
   contraste garantido por tom, lê bem sem precisar de efeito nenhum. */
#stage[data-tone="dark"] .headline .hl { color: var(--accent-pink); }
#stage[data-tone="light"] .headline .hl { color: var(--primary-dark); }

.subline {
  font-family: var(--font-body);
  font-weight: var(--fw-500);
  font-size: var(--fs-40);
  line-height: var(--lh-body);
  margin: var(--space-24) 0 0;
  max-width: 1200px;
}

#stage[data-tone="dark"] .subline { color: rgb(255 255 255 / .82); }
#stage[data-tone="light"] .subline { color: var(--text-secondary); }

.center-copy {
  text-align: center;
  padding: var(--space-80);
  max-width: 1500px;
}

/* ---------- Legenda inferior (apoio de cena) ---------- */
.caption {
  position: absolute;
  left: 50%;
  bottom: var(--space-96);
  transform: translateX(-50%);
  max-width: 1100px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: var(--fw-500);
  font-size: var(--fs-40);
  line-height: var(--lh-body);
}

#stage[data-tone="dark"] .caption { color: rgb(255 255 255 / .9); }
#stage[data-tone="light"] .caption { color: var(--text-secondary); }

.caption .hl {
  color: var(--primary);
  font-weight: var(--fw-700);
}

/* ---------- Celular / vitrine (composição herdada do game-site) ---------- */
.showcase {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--cam-perspective);
}

.device-glow {
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  filter: blur(40px);
  opacity: .5;
  -webkit-mask-image: var(--mask-soft);
  mask-image: var(--mask-soft);
  pointer-events: none;
}

/* Moldura idêntica à vitrine do game-site (.shot-frame--large): bezel escuro,
   padding fino assimétrico e cantos suaves. Ângulo 3D, glow e flutuação da
   apresentação ficam preservados. */
.device {
  position: relative;
  width: var(--device-w);
  height: var(--device-h);
  border-radius: var(--device-radius);
  background: var(--bezel);
  padding: var(--device-pad-top) var(--device-pad-side) var(--device-pad-bottom);
  box-shadow: var(--shadow-device);
  transform: rotateY(-16deg) rotateX(5deg) rotateZ(-1deg);
  transform-style: preserve-3d;
  will-change: transform;
  animation: float-device 7s var(--ease-in-out) infinite alternate;
}

/* Variantes de ângulo por cena, aplicadas via classe no .device */
.device.is-front { transform: rotateY(-4deg) rotateX(2deg); }
.device.is-left { transform: rotateY(-20deg) rotateX(6deg) rotateZ(-2deg); }
.device.is-right { transform: rotateY(18deg) rotateX(6deg) rotateZ(2deg); }
.device.is-flat { transform: rotateY(0deg) rotateX(0deg); }

/* Dois celulares lado a lado flutuam em contratempo para dar profundidade. */
.device.is-right { animation-delay: -3.5s; }

@keyframes float-device {
  from { translate: 0 -10px; }
  to { translate: 0 10px; }
}

/* Notch-pílula no topo da moldura, como no .shot-notch da vitrine do site. */
.device-notch {
  position: absolute;
  top: calc(var(--device-pad-top) / 2 - var(--device-notch-h) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: var(--device-notch-w);
  height: var(--device-notch-h);
  background: var(--text-secondary);
  border-radius: var(--radius-full);
  z-index: 5;
}

.device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--device-screen-radius);
  overflow: hidden;
  background: var(--bg);
}

/* ---------- Elementos flutuantes (parallax, glassmorphism) ---------- */
.floater {
  position: absolute;
  z-index: var(--z-float);
  will-change: transform, opacity;
}

.glass {
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-16);
  background: rgb(20 16 43 / .55);
  border: 1px solid rgb(255 255 255 / .25);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgb(20 16 43 / .3);
  color: var(--text-inverse);
  font-weight: var(--fw-600);
  font-size: var(--fs-24);
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
}

#stage[data-tone="light"] .glass {
  background: rgb(255 255 255 / .7);
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: var(--shadow-accent);
}

/* Personagens flutuantes (astros) */
.cast {
  position: absolute;
  z-index: var(--z-float);
  height: 420px;
  width: auto;
  filter: drop-shadow(0 30px 40px rgb(90 68 168 / .45));
  will-change: transform, opacity;
  pointer-events: none;
}

/* ---------- Parallax: personagens flutuam continuamente ----------
   Depois do pop-in de entrada (feito via animation inline pela engine), a
   engine troca a animação para uma destas, que faz o personagem subir e
   descer de leve, em contratempo entre si, criando profundidade real de
   parallax. Só anima transform (translate), então cor, traço e proporção
   da imagem ficam intactos. Amplitudes e tempos diferentes por "faixa"
   (near flutua mais e mais rápido; far, mais sutil). */
@keyframes float-cast-near {
  from { translate: 0 -16px; }
  to { translate: 0 14px; }
}
@keyframes float-cast-mid {
  from { translate: 0 -11px; }
  to { translate: 0 9px; }
}
@keyframes float-cast-far {
  from { translate: 0 -7px; }
  to { translate: 0 6px; }
}

.cast.is-floating.float-near { animation: float-cast-near 5.5s var(--ease-in-out) infinite alternate; }
.cast.is-floating.float-mid  { animation: float-cast-mid 6.5s var(--ease-in-out) infinite alternate; }
.cast.is-floating.float-far  { animation: float-cast-far 7.5s var(--ease-in-out) infinite alternate; }

/* Defasagem para nunca flutuarem em sincronia (parallax mais crível). */
.cast.is-floating.delay-1 { animation-delay: -1.3s; }
.cast.is-floating.delay-2 { animation-delay: -2.6s; }
.cast.is-floating.delay-3 { animation-delay: -4s; }
.cast.is-floating.delay-4 { animation-delay: -5.3s; }

/* ---------- Camadas de profundidade em relação ao celular ----------
   Controle explícito de quem fica na frente e quem fica atrás da moldura,
   em vez de depender só da ordem no HTML. O celular vive em --z-scene;
   "front" sobe acima dele, "back" desce para trás (mas acima do fundo). */
.cast.cast--front { z-index: var(--z-float); }
.cast.cast--back  { z-index: var(--z-scene); filter: drop-shadow(0 24px 34px rgb(90 68 168 / .35)) brightness(.96); }

/* ---------- Cena de destaque: personagem "sai" de dentro da tela ----------
   O personagem nasce recortado e pequeno, ancorado na tela do celular, e
   cresce saltando para fora da moldura, com a sombra colorida acompanhando.
   Só transform + opacity + filter (drop-shadow); a imagem nunca é esticada,
   então proporção, cor e traço permanecem iguais. transform-origin no pé
   para a impressão de que ele apoia e pula. */
.cast.cast--pop-out {
  z-index: var(--z-float);
  transform-origin: 50% 100%;
}

@keyframes cast-burst-out {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(.42);
    filter: drop-shadow(0 10px 16px rgb(90 68 168 / .3));
  }
  55% {
    opacity: 1;
    transform: translateY(-26px) scale(1.12);
    filter: drop-shadow(0 46px 60px rgb(167 139 250 / .55));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 34px 46px rgb(90 68 168 / .45));
  }
}

/* Logo / marca */
.brand-logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  line-height: 1;
}

.brand-logo .mark {
  font-size: var(--fs-180);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--shadow-glow-text);
}

.brand-logo .plus {
  font-size: var(--fs-128);
  color: var(--accent-pink);
}

/* ---------- Logo com halo de marca (efeito "burst" da intro do game-site) ----
   O logo-imagem recebe um disco de gradiente de marca borrado e mascarado por
   trás, igual ao #intro do site, que a engine faz pulsar suavemente ao entrar. */
.brand-hero {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-hero .brand-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  filter: blur(40px);
  opacity: .75;
  -webkit-mask-image: var(--mask-soft);
  mask-image: var(--mask-soft);
  pointer-events: none;
  z-index: 0;
}

.brand-hero .brand-img {
  position: relative;
  z-index: 1;
  /* Mesma pílula branca do logo na intro do game-site (.intro-logo em
     cards.css): sem o slogan como texto solto, o logo precisa desse
     contraste para não se perder no fundo escuro do palco. content-box
     mantém a largura definida inline no <img>, somando o padding por fora. */
  box-sizing: content-box;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  background: var(--bg);
  box-shadow: var(--shadow-card);
}

/* ---------- Cortina de transição (blob roxo que cobre e revela) ---------- */
#curtain {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
}

#curtain .blob-wipe {
  width: 140vmax;
  height: 140vmax;
  border-radius: var(--radius-full);
  background: radial-gradient(closest-side, var(--primary) 0%, var(--primary-dark) 70%, var(--primary-dark) 100%);
  transform: scale(0);
  will-change: transform;
}

/* ---------- Áudio opcional ---------- */
#bgm { display: none; }

/* ---------- Ajustes de alta resolução (até 4K) ---------- */
/* O palco é escalado por JS, então nada aqui depende de vw. */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora .blob,
  .device,
  .cast.is-floating,
  .cast.cast--pop-out {
    animation: none !important;
  }

  .scene {
    transition: opacity var(--dur-micro) linear;
  }
}