/* ============================================================
   MH ENHANCE — Premium visual layer for hosting.metropolitanhost.com
   Purpose: Elevate static sections to feel alive, guided, premium
   v1.0 | Production ready
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  --mhe-green:   #39d98a;
  --mhe-dark:    #0d1117;
  --mhe-card:    #161b27;
  --mhe-border:  #1e2533;
  --mhe-muted:   #8892a4;
  --mhe-ease:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scroll Reveal System ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .mhe-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s var(--mhe-ease), transform 0.65s var(--mhe-ease);
  }
  .mhe-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  .mhe-reveal--left  { transform: translateX(-20px); }
  .mhe-reveal--right { transform: translateX(20px); }
  .mhe-reveal--left.is-visible,
  .mhe-reveal--right.is-visible { transform: none; }

  .mhe-reveal[data-delay="1"]  { transition-delay: 0.08s; }
  .mhe-reveal[data-delay="2"]  { transition-delay: 0.16s; }
  .mhe-reveal[data-delay="3"]  { transition-delay: 0.24s; }
  .mhe-reveal[data-delay="4"]  { transition-delay: 0.32s; }
  .mhe-reveal[data-delay="5"]  { transition-delay: 0.40s; }
  .mhe-reveal[data-delay="6"]  { transition-delay: 0.48s; }
}
@media (prefers-reduced-motion: reduce) {
  .mhe-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Pulse dot keyframe ─────────────────────────────────────── */
@keyframes mhe-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(57,217,138,0.55); }
  60%       { box-shadow: 0 0 0 7px rgba(57,217,138,0);    }
}

/* ── Float keyframe ─────────────────────────────────────────── */
@keyframes mhe-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ── Fade-up keyframe (CSS-driven load animation) ─────────── */
@keyframes mhe-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ── Shimmer keyframe ────────────────────────────────────────  */
@keyframes mhe-shimmer {
  0%, 100% { box-shadow: 0 0 0 1px rgba(57,217,138,0.28), 0 0 24px rgba(57,217,138,0.08); }
  50%       { box-shadow: 0 0 0 1px rgba(57,217,138,0.60), 0 0 40px rgba(57,217,138,0.18); }
}

/* ── Gradient pan keyframe ───────────────────────────────────  */
@keyframes mhe-grad-pan {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ── Button glow pulse ───────────────────────────────────────  */
@keyframes mhe-btn-glow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(57,217,138,0.45); }
  60%       { box-shadow: 0 0 0 10px rgba(57,217,138,0);   }
}

/* ============================================================
   HERO — Homepage
   ============================================================ */

/* Glow breathes */
@media (prefers-reduced-motion: no-preference) {
  .mhh-hero__glow {
    animation: mhe-float 7s ease-in-out infinite;
  }
}

/* Subtle green radial tint above hero */
.mhh-hero {
  position: relative;
  overflow: hidden;
}
.mhh-hero::after {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(57,217,138,0.065) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.mhh-hero__inner { position: relative; z-index: 1; }

/* Hero text: CSS-driven stagger on page load */
@media (prefers-reduced-motion: no-preference) {
  .mhh-hero__badge { animation: mhe-fade-up 0.55s var(--mhe-ease) 0.05s both; }
  .mhh-hero__h1    { animation: mhe-fade-up 0.6s  var(--mhe-ease) 0.18s both; }
  .mhh-hero__sub   { animation: mhe-fade-up 0.6s  var(--mhe-ease) 0.32s both; }
  .mhh-hero__btns  { animation: mhe-fade-up 0.6s  var(--mhe-ease) 0.45s both; }
  .mhh-hero__trust { animation: mhe-fade-up 0.6s  var(--mhe-ease) 0.58s both; }
}

/* Badge pulse dot */
.mhh-hero__badge .dot,
.hero__trust-dot {
  animation: mhe-dot-pulse 2.4s ease-in-out infinite;
}

/* Trust items */
.mhh-hero__trust-item {
  transition: color 0.2s;
  cursor: default;
}
.mhh-hero__trust-item:hover { color: #c8d6e5; }

/* Uptime visual bar (injected by JS) */
.mhe-uptime-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: rgba(57,217,138,0.05);
  border: 1px solid rgba(57,217,138,0.14);
  border-radius: 10px;
  margin: 20px auto 0;
  max-width: 560px;
}
.mhe-uptime-bar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mhe-muted);
  white-space: nowrap;
}
.mhe-uptime-bar__segs {
  display: flex;
  gap: 2px;
  flex: 1;
  align-items: center;
}
.mhe-uptime-bar__seg {
  flex: 1;
  height: 18px;
  border-radius: 2px;
  background: var(--mhe-green);
  opacity: 0.7;
}
.mhe-uptime-bar__seg--down {
  background: rgba(255,255,255,0.1);
  opacity: 1;
}
.mhe-uptime-bar__pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--mhe-green);
  white-space: nowrap;
}

/* ============================================================
   DOMAIN BAR
   ============================================================ */
.mhh-domain-bar__link {
  transition: color 0.18s, transform 0.15s;
}
.mhh-domain-bar__link:hover { transform: translateX(3px); }

.mhh-domain-bar__tlds span {
  transition: color 0.18s, background 0.18s;
  cursor: default;
}
.mhh-domain-bar__tlds span:not(.tld--more):hover {
  color: var(--mhe-green);
  background: rgba(57,217,138,0.1);
  border-radius: 4px;
}

/* ============================================================
   PLAN CARDS — Homepage
   ============================================================ */
.mhh-plans { position: relative; }

.mhh-plan-card {
  transition: border-color 0.22s, transform 0.28s var(--mhe-ease), box-shadow 0.28s var(--mhe-ease);
  transform-style: flat;
}
.mhh-plan-card:hover {
  border-color: rgba(57,217,138,0.45);
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.4), 0 0 0 1px rgba(57,217,138,0.12);
}
@media (prefers-reduced-motion: no-preference) {
  .mhh-plan-card--featured {
    animation: mhe-shimmer 3.8s ease-in-out infinite;
  }
}
.mhh-plan-card__btn {
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
}
.mhh-plan-card__btn:hover {
  background: #2fc97a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(57,217,138,0.3);
}

/* ============================================================
   WHY US — Homepage
   ============================================================ */
.mhh-why { position: relative; }
.mhh-why__card {
  transition: border-color 0.22s, transform 0.25s var(--mhe-ease), box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.mhh-why__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(57,217,138,0.06) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.mhh-why__card:hover {
  border-color: rgba(57,217,138,0.3);
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.3);
}
.mhh-why__card:hover::before { opacity: 1; }
.mhh-why__icon {
  transition: transform 0.3s var(--mhe-ease);
}
.mhh-why__card:hover .mhh-why__icon {
  transform: scale(1.18) rotate(-6deg);
}

/* ============================================================
   CTA — Homepage
   ============================================================ */
.mhh-cta {
  background: linear-gradient(135deg,
    rgba(57,217,138,0.12) 0%,
    #0d1117 45%,
    rgba(57,217,138,0.06) 100%);
  background-size: 200% 200%;
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .mhh-cta { animation: mhe-grad-pan 9s ease-in-out infinite; }
}
@media (prefers-reduced-motion: no-preference) {
  .mhh-cta .btn-green {
    animation: mhe-btn-glow 2.8s ease-in-out infinite;
  }
}

/* ============================================================
   FAQ — All pages
   ============================================================ */
.mhh-faq__item {
  transition: background 0.2s;
}
.mhh-faq__item[open] {
  background: rgba(57,217,138,0.025);
}
.mhh-faq__item[open] > .mhh-faq__q {
  color: var(--mhe-green);
}
@keyframes mhe-faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .mhh-faq__item[open] .mhh-faq__a {
    animation: mhe-faq-in 0.22s var(--mhe-ease) forwards;
  }
}

/* ============================================================
   ABOUT — Hero
   ============================================================ */
.mha-hero {
  position: relative;
  overflow: hidden;
}
.mha-hero::after {
  content: '';
  position: absolute;
  top: -60px;
  left: -10%;
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, rgba(57,217,138,0.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.mha-hero__inner { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .mha-hero__eyebrow { animation: mhe-fade-up 0.5s var(--mhe-ease) 0.05s both; }
  .mha-hero__h1      { animation: mhe-fade-up 0.6s var(--mhe-ease) 0.18s both; }
  .mha-hero__sub     { animation: mhe-fade-up 0.6s var(--mhe-ease) 0.32s both; }
  .mha-hero__btns    { animation: mhe-fade-up 0.6s var(--mhe-ease) 0.46s both; }
}

/* ============================================================
   ABOUT — Stats bar
   ============================================================ */
.mha-stat {
  cursor: default;
  transition: transform 0.2s var(--mhe-ease);
}
.mha-stat:hover { transform: translateY(-3px); }
.mha-stat__num  { transition: color 0.25s; }
.mha-stat:hover .mha-stat__num { color: #fff; }

/* ============================================================
   ABOUT — Story cards
   ============================================================ */
.mha-story__card {
  transition: transform 0.26s var(--mhe-ease), border-color 0.2s, box-shadow 0.26s;
  position: relative;
  overflow: hidden;
}
.mha-story__card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mhe-green), transparent);
  transform: scaleX(0);
  transition: transform 0.38s var(--mhe-ease);
}
.mha-story__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(0,0,0,0.35);
  border-color: rgba(57,217,138,0.22);
}
.mha-story__card:hover::after { transform: scaleX(1); }

/* story card emoji icon hover */
.mha-story__card-icon {
  transition: transform 0.3s var(--mhe-ease);
  display: block;
}
.mha-story__card:hover .mha-story__card-icon {
  transform: scale(1.18) rotate(-4deg);
}

/* ============================================================
   ABOUT — Infrastructure grid
   ============================================================ */
.mha-infra__item {
  transition: transform 0.25s var(--mhe-ease), border-color 0.2s, box-shadow 0.25s;
  position: relative;
  overflow: hidden;
}
.mha-infra__item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(57,217,138,0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.28s;
  pointer-events: none;
}
.mha-infra__item:hover {
  transform: translateY(-5px);
  border-color: rgba(57,217,138,0.28);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.mha-infra__item:hover::before { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .mha-infra__item:hover .mha-infra__icon i {
    animation: mhe-float 1.6s ease-in-out infinite;
  }
}

/* ============================================================
   ABOUT — NYC section
   ============================================================ */
.mha-nyc__dot--ny { animation: mhe-dot-pulse 2.2s ease-in-out infinite; }
.mha-nyc__dot--az { animation: mhe-dot-pulse 2.2s ease-in-out 1.1s infinite; }

/* Animated connection line */
@keyframes mhe-line-draw {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}
@media (prefers-reduced-motion: no-preference) {
  .mha-nyc__map-line.is-visible {
    animation: mhe-line-draw 0.9s var(--mhe-ease) forwards;
  }
}

/* NYC check list items */
.mha-nyc__list li {
  transition: color 0.18s, transform 0.18s;
}
.mha-nyc__list li:hover {
  color: #c8d6e5;
  transform: translateX(4px);
}

/* ============================================================
   ABOUT — Values section
   ============================================================ */
.mha-values__item {
  transition: transform 0.25s var(--mhe-ease);
  cursor: default;
}
.mha-values__item:hover { transform: translateY(-4px); }
.mha-values__num {
  transition: color 0.28s, transform 0.28s var(--mhe-ease);
}
.mha-values__item:hover .mha-values__num {
  color: var(--mhe-green);
  transform: scale(1.08);
}

/* ============================================================
   ABOUT — CTA
   ============================================================ */
.mha-cta {
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .mha-cta .btn-green {
    animation: mhe-btn-glow 2.8s ease-in-out infinite;
  }
}

/* ============================================================
   HOSTING CATEGORY — Hero (WordPress Hosting etc.)
   ============================================================ */
.mhh-cat-hero {
  position: relative;
  overflow: hidden;
}
.mhh-cat-hero::after {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 320px;
  background: radial-gradient(ellipse, rgba(57,217,138,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.mhh-cat-hero > div { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .mhh-cat-hero__eyebrow { animation: mhe-fade-up 0.5s var(--mhe-ease) 0.05s both; }
  .mhh-cat-hero__h1      { animation: mhe-fade-up 0.6s var(--mhe-ease) 0.18s both; }
  .mhh-cat-hero__sub     { animation: mhe-fade-up 0.6s var(--mhe-ease) 0.32s both; }
}

/* ============================================================
   HOSTING CATEGORY — Pricing cards
   ============================================================ */
.mhh-price-card {
  transition: border-color 0.22s, transform 0.28s var(--mhe-ease), box-shadow 0.28s;
}
.mhh-price-card:hover {
  border-color: rgba(57,217,138,0.45);
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.38), 0 0 0 1px rgba(57,217,138,0.1);
}
@media (prefers-reduced-motion: no-preference) {
  .mhh-price-card--featured {
    animation: mhe-shimmer 3.8s ease-in-out infinite;
  }
}
.mhh-price-card__btn {
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
}
.mhh-price-card__btn:hover {
  background: #2fc97a;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(57,217,138,0.28);
}

/* ============================================================
   GLOBAL — Live badge component
   ============================================================ */
.mhe-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mhe-green);
  background: rgba(57,217,138,0.09);
  border: 1px solid rgba(57,217,138,0.22);
  border-radius: 40px;
  padding: 5px 13px;
}
.mhe-live-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mhe-green);
  flex-shrink: 0;
  animation: mhe-dot-pulse 2s ease-in-out infinite;
}

/* ============================================================
   GLOBAL — Section separator accent
   ============================================================ */
.mhe-sep {
  display: block;
  width: 44px;
  height: 3px;
  background: linear-gradient(90deg, var(--mhe-green), transparent);
  border-radius: 2px;
  margin: 0 auto 28px;
}

/* ============================================================
   RESPONSIVE — Reduce motion budget on mobile
   ============================================================ */
@media (max-width: 768px) {
  .mhh-plan-card:hover   { transform: translateY(-4px); }
  .mhh-price-card:hover  { transform: translateY(-4px); }
  .mha-story__card:hover { transform: translateY(-3px); }
  .mha-infra__item:hover { transform: translateY(-3px); }
}