/* Hero-only carousel layout. Scene data lives in scripts/content.js. */
.hero-visual {
  z-index: 3; /* Keep arrow hit areas above the adjacent hero copy. */
  height: 600px;
  width: 100%;
}
.visual-field {
  inset: 28px -25px 110px -45px;
}
.visual-scenes,
.visual-scene {
  position: absolute;
  inset: 0;
}
.visual-scene {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease);
}
.visual-scene.is-current {
  opacity: 1;
  visibility: visible;
}
.visual-topline {
  left: 0;
  right: 0;
}
.visual-bottom {
  left: 0;
  right: 0;
  bottom: 106px;
}
.visual-label {
  z-index: 2;
  font-size: 11px;
}
.label-a {
  top: 19%;
  left: 0;
}
.label-b {
  bottom: 27%;
  right: 0;
}
.scene-arrow {
  position: absolute;
  top: 42%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 56px;
  height: 64px;
  padding: 0;
  border: 1px solid #4a667766;
  border-radius: 5px;
  background: #0a1420bb;
  color: #a6dbea;
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.scene-arrow:hover {
  background: #1e3c4ce8;
  border-color: #7ecde2;
}
.scene-arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.scene-prev {
  left: -24px;
}
.scene-next {
  right: -24px;
}
.carousel-pagination {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.carousel-dots {
  display: flex;
  gap: 0;
}
.carousel-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}
.carousel-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #53667a;
  transition:
    background 0.25s,
    box-shadow 0.25s;
}
.carousel-dot[aria-pressed="true"]::before {
  background: var(--cyan);
  box-shadow: 0 0 9px #66d9f655;
}
.carousel-dot:hover::before {
  background: #c0e8ff;
}
.carousel-pause {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #334858;
  border-radius: 50%;
  background: transparent;
  color: #a0b7cc;
  font-size: 12px;
}
.carousel-pause:hover {
  background: #1c2c3e;
  color: #fff;
}
.hero-visual[data-mode="digital"] .scene-arrow {
  color: #ffaadf;
}
.hero-visual[data-mode="digital"] .scene-arrow:hover {
  background: #3e2339e8;
  border-color: #e88ebe;
}
.hero-visual[data-mode="digital"] .carousel-dot[aria-pressed="true"]::before {
  background: #ff70c7;
  box-shadow: 0 0 9px #ff70c755;
}
.view-switch {
  bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1050px) {
  .hero-visual {
    height: 535px;
  }
  .visual-field {
    inset: 25px -12px 120px -20px;
  }
  .scene-prev {
    left: -16px;
  }
  .scene-next {
    right: -16px;
  }
  .scene-arrow {
    width: 52px;
    height: 60px;
  }
}
@media (max-width: 760px) {
  .hero-visual {
    height: 440px;
    margin-top: 24px;
  }
  .visual-field {
    inset: 32px -20px 118px;
  }
  .visual-topline {
    top: 15px;
  }
  .visual-bottom {
    bottom: 100px;
  }
  .scene-arrow {
    top: 44%;
    width: 48px;
    height: 56px;
  }
  .scene-prev {
    left: -8px;
  }
  .scene-next {
    right: -8px;
  }
  .carousel-pagination {
    bottom: 43px;
  }
  .carousel-dot {
    width: 32px;
    height: 44px;
  }
  .carousel-pause {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 380px) {
  .hero-visual {
    height: 410px;
  }
  .scene-arrow {
    width: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .visual-scene {
    transition: none;
  }
}

.visual-scene:not(.is-current) .model-image {
  visibility: hidden;
}
.motion-paused .visual-scene {
  transition: none;
}
/* Fade the studio floor into the page without a visible image boundary. */
.visual-scenes {
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 5%,
    #000 84%,
    transparent
  );
}

/* Decorative layers never intercept navigation controls. */
.visual-field,
.visual-topline,
.visual-bottom,
.visual-label,
.scene-arrow svg {
  pointer-events: none;
}
.scene-arrow:active {
  background: #315368;
}