/* ===== HERO ILLUSTRATION + LANDING MICRO-INTERACTIONS ===== */

/* --- Cinematic hero (landing) --- */
.hero--cinematic .hero-split,
.hero--cinematic .hero-visual,
.hero--cinematic .hero-left-wrap,
.hero--cinematic .hero-illustration-wrap {
  display: none !important;
}

@media (max-width: 767px) {
  .hero--cinematic {
    min-height: auto;
  }

  .hero--cinematic .hero-media {
    background-position: left top;
    background-attachment: scroll;
  }

  .hero--cinematic .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(1, 42, 74, 0.97) 0%,
      rgba(1, 42, 74, 0.9) 58%,
      rgba(1, 42, 74, 0.55) 100%
    );
  }

  .hero--cinematic .hero-inner {
    padding: 40px 20px 56px;
  }

  .hero--cinematic .hero-cta {
    width: 100%;
  }
}

/* --- Hero layout --- */
.hero-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.hero-split .hero-left {
  flex: 1 1 380px;
  max-width: 540px;
}

.hero-illustration-wrap {
  flex: 1.2 1 480px;
  max-width: 680px;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(28px);
  animation: hero-entry-wrap 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes hero-entry-wrap {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-illus {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  max-height: min(520px, 72vh);
  filter: drop-shadow(0 24px 48px rgba(1, 42, 74, 0.12));
  animation: hero-illus-float 6s ease-in-out 1s infinite;
  will-change: transform;
  transform: translateZ(0);
}

/* Main float ±10px */
@keyframes hero-illus-float {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(-10px); }
}

/* Staggered widget entry */
.hero-illus__widget {
  opacity: 0;
  animation:
    hero-widget-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hero-float-generic 4.5s ease-in-out infinite;
  animation-delay: calc(0.35s + var(--wd, 0) * 0.08s), calc(1.1s + var(--wd, 0) * 0.15s);
}

@keyframes hero-widget-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Individual floating elements */
.hero-illus__doctor {
  animation:
    hero-widget-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hero-float-doctor 4s ease-in-out infinite;
  animation-delay: 0.75s, 1.2s;
  transform-origin: 208px 187px;
  transform-box: fill-box;
}

@keyframes hero-float-doctor {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-illus__patient {
  animation:
    hero-widget-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hero-float-patient 4.2s ease-in-out infinite;
  animation-delay: 0.85s, 1.35s;
  transform-origin: 438px 193px;
  transform-box: fill-box;
}

@keyframes hero-float-patient {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.hero-illus__monitor {
  animation-delay: 0.45s, 1.05s;
  transform-origin: 164px 101px;
  transform-box: fill-box;
}

.hero-illus__hub {
  animation-delay: 0.55s, 1.15s;
  transform-origin: 328px 222px;
  transform-box: fill-box;
}

.hero-illus__records {
  animation-delay: 0.6s, 1.2s;
  transform-origin: 284px 226px;
  transform-box: fill-box;
}

.hero-illus__float-slow {
  animation:
    hero-widget-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hero-float-slow 5.5s ease-in-out infinite;
}

@keyframes hero-float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.hero-illus__icon-chat {
  animation-delay: 0.5s, 1.1s;
  transform-origin: 302px 86px;
  transform-box: fill-box;
}

/* AI triage — soft pulse + breathing glow */
.hero-illus__ai {
  animation:
    hero-widget-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    hero-ai-breathe 3s ease-in-out infinite;
  animation-delay: 0.95s, 1.4s;
  transform-origin: 452px 122px;
  transform-box: fill-box;
}

@keyframes hero-ai-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.hero-illus__ai-glow {
  animation: hero-ai-glow-pulse 3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes hero-ai-glow-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.65; }
}

.hero-illus__ai-dot {
  animation: hero-ai-dot-pulse 2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes hero-ai-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.85); opacity: 0.6; }
}

/* Connection line pulse */
.hero-illus__conn-line {
  stroke-dasharray: 6 14;
  stroke-opacity: 0.35;
  animation: hero-conn-pulse 3.5s linear infinite;
}

.hero-illus__conn-line--delay { animation-delay: 0.6s; }
.hero-illus__conn-line--delay2 { animation-delay: 1.2s; }
.hero-illus__conn-line--delay3 { animation-delay: 1.8s; }

@keyframes hero-conn-pulse {
  to { stroke-dashoffset: -40; stroke-opacity: 0.55; }
}

/* ECG + video indicator */
.hero-illus__monitor-line {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: hero-illus-ecg 2.2s linear infinite;
}

@keyframes hero-illus-ecg {
  to { stroke-dashoffset: 0; }
}

.hero-illus__video {
  animation: hero-illus-video-blink 2s ease-in-out infinite;
}

@keyframes hero-illus-video-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* --- Desktop > 1024px --- */
@media (min-width: 1025px) {
  .hero-split .hero-left {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-split .hero-title {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-split .hero-title .title-main,
  .hero-split .hero-title .title-sub {
    text-align: left !important;
  }

  .hero-split .hero-desc {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-split .hero-ctas {
    justify-content: flex-start !important;
  }

  .hero-split .hero-badge {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero-illustration-wrap {
    flex: 1.35 1 520px;
    max-width: 720px;
  }

  .hero-illus {
    max-width: 680px;
  }
}

/* --- Tablet 768–1024px --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-split {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-split .hero-left {
    flex: 1 1 100%;
    max-width: 640px;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-split .hero-title,
  .hero-split .hero-desc,
  .hero-split .hero-ctas {
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .hero-illustration-wrap {
    flex: 1 1 100%;
    max-width: 560px;
    margin-top: 12px;
  }

  .hero-illus {
    max-width: 540px;
  }
}

/* --- Mobile < 768px --- */
@media (max-width: 767px) {
  .hero-split {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .hero-split .hero-left {
    flex: 1 1 100%;
    max-width: 100%;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-split .hero-title,
  .hero-split .hero-title .title-main,
  .hero-split .hero-title .title-sub,
  .hero-split .hero-desc {
    text-align: center !important;
    align-items: center !important;
  }

  .hero-split .hero-ctas {
    justify-content: center !important;
  }

  .hero-split .hero-badge {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-illustration-wrap {
    flex: 1 1 100%;
    max-width: min(100%, 420px);
    padding: 0 8px;
  }

  .hero-illus {
    max-width: 100%;
    max-height: min(380px, 55vh);
  }
}

@media (max-width: 480px) {
  .hero-illus {
    max-height: min(320px, 50vh);
  }
}

/* ===== LANDING BUTTON MICRO-INTERACTIONS ===== */
.landing-page .cta-primary,
.landing-page .cta-secondary,
.landing-page .btn-nav-signin,
.landing-page .btn-nav-book {
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  will-change: transform;
}

.landing-page .cta-primary:hover,
.landing-page .btn-nav-book:hover {
  transform: scale(1.03) translateY(-1px);
  box-shadow: 0 14px 36px rgba(6, 147, 150, 0.38);
  opacity: 1;
}

.landing-page .cta-secondary:hover,
.landing-page .btn-nav-signin:hover {
  transform: scale(1.03) translateY(-1px);
}

.landing-page .cta-primary:active,
.landing-page .cta-secondary:active,
.landing-page .btn-nav-signin:active,
.landing-page .btn-nav-book:active {
  transform: scale(0.97);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-illustration-wrap,
  .hero-illus,
  .hero-illus__widget,
  .hero-illus__doctor,
  .hero-illus__patient,
  .hero-illus__monitor,
  .hero-illus__hub,
  .hero-illus__records,
  .hero-illus__ai,
  .hero-illus__ai-glow,
  .hero-illus__ai-dot,
  .hero-illus__conn-line,
  .hero-illus__monitor-line,
  .hero-illus__video,
  .hero-illus__float-slow,
  .hero-illus__icon-chat {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-illus__monitor-line {
    stroke-dashoffset: 0;
  }

  .landing-page .nav-links a,
  .landing-page .cta-primary,
  .landing-page .cta-secondary,
  .landing-page .btn-nav-signin,
  .landing-page .btn-nav-book {
    transition: none;
  }
}