/* ============================================================
   HUMAYA HERO ANIMATION — Visual layer only
   Integrated with Humaya's existing hero layout.
   Uses Humaya brand variables (--yellow, --navy, --white).
   ============================================================ */

/* ── HERO LAYOUT OVERRIDE — 2-column on desktop ───────────────── */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: 72px;   /* clear fixed header */
  padding-bottom: 48px;
}

.hero .container {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Tighten hero content vertical spacing in 2-col layout */
.hero__content {
  max-width: 100%;
}

.hero__title {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
}

/* ── ANIMATED VISUAL CONTAINER ───────────────────────────────── */
.humaya-hero-visual {
  position: relative;
  isolation: isolate;
  width: min(720px, 100%);
  aspect-ratio: 4 / 5;
  justify-self: end;
  overflow: visible;
  border-radius: 28px;
  transform: translateZ(0);
}

/* Ambient glow behind the visual */
.humaya-hero-visual::before {
  content: "";
  position: absolute;
  inset: 4% -8% -3% -10%;
  z-index: -2;
  background:
    radial-gradient(circle at 63% 47%, rgba(245, 196, 0, 0.17), transparent 32%),
    radial-gradient(circle at 50% 62%, rgba(40, 140, 255, 0.16), transparent 42%);
  filter: blur(28px);
  opacity: 0.8;
}

/* Edge fade vignette */
.humaya-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 18, 32, 0.72), transparent 26%, transparent 72%, rgba(11, 18, 32, 0.12)),
    radial-gradient(circle at 62% 52%, transparent 0 42%, rgba(11, 18, 32, 0.26) 72%);
  border-radius: inherit;
}

/* Hero image */
.hero-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  filter: saturate(0.95) contrast(1.02);
  opacity: 0.95;
}

/* ── OVERLAY ELEMENTS — all absolute within .humaya-hero-visual ─ */
.hero-lines,
.sensor-node,
.cloud-badge,
.metric-stack,
.warning-card,
.outcome-badge {
  position: absolute;
  z-index: 5;
}

/* ── SVG LINES ───────────────────────────────────────────────── */
.hero-lines {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.line {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  opacity: 0.86;
  filter: url(#glow);
}

.line-a { animation: drawLine 10s ease-in-out infinite 0.8s; }
.line-b { animation: drawLine 10s ease-in-out infinite 1.2s; }
.line-c { animation: drawLine 10s ease-in-out infinite 1.6s; }
.line-d { animation: drawLine 10s ease-in-out infinite 2.0s; }
.line-e { animation: drawLine 10s ease-in-out infinite 2.4s; }

@keyframes drawLine {
  0%,  10% { stroke-dashoffset: 700; opacity: 0; }
  25%, 78% { stroke-dashoffset: 0;   opacity: 0.88; }
  92%,100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* ── SENSOR NODES ────────────────────────────────────────────── */
.sensor-node {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--yellow);
  box-shadow:
    0 0 0 8px rgba(245, 196, 0, 0.1),
    0 0 20px rgba(245, 196, 0, 0.85),
    0 0 44px rgba(245, 196, 0, 0.35);
  animation: pulseNode 2.2s ease-in-out infinite;
}

.sensor-node::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: var(--white);
  background: rgba(5, 18, 36, 0.78);
  border: 1px solid rgba(245, 196, 0, 0.36);
  border-radius: 999px;
  padding: 7px 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.sensor-node.ups    { left: 11%; top: 39%; animation-delay: 0.00s; }
.sensor-node.fridge { left: 37%; top: 32%; animation-delay: 0.35s; }
.sensor-node.motor  { left: 62%; top: 52%; animation-delay: 0.70s; }
.sensor-node.plc    { left: 82%; top: 38%; animation-delay: 1.05s; }

@keyframes pulseNode {
  0%,  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 5px rgba(245,196,0,0.1), 0 0 16px rgba(245,196,0,0.72), 0 0 35px rgba(245,196,0,0.25);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 15px rgba(245,196,0,0.02), 0 0 26px rgba(245,196,0,0.95), 0 0 62px rgba(245,196,0,0.42);
  }
}

/* ── CLOUD BADGE ─────────────────────────────────────────────── */
.cloud-badge {
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(4, 18, 35, 0.72);
  border: 1px solid rgba(245, 196, 0, 0.36);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
  animation: cloudFloat 4.2s ease-in-out infinite;
}

.cloud-badge span {
  color: var(--yellow);
  font-size: 19px;
}

@keyframes cloudFloat {
  0%,  100% { translate: 0 0;   opacity: 0.92; }
  50%        { translate: 0 -7px; opacity: 1; }
}

/* ── METRIC CARDS ────────────────────────────────────────────── */
.metric-stack {
  left: 3%;
  bottom: 9%;
  width: min(355px, 45%);
  height: 145px;
}

.metric-card {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 22px 24px;
  border-radius: 18px;
  background: rgba(5, 18, 36, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  backdrop-filter: blur(12px);
}

.metric-card span   { color: #b9c7d9; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.metric-card strong { color: var(--yellow); font-size: 38px; line-height: 1; }
.metric-card small  { color: #dce7f5; font-size: 14px; }

.card-1 { animation: rotateMetric 10s infinite  0.0s; }
.card-2 { animation: rotateMetric 10s infinite  2.5s; }
.card-3 { animation: rotateMetric 10s infinite  5.0s; }
.card-4 { animation: rotateMetric 10s infinite  7.5s; }

@keyframes rotateMetric {
  0%,   8% { opacity: 0; transform: translateY(16px) scale(0.98); }
  13%, 25% { opacity: 1; transform: translateY(0)    scale(1);    }
  31%,100% { opacity: 0; transform: translateY(-12px) scale(0.98); }
}

/* ── WARNING CARD ────────────────────────────────────────────── */
.warning-card {
  right: 7%;
  top: 17%;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 270px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(45, 18, 18, 0.82);
  border: 1px solid rgba(245, 196, 0, 0.44);
  box-shadow: 0 24px 68px rgba(0,0,0,0.32), 0 0 36px rgba(245,196,0,0.12);
  opacity: 0;
  transform: translateY(15px);
  animation: warningCycle 10s infinite;
}

.warning-card b {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--navy);
  background: var(--yellow);
  font-size: 16px;
}

.warning-card strong,
.warning-card small { display: block; }
.warning-card strong { color: var(--white); font-size: 14px; font-weight: 700; }
.warning-card small  { color: #f8d98d; font-size: 13px; margin-top: 2px; }

@keyframes warningCycle {
  0%,  55% { opacity: 0; transform: translateY(16px); }
  62%, 78% { opacity: 1; transform: translateY(0); }
  86%,100% { opacity: 0; transform: translateY(-8px); }
}

/* ── OUTCOME BADGE ───────────────────────────────────────────── */
.outcome-badge {
  right: 4%;
  bottom: 8%;
  width: 295px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(7, 30, 38, 0.86);
  border: 1px solid rgba(85, 216, 120, 0.52);
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 38px rgba(85,216,120,0.13);
  opacity: 0;
  transform: translateY(15px);
  animation: outcomeCycle 10s infinite;
}

.outcome-badge strong { display: block; color: #55d878; font-size: 17px; }
.outcome-badge span   { display: block; color: var(--white); font-size: 22px; font-weight: 900; margin-top: 5px; }

@keyframes outcomeCycle {
  0%,  74% { opacity: 0; transform: translateY(16px); }
  82%, 96% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(-8px); }
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .humaya-hero-visual {
    justify-self: center;
    width: min(640px, 100%);
    aspect-ratio: 4 / 3.6;
  }
}

@media (max-width: 768px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .humaya-hero-visual {
    width: min(540px, 100%);
    aspect-ratio: 1 / 1.05;
  }
  .sensor-node::after,
  .cloud-badge { display: none; }
  .metric-stack { width: 72%; left: 5%; bottom: 6%; }
  .warning-card,
  .outcome-badge { width: 230px; right: 5%; }
  .warning-card  { top: 8%; }
  .outcome-badge { bottom: 7%; }
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .line,
  .sensor-node,
  .cloud-badge,
  .metric-card,
  .warning-card,
  .outcome-badge { animation: none !important; }
  .line           { stroke-dashoffset: 0; opacity: 0.55; }
  .metric-card.card-1,
  .warning-card,
  .outcome-badge  { opacity: 1; transform: none; }
}