/*
 * V53 / FLAGSHIP GLOBE LAB
 * This layer intentionally touches only the hero. The remaining V52 chapters
 * stay frozen until the global control sphere passes visual review.
 */

.hero--v53 {
  --globe-gold: #e8c77a;
  --globe-gold-hot: #fff0c5;
  --globe-blue: #9ad9e7;
  --globe-ink: #030505;
  min-height: max(900px, 100svh);
  background: var(--globe-ink);
  touch-action: pan-y;
}

.hero--v53::before {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,5,5,.99) 0%, rgba(3,5,5,.96) 24%, rgba(3,5,5,.72) 42%, rgba(3,5,5,.06) 67%, rgba(3,5,5,.42) 100%),
    linear-gradient(180deg, rgba(3,5,5,.18), transparent 48%, rgba(3,5,5,.55));
}

.hero--v53 .hero-atmosphere {
  z-index: -1;
  background:
    radial-gradient(circle at 74% 48%, rgba(231,199,125,.135), transparent 29%),
    radial-gradient(circle at 83% 39%, rgba(125,205,224,.04), transparent 24%),
    linear-gradient(135deg, #030505, #080b0b 57%, #020303);
}

.hero--v53 .hero-atmosphere::before {
  content: none;
}

.global-sphere-stage {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 31%;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.global-sphere-stage canvas,
.global-sphere-fallback,
.global-sphere-lens {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.global-sphere-stage canvas {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1);
}

.global-sphere-stage.is-ready canvas { opacity: 1; }

.global-miner-fleet {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.global-miner-fleet--back { z-index: 0; }
.global-miner-fleet--front { z-index: 2; }

.global-orbit-miner {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(58px, 4.8vw, 72px);
  opacity: var(--miner-opacity, 0);
  filter:
    brightness(1.55)
    contrast(1.12)
    drop-shadow(0 8px 13px rgba(0,0,0,.62))
    drop-shadow(0 0 8px rgba(232,199,122,.17));
  transform:
    translate3d(var(--miner-x, 50%), var(--miner-y, 50%), 0)
    translate(-50%, -50%)
    scale(var(--miner-scale, .84))
    rotate(var(--miner-lean, 0deg));
  transform-origin: 50% 50%;
  transition: opacity .3s linear, filter .3s linear;
  will-change: transform, opacity;
}

.global-miner-fleet--back .global-orbit-miner {
  filter:
    brightness(1.28)
    contrast(1.08)
    saturate(.9)
    drop-shadow(0 5px 9px rgba(0,0,0,.48));
}

.global-orbit-miner__visual,
.global-orbit-miner picture,
.global-orbit-miner img {
  display: block;
  width: 100%;
  height: auto;
}

.global-orbit-miner__visual {
  position: relative;
  aspect-ratio: 564 / 626;
}

.global-orbit-miner img {
  aspect-ratio: 564 / 626;
  object-fit: contain;
  user-select: none;
}

.global-miner-rotor {
  position: absolute;
  left: 33.7%;
  width: 34.5%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  opacity: .42;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}

.global-miner-rotor--top { top: 34.7%; }
.global-miner-rotor--bottom { top: 72.2%; }

.global-miner-rotor__blades {
  position: absolute;
  inset: 5%;
  animation: v55MinerRotor 2.92s linear infinite;
  transform-origin: 50% 50%;
}

.global-miner-rotor--bottom .global-miner-rotor__blades {
  animation-duration: 3.16s;
  animation-direction: reverse;
}

.global-miner-rotor__blades i {
  position: absolute;
  top: 3%;
  left: 40.5%;
  width: 19%;
  height: 48%;
  border-radius: 84% 20% 68% 26%;
  background: linear-gradient(105deg, rgba(0,0,0,.92), rgba(8,9,9,.56));
  transform:
    rotate(calc(var(--blade) * 51.428deg))
    skewX(-17deg);
  transform-origin: 50% 98%;
}

.global-miner-rotor__blades::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #080909;
  box-shadow: 0 0 0 1px rgba(0,0,0,.56);
  content: "";
  transform: translate(-50%, -50%);
}

@keyframes v55MinerRotor {
  to { transform: rotate(1turn); }
}

.global-sphere-stage[data-motion="paused"] .global-miner-rotor__blades {
  animation-play-state: paused;
}

.global-sphere-fallback {
  z-index: 0;
  opacity: .88;
  background:
    radial-gradient(circle at 57% 49%, transparent 0 26%, rgba(239,209,143,.16) 26.3%, transparent 26.8%),
    radial-gradient(circle at 57% 49%, rgba(72,72,62,.44), rgba(7,10,10,.92) 42%, transparent 42.4%);
  transition: opacity 1s ease;
}

.global-sphere-stage.is-ready .global-sphere-fallback { opacity: 0; }

.global-sphere-lens {
  z-index: 2;
  background: radial-gradient(circle at 58% 48%, transparent 0 35%, rgba(3,5,5,.045) 56%, rgba(3,5,5,.54) 86%);
  pointer-events: none;
}

.global-sphere-lens::before,
.global-sphere-lens::after {
  content: none;
}

.global-sphere-lens::before { left: 18%; }
.global-sphere-lens::after { right: 9%; }

.global-orbit-readout {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(229,219,197,.54);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.global-orbit-readout,
.global-region,
.global-axis {
  display: none;
}

.global-orbit-readout i {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(232,199,122,.72), transparent);
}

.global-orbit-readout b {
  color: rgba(154,217,231,.72);
  font-size: inherit;
}

.global-orbit-readout--top { top: 12%; right: 8%; }
.global-orbit-readout--bottom { right: 8%; bottom: 17%; }

.global-region {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: var(--region-visible, .68);
  transform: translate3d(var(--region-x, 0), var(--region-y, 0), 0);
  transition: opacity .25s linear, transform .08s linear;
}

.global-region::before {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,199,122,.5));
  content: "";
}

.global-region > i {
  width: 6px;
  height: 6px;
  border: 1px solid var(--globe-gold-hot);
  border-radius: 50%;
  background: rgba(232,199,122,.55);
  box-shadow: 0 0 0 4px rgba(232,199,122,.06), 0 0 18px rgba(232,199,122,.66);
}

.global-region span { display: grid; gap: 4px; }
.global-region b,
.global-region small {
  font-size: 7px;
  line-height: 1;
  letter-spacing: .17em;
  white-space: nowrap;
}
.global-region b { color: rgba(249,237,210,.76); }
.global-region small { color: rgba(148,199,210,.47); }

.global-region--na { top: 31%; left: 29%; }
.global-region--emea { top: 41%; left: 56%; }
.global-region--apac { top: 50%; left: 77%; }

.global-axis {
  position: absolute;
  z-index: 3;
  top: 49%;
  right: 1.5%;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(221,213,196,.35);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

.global-axis i { width: 70px; height: 1px; background: rgba(232,199,122,.2); }

.hero--v53 .hero-copy {
  z-index: 3;
  padding-top: 82px;
}

.hero-system-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-system-label > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a9dfd2;
  box-shadow: 0 0 16px rgba(169,223,210,.72);
  animation: v53Signal 2.4s ease-in-out infinite;
}

@keyframes v53Signal {
  50% { opacity: .38; box-shadow: 0 0 5px rgba(169,223,210,.2); }
}

.hero--v53 h1 { max-width: 780px; }
.hero--v53 h1 span { text-wrap: balance; }
.hero--v53 .hero-lede { max-width: 390px; }

.hero-route-contract {
  display: flex;
  width: min(510px, 44vw);
  align-items: center;
  gap: 11px;
  margin-top: 32px;
  border-top: 1px solid rgba(232,199,122,.14);
  padding-top: 17px;
}

.hero-route-contract span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-route-contract i,
.hero-route-contract b,
.hero-route-contract em {
  font-size: 7px;
  font-style: normal;
  letter-spacing: .16em;
}

.hero-route-contract i { color: rgba(232,199,122,.68); }
.hero-route-contract b { color: rgba(221,216,205,.48); }
.hero-route-contract em { color: rgba(232,199,122,.22); }

.hero--v53 .hero-proof {
  z-index: 4;
  background: rgba(3,5,5,.66);
  border-color: rgba(232,199,122,.13);
  box-shadow: 0 -30px 80px rgba(0,0,0,.22);
}

.hero--v53 .scroll-cue { z-index: 5; }

.global-sphere-stage.is-static .global-orbit-readout b,
.global-sphere-stage.is-static .global-region small { color: rgba(229,219,197,.42); }

@media (max-width: 1180px) {
  .global-sphere-stage { left: 24%; }
  .hero--v53::before {
    background:
      linear-gradient(90deg, rgba(3,5,5,.99), rgba(3,5,5,.88) 35%, rgba(3,5,5,.18) 66%, rgba(3,5,5,.44)),
      linear-gradient(180deg, rgba(3,5,5,.1), transparent 50%, rgba(3,5,5,.55));
  }
  .global-region--apac { left: 73%; }
  .global-orbit-readout--top { right: 11%; }
  .hero-route-contract { width: 460px; }
}

@media (max-width: 760px) {
  .hero--v53 {
    min-height: max(940px, 100svh);
    align-items: start;
  }

  .hero--v53::before {
    background:
      linear-gradient(180deg, rgba(3,5,5,.98) 0 20%, rgba(3,5,5,.5) 42%, rgba(3,5,5,.05) 60%, rgba(3,5,5,.94) 83%),
      linear-gradient(90deg, rgba(3,5,5,.48), transparent 50%, rgba(3,5,5,.32));
  }

  .hero--v53 .hero-atmosphere::before {
    opacity: .18;
    background-size: 25vw 25vw;
    -webkit-mask-image: linear-gradient(transparent 15%, #000 45%, #000 80%, transparent);
    mask-image: linear-gradient(transparent 15%, #000 45%, #000 80%, transparent);
  }

  .global-sphere-stage {
    inset: 205px -18% 128px -18%;
  }

  .global-orbit-miner {
    width: clamp(50px, 14vw, 56px);
    filter:
      drop-shadow(0 5px 10px rgba(0,0,0,.58))
      drop-shadow(0 0 6px rgba(232,199,122,.14));
  }

  .global-sphere-lens {
    background:
      radial-gradient(circle at 50% 50%, transparent 0 33%, rgba(3,5,5,.045) 52%, rgba(3,5,5,.54) 84%),
      linear-gradient(180deg, rgba(3,5,5,.24), transparent 22%, transparent 72%, rgba(3,5,5,.58));
  }

  .global-sphere-lens::before { left: 19%; }
  .global-sphere-lens::after { right: 19%; }
  .global-region--na { top: 36%; left: 28%; }
  .global-region--emea { top: 42%; left: 55%; }
  .global-region--apac { display: none; }
  .global-region small { display: none; }
  .global-region::before { width: 20px; }
  .global-orbit-readout--top { top: 15%; right: 18%; }
  .global-orbit-readout--bottom { right: 18%; bottom: 15%; }
  .global-orbit-readout i { width: 22px; }
  .global-orbit-readout b { display: none; }
  .global-axis { display: none; }

  .hero--v53 .hero-copy {
    width: calc(100% - 36px);
    padding-top: 112px;
  }

  .hero--v53 h1 { max-width: 100%; }
  .hero--v53 h1 span {
    font-size: clamp(42px, 12.3vw, 58px);
    line-height: .9;
  }
  .hero--v53 h1 em {
    max-width: 320px;
    margin-top: 18px;
    font-size: 18px;
  }
  .hero--v53 .hero-lede {
    max-width: 310px;
    margin-top: 14px;
    font-size: 13px;
  }
  .hero--v53 .hero-actions {
    position: absolute;
    top: 670px;
    left: 0;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    margin: 0;
  }
  .hero--v53 .hero-actions .button {
    min-height: 56px;
    padding: 12px 14px;
    font-size: 8px;
    text-align: center;
  }
  .hero--v53 .engineer-link {
    position: absolute;
    top: 737px;
    left: 0;
  }
  .hero-route-contract {
    position: absolute;
    top: 782px;
    left: 0;
    width: 100%;
    justify-content: space-between;
    margin: 0;
    padding-top: 14px;
  }
  .hero-route-contract span { gap: 4px; }
  .hero-route-contract em { display: none; }
  .hero--v53 .hero-proof { height: 98px; }
  .hero--v53 .scroll-cue { display: none; }
}

@media (max-width: 390px) {
  .global-sphere-stage { top: 210px; }
  .hero--v53 h1 span { font-size: 46px; }
  .hero--v53 .hero-actions { top: 660px; }
  .hero--v53 .engineer-link { top: 728px; }
  .hero-route-contract { top: 772px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-system-label > i { animation: none; }
  .global-sphere-stage canvas { transition: none; }
  .global-miner-rotor__blades { animation: none; }
  .global-orbit-miner { transition: none; }
}

.hero--v53 .global-orbit-readout,
.hero--v53 .global-region,
.hero--v53 .global-axis,
.hero--v53 .scroll-cue {
  display: none !important;
}