/* ============================================================================
   MCT CHEMICALS — WEBSITE 2.0
   FILE 2 of N: LIVING HERO + HOTSPOT SYSTEM  (styles)
   ----------------------------------------------------------------------------
   Depends on design-system.css (tokens). Pairs with js/hero.js (behaviour).

   Structure:
     .hero
       .hero__stage        cinematic dark background + parallax planes + hotspots
       .hero__content      headline / dual-identity / CTAs / trust badges
   The "living" layer (parallax drift, light breathing, hotspot pulse) is CSS
   ambient animation, paused off-screen by hero.js and killed under
   prefers-reduced-motion. If CSS/JS never load, the static building + real
   hotspot links still render (progressive enhancement).
   ========================================================================== */

.hero {
  position: relative;
  color: var(--text-on-dark);
  background: var(--hero-grad);
  overflow: hidden;
  isolation: isolate;
}

/* the whole hero is a "dark context" so buttons/badges adopt light variants */
.hero.on-dark { }

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: center;
  gap: var(--space-7);
  min-height: min(88vh, 900px);
  padding-block: var(--space-8);
}
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; min-height: auto; gap: var(--space-6); }
}

/* ----------------------------------------------------------------------------
   CONTENT COLUMN
---------------------------------------------------------------------------- */
.hero__content { position: relative; z-index: 2; max-width: 34rem; }

.hero__eyebrow { color: var(--accent); margin-bottom: var(--space-4); }

.hero__headline { color: var(--text-on-dark); margin-bottom: var(--space-4); }
.hero__headline .acc { color: var(--accent); }

.hero__sub {
  color: var(--c-slate-300);
  font-size: var(--type-body-l);
  margin-bottom: var(--space-6);
  max-width: 32rem;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero__trust-item { display: flex; align-items: center; gap: var(--space-2); max-width: 15rem; }
.hero__trust-item svg { flex: none; width: 26px; height: 26px; color: var(--accent); }
.hero__trust-item b { display: block; font-size: var(--type-small); color: var(--text-on-dark); font-weight: var(--fw-semibold); }
.hero__trust-item span { font-size: var(--type-small); color: var(--c-slate-400); }

/* ----------------------------------------------------------------------------
   STAGE COLUMN  (the living building)
---------------------------------------------------------------------------- */
.hero__stage {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 1000px) {
  .hero__stage { aspect-ratio: 16 / 11; margin-top: var(--space-4); }
}

/* parallax planes stack — the JS nudges --px/--py per plane; CSS drifts ambient */
.hero__planes { position: absolute; inset: 0; }
.hero__plane {
  position: absolute; inset: -4%;   /* slight overscan so parallax never shows an edge */
  width: 108%; height: 108%;
  will-change: transform;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 600ms var(--ease-standard);
}
/* the placeholder SVG fills the stage; real render swaps the <img>/<svg> src only */
.hero__plane svg, .hero__plane img { width: 100%; height: 100%; object-fit: cover; }

/* ambient "breathing" light overlay (opacity only) */
.hero__light {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 50% at 72% 22%, rgba(233,114,28,0.28), transparent 70%);
  animation: heroBreath var(--dur-ambient) ease-in-out infinite;
}
@keyframes heroBreath {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.95; }
}

/* subtle vignette to seat hotspots */
.hero__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(6,12,20,0.45) 100%);
}

/* ----------------------------------------------------------------------------
   HOTSPOTS
   Each is a real <a>/<button>. Positioned by inline --x/--y (percent).
---------------------------------------------------------------------------- */
.hero__hotspots { position: absolute; inset: 0; z-index: 3; }

.hotspot {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-on-dark);
}
/* the visible pin */
.hotspot__dot {
  position: relative; width: 14px; height: 14px; border-radius: var(--radius-pill);
  background: var(--accent); box-shadow: 0 0 0 4px rgba(233,114,28,0.25);
}
/* pulsing ring (ambient, transform/opacity only) */
.hotspot__dot::before {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid var(--accent);
  animation: hotspotPulse 2500ms var(--ease-standard) infinite;
}
@keyframes hotspotPulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.hotspot:hover .hotspot__dot,
.hotspot:focus-visible .hotspot__dot { box-shadow: 0 0 0 6px rgba(233,114,28,0.35); }
.hotspot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-pill); }

/* hover/focus solution card */
.hotspot__card {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  width: max-content; max-width: 260px;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-panel);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.hotspot:hover .hotspot__card,
.hotspot:focus-visible .hotspot__card {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.hotspot__card b { display: block; font-size: var(--type-small); color: var(--text-on-dark); }
.hotspot__card span { display: block; font-size: var(--type-small); color: var(--c-slate-300); margin-top: 2px; }
.hotspot__card em {
  display: inline-block; margin-top: var(--space-2); font-style: normal;
  font-size: var(--type-small); font-weight: var(--fw-semibold); color: var(--accent);
}
/* card arrow */
.hotspot__card::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--glass-border);
}

@media (prefers-reduced-motion: reduce) {
  .hotspot__dot::before { animation: none; }
  .hero__light { animation: none; opacity: 0.7; }
  .hero__plane { transition: none; }
}

/* ----------------------------------------------------------------------------
   MOBILE HOTSPOT LIST
   On small screens the pins are hidden and a tappable list is shown instead
   (built by hero.js from the same data). Desktop hides the list.
---------------------------------------------------------------------------- */
.hero__hotspot-list { display: none; }

@media (max-width: 720px) {
  .hero__hotspots { display: none; }        /* no pin cluster on phones */
  .hero__hotspot-list {
    display: block; margin-top: var(--space-5);
    border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-4);
  }
  .hero__hotspot-list h2 { font-size: var(--type-small); color: var(--c-slate-400);
    text-transform: uppercase; letter-spacing: var(--tracking-overline); margin-bottom: var(--space-3); }
  .hero__hotspot-list ul { list-style: none; display: grid; gap: var(--space-2); }
  .hero__hotspot-list a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-md); color: var(--text-on-dark); font-weight: var(--fw-medium);
  }
  .hero__hotspot-list a:hover, .hero__hotspot-list a:focus-visible { background: rgba(255,255,255,0.09); }
  .hero__hotspot-list a span { color: var(--accent); }
}

/* ----------------------------------------------------------------------------
   STATS BAR (sits directly under hero, still dark)
---------------------------------------------------------------------------- */
.hero-stats {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(6,12,20,0.4);
}
.hero-stats__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4); padding-block: var(--space-5);
}
@media (max-width: 900px) { .hero-stats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .hero-stats__grid { grid-template-columns: repeat(2, 1fr); } }
.hero-stat { text-align: left; }
.hero-stat b {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.75rem; color: var(--text-on-dark); font-variant-numeric: tabular-nums;
  display: block; line-height: 1.1;
}
.hero-stat span { font-size: var(--type-small); color: var(--c-slate-400); }