/*
 * V64 black-gold ritual chamber.
 * Keeps the approved hero composition, globe scale, geography and timing frozen.
 */

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

.hero--v53 .hero-atmosphere {
  background:
    radial-gradient(circle at 73% 48%, rgba(239, 193, 101, .055), transparent 31%),
    radial-gradient(circle at 74% 49%, rgba(98, 184, 210, .026), transparent 36%),
    linear-gradient(135deg, #020303, #050606 58%, #010202);
}

.hero--v53 .global-sphere-lens {
  z-index: 8;
  background:
    radial-gradient(circle at 70% 47%, transparent 0 34%, rgba(2, 3, 3, .025) 54%, rgba(2, 3, 3, .36) 88%);
}

.hero--v53 .global-sphere-lens::before,
.hero--v53 .global-sphere-lens::after {
  display: none !important;
  content: none !important;
}

.hero--v53 .global-sphere-stage canvas {
  z-index: 2;
  filter:
    saturate(1.05)
    contrast(1.30)
    brightness(1.11);
}

/* Architectural depth from the approved black/gold drafts. */
.hero--v53 .global-ritual-chamber {
  display: none !important;
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  opacity: .76;
  background:
    linear-gradient(
      90deg,
      transparent 0 8%,
      rgba(0, 0, 0, .92) 8.3% 16%,
      rgba(231, 187, 91, .15) 16.18%,
      rgba(255, 231, 170, .035) 16.55% 16.9%,
      rgba(0, 0, 0, .93) 17.1% 29%,
      rgba(229, 180, 82, .09) 29.15%,
      rgba(0, 0, 0, .94) 29.5% 48%,
      rgba(238, 194, 99, .14) 48.18%,
      rgba(255, 238, 191, .04) 48.55% 49%,
      rgba(0, 0, 0, .94) 49.2% 67%,
      rgba(226, 174, 73, .11) 67.15%,
      rgba(0, 0, 0, .96) 67.55% 83%,
      rgba(244, 205, 119, .13) 83.15%,
      transparent 83.55% 100%
    ),
    linear-gradient(180deg, #020303, rgba(5, 6, 6, .54) 58%, #010202 100%);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 17%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 85%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0, #000 17%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.hero--v53 .global-ritual-chamber::before {
  position: absolute;
  right: 1%;
  bottom: 4.8%;
  left: 8%;
  height: 16%;
  border-top: 1px solid rgba(255, 216, 128, .32);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(240, 194, 92, .15), transparent 3%),
    radial-gradient(ellipse at 50% 18%, rgba(2, 3, 3, .90) 0 45%, rgba(237, 189, 85, .12) 46%, transparent 48%);
  box-shadow:
    inset 0 9px 0 -8px rgba(255, 229, 160, .34),
    0 -1px 22px rgba(230, 174, 68, .09);
  content: "";
  transform: perspective(520px) rotateX(67deg);
  transform-origin: 50% 100%;
}

.hero--v53 .global-ritual-chamber::after {
  position: absolute;
  inset: 7% 3% 10% 10%;
  opacity: .46;
  background:
    radial-gradient(circle at 13% 26%, rgba(255, 224, 151, .80) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 19%, rgba(255, 207, 109, .65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 75% 72%, rgba(255, 232, 175, .54) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 76%, rgba(228, 176, 72, .56) 0 1px, transparent 1.7px);
  content: "";
  filter: drop-shadow(0 0 6px rgba(235, 183, 80, .44));
}

.hero--v53 .global-miner-fleet--back { z-index: 1; }
.hero--v53 .global-miner-fleet--front { z-index: 7; }

.hero--v53 .global-orbit-miner {
  isolation: isolate;
  width: clamp(45px, 3.85vw, 60px);
  filter:
    brightness(var(--miner-brightness, 1))
    contrast(1.22)
    saturate(.82)
    blur(var(--miner-blur, 0))
    drop-shadow(0 9px 15px rgba(0, 0, 0, .74))
    drop-shadow(2px 0 5px rgba(239, 186, 90, .16));
  transition: opacity .18s linear, filter .18s linear;
  transform:
    translate3d(var(--miner-x, 50%), var(--miner-y, 50%), 0)
    translate(-50%, -50%)
    scale(var(--miner-scale, .84));
  transform-style: flat;
}

.hero--v53 .global-miner-fleet--back .global-orbit-miner {
  filter:
    brightness(var(--miner-brightness, .84))
    contrast(1.17)
    saturate(.76)
    blur(var(--miner-blur, .35px))
    drop-shadow(0 5px 10px rgba(0, 0, 0, .64))
    drop-shadow(0 0 7px rgba(236, 186, 90, .08));
}

.hero--v53 .global-orbit-miner::before {
  position: absolute;
  z-index: -1;
  inset: -18%;
  border-radius: 50%;
  opacity: var(--miner-mist, .10);
  background:
    radial-gradient(ellipse at 48% 52%, rgba(255, 239, 207, .28), transparent 69%);
  filter: blur(9px);
  content: "";
}

.hero--v53 .global-orbit-miner__visual {
  opacity: 0;
  filter: drop-shadow(0 1px 0 rgba(255, 222, 151, .11));
  transition: opacity .18s ease-out;
}

.hero--v53 .global-orbit-miner.is-image-ready .global-orbit-miner__visual { opacity: 1; }

.hero--v53 .global-miner-rotor {
  left: 22.35%;
  width: 34.6%;
  opacity: .38;
}

.hero--v53 .global-miner-rotor--top { top: 34%; }
.hero--v53 .global-miner-rotor--bottom { top: 74.7%; }

.hero--v53 .global-miner-rotor__blades {
  animation-duration: var(--fan-speed-top, 2.9s);
}

.hero--v53 .global-miner-rotor--bottom .global-miner-rotor__blades {
  animation-duration: var(--fan-speed-bottom, 3.16s);
}

/*
 * V65 surface emission. Both layers originate on the exact globe edge:
 * a powerful cyan core plus its own soft spill, with no detached shell.
 */
.hero--v53 .global-earth-emission {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 31%;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.hero--v53 .global-earth-emission::before,
.hero--v53 .global-earth-emission::after {
  position: absolute;
  top: var(--earth-emission-center-y, 50%);
  left: var(--earth-emission-center-x, 50%);
  width: var(--earth-emission-size, 75.6%);
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  will-change: opacity, filter, transform;
}

.hero--v53 .global-earth-emission::before {
  opacity: .72;
  background:
    conic-gradient(
      from -18deg,
      rgba(238, 254, 255, .94),
      rgba(95, 217, 252, .66) 10%,
      rgba(30, 147, 219, .32) 21%,
      rgba(112, 226, 253, .58) 34%,
      rgba(232, 252, 255, .90) 47%,
      rgba(49, 170, 232, .40) 60%,
      rgba(126, 232, 255, .72) 73%,
      rgba(38, 152, 221, .34) 86%,
      rgba(238, 254, 255, .94)
    );
  filter:
    blur(13px)
    drop-shadow(0 0 17px rgba(92, 216, 252, .54))
    drop-shadow(0 0 42px rgba(54, 163, 230, .38));
  -webkit-mask-image:
    radial-gradient(farthest-side, transparent 0 94.8%, rgba(0, 0, 0, .42) 96.3%, #000 98.2%, rgba(0, 0, 0, .42) 99.2%, transparent 100%);
  mask-image:
    radial-gradient(farthest-side, transparent 0 94.8%, rgba(0, 0, 0, .42) 96.3%, #000 98.2%, rgba(0, 0, 0, .42) 99.2%, transparent 100%);
  animation: v65SurfaceHalo 10s ease-in-out -3s infinite;
}

.hero--v53 .global-earth-emission::after {
  opacity: .44;
  background:
    conic-gradient(
      from -10deg,
      rgba(250, 255, 255, .98),
      rgba(159, 240, 255, .86) 12%,
      rgba(64, 188, 241, .56) 28%,
      rgba(222, 252, 255, .95) 44%,
      rgba(105, 221, 252, .74) 61%,
      rgba(51, 168, 231, .52) 77%,
      rgba(198, 248, 255, .92) 91%,
      rgba(250, 255, 255, .98)
    );
  filter:
    blur(5.6px)
    drop-shadow(0 0 9px rgba(229, 254, 255, .82))
    drop-shadow(0 0 23px rgba(70, 204, 247, .62));
  -webkit-mask-image:
    radial-gradient(farthest-side, transparent 0 96.3%, rgba(0, 0, 0, .66) 97.5%, #000 98.7%, rgba(0, 0, 0, .44) 99.5%, transparent 100%);
  mask-image:
    radial-gradient(farthest-side, transparent 0 96.3%, rgba(0, 0, 0, .66) 97.5%, #000 98.7%, rgba(0, 0, 0, .44) 99.5%, transparent 100%);
  animation: v65SurfaceCore 7s ease-in-out -1.5s infinite;
}

@keyframes v65SurfaceHalo {
  0%, 100% {
    opacity: .60;
    filter:
      blur(12px)
      drop-shadow(0 0 13px rgba(48, 180, 236, .48))
      drop-shadow(0 0 30px rgba(46, 153, 227, .30));
    transform: translate(-50%, -50%);
  }
  50% {
    opacity: .78;
    filter:
      blur(15px)
      drop-shadow(0 0 18px rgba(74, 208, 250, .64))
      drop-shadow(0 0 40px rgba(47, 166, 234, .39));
    transform: translate(-50%, -50%);
  }
}

@keyframes v65SurfaceCore {
  0%, 100% { opacity: .38; transform: translate(-50%, -50%); }
  50% { opacity: .52; transform: translate(-50%, -50%); }
}

/*
 * V65 living cloud system. Three independent banks breathe and flow at
 * different tempos; warm vapor plumes grow organically from the cloud body.
 */
.hero--v53 .global-cloud-foundation {
  position: absolute;
  z-index: 2;
  inset: 0 0 0 31%;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.hero--v53 .global-cloud-layer {
  position: absolute;
  left: 50.5%;
  background:
    url("/assets/hero/v63-snow-cloud-foundation.webp?v=v65-r1")
    var(--cloud-position, center) / var(--cloud-size, 100% 100%)
    var(--cloud-repeat, no-repeat);
  transform-origin: 50% 86%;
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 74%, #000 0 58%, rgba(0, 0, 0, .80) 69%, transparent 89%);
  mask-image:
    radial-gradient(ellipse at 50% 74%, #000 0 58%, rgba(0, 0, 0, .80) 69%, transparent 89%);
  will-change: opacity, transform;
}

.hero--v53 .global-cloud-layer--rear {
  z-index: 0;
  bottom: 10.8%;
  width: 74%;
  height: 25%;
  opacity: .38;
  --cloud-size: 76% 100%;
  --cloud-position: 8% 50%;
  --cloud-repeat: repeat-x;
  filter:
    saturate(.30)
    brightness(1.16)
    blur(13px)
    drop-shadow(0 -12px 30px rgba(255, 235, 210, .30));
  animation: v65CloudRear 23s ease-in-out -9s infinite;
}

.hero--v53 .global-cloud-layer--body {
  z-index: 2;
  bottom: 9.8%;
  width: 70%;
  height: 22.5%;
  opacity: .93;
  --cloud-size: 100% 100%;
  --cloud-position: center;
  --cloud-repeat: no-repeat;
  filter:
    saturate(.38)
    contrast(1.07)
    brightness(1.10)
    drop-shadow(0 -5px 12px rgba(255, 255, 255, .34))
    drop-shadow(0 -18px 34px rgba(255, 227, 196, .18));
  animation: v65CloudBody 17s cubic-bezier(.42, 0, .24, 1) -5s infinite;
}

.hero--v53 .global-cloud-layer--front {
  z-index: 4;
  bottom: 8.9%;
  width: 68%;
  height: 18.5%;
  opacity: .80;
  --cloud-size: 64% 100%;
  --cloud-position: -12% 50%;
  --cloud-repeat: repeat-x;
  filter:
    saturate(.28)
    contrast(1.05)
    brightness(1.12)
    blur(.6px)
    drop-shadow(0 -4px 9px rgba(255, 247, 238, .30));
  animation: v65CloudFront 20s cubic-bezier(.4, 0, .2, 1) -12s infinite;
}

.hero--v53 .global-cloud-vapor {
  position: absolute;
  z-index: 1;
  left: 50.5%;
  bottom: 10.8%;
  width: 66%;
  height: 27%;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero--v53 .global-cloud-vapor::before {
  position: absolute;
  inset: 7% 0 3%;
  opacity: .48;
  background:
    radial-gradient(ellipse at 17% 79%, rgba(255, 245, 232, .54), transparent 32%),
    radial-gradient(ellipse at 43% 74%, rgba(255, 224, 194, .30), transparent 36%),
    radial-gradient(ellipse at 68% 78%, rgba(255, 248, 239, .50), transparent 34%),
    radial-gradient(ellipse at 88% 73%, rgba(255, 228, 204, .28), transparent 30%);
  content: "";
  filter:
    blur(24px)
    drop-shadow(0 -12px 28px rgba(255, 224, 194, .18));
  mix-blend-mode: screen;
  transform-origin: 50% 90%;
  animation: v65VaporBed 14s ease-in-out -5s infinite;
}

.hero--v53 .global-cloud-plume {
  position: absolute;
  bottom: 1%;
  left: var(--plume-x);
  width: var(--plume-size);
  aspect-ratio: .82;
  border-radius: 48% 52% 44% 56%;
  opacity: 0;
  background:
    radial-gradient(
      ellipse at 50% 72%,
      rgba(255, 253, 249, .70),
      rgba(255, 235, 210, .38) 38%,
      rgba(239, 214, 188, .14) 62%,
      transparent 76%
    );
  filter:
    blur(var(--plume-blur))
    drop-shadow(0 0 20px rgba(255, 224, 191, .14));
  mix-blend-mode: screen;
  transform: translate3d(-50%, 0, 0) scale(.64);
  transform-origin: 50% 86%;
  animation:
    v65WarmPlume var(--plume-duration) cubic-bezier(.3, .1, .2, 1)
    var(--plume-delay) infinite;
  will-change: opacity, transform;
}

@keyframes v65CloudRear {
  0%, 100% { opacity: .32; transform: translate3d(-50.8%, 12%, 0) scale(1.01, .80); }
  50% { opacity: .46; transform: translate3d(-49.2%, 5%, 0) scale(1.075, .97); }
}

@keyframes v65CloudBody {
  0%, 100% { opacity: .89; transform: translate3d(-50.5%, 7%, 0) scale(.97, .87); }
  48% { opacity: .98; transform: translate3d(-49.7%, 1%, 0) scale(1.045, 1.03); }
  72% { opacity: .95; transform: translate3d(-50.1%, 3%, 0) scale(1.018, .98); }
}

@keyframes v65CloudFront {
  0%, 100% {
    opacity: .72;
    background-position: 43% 50%;
    transform: translate3d(-50.8%, 8%, 0) scale(.985, .88);
  }
  50% {
    opacity: .88;
    background-position: 57% 50%;
    transform: translate3d(-49.3%, 2%, 0) scale(1.035, 1.02);
  }
}

@keyframes v65VaporBed {
  0%, 100% {
    opacity: .38;
    transform: translate3d(-1.2%, 8%, 0) scale(.96, .82);
  }
  50% {
    opacity: .60;
    transform: translate3d(1.2%, -4%, 0) scale(1.06, 1.12);
  }
}

@keyframes v65WarmPlume {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 8%, 0) scale(.58, .48);
  }
  18% {
    opacity: .24;
  }
  48% {
    opacity: .42;
    transform: translate3d(calc(-50% + var(--plume-drift-mid)), -31%, 0) scale(1.05, 1.16);
  }
  76% {
    opacity: .22;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--plume-drift)), -76%, 0) scale(1.62, 1.82);
  }
}

@media (max-width: 760px) {
  .hero--v53 .global-orbit-miner {
    width: clamp(34px, 10.15vw, 42px);
  }

  .hero--v53 .global-ritual-chamber::before {
    right: 8%;
    bottom: 7%;
    left: 8%;
    height: 14%;
  }

  .hero--v53 .global-earth-emission {
    inset: 205px -18% 128px -18%;
  }

  .hero--v53 .global-cloud-foundation {
    inset: 205px -18% 128px -18%;
  }

  .hero--v53 .global-cloud-layer--rear {
    bottom: 10.8%;
    width: 72%;
    height: 22%;
  }

  .hero--v53 .global-cloud-layer--body {
    bottom: 10%;
    width: 69%;
    height: 20%;
  }

  .hero--v53 .global-cloud-layer--front {
    bottom: 9.2%;
    width: 66%;
    height: 17%;
  }

  .hero--v53 .global-cloud-vapor {
    bottom: 11%;
    width: 64%;
    height: 24%;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .hero--v53 .global-earth-emission,
  .hero--v53 .global-cloud-foundation {
    left: 24%;
  }
}

@media (max-width: 390px) {
  .hero--v53 .global-earth-emission,
  .hero--v53 .global-cloud-foundation {
    top: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--v53 .global-sphere-stage canvas {
    transition: none;
  }

  .hero--v53 .global-earth-emission::before,
  .hero--v53 .global-earth-emission::after,
  .hero--v53 .global-cloud-layer,
  .hero--v53 .global-cloud-vapor::before,
  .hero--v53 .global-cloud-plume {
    animation: none;
  }
}