:root {
  --wp-bg-image: url('<%= asset_path('bg/bg_2.png') %>');
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.animate-fadeIn { animation: fadeIn 1s ease-out; }
.animate-slideInLeft { animation: slideInLeft 1s ease-out; }
.animate-slideInRight { animation: slideInRight 1s ease-out; }

.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-600 { animation-delay: 600ms; }
.animation-delay-800 { animation-delay: 800ms; }
.animation-delay-1000 { animation-delay: 1000ms; }
.animation-delay-1200 { animation-delay: 1200ms; }

.animate-spin.slow {
  animation: spin 10s linear infinite;
}

.animate-count {
  transition: content 2s ease-out;
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes orbit-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.animate-orbit {
  animation: orbit 24s linear infinite;
}

.animate-orbit-reverse {
  animation: orbit-reverse 24s linear infinite;
}

/* ── Hero AI hosts: Claude, ChatGPT and Codex plugged into RobinReach ──
   The three hosts carry the hero's promise, so each one is a named chip riding
   the ring around the bird rather than a bare icon: a white holder keeps every
   brand mark legible in both themes, and the blue ring plus glow lifts the
   chips above the floating platform cards they sit on top of. */
.aih {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 270px;
  height: 270px;
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .aih { width: 400px; height: 400px; }
}

.aih-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aih-ring-track,
.aih-ring-flow {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.aih-ring-track {
  stroke: rgba(53, 109, 255, 0.32);
  stroke-width: 1.5px;
  stroke-dasharray: 2 4;
}

.aih-ring-flow {
  stroke: #356dff;
  stroke-width: 2px;
  stroke-dasharray: 16 267;
  animation: aih-flow 7s linear infinite;
}

.dark .aih-ring-track { stroke: rgba(126, 163, 255, 0.34); }
.dark .aih-ring-flow  { stroke: #7ea3ff; }

@keyframes aih-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -282.7; }
}

.aih-node {
  position: absolute;
  width: 0;
  height: 0;
  animation: aih-bob 5.5s ease-in-out infinite;
}

.aih-node--claude  { left: 50%; top: 5%; }
.aih-node--chatgpt { left: 11%; top: 72.5%; animation-duration: 6.5s; animation-delay: -2s; }
.aih-node--codex   { left: 89%; top: 72.5%; animation-duration: 7.5s; animation-delay: -4s; }

@keyframes aih-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* The chip: brand mark plus name on one surface, ringed in RobinReach blue so
   the hosts outrank the platform stat cards behind them. */
.aih-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 9px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.45),
              0 0 0 1.5px rgba(53, 109, 255, 0.35),
              0 0 0 6px rgba(53, 109, 255, 0.10);
}

.dark .aih-chip {
  background: #111827;
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.85),
              0 0 0 1.5px rgba(126, 163, 255, 0.45),
              0 0 0 6px rgba(53, 109, 255, 0.16),
              0 0 34px rgba(53, 109, 255, 0.30);
}

.aih-tile {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.aih-node--claude .aih-tile { background: #faf9f5; }

.aih-logo {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
     object-fit: contain;
}

.aih-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
  white-space: nowrap;
}

.dark .aih-name { color: #f8fafc; }

.aih-state {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #16a34a;
}

.dark .aih-state { color: #4ade80; }

.aih-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

@media (min-width: 1024px) {
  .aih-state { display: inline-flex; }
  .aih-chip { flex-direction: row; gap: 11px; padding: 10px 18px 10px 10px; border-radius: 22px; }
  .aih-tile { width: 52px; height: 52px; border-radius: 16px; }
  .aih-logo { width: 32px; height: 32px; }
  .aih-name { align-items: flex-start; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .aih-node, .aih-ring-flow { animation: none; }
}