/* =====================================================================
   hero-orbit-cinematic.css
   Layout & visual styling. Animation choreography lives em animations.js
   (GSAP timelines via FH.buildCinematicHero — variantes Black Hole,
   Magnetic, Vortex).
   ===================================================================== */

.hoc-stage {
  position: relative;
  width: 100%;
  height: 520px;
  margin-top: 8px;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}

@media (max-width: 980px) {
  .hoc-stage { height: 460px; }
}

/* Atmosphere — gradiente azul muito sutil ao redor do centro */
.hoc-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(58, 130, 246, 0.06), transparent 70%);
  pointer-events: none;
}

.hoc-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ============== EVENT HORIZON ============== */
/* Anéis sutis ao redor do centro, sugerem a "borda" do buraco negro. */
.hoc-event-horizon {
  position: absolute;
  left: 50%; top: 50%;
  pointer-events: none;
}
/* Anéis posicionados nos raios reais das órbitas (145, 215, 285).
   Diâmetros 290, 430, 570. Opacidades mais fortes pra você ver bem. */
.hoc-event-horizon .eh-ring {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(58, 130, 246, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.hoc-event-horizon .eh-r1 { width: 290px; height: 290px; }
.hoc-event-horizon .eh-r2 { width: 430px; height: 430px; border-style: dashed; border-color: rgba(58, 130, 246, 0.12); }
.hoc-event-horizon .eh-r3 { width: 570px; height: 570px; border-color: rgba(58, 130, 246, 0.09); }

/* ============== GRAVITY LINES ============== */
/* SVG paths conectando ferramentas ao centro, em arco. GSAP anima opacity. */
.hoc-gravity {
  position: absolute;
  left: 50%; top: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hoc-grav-line {
  opacity: 0;
}

/* ============== HALO RIPPLES ============== */
/* Mini ripple no centro a cada absorção. Discreto, sem glow forte. */
.hoc-halo {
  position: absolute;
  left: 50%; top: 50%;
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(58,130,246,0.18) 0%, rgba(58,130,246,0) 70%);
  will-change: transform, opacity;
}

/* ============== LOGO CENTRAL ============== */
/* LIMPO. Sem flare, sem glow azul, sem halo dramático.
   Só drop-shadow neutro discreto pra dar profundidade. */
.hoc-logo {
  position: absolute;
  left: 50%; top: 50%;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  z-index: 5;
  filter: drop-shadow(0 8px 24px rgba(16, 24, 40, 0.10));
  will-change: transform;
}
/* Aninhamento de scales: continuous growth × bump no impacto.
   Cada nível tem seu próprio transform, e os scales se multiplicam. */
.hoc-logo-scale {
  width: 100%; height: 100%;
  will-change: transform;
  transform-origin: 50% 50%;
}
.hoc-logo-bump {
  width: 100%; height: 100%;
  will-change: transform;
}
/* Row container — ícone ancorado no quadrado, wordmark absolutamente
   posicionado à direita. Wordmark transborda sem afetar o layout do ícone. */
.hoc-logo-row {
  position: relative;
  width: 100%; height: 100%;
}
.hoc-logo-inner {
  position: absolute; inset: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--brand-500);
}
.hoc-logo-inner img { width: 100%; height: 100%; display: block; }
.hoc-logo-wordmark {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--fg-strong);
  line-height: 1;
  white-space: nowrap;
}
.hoc-logo-wordmark .char {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.hoc-logo-flare { display: none; }

/* ============== TOOLS ============== */
.hoc-tools {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
}

.hoc-tool {
  position: absolute;
  left: 0; top: 0;
  /* Posição inicial via GSAP em x/y. Centralizado via translate -50%. */
  transform: translate(-50%, -50%);
  margin-left: 0;
  margin-top: 0;
  will-change: transform, opacity, filter;
}
/* Parallax depth — outer layer mais discreta */
.hoc-tool.depth-0 { z-index: 4; }
.hoc-tool.depth-1 { z-index: 3; opacity: 0.92; }
.hoc-tool.depth-2 { z-index: 2; opacity: 0.78; filter: blur(0.3px); }

/* Container do ícone — circular/rounded, fundo branco, drop-shadow leve.
   Padroniza visual independente do PNG/JPEG/WEBP de origem. */
.hoc-tool-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow:
    0 6px 16px -8px rgba(16, 24, 40, 0.18),
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 0 0 1px rgba(16, 24, 40, 0.04);
  transform: translate(-50%, -50%);
}
.hoc-tool-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* ============== REVEAL ============== */
.hoc-reveal {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: grid;
  /* Logo dockado bem à esquerda, cards ocupam ~65% da direita */
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2.0fr);
  align-items: center;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}

/* Cards no estilo "list rows" — Apple/Linear sidebar.
   Sem card/border/shadow visíveis. Apenas ícone + texto, separados por
   hairline interno. Limpo, premium, focado em leitura. */
.hoc-feature-grid {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 24px;
  padding-left: 32px;
  align-self: center;
}
@media (max-width: 980px) {
  .hoc-feature-grid { padding-left: 24px; padding-right: 24px; }
}

.hoc-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid var(--border-subtle);
  background: transparent;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.hoc-feature:last-child { border-bottom: 1px solid var(--border-subtle); }

.hoc-feature-ico {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-500);
  flex-shrink: 0;
  margin-top: 2px;
}
.hoc-feature-body .t {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-strong);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.hoc-feature-body .h {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 3px;
  line-height: 1.45;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .hoc-logo { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .hoc-logo-wordmark { font-size: 36px; left: calc(100% + 10px); }
  .hoc-tool-icon { width: 26px; height: 26px; }
  .hoc-event-horizon .eh-r1 { width: 220px; height: 220px; }
  .hoc-event-horizon .eh-r2 { width: 320px; height: 320px; }
  .hoc-event-horizon .eh-r3 { width: 420px; height: 420px; }
}

@media (max-width: 640px) {
  .hoc-stage { height: 380px; }
  .hoc-reveal { grid-template-columns: 1fr; }
  .hoc-feature-grid { grid-column: auto; padding: 0 16px; margin-top: 80px; }
  .hoc-feature { padding: 12px 4px; gap: 12px; }
  .hoc-feature-body .t { font-size: 14px; }
  .hoc-feature-body .h { font-size: 12px; }
}

@media (max-width: 480px) {
  .hoc-stage { height: 320px; }
  .hoc-logo { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .hoc-logo-wordmark { font-size: 28px; left: calc(100% + 8px); }
  .hoc-feature-grid { margin-top: 60px; }
  /* Esconde o ramo de tools/órbitas no smartphone pequeno — fica só logo
     central + cards de features. Reduz risco de overflow horizontal. */
  .hoc-tools, .hoc-event-horizon, .hoc-gravity { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hoc-tool { display: none; }
  .hoc-reveal, .hoc-reveal-headline-top { opacity: 1; }
  .hoc-feature { opacity: 1; transform: none; }
}