/* スクロール型の奥行き演出（モデルなし・CSS/スクロール駆動） */

.has-scroll-depth {
  --scroll-y: 0;
  --scroll-progress: 0;
}

.has-scroll-depth .hero-panel {
  --hero-depth: 1;
  transform-style: preserve-3d;
}

.has-scroll-depth .hero-panel__media {
  transform: translate3d(0, var(--parallax-shift, 0px), 0) scale(1.12);
  will-change: transform;
}

.has-scroll-depth .hero-panel__content {
  position: relative;
  z-index: 1;
  max-width: min(100%, 36rem);
  transform: translate3d(0, var(--parallax-shift, 0px), 0)
    scale(calc(0.98 + (var(--hero-depth) * 0.02)));
  transform-origin: left center;
  will-change: transform;
}

.page-hero .hero-panel__content {
  max-width: none;
}

.has-scroll-depth .hero-panel::after {
  transform: translate3d(
      calc(var(--hero-blob-shift, 0px) * -0.7),
      calc(var(--hero-blob-shift, 0px) * 0.4),
      0
    )
    rotate(calc(var(--scroll-progress) * 12deg));
  will-change: transform;
}

.has-scroll-depth [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.8rem, 0) scale(0.98);
  filter: blur(0.45px);
  transition:
    opacity 740ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 740ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 740ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.has-scroll-depth [data-reveal][data-reveal-from="left"] {
  transform: translate3d(-3.6rem, 1.25rem, 0) rotateY(10deg) scale(0.98);
  transform-origin: left center;
}

.has-scroll-depth [data-reveal][data-reveal-from="right"] {
  transform: translate3d(3.6rem, 1.25rem, 0) rotateY(-10deg) scale(0.98);
  transform-origin: right center;
}

.has-scroll-depth [data-reveal][data-reveal-from="up"] {
  transform: translate3d(0, 3.2rem, 0) rotateX(7deg) scale(0.98);
  transform-origin: center bottom;
}

.has-scroll-depth [data-reveal].is-inview:not(.is-card-spinning) {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
  filter: none;
}

.has-scroll-depth [data-reveal].is-inview.is-card-spinning {
  opacity: 1;
  filter: none;
}

.has-scroll-depth .grid,
.has-scroll-depth .content-grid,
.has-scroll-depth .content-facility-grid,
.has-scroll-depth .content-showcase-grid,
.has-scroll-depth .content-figure--gallery {
  perspective: 1400px;
}

.has-scroll-depth #about .grid,
.has-scroll-depth #services .grid,
.has-scroll-depth .content-facility-grid,
.has-scroll-depth .content-showcase-grid,
.has-scroll-depth .content-figure--gallery {
  perspective: 1100px;
  perspective-origin: 50% 40%;
}

.has-scroll-depth .feature {
  transform-style: preserve-3d;
}

.has-scroll-depth .feature > [data-reveal][data-reveal-from="left"] {
  transform: translate3d(-4rem, 1.4rem, 0) rotateY(12deg);
}

.has-scroll-depth .feature > [data-reveal][data-reveal-from="right"],
.has-scroll-depth .feature-copy[data-reveal][data-reveal-from="right"] {
  transform: translate3d(4rem, 1.4rem, 0) rotateY(-12deg);
}

.has-scroll-depth .feature > [data-reveal].is-inview,
.has-scroll-depth .feature-copy[data-reveal].is-inview {
  transform: translate3d(0, 0, 0) rotateY(0deg);
}

.has-scroll-depth .list-panel[data-reveal][data-reveal-from="left"] {
  transform: translate3d(-3rem, 1.6rem, 0);
}

.has-scroll-depth .list-panel[data-reveal][data-reveal-from="right"] {
  transform: translate3d(3rem, 1.6rem, 0);
}

.has-scroll-depth .list-panel[data-reveal].is-inview {
  transform: translate3d(0, 0, 0);
}

/* グリッド小カード: グリッド位置で IO 検知。画面外入場は JS(WAAPI) */
.has-scroll-depth #about .grid,
.has-scroll-depth #services .grid,
.has-scroll-depth .content-facility-grid,
.has-scroll-depth .content-showcase-grid,
.has-scroll-depth .content-figure--gallery {
  overflow: visible;
}

.has-scroll-depth [data-spin-card][data-reveal] {
  opacity: 0;
  filter: none;
  transition: none !important;
  /* IO 用にスロット内に残す（飛ばさない） */
  transform: perspective(560px) translate3d(0, 0.6rem, 0) scale(0.96);
  transform-style: preserve-3d;
  transform-origin: center center;
  backface-visibility: visible;
  z-index: 1;
}

.has-scroll-depth [data-spin-card][data-reveal].is-card-spinning {
  /* opacity / transform は WAAPI が制御 */
  filter: none;
  animation: none !important;
  will-change: transform, opacity;
}

.has-scroll-depth [data-spin-card][data-reveal].is-card-landed,
.has-scroll-depth [data-spin-card][data-reveal].is-inview:not(.is-card-spinning) {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none !important;
  will-change: auto;
}

/* 着地後は通常のホバー持ち上げを優先 */
.has-scroll-depth .card[data-spin-card].is-card-landed:has(.card-link):focus-within {
  transform: translateY(-3px);
}

@media (hover: hover) {
  .has-scroll-depth .card[data-spin-card].is-card-landed:has(.card-link):hover {
    transform: translateY(-3px);
  }
}

.has-scroll-depth .scroll-depth-stage {
  position: relative;
  isolation: isolate;
}

.has-scroll-depth .scroll-depth-stage::before,
.has-scroll-depth .scroll-depth-stage::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  content: "";
  filter: blur(2px);
  opacity: 0.55;
  transform: translate3d(0, calc(var(--scroll-y) * -0.04px), 0);
}

.has-scroll-depth .scroll-depth-stage::before {
  width: min(28rem, 70vw);
  height: min(28rem, 70vw);
  top: -6rem;
  right: -8rem;
  background: radial-gradient(circle, rgba(47, 118, 85, 0.18), transparent 68%);
}

.has-scroll-depth .scroll-depth-stage::after {
  width: min(22rem, 60vw);
  height: min(22rem, 60vw);
  left: -6rem;
  bottom: -4rem;
  background: radial-gradient(circle, rgba(215, 140, 61, 0.16), transparent 70%);
  transform: translate3d(0, calc(var(--scroll-y) * -0.07px), 0);
}

@media (max-width: 920px) {
  .has-scroll-depth .hero-panel__media {
    transform: translate3d(0, calc(var(--parallax-shift, 0px) * 0.65), 0) scale(1.08);
  }

  .has-scroll-depth [data-reveal][data-reveal-from="left"] {
    transform: translate3d(-1.8rem, 1.1rem, 0);
  }

  .has-scroll-depth [data-reveal][data-reveal-from="right"] {
    transform: translate3d(1.8rem, 1.1rem, 0);
  }

  .has-scroll-depth [data-reveal][data-reveal-from="up"] {
    transform: translate3d(0, 2rem, 0);
  }

  .has-scroll-depth [data-spin-card][data-reveal] {
    transform: perspective(520px) translate3d(0, 0.5rem, 0) scale(0.96);
  }

  .has-scroll-depth .feature > [data-reveal][data-reveal-from="left"],
  .has-scroll-depth .feature > [data-reveal][data-reveal-from="right"],
  .has-scroll-depth .feature-copy[data-reveal][data-reveal-from="right"] {
    transform: translate3d(0, 1.6rem, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-scroll-depth [data-reveal],
  .has-scroll-depth .hero-panel__media,
  .has-scroll-depth .hero-panel__content,
  .has-scroll-depth .hero-panel::after,
  .has-scroll-depth .contact-panel,
  .has-scroll-depth .scroll-depth-stage::before,
  .has-scroll-depth .scroll-depth-stage::after,
  .has-scroll-depth #about .grid > .card[data-reveal],
  .has-scroll-depth #services .grid > .card[data-reveal],
  .has-scroll-depth [data-spin-card][data-reveal] {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}