/* ============================================
   ORION ANIMAÇÕES — Keyframes para hero1–4
   ============================================ */

/* ══════════════════════════════════════════
   HERO 1 — Três Estrelas, Três Produtos
   ══════════════════════════════════════════ */

/* Scene */
.star-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Partículas de fundo — piscam suavemente */
.bp {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: #fff;
  animation: bpTwinkle 4s ease-in-out infinite var(--d, 0s);
}

@keyframes bpTwinkle {
  0%,100% { opacity: 0.10; }
  50%      { opacity: 0.50; }
}

/* Brilho central do triângulo */
.tri-glow {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,82,255,0.10) 0%, transparent 65%);
  top: 40%; left: 22.5%;
  opacity: 0;
  pointer-events: none;
  animation: triBreath 5s ease-in-out infinite 2.8s;
}

@keyframes triBreath {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  60%  { transform: scale(1.12); opacity: 0.7; }
  100% { opacity: 0.5; transform: scale(1); }
}

/* SVG de conexão (triângulo) */
.conn-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.conn-line {
  animation: connDraw 1.1s ease forwards;
}

@keyframes connDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Estrela-produto — base ── */
.ps {
  position: absolute;
  opacity: 0;
}

.ps-float {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ps-body {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ps-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.28;
  animation: haloExpand 3.2s ease-in-out infinite;
}

@keyframes haloExpand {
  0%,100% { transform: scale(1);   opacity: 0.28; }
  50%      { transform: scale(1.5); opacity: 0.07; }
}

.ps-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  animation: corePulse 3s ease-in-out infinite;
}

@keyframes corePulse {
  0%,100% { transform: scale(1);   filter: brightness(1); }
  50%      { transform: scale(1.25); filter: brightness(1.5); }
}

.ps-ring {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0;
  animation: ringBurst 0.85s ease-out forwards;
}

@keyframes ringBurst {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(6); opacity: 0; }
}

.ps-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(7px);
  animation: infoIn 0.7s ease forwards;
}

.ps-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  opacity: 0.85;
}

.ps-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.ps-tag {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.56rem;
  color: rgba(255,255,255,0.42);
  text-align: center;
  max-width: 88px;
  line-height: 1.4;
}

@keyframes infoIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── ORION-W — topo central, roxo ── */
.ps-orionw {
  top: 8%;
  left: 50%;
  color: rgba(124,117,255,0.85);
  animation: psArriveTop 0.9s cubic-bezier(0.15,0.85,0.3,1) 0.5s forwards;
}
.ps-orionw .ps-core {
  background: #9C96FF;
  box-shadow: 0 0 10px rgba(156,150,255,1), 0 0 26px rgba(124,117,255,0.7), 0 0 52px rgba(91,82,255,0.35);
}
.ps-orionw .ps-ring  { animation-delay: 1.38s; }
.ps-orionw .ps-info  { animation-delay: 1.68s; color: #C4C0FF; }
.ps-orionw .ps-float { animation: floatV 4.2s ease-in-out infinite 2.4s; }

/* ── ZAPPIX — inferior esquerdo, laranja ── */
.ps-zappix {
  top: 56%;
  left: 5%;
  color: rgba(255,92,43,0.85);
  animation: psArriveLeft 0.9s cubic-bezier(0.15,0.85,0.3,1) 0.9s forwards;
}
.ps-zappix .ps-core {
  background: #FF7A55;
  box-shadow: 0 0 10px rgba(255,122,85,1), 0 0 26px rgba(255,92,43,0.7), 0 0 52px rgba(255,92,43,0.3);
}
.ps-zappix .ps-ring  { animation-delay: 1.78s; }
.ps-zappix .ps-info  { animation-delay: 2.08s; color: #FFB09A; }
.ps-zappix .ps-float { animation: floatV 4.6s ease-in-out infinite 2.7s; }

/* ── PRAXIS — inferior direito, teal ── */
.ps-praxis {
  top: 56%;
  right: 5%;
  color: rgba(14,165,160,0.85);
  animation: psArriveRight 0.9s cubic-bezier(0.15,0.85,0.3,1) 1.3s forwards;
}
.ps-praxis .ps-core {
  background: #2ED8D3;
  box-shadow: 0 0 10px rgba(46,216,211,1), 0 0 26px rgba(14,165,160,0.7), 0 0 52px rgba(14,165,160,0.3);
}
.ps-praxis .ps-ring  { animation-delay: 2.18s; }
.ps-praxis .ps-info  { animation-delay: 2.48s; color: #5EECEA; }
.ps-praxis .ps-float { animation: floatV 3.9s ease-in-out infinite 3.0s; }

/* ── Animações de entrada ── */
@keyframes psArriveTop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-80px) scale(0.2); }
  55%  { opacity: 1; transform: translateX(-50%) translateY(6px) scale(1.1); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes psArriveLeft {
  0%   { opacity: 0; transform: translateX(-80px) scale(0.2); }
  55%  { opacity: 1; transform: translateX(6px) scale(1.1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes psArriveRight {
  0%   { opacity: 0; transform: translateX(80px) scale(0.2); }
  55%  { opacity: 1; transform: translateX(-6px) scale(1.1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Flutuação estável — loop após entrada */
@keyframes floatV {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ══════════════════════════════════════════
   HERO 2 — Cityscape + Fluxo de Dados
   ══════════════════════════════════════════ */

@keyframes windowBlink {
  0%,100% { opacity: 0.2; background: rgba(255,200,80,0.4); }
  50%     { opacity: 1;   background: rgba(255,220,120,0.9); }
}

@keyframes dataStream {
  0%   { transform: translateY(100%); opacity: 0; }
  10%  { opacity: 0.7; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes cityGlow {
  0%,100% { filter: drop-shadow(0 0 12px rgba(91,82,255,0.3)); }
  50%     { filter: drop-shadow(0 0 30px rgba(91,82,255,0.6)); }
}

.city-scene {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.city-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  animation: cityGlow 5s ease-in-out infinite;
}

.window-light {
  animation: windowBlink 2s ease-in-out infinite;
}

.data-stream {
  position: absolute;
  width: 1px;
  height: 80px;
  background: linear-gradient(to top, transparent, var(--orion-light), transparent);
  animation: dataStream 4s linear infinite;
}

/* ══════════════════════════════════════════
   HERO 3 — Três Produtos em Órbita
   ══════════════════════════════════════════ */

@keyframes orbitSpin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}

@keyframes counterSpin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(-360deg); }
}

@keyframes centralPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(91,82,255,0.4), 0 0 40px rgba(91,82,255,0.2); }
  50%     { box-shadow: 0 0 0 20px rgba(91,82,255,0), 0 0 60px rgba(91,82,255,0.4); }
}

@keyframes cardFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

.orbit-scene {
  position: relative;
  width: 380px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(91,82,255,0.2);
}
.orbit-ring-1 { width: 100%; height: 100%; animation: orbitSpin 20s linear infinite; }
.orbit-ring-2 { width: 70%; height: 70%; animation: orbitSpin 15s linear infinite reverse; border-color: rgba(91,82,255,0.1); }

.orbit-center {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--night-mid);
  border: 1.5px solid var(--orion);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--orion-light);
  animation: centralPulse 3s ease-in-out infinite;
  z-index: 3;
}

.orbit-arm {
  position: absolute;
  width: 50%;
  height: 2px;
  top: 50%;
  left: 50%;
  transform-origin: 0% 50%;
}
.orbit-arm-1 { animation: orbitSpin 20s linear infinite; }
.orbit-arm-2 { animation: orbitSpin 22s linear infinite; transform: rotate(120deg); }
.orbit-arm-3 { animation: orbitSpin 18s linear infinite; transform: rotate(240deg); }

.orbit-card {
  position: absolute;
  right: -44px;
  top: 50%;
  transform: translateY(-50%);
  width: 88px;
  height: 56px;
  border-radius: 10px;
  background: var(--night-mid);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.orbit-card-1 { color: var(--orion-light);  border-color: rgba(91,82,255,0.4);  box-shadow: 0 0 16px rgba(91,82,255,0.3); }
.orbit-card-2 { color: var(--zappix);       border-color: rgba(255,92,43,0.4);  box-shadow: 0 0 16px rgba(255,92,43,0.3); }
.orbit-card-3 { color: var(--praxis);       border-color: rgba(14,165,160,0.4); box-shadow: 0 0 16px rgba(14,165,160,0.3); }

/* Counter-spin wrapper so card stays upright */
.orbit-card-spin-1 { animation: counterSpin 20s linear infinite; }
.orbit-card-spin-2 { animation: counterSpin 22s linear infinite; }
.orbit-card-spin-3 { animation: counterSpin 18s linear infinite; }

/* ══════════════════════════════════════════
   HERO 4 — Negócio ativo, dono dorme
   ══════════════════════════════════════════ */

@keyframes notifFloat {
  0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
  15%  { opacity: 1; transform: translateY(0)    scale(1); }
  75%  { opacity: 1; transform: translateY(-40px); }
  100% { opacity: 0; transform: translateY(-70px) scale(0.95); }
}

@keyframes screenGlow {
  0%,100% { box-shadow: 0 0 30px rgba(91,82,255,0.15), inset 0 0 20px rgba(91,82,255,0.05); }
  50%     { box-shadow: 0 0 60px rgba(91,82,255,0.35), inset 0 0 40px rgba(91,82,255,0.12); }
}

@keyframes sleepBreath {
  0%,100% { transform: scaleY(1) translateY(0); }
  50%     { transform: scaleY(0.97) translateY(1px); }
}

.sleep-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.screen-glow-wrap {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 220px;
  height: 160px;
  background: linear-gradient(135deg, var(--night-mid), rgba(91,82,255,0.08));
  border: 1px solid rgba(91,82,255,0.2);
  border-radius: 12px;
  animation: screenGlow 4s ease-in-out infinite;
  overflow: hidden;
}

.screen-lines {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.screen-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(91,82,255,0.2);
}
.screen-line.active { background: rgba(91,82,255,0.5); width: 60%; }

.desk-figure {
  position: absolute;
  bottom: 10%;
  left: 15%;
  animation: sleepBreath 3.5s ease-in-out infinite;
}

.notif-container {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 200px;
}

.notif-bubble {
  position: absolute;
  padding: 8px 14px;
  border-radius: 20px;
  background: var(--night-mid);
  border: 1px solid rgba(91,82,255,0.3);
  font-size: 0.72rem;
  color: var(--gray-400);
  white-space: nowrap;
  animation: notifFloat 5s ease-in-out infinite;
}
.notif-bubble .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orion-light);
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}
.notif-1 { left: 0; top: 0;   animation-delay: 0s; }
.notif-2 { left: 10px; top: 0; animation-delay: 1.5s; }
.notif-3 { left: 5px;  top: 0; animation-delay: 3s; }