/* HIRAD cinematic stone Hero — isolated performance module, v5.3.4 */
.hero--motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #080806;
}

.hero--motion .hirad-stone-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1400px;
  transform-style: preserve-3d;
  contain: layout paint style;
  opacity: 0;
  visibility: hidden;
  transition: opacity .65s ease;
  background:
    radial-gradient(ellipse 36% 48% at 83% 20%, rgba(190, 139, 61, .17), transparent 72%),
    radial-gradient(ellipse 34% 42% at 12% 76%, rgba(104, 80, 44, .14), transparent 74%),
    linear-gradient(118deg, rgba(5, 5, 4, .9), rgba(16, 15, 12, .95) 54%, rgba(5, 5, 4, .92));
}

.hero--motion .hirad-stone-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 46% at 50% 44%, rgba(0, 0, 0, .12), rgba(0, 0, 0, .54) 78%);
  opacity: .84;
}

.hero--motion .hirad-stone-scene.is-ready {
  opacity: 1;
  visibility: visible;
}

.hero--motion .hero__overlay {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 6, 5, .25), rgba(6, 6, 5, .62)),
    radial-gradient(ellipse 48% 52% at 50% 45%, rgba(5, 5, 4, .48), rgba(5, 5, 4, .08) 76%);
}

.hero--motion .hero__glow {
  z-index: 1;
  width: 64vw;
  height: 64vw;
  opacity: .56;
  filter: none;
  background: radial-gradient(circle, rgba(201, 164, 95, .12), transparent 67%);
}

.hero--motion .hero__content,
.hero--motion .scroll-cue {
  z-index: 3;
}

.hero--motion .hirad-stone-object {
  --stone-opacity: .96;
  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  contain: layout paint style;
  transition: opacity .58s ease;
}

.hero--motion .hirad-stone-scene.is-running .hirad-stone-object {
  will-change: transform;
}

.hero--motion .hirad-stone-object.is-loaded {
  opacity: var(--stone-opacity);
}

.hero--motion .hirad-stone-asset {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero--motion .hirad-stone-object--cream {
  --stone-opacity: .95;
  width: min(24vw, 365px);
  right: 0;
  top: 6%;
  z-index: 2;
}

.hero--motion .hirad-stone-object--black {
  --stone-opacity: .91;
  width: min(25vw, 385px);
  left: 2.5vw;
  bottom: 1%;
  z-index: 1;
}

.hero--motion .hirad-stone-object--onyx {
  --stone-opacity: .88;
  width: min(13.5vw, 205px);
  left: 20vw;
  top: 5%;
  z-index: 0;
}

@media (max-width: 1100px) {
  .hero--motion .hirad-stone-object--cream {
    width: min(30vw, 350px);
    right: -8vw;
  }

  .hero--motion .hirad-stone-object--black {
    width: min(29vw, 350px);
    left: -2vw;
  }

  .hero--motion .hirad-stone-object--onyx {
    width: min(16vw, 180px);
    left: 15vw;
  }
}

@media (max-width: 900px) {
  /*
   * iOS Safari can include animated 3D descendants in the page scroll width.
   * Keep the repair local to the front-page motion stylesheet and flatten only
   * the mobile Hero scene; desktop motion remains unchanged.
   */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .hero--motion {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    clip-path: inset(0);
    contain: layout paint;
  }

  .hero--motion .hirad-stone-scene {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
    perspective: none;
    transform-style: flat;
    clip-path: inset(0);
  }

  .hero--motion .hirad-stone-object {
    transform: translate(0, 0);
    transform-style: flat;
  }

  .hero--motion .hirad-stone-scene.is-running .hirad-stone-object {
    will-change: auto;
  }

  .hero--motion .hirad-stone-object--cream {
    --stone-opacity: .76;
    width: 39vw;
    right: -17vw;
    top: 8%;
  }

  .hero--motion .hirad-stone-object--black {
    --stone-opacity: .76;
    width: 39vw;
    left: -13vw;
    bottom: 6%;
  }

  .hero--motion .hirad-stone-object--onyx {
    --stone-opacity: .64;
    width: 20vw;
    left: 6vw;
    top: 10%;
  }
}

@media (max-width: 600px) {
  .hero--motion .hirad-stone-scene {
    background:
      radial-gradient(ellipse 48% 42% at 100% 15%, rgba(190, 139, 61, .25), transparent 74%),
      radial-gradient(ellipse 46% 40% at 0 82%, rgba(148, 111, 60, .23), transparent 76%),
      linear-gradient(118deg, rgba(5, 5, 4, .9), rgba(16, 15, 12, .95) 54%, rgba(5, 5, 4, .9));
  }

  .hero--motion .hirad-stone-object--onyx {
    display: none;
  }

  .hero--motion .hirad-stone-object--cream {
    --stone-opacity: .86;
    width: 42vw;
    right: -7vw;
    top: -2%;
  }

  .hero--motion .hirad-stone-object--black {
    --stone-opacity: .94;
    width: 44vw;
    left: -7vw;
    bottom: 4%;
  }

  .hero--motion .hero__overlay {
    background:
      linear-gradient(180deg, rgba(6, 6, 5, .24), rgba(6, 6, 5, .42)),
      radial-gradient(ellipse 66% 50% at 50% 44%, rgba(4, 4, 3, .64), rgba(4, 4, 3, .04) 80%);
  }
}

@media (max-width: 620px) {
  .hero--motion .hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(272px, calc(100% - 36px));
    max-width: 272px;
    gap: 9px;
    margin-top: 24px;
    margin-inline: auto;
  }

  .hero--motion .hero__actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding-inline: 18px;
    flex: none;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: .14em;
  }
}

@media (max-width: 390px) {
  .hero--motion .hirad-stone-object--cream {
    width: 43vw;
    right: -8vw;
  }

  .hero--motion .hirad-stone-object--black {
    width: 46vw;
    left: -9vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--motion .hirad-stone-scene {
    display: none !important;
  }
}

html.hirad-hero-static .hero--motion .hirad-stone-scene {
  display: none !important;
}