/**
 * ExcelBills V2 — Hero elite motion layer
 * GPU-friendly: opacity + transform only. Respects prefers-reduced-motion.
 */
:root {
  --eb-v2-hero-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --eb-v2-hero-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Initial hidden state (no layout shift) ── */
.hero-v3[data-eb-hero-motion] .hero-v3__cloud {
  opacity: 0;
  transition: opacity 900ms var(--eb-v2-hero-ease-soft);
}

.hero-v3[data-eb-hero-motion] [data-eb-hero] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 700ms var(--eb-v2-hero-ease),
    transform 700ms var(--eb-v2-hero-ease);
  will-change: opacity, transform;
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="subhead"] {
  transform: translate3d(0, 16px, 0);
  transition-duration: 600ms;
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="cta-primary"],
.hero-v3[data-eb-hero-motion] [data-eb-hero="cta-secondary"] {
  transform: translate3d(0, 14px, 0);
  transition-duration: 500ms;
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="chip"] {
  transform: translate3d(0, 12px, 0);
  transition-duration: 550ms;
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="star"] {
  display: inline-block;
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity 400ms var(--eb-v2-hero-ease),
    transform 400ms var(--eb-v2-hero-ease);
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="rating-text"],
.hero-v3[data-eb-hero-motion] [data-eb-hero="social-label"] {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 500ms var(--eb-v2-hero-ease),
    transform 500ms var(--eb-v2-hero-ease);
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="dashboard"] {
  opacity: 0;
  transform: translate3d(40px, 0, 0) scale(0.96);
  transition:
    opacity 900ms var(--eb-v2-hero-ease),
    transform 900ms var(--eb-v2-hero-ease);
  transform-origin: center right;
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="kpi"] {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 600ms var(--eb-v2-hero-ease),
    transform 600ms var(--eb-v2-hero-ease);
  transform-origin: center;
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="alert"] {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  transition:
    opacity 550ms var(--eb-v2-hero-ease),
    transform 550ms var(--eb-v2-hero-ease);
}

.hero-v3[data-eb-hero-motion] [data-eb-hero="bottom-kpi"] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 500ms var(--eb-v2-hero-ease),
    transform 500ms var(--eb-v2-hero-ease);
}

.hero-v3[data-eb-hero-motion] .hero-v3__chart-line {
  stroke-dasharray: var(--eb-hero-chart-len, 1200);
  stroke-dashoffset: var(--eb-hero-chart-len, 1200);
}

.hero-v3[data-eb-hero-motion] .hero-v3__chart-area {
  opacity: 0;
  transition: opacity 700ms var(--eb-v2-hero-ease);
}

.hero-v3[data-eb-hero-motion] .hero-v3__chart-tooltip {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 400ms var(--eb-v2-hero-ease), transform 400ms var(--eb-v2-hero-ease);
}

/* ── Dashboard ambient glow (behind panel only) ── */
.hero-v3__dashboard-glow {
  position: absolute;
  inset: 8% 4% 6% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 55% 45%, rgba(16, 185, 129, 0.14) 0%, rgba(139, 92, 246, 0.08) 42%, transparent 72%);
  filter: blur(48px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 1.2s var(--eb-v2-hero-ease-soft);
}

.eb-v2-hero-motion-active .hero-v3__dashboard-glow {
  opacity: 1;
  animation: eb-v2-hero-glow-drift 18s var(--eb-v2-hero-ease-soft) infinite alternate;
}

@keyframes eb-v2-hero-glow-drift {
  from { transform: translate3d(-12px, 8px, 0) scale(1); }
  to { transform: translate3d(14px, -10px, 0) scale(1.04); }
}

.hero-v3__visual {
  position: relative;
}

.hero-v3[data-eb-hero-motion] .hero-v3__command {
  position: relative;
  z-index: 1;
}

/* ── Active sequence delays ── */
.eb-v2-hero-motion-active .hero-v3__cloud {
  opacity: 1;
}

.eb-v2-hero-motion-active .hero-v3__cloud--revenue { transition-delay: 0ms; }
.eb-v2-hero-motion-active .hero-v3__cloud--cash { transition-delay: 40ms; }
.eb-v2-hero-motion-active .hero-v3__cloud--ai { transition-delay: 80ms; }

.eb-v2-hero-motion-active [data-eb-hero="badge"] { transition-delay: 150ms; }
.eb-v2-hero-motion-active [data-eb-hero="headline"][data-eb-hero-line="0"] { transition-delay: 300ms; }
.eb-v2-hero-motion-active [data-eb-hero="headline"][data-eb-hero-line="1"] { transition-delay: 380ms; }
.eb-v2-hero-motion-active [data-eb-hero="headline"][data-eb-hero-line="2"] { transition-delay: 460ms; }
.eb-v2-hero-motion-active [data-eb-hero="headline"][data-eb-hero-line="3"] { transition-delay: 540ms; }
.eb-v2-hero-motion-active [data-eb-hero="subhead"] { transition-delay: 1240ms; }
.eb-v2-hero-motion-active [data-eb-hero="cta-primary"] { transition-delay: 1900ms; }
.eb-v2-hero-motion-active [data-eb-hero="cta-secondary"] { transition-delay: 2000ms; }

.eb-v2-hero-motion-active [data-eb-hero="chip"]:nth-child(1) { transition-delay: 2180ms; }
.eb-v2-hero-motion-active [data-eb-hero="chip"]:nth-child(2) { transition-delay: 2280ms; }
.eb-v2-hero-motion-active [data-eb-hero="chip"]:nth-child(3) { transition-delay: 2380ms; }
.eb-v2-hero-motion-active [data-eb-hero="chip"]:nth-child(4) { transition-delay: 2480ms; }

.eb-v2-hero-motion-active [data-eb-hero="star"]:nth-child(1) { transition-delay: 2620ms; }
.eb-v2-hero-motion-active [data-eb-hero="star"]:nth-child(2) { transition-delay: 2670ms; }
.eb-v2-hero-motion-active [data-eb-hero="star"]:nth-child(3) { transition-delay: 2720ms; }
.eb-v2-hero-motion-active [data-eb-hero="star"]:nth-child(4) { transition-delay: 2770ms; }
.eb-v2-hero-motion-active [data-eb-hero="star"]:nth-child(5) { transition-delay: 2820ms; }
.eb-v2-hero-motion-active [data-eb-hero="rating-text"] { transition-delay: 2920ms; }
.eb-v2-hero-motion-active [data-eb-hero="social-label"] { transition-delay: 3000ms; }

.eb-v2-hero-motion-active [data-eb-hero="dashboard"] { transition-delay: 420ms; }

.eb-v2-hero-motion-active [data-eb-hero="kpi"]:nth-child(1) { transition-delay: 1320ms; }
.eb-v2-hero-motion-active [data-eb-hero="kpi"]:nth-child(2) { transition-delay: 1400ms; }
.eb-v2-hero-motion-active [data-eb-hero="kpi"]:nth-child(3) { transition-delay: 1480ms; }
.eb-v2-hero-motion-active [data-eb-hero="kpi"]:nth-child(4) { transition-delay: 1560ms; }

.eb-v2-hero-motion-active [data-eb-hero="alert"]:nth-child(1) { transition-delay: 2100ms; }
.eb-v2-hero-motion-active [data-eb-hero="alert"]:nth-child(2) { transition-delay: 2220ms; }
.eb-v2-hero-motion-active [data-eb-hero="alert"]:nth-child(3) { transition-delay: 2340ms; }

.eb-v2-hero-motion-active [data-eb-hero="bottom-kpi"] { transition-delay: 2500ms; }

/* ── Visible state ── */
.eb-v2-hero-motion-active [data-eb-hero].is-visible,
.eb-v2-hero-motion-active [data-eb-hero="star"].is-visible,
.eb-v2-hero-motion-active [data-eb-hero="rating-text"].is-visible,
.eb-v2-hero-motion-active [data-eb-hero="social-label"].is-visible {
  opacity: 1;
  transform: none;
}

/* Health score stays centered when KPI card scales in */
.eb-v2-hero-motion-active .hero-v3__kpi--health .hero-v3__health-ring span {
  transform: translate(-50%, -50%);
}

.eb-v2-hero-motion-active .hero-v3__chart-area.is-visible {
  opacity: 1;
}

.eb-v2-hero-motion-active .hero-v3__chart-tooltip.is-visible {
  opacity: 1;
  transform: scale(1);
}

.eb-v2-hero-motion-active .hero-v3__chart-line.is-drawn {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s var(--eb-v2-hero-ease);
}

.eb-v2-hero-motion-active .hero-v3__chart-tooltip.is-pulse {
  animation: eb-v2-hero-tooltip-pulse 6s var(--eb-v2-hero-ease-soft) infinite;
}

@keyframes eb-v2-hero-tooltip-pulse {
  0%, 88%, 100% { opacity: 1; transform: scale(1); }
  94% { opacity: 0.72; transform: scale(1.06); }
}

/* ── CTA hover (motion layer only enhances existing) ── */
.eb-v2-hero-motion-active .hero-v3__cta {
  transition:
    transform 200ms var(--eb-v2-hero-ease),
    box-shadow 200ms var(--eb-v2-hero-ease),
    background 200ms ease,
    color 200ms ease,
    border-color 200ms ease;
}

.eb-v2-hero-motion-active .hero-v3__cta--primary:hover,
.eb-v2-hero-motion-active .hero-v3__cta--primary:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 14px 36px rgba(16, 185, 129, 0.28);
}

.eb-v2-hero-motion-active .hero-v3__cta--secondary:hover,
.eb-v2-hero-motion-active .hero-v3__cta--secondary:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
}

/* Counter slots (prevent CLS) — KPI values only; health score uses ring layout */
.hero-v3__kpi-value[data-eb-hero-count] {
  display: inline-block;
  min-width: 9ch;
  font-variant-numeric: tabular-nums;
}

.hero-v3__kpi--health .hero-v3__health-ring span[data-eb-hero-count] {
  font-variant-numeric: tabular-nums;
}

/* ── Scroll parallax layers ── */
  .hero-v3[data-eb-hero-motion] [data-eb-hero-scroll="content"],
  .hero-v3[data-eb-hero-motion] .hero-v3__command[data-eb-hero-scroll="dashboard"] {
    will-change: transform;
  }

/* ── Trust bar logo reveal ── */
.eb-v2-trustbar[data-eb-hero-trust] .eb-v2-trustbar__logos {
  animation: none;
}

.eb-v2-trustbar[data-eb-hero-trust] .eb-v2-trustbar__logos [data-eb-hero-trust-logo] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 550ms var(--eb-v2-hero-ease),
    transform 550ms var(--eb-v2-hero-ease);
}

.eb-v2-hero-motion-active .eb-v2-trustbar[data-eb-hero-trust] .eb-v2-trustbar__logos [data-eb-hero-trust-logo].is-visible {
  opacity: 0.65;
  transform: none;
}

.eb-v2-trustbar[data-eb-hero-trust] .eb-v2-trustbar__label {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 500ms var(--eb-v2-hero-ease),
    transform 500ms var(--eb-v2-hero-ease);
}

.eb-v2-hero-motion-active .eb-v2-trustbar[data-eb-hero-trust] .eb-v2-trustbar__label.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-v3[data-eb-hero-motion] .hero-v3__cloud,
  .hero-v3[data-eb-hero-motion] [data-eb-hero],
  .hero-v3[data-eb-hero-motion] [data-eb-hero="star"],
  .hero-v3[data-eb-hero-motion] [data-eb-hero="rating-text"],
  .hero-v3[data-eb-hero-motion] [data-eb-hero="social-label"],
  .eb-v2-trustbar[data-eb-hero-trust] .eb-v2-trustbar__logos [data-eb-hero-trust-logo],
  .eb-v2-trustbar[data-eb-hero-trust] .eb-v2-trustbar__label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .hero-v3[data-eb-hero-motion] .hero-v3__chart-line {
    stroke-dashoffset: 0 !important;
  }

  .hero-v3[data-eb-hero-motion] .hero-v3__chart-area {
    opacity: 1 !important;
  }

  .hero-v3__dashboard-glow {
    opacity: 0.6 !important;
    animation: none !important;
  }

  .hero-v3[data-eb-hero-motion] [data-eb-hero-scroll="content"],
  .hero-v3[data-eb-hero-motion] .hero-v3__command[data-eb-hero-scroll="dashboard"] {
    transform: none !important;
  }
}