/* Whis33 depth system: layered light, perspective and restrained interaction. */
:root {
  --depth-ease: cubic-bezier(.22, 1, .36, 1);
}

.home-hero {
  isolation: isolate;
  perspective: 1600px;
}

.home-hero::after {
  position: absolute;
  inset: 9% -3% 6%;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse at 82% 40%, rgba(50, 190, 117, .13), transparent 35%),
    radial-gradient(ellipse at 58% 75%, rgba(29, 97, 168, .1), transparent 45%);
  filter: blur(18px);
}

.home-hero .eyebrow,
.page-hero .eyebrow {
  text-shadow: 0 0 24px rgba(91, 255, 150, .26);
}

.home-hero .display-title .accent {
  background: linear-gradient(115deg, #9bffc0 10%, #48e997 45%, #c4ffe2 75%, #4ddd9b);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: depth-type-light 10s ease-in-out infinite alternate;
}

.depth-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  transform-style: preserve-3d;
}

.depth-scene__halo {
  position: absolute;
  inset: 6% 2% 3%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--depth-rgb, 69, 248, 130), .22), rgba(var(--depth-rgb, 69, 248, 130), .055) 48%, transparent 70%);
  filter: blur(21px);
  opacity: .88;
  animation: depth-breathe 8s ease-in-out infinite alternate;
}

.depth-scene__ring {
  position: absolute;
  left: 11%;
  top: 5%;
  width: 78%;
  height: 78%;
  border: 1px solid rgba(var(--depth-rgb, 69, 248, 130), .34);
  border-top-color: transparent;
  border-left-color: rgba(var(--depth-rgb, 69, 248, 130), .08);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(var(--depth-rgb, 69, 248, 130), .11), inset 0 0 25px rgba(var(--depth-rgb, 69, 248, 130), .06);
  transform: rotateX(68deg) rotateZ(-12deg);
  animation: depth-orbit 32s linear infinite;
}

.depth-scene__ring--inner {
  left: 23%;
  top: 17%;
  width: 54%;
  height: 54%;
  opacity: .57;
  animation-duration: 26s;
  animation-direction: reverse;
}

.depth-scene__floor {
  position: absolute;
  right: 7%;
  bottom: -4%;
  left: 7%;
  height: 46%;
  opacity: .38;
  background-image:
    linear-gradient(rgba(var(--depth-rgb, 69, 248, 130), .25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--depth-rgb, 69, 248, 130), .22) 1px, transparent 1px);
  background-size: 38px 38px;
  box-shadow: inset 0 -30px 65px rgba(var(--depth-rgb, 69, 248, 130), .07);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 9%, transparent 72%);
  transform: perspective(530px) rotateX(67deg);
  transform-origin: center bottom;
}

.hero-stage .hero-slide {
  backface-visibility: hidden;
}

.hero-slide.is-active {
  box-shadow:
    0 42px 105px rgba(0, 0, 0, .54),
    0 12px 40px rgba(var(--hero-rgb, 69, 248, 130), .2),
    0 0 0 1px rgba(255, 255, 255, .13) inset;
}

.hero-slide.is-active::after {
  background:
    linear-gradient(180deg, rgba(4, 8, 14, .03) 22%, rgba(4, 8, 14, .23) 55%, rgba(3, 7, 12, .95) 100%),
    radial-gradient(circle at var(--depth-pointer-x, 50%) var(--depth-pointer-y, 50%), rgba(255, 255, 255, .07), transparent 48%);
}

.hero-stage .floating-status {
  box-shadow: 0 18px 54px rgba(0, 0, 0, .43), 0 0 35px rgba(72, 255, 132, .1);
  backdrop-filter: blur(18px);
}

.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 11px 34px rgba(45, 202, 97, .2), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.btn--primary::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .23) 46%, transparent 67%);
  transform: translateX(-110%);
  transition: opacity .25s ease, transform .72s var(--depth-ease);
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after {
  opacity: 1;
  transform: translateX(110%);
}

.product-card {
  transform-style: preserve-3d;
}

.product-card::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: radial-gradient(circle at var(--depth-pointer-x, 50%) var(--depth-pointer-y, 50%), rgba(var(--card-rgb, 69, 248, 130), .15), transparent 52%);
  transition: opacity .35s ease;
}

.product-card:hover::after,
.product-card:focus-within::after {
  opacity: 1;
}

.gallery-main {
  backface-visibility: hidden;
}

.gallery-main.is-active,
.product-gallery > .gallery-main:first-child:not([hidden]) {
  box-shadow: 0 32px 76px rgba(0, 0, 0, .36), 0 0 46px rgba(var(--product-rgb, 69, 248, 130), .12);
}

.gallery-main::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: radial-gradient(circle at var(--depth-pointer-x, 50%) var(--depth-pointer-y, 50%), rgba(255, 255, 255, .1), transparent 52%);
  transition: opacity .35s ease;
}

.product-gallery:hover .gallery-main.is-active::before,
.product-gallery:hover .gallery-main:first-child:not([hidden])::before {
  opacity: 1;
}

.gallery-thumb.is-active {
  box-shadow: 0 9px 28px rgba(var(--product-rgb, 69, 248, 130), .24), 0 0 0 1px rgba(var(--product-rgb, 69, 248, 130), .2) inset;
}

.live-strip,
.step-card,
.referral-announcement,
.update-panel,
.status-hero-card,
.support-hero-panel {
  box-shadow: 0 20px 52px rgba(0, 0, 0, .24), 0 1px 0 rgba(255, 255, 255, .035) inset;
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .has-depth-motion .hero-stage {
    transform: rotateX(var(--depth-tilt-x, 0deg)) rotateY(var(--depth-tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform .4s var(--depth-ease);
  }

  .has-depth-motion .hero-slide.is-active {
    transform: translate3d(0, 0, 36px) scale(1);
  }

  .has-depth-motion .hero-slide.is-prev {
    transform: translate3d(-2%, 0, -34px) rotate(-7deg) scale(.96);
  }

  .has-depth-motion .hero-slide.is-next {
    transform: translate3d(2%, 0, -24px) rotate(7deg) scale(.98);
  }

  .has-depth-motion .hero-slide.is-active img {
    translate: var(--depth-shift-x, 0px) var(--depth-shift-y, 0px);
    transition: translate .42s var(--depth-ease);
  }

  .has-depth-motion .hero-slide.is-active .hero-card-copy,
  .has-depth-motion .hero-slide.is-active .hero-card-badges,
  .has-depth-motion .hero-slide.is-active .art-brand--hero {
    translate: var(--depth-copy-x, 0px) var(--depth-copy-y, 0px);
    transition: translate .42s var(--depth-ease);
  }

  .has-depth-motion .product-card:hover,
  .has-depth-motion .product-card:focus-within {
    transform: perspective(1000px) translateY(-7px) rotateX(var(--depth-tilt-x, 0deg)) rotateY(var(--depth-tilt-y, 0deg));
  }

  .has-depth-motion .product-card:hover .product-media img {
    translate: var(--depth-copy-x, 0px) var(--depth-copy-y, 0px);
  }

  .has-depth-motion .product-gallery .gallery-main:not([hidden]) {
    transform: perspective(1200px) rotateX(var(--depth-tilt-x, 0deg)) rotateY(var(--depth-tilt-y, 0deg));
    transition: transform .44s var(--depth-ease), box-shadow .44s ease;
  }
}

@keyframes depth-breathe {
  from { opacity: .66; transform: scale(.94); }
  to { opacity: 1; transform: scale(1.06); }
}

@keyframes depth-orbit {
  from { transform: rotateX(68deg) rotateZ(-12deg); }
  to { transform: rotateX(68deg) rotateZ(348deg); }
}

@keyframes depth-type-light {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (max-width: 900px) {
  .depth-scene__ring { opacity: .5; }
  .depth-scene__floor { opacity: .2; }
  .home-hero::after { inset-inline: 0; }
}

@media (max-width: 600px) {
  .depth-scene__ring { opacity: .35; }
  .depth-scene__floor { opacity: .13; }
  .depth-scene__ring,
  .depth-scene__halo,
  .home-hero .display-title .accent { animation: none; }
  .hero-stage .floating-status { backdrop-filter: blur(10px); }
  .product-card::after,
  .gallery-main::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero .display-title .accent,
  .depth-scene__halo,
  .depth-scene__ring { animation: none !important; }
  .btn--primary::after { display: none; }
  .hero-stage,
  .product-card,
  .product-gallery .gallery-main:not([hidden]) { transform: none !important; }
}