/* ============================================================
   MindKits homepage hero, FLUX edition
   Loads after mk-theme60-home-v6.css and its fixes files.
   Everything is scoped to .mk-hero.is-flux, so removing the
   is-flux class on the section restores the stock v6 hero.
   ============================================================ */

body.Default .mk-home-v6 .mk-hero.is-flux {
  --flux-void: #02060f;
  --flux-night: #030d26;
  --flux-deep: #06205e;
  --flux-mid: #0a3496;
  --flux-blue: #1450d8;
  --flux-bright: #3d88ff;
  --flux-beam: #eef4ff;
  --flux-horizon: calc(100% - 200px);
  --flux-core-x: 64%;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--flux-void);
}

/* The stock hero paints its own gradient wash and grid overlay. Clear both. */
body.Default .mk-home-v6 .mk-hero.is-flux::before {
  content: none;
}

/* ---------- Scene ---------- */

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at var(--flux-core-x) var(--flux-horizon),
      var(--flux-deep) 0%,
      #041645 34%,
      var(--flux-night) 62%,
      var(--flux-void) 100%);
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-scene > * {
  position: absolute;
  display: block;
}

/* Starfield, held back from the glow so it only reads in the dark sky. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-stars {
  inset: 0;
  opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255, 255, 255, .95), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 14%, rgba(255, 255, 255, .85), transparent 60%),
    radial-gradient(1px 1px at 43% 31%, rgba(255, 255, 255, .75), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 41%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 9% 47%, rgba(255, 255, 255, .65), transparent 60%),
    radial-gradient(1.3px 1.3px at 61% 9%, rgba(255, 255, 255, .75), transparent 60%),
    radial-gradient(1px 1px at 31% 58%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 18%, rgba(255, 255, 255, .7), transparent 60%),
    radial-gradient(1px 1px at 52% 44%, rgba(255, 255, 255, .6), transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 8%, rgba(255, 255, 255, .65), transparent 60%),
    radial-gradient(1.1px 1.1px at 82% 62%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1.3px 1.3px at 5% 15%, rgba(255, 255, 255, .6), transparent 60%);
  -webkit-mask-image: radial-gradient(56% 52% at var(--flux-core-x) var(--flux-horizon), transparent 12%, #000 66%);
  mask-image: radial-gradient(56% 52% at var(--flux-core-x) var(--flux-horizon), transparent 12%, #000 66%);
}

/* Hexagon watermark: the FLUX mark ghosted into the sky. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-hex {
  top: -20%;
  left: var(--flux-core-x);
  width: min(600px, 46%);
  height: auto;
  transform: translateX(-52%);
  opacity: .12;
  filter: blur(1px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, rgba(0, 0, 0, .5) 72%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, rgba(0, 0, 0, .5) 72%, transparent 96%);
}

/* Reflective floor below the horizon. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-floor {
  top: var(--flux-horizon);
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg,
    rgba(4, 18, 56, .55) 0%,
    rgba(3, 11, 34, .88) 46%,
    var(--flux-void) 100%);
}

/* Faint vertical sheen so the floor reads as polished, not flat. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  background: repeating-linear-gradient(90deg,
    transparent 0 58px,
    rgba(190, 220, 255, .06) 58px 59px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 44%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent 44%);
}

/* The glow. Sits above the floor so it lights sky and floor alike. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-glow {
  inset: 0;
  background:
    radial-gradient(46% 30% at var(--flux-core-x) var(--flux-horizon),
      rgba(150, 200, 255, .95) 0%,
      rgba(61, 136, 255, .75) 22%,
      rgba(20, 80, 216, .45) 44%,
      rgba(10, 52, 150, .18) 66%,
      transparent 84%),
    radial-gradient(78% 56% at var(--flux-core-x) var(--flux-horizon),
      rgba(20, 80, 216, .42) 0%,
      rgba(10, 52, 150, .16) 46%,
      transparent 76%);
}

/* Horizon beam: a hairline core with a tight bloom. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-beam {
  top: var(--flux-horizon);
  right: 0;
  left: 0;
  height: 0;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-beam::before,
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-beam::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-beam::before {
  top: -34px;
  height: 68px;
  background: radial-gradient(42% 50% at var(--flux-core-x) 50%,
    rgba(220, 236, 255, .8) 0%,
    rgba(120, 180, 255, .42) 34%,
    rgba(47, 123, 255, .16) 60%,
    transparent 82%);
  filter: blur(10px);
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-beam::after {
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(120, 168, 226, .28) 6%,
    rgba(186, 214, 255, .8) 32%,
    var(--flux-beam) 64%,
    rgba(160, 198, 245, .6) 86%,
    transparent 100%);
  box-shadow: 0 0 16px rgba(200, 226, 255, .8);
}

/* ---------- Layout ---------- */

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-grid {
  z-index: 1;
  min-height: 660px;
  grid-template-columns: minmax(400px, .88fr) minmax(500px, 1.12fr);
  align-items: stretch;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-copy {
  align-self: center;
  padding-block: 76px 92px;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero h1,
body.Default .mk-home-v6 .mk-hero.is-flux h1 {
  max-width: 12ch;
  font-size: clamp(40px, 3.9vw, 62px);
  letter-spacing: -.045em;
  line-height: 1.02;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-lead {
  max-width: 470px;
  color: #c9d7f0;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-proof {
  color: #b2c3e2;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-proof li::before {
  background: #7fb2ff;
  box-shadow: 0 0 0 4px rgba(127, 178, 255, .16);
}

/* ---------- Media column ---------- */

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-media {
  position: relative;
  min-height: 660px;
  display: block;
}

/* The stock hero draws an orbit ring and a blue bubble here. The scene replaces both. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-media::before,
body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-media::after,
body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-orbit {
  display: none;
}

/* Wordmark and machines stand on the horizon line. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-rig {
  position: absolute;
  bottom: calc(100% - var(--flux-horizon));
  left: 50%;
  width: min(100%, 660px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.2vw, 40px);
  transform: translateX(-50%);
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-wordmark {
  width: clamp(180px, 22vw, 272px);
  height: auto;
  filter: drop-shadow(0 0 22px rgba(160, 200, 255, .6)) drop-shadow(0 0 58px rgba(61, 136, 255, .4));
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-stage {
  position: relative;
  width: 100%;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-lineup {
  width: 100%;
  max-width: none;
  height: auto;
  padding: 0;
  filter: drop-shadow(0 22px 30px rgba(0, 4, 18, .6));
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-media:hover .mk-flux-lineup {
  transform: translateY(-4px);
  filter: drop-shadow(0 30px 36px rgba(0, 4, 18, .66));
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-reflection {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 62%;
  background-image: url("##THEMEDIR##images/mk-flux-lineup-v1.webp");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  opacity: .24;
  filter: blur(1.6px) saturate(.65);
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, .85) 6%, transparent 92%);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, .85) 6%, transparent 92%);
  pointer-events: none;
}

/* ---------- Spec row on the floor ---------- */

body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-specs {
  position: absolute;
  right: 0;
  bottom: clamp(24px, 3.4vw, 44px);
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-chip {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  min-width: 0;
  flex: 0 1 auto;
  padding: 11px 16px;
  border-color: rgba(163, 199, 255, .26);
  background: rgba(6, 20, 54, .58);
  box-shadow: 0 18px 40px -22px rgba(0, 6, 26, .95);
}

body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-chip span {
  color: #9fb4d8;
}

/* The stock hero hides the third chip on small screens because it floated over
   the product. In the spec row it has somewhere to go, so keep it. */
body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-chip-support {
  display: block;
}

/* ---------- Banner variant ----------
   Add is-banner alongside is-flux to drop the copy column and render
   the lineup as a centred brand strip, e.g. on a FLUX category page. */

body.Default .mk-home-v6 .mk-hero.is-flux.is-banner .mk-hero-copy {
  display: none;
}

body.Default .mk-home-v6 .mk-hero.is-flux.is-banner {
  --flux-core-x: 50%;
  --flux-horizon: calc(100% - 150px);
}

body.Default .mk-home-v6 .mk-hero.is-flux.is-banner .mk-hero-grid {
  min-height: 460px;
  grid-template-columns: 1fr;
}

body.Default .mk-home-v6 .mk-hero.is-flux.is-banner .mk-hero-media {
  min-height: 460px;
}

body.Default .mk-home-v6 .mk-hero.is-flux.is-banner .mk-flux-specs {
  display: none;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-stars {
    animation: mk-flux-drift 24s ease-in-out infinite alternate;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-glow {
    animation: mk-flux-pulse 10s ease-in-out infinite alternate;
  }
}

@keyframes mk-flux-drift {
  from { opacity: .34; transform: translate3d(0, 0, 0); }
  to { opacity: .6; transform: translate3d(-14px, 6px, 0); }
}

@keyframes mk-flux-pulse {
  from { opacity: .86; }
  to { opacity: 1; }
}

/* ---------- Tablet ---------- */

@media (max-width: 1060px) {
  body.Default .mk-home-v6 .mk-hero.is-flux {
    --flux-horizon: calc(100% - 180px);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-grid {
    min-height: 620px;
    grid-template-columns: minmax(320px, .9fr) minmax(390px, 1.1fr);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-media {
    min-height: 620px;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux h1 {
    font-size: clamp(38px, 4.4vw, 52px);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-hex {
    width: min(400px, 54%);
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
  body.Default .mk-home-v6 .mk-hero.is-flux {
    --flux-horizon: calc(100% - 190px);
    --flux-core-x: 50%;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-grid {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-copy {
    padding-block: 56px 4px;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux h1 {
    max-width: 100%;
    font-size: clamp(38px, 11vw, 50px);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-media {
    position: static;
    min-height: 386px;
    margin-inline: 0;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-hex {
    top: -6%;
    width: min(320px, 66%);
    transform: translateX(-50%);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-glow {
    background:
      radial-gradient(64% 22% at 50% var(--flux-horizon),
        rgba(150, 200, 255, .92) 0%,
        rgba(61, 136, 255, .7) 24%,
        rgba(20, 80, 216, .4) 48%,
        transparent 82%),
      radial-gradient(104% 42% at 50% var(--flux-horizon),
        rgba(20, 80, 216, .4) 0%,
        transparent 74%);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-beam::before {
    background: radial-gradient(58% 50% at 50% 50%,
      rgba(220, 236, 255, .75) 0%,
      rgba(120, 180, 255, .38) 36%,
      transparent 80%);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-beam::after {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(186, 214, 255, .75) 24%,
      var(--flux-beam) 50%,
      rgba(186, 214, 255, .75) 76%,
      transparent 100%);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-rig {
    width: min(88%, 400px);
    gap: 20px;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-wordmark {
    width: clamp(150px, 42vw, 200px);
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-flux-specs {
    padding-inline: 18px;
    gap: 8px;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-chip {
    padding: 9px 12px;
  }

  body.Default .mk-home-v6 .mk-hero.is-flux .mk-hero-chip strong {
    font-size: 13px;
  }
}