/* =====================================================================
   HCP — Alexandre Rigueira
   Hub Premium de Conversão · mobile-first
   Universos: Shineray (vermelho/industrial) ↔ Sistemas reAIs (roxo/dourado)
   ===================================================================== */

:root {
  /* --- Sistemas reAIs (paleta oficial) --- */
  --black: #0A0A0F;
  --graphite: #1A1A22;
  --violet: #8B5CF6;
  --violet-deep: #6B21A8;
  --gold: #D4AF37;
  --white: #F8F8FA;

  /* --- Shineray --- */
  --shineray-red: #E30613;
  --shineray-red-soft: #ff3b46;
  --shineray-steel: #8a8f99;

  /* --- texto --- */
  --txt: #ECECF2;
  --txt-dim: #9a9aab;
  --line: rgba(255, 255, 255, 0.08);

  /* --- ambiente (controlado por data-theme via JS) --- */
  --halo-a: rgba(139, 92, 246, 0.20);   /* roxo */
  --halo-b: rgba(212, 175, 55, 0.14);   /* dourado */
  --accent: var(--violet);

  /* --- layout --- */
  --radius: 20px;
  --radius-sm: 14px;
  --gap: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Orbitron", "Exo 2", sans-serif;
  --font-title: "Exo 2", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}

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

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

body {
  font-family: var(--font-body);
  background:
    radial-gradient(95% 65% at var(--tint-pos, 50% -10%), var(--bg-tint, transparent), transparent 60%),
    radial-gradient(95% 85% at 100% 100%, var(--bg-corner, transparent), transparent 55%),
    var(--black);
  color: var(--txt);
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* transição suave dos accents ao "respirar" entre universos */
  transition: background 1.2s var(--ease);
}

a { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ===================================================================
   AMBIENTE — silêncio + profundidade (grid sutil + 2 halos que respiram)
   =================================================================== */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.ambient__grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  opacity: 0.5;
}

.ambient__halo {
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  filter: blur(60px);
  transition: background 1.4s var(--ease), transform 1.4s var(--ease);
  will-change: transform;
}
.ambient__halo--a {
  top: -25vmax; left: -20vmax;
  background: radial-gradient(circle, var(--halo-a), transparent 65%);
  animation: drift-a 18s ease-in-out infinite alternate;
}
.ambient__halo--b {
  bottom: -30vmax; right: -25vmax;
  background: radial-gradient(circle, var(--halo-b), transparent 65%);
  animation: drift-b 22s ease-in-out infinite alternate;
}

.ambient__noise {
  position: absolute; inset: 0; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-a { to { transform: translate(6vmax, 4vmax) scale(1.1); } }
@keyframes drift-b { to { transform: translate(-5vmax, -3vmax) scale(1.08); } }

/* ===================================================================
   PALCO / MOLDURA — experiência dentro de um "telefone"
   =================================================================== */
.stage {
  display: flex; justify-content: center;
  padding: 24px 16px calc(40px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}

.phone {
  position: relative;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* conteúdo do HCP acima do campo de partículas */
.phone > *:not(.phone__fx) { position: relative; z-index: 1; }

/* ===================================================================
   CAMPO DE PARTÍCULAS — dinamismo dentro do mockup do telefone
   reAIs = orbs neon (galáxia/neural) · Shineray = traços elétricos
   =================================================================== */
.phone__fx {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.phone__fx .p {
  position: absolute;
  width: var(--s, 4px); height: var(--s, 4px);
  border-radius: 50%;
  background: var(--pc, #b794ff);
  box-shadow: 0 0 calc(var(--s, 4px) * 2.4) var(--pc, #b794ff);
  opacity: 0;
  animation: drift var(--dur, 12s) linear var(--delay, 0s) infinite;
  transition: background 0.6s var(--ease), box-shadow 0.6s var(--ease);
  will-change: transform, opacity;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15%  { opacity: 0.85; }
  85%  { opacity: 0.7; }
  100% { transform: translate(var(--dx, 0), var(--dy, -90px)) scale(1.15); opacity: 0; }
}
/* reAIs — orbs redondos roxo / dourado / branco (galáxia + neural) */
body[data-theme="reais"] .phone__fx .p:nth-child(3n)   { --pc: #ffd45e; }
body[data-theme="reais"] .phone__fx .p:nth-child(3n+1) { --pc: #b794ff; }
body[data-theme="reais"] .phone__fx .p:nth-child(3n+2) { --pc: #ffffff; }
/* Shineray — traços elétricos vermelho / branco (velocidade) */
body[data-theme="shineray"] .phone__fx .p {
  border-radius: 1px;
  width: calc(var(--s, 4px) * 2.6); height: 2px;
}
body[data-theme="shineray"] .phone__fx .p:nth-child(2n)   { --pc: #ff3340; }
body[data-theme="shineray"] .phone__fx .p:nth-child(2n+1) { --pc: #ffffff; }

@media (prefers-reduced-motion: reduce) {
  .phone__fx { display: none; }
}

/* No desktop a moldura ganha aparência de aparelho premium */
@media (min-width: 768px) {
  .stage { align-items: center; padding: 40px 16px; }
  .phone {
    max-width: 400px;
    padding: 26px 20px 30px;
    border-radius: 42px;
    background: linear-gradient(180deg, rgba(26,26,34,0.65), rgba(10,10,15,0.85));
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow:
      0 0 0 9px #06060a,
      0 0 0 10px rgba(255,255,255,0.05),
      0 40px 90px -30px rgba(0,0,0,0.9);
  }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero { text-align: center; padding-top: 8px; }

.hero__avatar {
  position: relative;
  width: 104px; height: 104px;
  margin: 0 auto 18px;
}
.hero__avatar img,
.hero__avatar-ph {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 28px;
  letter-spacing: 1px;
  color: var(--white);
  background: linear-gradient(145deg, var(--violet-deep), var(--graphite) 70%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 36px -4px var(--avatar-glow, rgba(139,92,246,0.6));
  transition: box-shadow 0.8s var(--ease);
}
.hero__orbital {
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--orbital-1, var(--gold));
  border-right-color: var(--orbital-2, var(--violet));
  animation: spin 7s linear infinite;
  transition: border-color 0.8s var(--ease);
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero__name {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, 6vw, 1.95rem);
  letter-spacing: 0.5px;
  /* gradiente neon que muda por universo: roxo→dourado (reAIs) / branco→vermelho (Shineray) */
  background: linear-gradient(90deg, var(--name1, var(--violet)) 0%, var(--name2, var(--gold)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* brilho neon (iluminação) */
  filter: drop-shadow(0 0 10px var(--name-glow, rgba(139,92,246,0.5)));
  transition: filter 0.8s var(--ease);
}
/* frase fixa (igual nos dois universos) — gradiente neon temático */
.hero__line {
  margin: 12px auto 0;
  max-width: 330px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2px;
  text-align: center;
  text-wrap: balance;
  background: linear-gradient(90deg, var(--name1, var(--violet)), var(--name2, var(--gold)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px var(--name-glow, rgba(139,92,246,0.5)));
  transition: filter 0.8s var(--ease);
}
/* linha de apoio (muda por aba) — centralizada, sem órfã */
.hero__sub {
  margin: 10px auto 0;
  max-width: 300px;
  font-size: 0.88rem;
  color: var(--txt-dim);
  text-align: center;
  text-wrap: balance;
  transition: opacity 0.25s var(--ease);
}
.hero.is-swapping .hero__sub { opacity: 0; }

.dot { opacity: 0.4; margin: 0 5px; }

/* wordmark reAIs — "AI" em dourado */
.wordmark { font-weight: 700; color: var(--txt); }
.ai { color: var(--gold); }

/* ===================================================================
   CARDS
   =================================================================== */
.card {
  position: relative;
  padding: 22px 20px 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18,18,26,0.52), rgba(8,8,13,0.64));
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
/* faixa de cor superior — identidade do bloco */
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-bar, var(--line));
  opacity: 0.9;
  z-index: 2;
}

/* motion dentro dos cards: FLOWS de luz que sobem do fundo ao topo,
   da esquerda p/ direita, contidos no card (reAIs dourado/roxo · Shineray branco/vermelho) */
.card__motion { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.card__motion span {
  position: absolute; bottom: -25%;
  width: 58%; aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--ml, var(--name1)), transparent 68%);
  filter: blur(30px);
  opacity: 0;
  mix-blend-mode: screen;          /* neon: soma luz sobre o card */
  animation: flow 10s ease-in-out infinite;
}
.card__motion span:nth-child(1) { left: -12%; --ml: var(--name1); animation-duration: 9s;  animation-delay: 0s;   }
.card__motion span:nth-child(2) { left:  16%; --ml: var(--name2); animation-duration: 11s; animation-delay: 2.6s; }
.card__motion span:nth-child(3) { left:  42%; --ml: var(--name1); animation-duration: 10s; animation-delay: 5.2s; }
.card__motion span:nth-child(4) { left:  64%; --ml: var(--name2); animation-duration: 12s; animation-delay: 7.4s; }
@keyframes flow {
  0%   { transform: translate(0, 0) scale(0.7);        opacity: 0; }
  18%  { opacity: 0.5; }
  82%  { opacity: 0.42; }
  100% { transform: translate(42%, -125%) scale(1.15); opacity: 0; }
}

/* conteúdo do card sempre acima do motion */
.card > *:not(.card__motion) { position: relative; z-index: 1; }

.card__badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--txt-dim);
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 14px;
}

/* conteúdo do card acima dos flows */
.card > *:not(.card__motion) { position: relative; z-index: 1; }

/* FLOWS neon: manchas de gradiente que sobem do fundo ao topo (esq.→dir.),
   contidas no card. Cores por universo via --name1/--name2 */
.card__motion {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  border-radius: inherit;
}
.card__motion span {
  position: absolute; bottom: -10%;
  width: 55%; height: 55%; border-radius: 50%;
  filter: blur(34px);
  mix-blend-mode: screen;
  background: radial-gradient(circle, var(--c, var(--violet)) 0%, transparent 70%);
  animation: flow var(--d, 10s) ease-in-out infinite;
  will-change: transform, opacity;
}
.card__motion span:nth-child(1) { left: -12%; --c: var(--name1); --d: 9.5s;  animation-delay: 0s; }
.card__motion span:nth-child(2) { left: 18%;  --c: var(--name2); --d: 11.5s; animation-delay: -3.5s; }
.card__motion span:nth-child(3) { left: 44%;  --c: var(--name1); --d: 10.5s; animation-delay: -6.5s; }
.card__motion span:nth-child(4) { left: 70%;  --c: var(--name2); --d: 12.5s; animation-delay: -1.5s; }

@keyframes flow {
  0%   { transform: translate(-15%, 60%) scale(0.85); opacity: 0; }
  18%  { opacity: 0.55; }
  82%  { opacity: 0.5; }
  100% { transform: translate(45%, -55%) scale(1.2); opacity: 0; }
}

.card__head { margin-bottom: 14px; }

.card__title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.card__title--center { text-align: center; margin-bottom: 16px; }

.card__text {
  font-size: 0.9rem;
  color: var(--txt-dim);
  margin-bottom: 18px;
  max-width: 92%;
}

/* -------- Universo SHINERAY -------- */
.card--shineray {
  --accent-bar: linear-gradient(90deg, var(--shineray-red), transparent 80%);
}
.card--shineray .card__title { color: #fff; }
.card--shineray:hover {
  border-color: rgba(227,6,19,0.35);
  box-shadow: 0 0 40px -18px rgba(227,6,19,0.55);
}

/* -------- Universo Sistemas reAIs -------- */
.card--reais {
  --accent-bar: linear-gradient(90deg, var(--violet), transparent 50%, var(--gold));
}
.card--reais .card__title { color: #fff; }
.card--reais::after {
  /* halo dourado/roxo sutil no canto — pulso da base do card */
  content: ""; position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
  width: 70%; height: 90px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(139,92,246,0.25), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.card--reais:hover {
  border-color: rgba(139,92,246,0.35);
  box-shadow: 0 0 50px -20px rgba(139,92,246,0.6);
}

/* -------- Bloco conexão -------- */
.card--connect { --accent-bar: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* ===================================================================
   LOGOS (SVG placeholder — troque por <img>)
   =================================================================== */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo img { height: 30px; width: auto; }
.logo__mark { height: 30px; width: auto; }
.logo__word { font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; }

.logo--shineray { color: var(--shineray-red); }
.logo--shineray .logo__word { color: #fff; font-size: 1.05rem; }
.logo--reais .logo__word { font-size: 1.02rem; color: #fff; }

/* Logo oficial Shineray (texto preto) numa plaquinha clara */
.logo-plate {
  display: inline-flex; align-items: center;
  padding: 10px 16px;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff, #eef0f3);
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.85), inset 0 0 0 1px rgba(255,255,255,0.7);
}
.logo-plate img { height: 26px; width: auto; display: block; }

/* Emblema circular oficial Sistemas reAIs */
.logo-badge img {
  height: 70px; width: auto; display: block; border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(139,92,246,0.4));
}

/* Logo Shineray: glow vermelho + gradiente preto (sem plaquinha branca) */
.logo-glow {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 13px;
  background:
    radial-gradient(120% 160% at 0% 50%, rgba(227,6,19,0.30), rgba(227,6,19,0) 62%),
    linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0));
  box-shadow: 0 0 30px -12px rgba(227,6,19,0.6), inset 0 0 0 1px rgba(227,6,19,0.18);
}
.logo-glow .sh-mark {
  height: 18px; width: auto;
  filter: drop-shadow(0 0 8px rgba(227,6,19,0.75));
}
.logo-glow .sh-word {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 1.4px; font-size: 0.98rem; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}

/* ===================================================================
   BOTÕES PREMIUM + microinterações
   =================================================================== */
.links { display: flex; flex-direction: column; gap: 11px; }
.links--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.btn {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line);
  font-weight: 600; font-size: 0.92rem;
  color: var(--txt);
  overflow: hidden;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
              border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* brilho que cruza o botão no hover */
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { left: 130%; }

.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.06);
  border-color: var(--accent);
  box-shadow: 0 8px 24px -12px var(--accent);
  outline: none;
}
.btn:active { transform: translateY(0) scale(0.99); }

.btn__icon {
  flex: 0 0 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 0.95rem; font-weight: 700;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
}
.btn__label { flex: 1; }
.btn__arrow {
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  color: var(--accent);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { opacity: 1; transform: translateX(0); }

/* spotlight viajante: o realce percorre os botões em loop (classe .is-lit via JS) */
.card--reais .btn.is-lit {
  background: linear-gradient(100deg, rgba(139,92,246,0.26), rgba(212,175,55,0.16));
  border-color: rgba(139,92,246,0.55);
  box-shadow: 0 0 24px -8px var(--violet);
}
.card--reais .btn.is-lit .btn__icon { background: rgba(212,175,55,0.22); color: var(--gold); }

.card--shineray .btn.is-lit {
  background: linear-gradient(100deg, rgba(227,6,19,0.32), rgba(227,6,19,0.06));
  border-color: rgba(227,6,19,0.6);
  box-shadow: 0 0 24px -8px var(--shineray-red);
}
.card--shineray .btn.is-lit .btn__icon { background: rgba(227,6,19,0.26); color: #ff6b73; }

/* seta aparece também no botão em evidência */
.btn.is-lit .btn__arrow { opacity: 1; transform: translateX(0); }

/* mini botões (grid de contato) */
.btn--mini { flex-direction: column; gap: 7px; text-align: center; padding: 16px 8px; }
/* item ímpar sozinho na última linha ocupa a largura toda */
.links--grid .btn--mini:last-child:nth-child(odd) { grid-column: 1 / -1; }
.btn--mini .btn__icon { width: 34px; height: 34px; font-size: 1rem; }
.btn--mini .btn__label { flex: none; font-size: 0.84rem; }

/* accents por universo aplicados aos botões dentro do card */
.card--shineray .btn:hover { border-color: var(--shineray-red); box-shadow: 0 8px 24px -12px var(--shineray-red); }
.card--shineray .btn__arrow { color: var(--shineray-red-soft); }
.card--shineray .btn:hover .btn__icon { color: var(--shineray-red-soft); }

.card--reais .btn:hover { border-color: var(--violet); box-shadow: 0 8px 26px -12px var(--violet); }
.card--reais .btn__arrow { color: var(--gold); }

.card--connect .btn:hover { border-color: var(--gold); box-shadow: 0 8px 24px -12px rgba(212,175,55,0.7); }

/* ===================================================================
   SWITCHER + MORPH — bloco único que alterna entre os universos
   =================================================================== */
.switch { display: block; }

/* seletor (pílulas) */
.switcher {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; padding: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.switcher__opt {
  position: relative; z-index: 2;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-title); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.3px; color: var(--txt-dim);
  padding: 11px 8px; border-radius: 999px;
  transition: color 0.45s var(--ease);
}
.switcher__opt.is-active { color: #fff; }
.switcher__opt .ai { color: var(--gold); }

.switcher__thumb {
  position: absolute; z-index: 1; top: 5px; bottom: 5px;
  left: 5px; width: calc(50% - 7px);
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(139,92,246,0.30), rgba(212,175,55,0.16));
  border: 1px solid rgba(139,92,246,0.45);
  box-shadow: 0 6px 18px -10px rgba(139,92,246,0.8);
  transition: transform 0.55s var(--ease), background 0.55s var(--ease),
              border-color 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.switcher[data-active="shineray"] .switcher__thumb {
  transform: translateX(calc(100% + 4px));
  background: linear-gradient(100deg, rgba(227,6,19,0.32), rgba(227,6,19,0.10));
  border-color: rgba(227,6,19,0.55);
  box-shadow: 0 6px 18px -10px rgba(227,6,19,0.8);
}

/* barra de auto-rotação (cronômetro visual do "respiro") */
.switch__track {
  height: 2px; margin: 12px 6px 16px;
  border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden;
}
.switch__progress {
  display: block; height: 100%; width: 100%;
  transform-origin: left; transform: scaleX(0);
  /* gradiente: roxo→dourado (reAIs) / branco→vermelho (Shineray) */
  background: linear-gradient(90deg, var(--name1, var(--violet)), var(--name2, var(--gold)));
  box-shadow: 0 0 9px var(--name-glow, var(--accent));
  transition: box-shadow 0.6s var(--ease);
  animation: fill var(--rot, 7s) linear infinite;
}
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.switch.is-paused .switch__progress { animation-play-state: paused; }

/* wrap: moldura com gradiente fluindo + elementos atrás dos cards */
.morph-wrap {
  position: relative;
  border-radius: calc(var(--radius) + 3px);
  padding: 2px;            /* revela o anel de gradiente em volta do card */
  overflow: hidden;
  isolation: isolate;
}

/* gradiente cônico girando infinitamente (vaza sutil por trás dos cards) */
.morph-glow {
  position: absolute; inset: -65%; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg,
    var(--g1, var(--violet)), var(--g2, var(--gold)),
    var(--g3, var(--violet-deep)), var(--g1, var(--violet)));
  animation: spin 9s linear infinite;
  filter: blur(10px);
  opacity: 0.6;
  transition: opacity 0.6s var(--ease);
}

/* área que morfa — painéis empilhados, altura controlada via JS */
.morph { position: relative; z-index: 1; transition: height 0.75s var(--ease); }
.panel {
  position: absolute; top: 0; left: 0; width: 100%;
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease);
}
/* sai dissolvendo (blur) e descendo; entra com leve atraso → handoff suave, sem "bloco" */
.panel:not(.is-active) {
  opacity: 0; transform: translateY(16px) scale(0.965);
  filter: blur(9px); pointer-events: none;
}
.panel.is-active {
  opacity: 1; transform: none; filter: none;
  transition-delay: 0.14s;
}

@media (prefers-reduced-motion: reduce) {
  .switch__progress { animation: none; transform: scaleX(0); }
  .panel { transition: opacity 0.2s linear; }
  .card__motion { display: none; }
}

/* ===================================================================
   DIVISOR ENTRE UNIVERSOS
   =================================================================== */
.divider { display: flex; align-items: center; gap: 12px; padding: 2px 8px; }
.divider__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.divider__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transition: background 1.2s var(--ease), box-shadow 1.2s var(--ease);
}

/* ===================================================================
   RODAPÉ
   =================================================================== */
.foot { text-align: center; padding: 6px 0 4px; }
.foot__brand { font-size: 0.82rem; color: var(--txt-dim); }
.foot__copy { font-size: 0.74rem; color: var(--txt-dim); opacity: 0.6; margin-top: 5px; }

/* ===================================================================
   ANIMAÇÃO DE ENTRADA (reveal on scroll)
   =================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ambient__halo, .hero__orbital { animation: none; }
  * { scroll-behavior: auto; }
}

/* ===================================================================
   INTRO CINEMATOGRÁFICA
   =================================================================== */
.intro-veil {
  position: fixed; inset: 0; z-index: 80;
  background: radial-gradient(circle at 50% 42%, #16111f 0%, #08080d 58%, #050507 100%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.9s var(--ease);
}
body.is-intro { overflow: hidden; }
body.is-intro .intro-veil { opacity: 1; pointer-events: auto; }

/* hero é o protagonista — fica acima do véu e voa pro lugar no fim */
.hero { position: relative; transition: transform 0.95s cubic-bezier(.6, 0, .16, 1); }
.hero__avatar { transition: transform 0.9s var(--ease); }
body.is-intro .hero { transform: translateY(var(--introY, 0px)) scale(1.1); z-index: 90; }
body.is-intro .hero__avatar { transform: scale(1.12); }

/* glow vermelho↔roxo + linhas dourado/roxo ↔ vermelho/branco */
body.is-intro .hero__avatar img { animation: introGlow 2.4s ease-in-out infinite; }
@keyframes introGlow {
  0%, 100% { box-shadow: 0 0 48px -2px rgba(139, 92, 246, 0.85); }
  50%      { box-shadow: 0 0 48px -2px rgba(227, 6, 19, 0.85); }
}
body.is-intro .hero__orbital { animation: spin 7s linear infinite, introOrbital 2.4s ease-in-out infinite; }
@keyframes introOrbital {
  0%, 100% { border-top-color: #ffd45e; border-right-color: #b794ff; }
  50%      { border-top-color: #ffffff; border-right-color: #ff2b39; }
}

/* nome (branco → depois sweep) e frase entram em sequência via classes JS */
body.is-intro .hero__name {
  opacity: 0; transform: translateY(10px);
  background: none; -webkit-text-fill-color: #fff; color: #fff;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
body.is-intro.step-name .hero__name { opacity: 1; transform: none; }
body.is-intro.step-sweep .hero__name {
  background: linear-gradient(90deg, #b794ff, #ffd45e, #ffffff, #ff3340, #b794ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: nameSweep 3s linear infinite;
}
@keyframes nameSweep { from { background-position: 0% 0; } to { background-position: -300% 0; } }

body.is-intro .hero__line, body.is-intro .hero__sub {
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
body.is-intro.step-phrase .hero__line { opacity: 1; transform: none; }

/* resto da página oculto enquanto a intro roda */
body.is-intro .switch, body.is-intro .foot { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .phone__fx { display: none; }
}