/* Watch Hero v2 — Platinum/Steel luxury Swiss watch */

.hero--watch-v2 {
  background: var(--bg-primary);
}

.hero--watch-v2 .hero-content {
  flex: 0 0 45%;
  max-width: 620px;
}

.hero--watch-v2 .hero-graphic--watch-v2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 55%;
  min-height: 90vh;
  margin-right: 0;
  z-index: var(--z-raised);
  overflow: visible;
}

.watch-hero-v2-root {
  position: absolute;
  right: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Size: largest of width/height constraints, capped to avoid overlapping nav/trust bar */
  width: min(75vw, 1100px, calc(100vh - 176px));
  aspect-ratio: 1 / 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%);
  will-change: transform;
  background: radial-gradient(
    ellipse 90% 90% at 60% 50%,
    var(--watch-glow-1) 0%,
    var(--watch-glow-2) 35%,
    var(--watch-glow-3) 55%,
    transparent 70%
  );
}

.watch-hero-v2-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgb(var(--navy-rgb) / 45%);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px dashed rgb(var(--navy-rgb) / 16%);
  border-radius: 50%;
}

.watch-timepiece-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

/* Tablet */
@media (max-width: 1000px) {
  .hero--watch-v2 {
    flex-direction: column;
  }

  .hero--watch-v2 .hero-content {
    flex: none;
  }

  .hero--watch-v2 .hero-graphic--watch-v2 {
    flex: none;
    justify-content: center;
    min-height: auto;
    width: 100%;
    padding: 0 var(--space-5) 100px;
    overflow: hidden;
  }

  .watch-hero-v2-root {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    transform: none !important;
    width: min(65vw, 560px);
    min-width: min(340px, 55vw);
    aspect-ratio: 1 / 1;
    -webkit-mask-image: none;
    mask-image: none;
    background: radial-gradient(
      circle at center,
      var(--watch-glow-1-soft) 0%,
      var(--watch-glow-2-soft) 35%,
      var(--watch-glow-3-soft) 52%,
      transparent 68%
    );
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero--watch-v2 .hero-graphic--watch-v2 {
    display: flex;
    padding: var(--space-5, 24px) var(--space-5, 24px) 60px;
    overflow: hidden;
  }

  .watch-hero-v2-root {
    width: min(340px, 85vw);
    min-width: 0;
  }
}