/* OPTupply · Hero industrial-logistics presentation (panel + scale; layout JSON untouched) */

header.masthead.masthead-split:has(.masthead-visual-stage--industrial) .masthead-split-outer {
  padding-top: 2.5rem !important;
}

/* ---- Hero split: more weight to the visual column ---- */
@media (min-width: 992px) {
  header.masthead.masthead-split:has(.masthead-visual-stage--industrial) .masthead-split-outer {
    padding-top: 2.75rem !important;
  }

  header.masthead.masthead-split:has(.masthead-visual-stage--industrial) .masthead-split-row {
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.1fr); /* ~46% / 54% */
    column-gap: clamp(1.1rem, 2.4vw, 2.15rem);
    min-height: clamp(26rem, 56vh, 36rem);
  }

  header.masthead.masthead-split:has(.masthead-visual-stage--industrial) .masthead-visual {
    align-items: center;
    justify-content: center;
  }

  header.masthead.masthead-split:has(.masthead-visual-stage--industrial) .masthead-visual-stage--industrial {
    align-self: center;
    height: auto;
    width: 100%;
  }
}

/* ---- Visual column: plant panel only (centered) ---- */
.hero-industrial-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0;
}

/* Brand identity inside panel (top-left; does not alter plant framing) */
.hero-industrial-brand {
  position: absolute;
  top: clamp(0.55rem, 1.15vw, 0.8rem);
  left: clamp(0.65rem, 1.35vw, 0.95rem);
  z-index: 6;
  pointer-events: none;
  text-align: left;
  max-width: 42%;
}

.hero-industrial-brand-name {
  margin: 0;
  color: #e8eef7;
  font-size: clamp(0.78rem, 1.35vw, 0.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero-industrial-brand-sub {
  margin: 0.12rem 0 0;
  color: #7dd3fc;
  font-size: clamp(0.52rem, 0.9vw, 0.62rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* ---- Panel / marco del visual ---- */
.masthead-visual-stage--industrial {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 0;
  /* Slightly shorter frame to reduce empty air below trucks (zoom/translate unchanged) */
  aspect-ratio: 5 / 3.9;
  /* Asymmetric: tighter bottom padding; small clean margin retained */
  padding: clamp(0.58rem, 1.25vw, 0.85rem) clamp(0.7rem, 1.6vw, 1.05rem) clamp(0.16rem, 0.4vw, 0.26rem);
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(110, 150, 200, 0.22);
  background:
    radial-gradient(ellipse at 72% 18%, rgba(37, 99, 235, 0.16), transparent 42%),
    radial-gradient(ellipse at 18% 78%, rgba(56, 189, 248, 0.06), transparent 36%),
    linear-gradient(158deg, #121c30 0%, #0c1424 48%, #09101c 100%);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(148, 180, 220, 0.08),
    inset 0 -18px 36px rgba(0, 0, 0, 0.14);
}

.masthead-visual-stage--industrial::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%);
  pointer-events: none;
  z-index: 1;
}

.hero-industrial-scene {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/*
 * CAMERA / VIEWPORT
 * Window over the logical 1440×900 canvas. Zoom + pan the whole composition
 * without changing any asset x/y/scale/z.
 */
.hero-industrial-camera {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
}

/*
 * Logical canvas + global camera transform.
 * Zoom targets the industrial cluster (right/center), not empty canvas space.
 * --hero-cam-zoom / --hero-cam-x / --hero-cam-y are the only framing knobs.
 */
.hero-industrial-canvas {
  --hero-cam-zoom: 1.3;
  --hero-cam-x: -8.5%;
  --hero-cam-y: 5%;

  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  margin: 0;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transform-origin: center center;
  transform: translate(-50%, -50%) translate(var(--hero-cam-x), var(--hero-cam-y))
    scale(var(--hero-cam-zoom));
  will-change: transform;
}

.hero-industrial-floor {
  position: absolute;
  inset: 10% 4% 4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 52%, rgba(22, 41, 74, 0.38), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero-industrial-assets {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-industrial-labels {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.hero-industrial-asset {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  filter: brightness(0.94);
  transition: filter 0.35s ease;
  pointer-events: auto;
  cursor: pointer;
}

/*
 * Sequenced plant micro-motion (36s shared cycle = half previous speed; one at a time).
 * Layout left/top/scale/z unchanged — visual offsets only via translate.
 *
 * AGV      0–24%   (+75px, −35px) approved trajectory
 * Forklift 33–57%  (−65px, −52px) up-left
 * Truck    66–90%  (−32px, +14px) left on isometric corridor, 50% prior distance
 */
.hero-industrial-asset[data-id="agv"],
.hero-industrial-asset[data-id="forklift"],
.hero-industrial-asset[data-id="truck"] {
  will-change: transform;
}

.hero-industrial-asset[data-id="agv"] {
  animation: hero-agv-cruise 36s ease-in-out infinite;
}

.hero-industrial-asset[data-id="forklift"] {
  animation: hero-forklift-cruise 36s ease-in-out infinite;
}

.hero-industrial-asset[data-id="truck"] {
  animation: hero-truck-cruise 36s ease-in-out infinite;
}

@keyframes hero-agv-cruise {
  0%,
  24%,
  100% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
  }
  12% {
    transform: translate(-50%, -50%) translate3d(75px, -35px, 0);
  }
}

@keyframes hero-forklift-cruise {
  0%,
  33%,
  57%,
  100% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
  }
  45% {
    transform: translate(-50%, -50%) translate3d(-65px, -52px, 0);
  }
}

@keyframes hero-truck-cruise {
  0%,
  66%,
  90%,
  100% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
  }
  78% {
    /* Opposite of prior (+65, −28), half magnitude → left on corridor, away from reception */
    transform: translate(-50%, -50%) translate3d(-32px, 14px, 0);
  }
}

.hero-industrial-asset img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-industrial-scene[data-active] .hero-industrial-asset {
  filter: brightness(0.58);
}

.hero-industrial-scene[data-active] .hero-industrial-asset.is-on {
  filter: brightness(1.05) drop-shadow(0 0 8px rgba(56, 189, 248, 0.28));
}

/* Labels: compactos dentro del panel */
.hero-industrial-label {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.26rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.hero-industrial-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #7dd3fc 45%, #2563eb 100%);
  box-shadow: 0 0 7px rgba(56, 189, 248, 0.65);
  flex-shrink: 0;
}

.hero-industrial-label-text {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  padding: 0.16rem 0.4rem;
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.8);
  border: 1px solid rgba(125, 211, 252, 0.18);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.hero-industrial-label-num {
  color: #7dd3fc;
}

.hero-industrial-label.is-active .hero-industrial-label-text,
.hero-industrial-label:focus-visible .hero-industrial-label-text {
  border-color: rgba(125, 211, 252, 0.55);
}

.hero-industrial-label.is-flipped {
  flex-direction: row-reverse;
}

.hero-industrial-card {
  position: absolute;
  z-index: 30;
  width: min(15rem, calc(100% - 1.25rem));
  padding: 0.7rem 0.8rem 0.8rem;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(8, 14, 26, 0.92);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.hero-industrial-card.is-visible {
  opacity: 1;
  transform: none;
}

.hero-industrial-card-eyebrow {
  margin: 0 0 0.25rem;
  color: #7dd3fc;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-industrial-card-title {
  margin: 0 0 0.3rem;
  color: #e8eef7;
  font-size: 0.88rem;
  font-weight: 700;
}

.hero-industrial-card-text {
  margin: 0;
  color: #b4c0d2;
  font-size: 0.78rem;
  line-height: 1.45;
}

.hero-industrial-card-hint {
  display: none;
  margin: 0.55rem 0 0;
  color: #94a3b8;
  font-size: 0.7rem;
}

@media (min-width: 992px) {
  .masthead-visual-stage--industrial {
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 5 / 3.9;
  }

  .hero-industrial-label-text {
    font-size: 0.58rem;
    padding: 0.18rem 0.44rem;
  }
}

@media (min-width: 1200px) {
  .masthead-visual-stage--industrial {
    aspect-ratio: 5 / 3.85;
  }

  .hero-industrial-canvas {
    --hero-cam-zoom: 1.3;
    --hero-cam-x: -8.5%;
    --hero-cam-y: 5%;
  }
}

/* Tablet / stacked — milder camera zoom to avoid clipping */
@media (max-width: 991.98px) {
  .masthead-visual-stage--industrial {
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: 5 / 4;
    padding: 0.78rem 0.95rem 0.28rem;
  }

  .hero-industrial-canvas {
    --hero-cam-zoom: 1.22;
    --hero-cam-x: -8%;
    --hero-cam-y: 2.5%;
  }

  .hero-industrial-flow {
    max-width: min(36rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .hero-industrial-brand-name {
    font-size: 0.78rem;
  }

  .hero-industrial-brand-sub {
    font-size: 0.52rem;
  }

  .hero-industrial-label-text {
    font-size: 0.5rem;
    padding: 0.14rem 0.34rem;
  }

  .hero-industrial-label-dot {
    width: 7px;
    height: 7px;
  }
}

@media (max-width: 719.98px) {
  .masthead-visual-stage--industrial {
    max-width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0.62rem 0.75rem 0.22rem;
    border-radius: 22px;
  }

  .hero-industrial-canvas {
    --hero-cam-zoom: 1.16;
    --hero-cam-x: -7%;
    --hero-cam-y: 1.5%;
  }

  .hero-industrial-flow {
    max-width: 100%;
  }

  .hero-industrial-brand {
    top: 0.5rem;
    left: 0.55rem;
    max-width: 48%;
  }

  .hero-industrial-brand-name {
    font-size: 0.72rem;
  }

  .hero-industrial-brand-sub {
    font-size: 0.48rem;
  }

  .hero-industrial-card {
    left: 0.65rem !important;
    right: 0.65rem;
    bottom: 0.65rem;
    top: auto !important;
    width: auto;
  }

  .hero-industrial-card-hint {
    display: block;
  }

  .hero-industrial-label-text {
    font-size: 0.46rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-industrial-asset,
  .hero-industrial-card {
    transition: none !important;
  }

  .hero-industrial-asset[data-id="agv"],
  .hero-industrial-asset[data-id="forklift"],
  .hero-industrial-asset[data-id="truck"] {
    animation: none !important;
    transform: translate(-50%, -50%);
  }
}