/* Hero + Concept — one continuous paper and komorebi atmosphere */
.intro-atmosphere {
  position: relative;
  isolation: isolate;
  background: #F1EDE4;
}

.intro-atmosphere__paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-atmosphere__paper {
  z-index: 0;
  background: url("../img/plaster-flat.webp") center top / 2400px 912px repeat-y;
  /* multiply is baked into the flat asset (Safari合成負荷対策) */
  opacity: .04;
}

.intro-atmosphere__shadow {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(100% + 100svh);
  pointer-events: none;
  z-index: 1;
  opacity: .38;
  -webkit-mask-image: linear-gradient(180deg,
    #000 0,
    #000 calc(100% - 135svh),
    rgba(0, 0, 0, .55) calc(100% - 118svh),
    transparent calc(100% - 100svh),
    transparent 100%);
          mask-image: linear-gradient(180deg,
    #000 0,
    #000 calc(100% - 135svh),
    rgba(0, 0, 0, .55) calc(100% - 118svh),
    transparent calc(100% - 100svh),
    transparent 100%);
}

.intro-atmosphere__shadow-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 21%, #000 49%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 21%, #000 49%);
}

.intro-atmosphere__shadow img {
  position: absolute;
  top: -7%;
  right: 0;
  bottom: -7%;
  left: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: 58% 44%;
  /* multiply is baked into the flat asset (Safari合成負荷対策) */
  /* filters are baked into hero-shadow-baked.webp (Edge/GPU負荷対策) */
  animation: introShadowDrift 24s ease-in-out infinite alternate;
  transform-origin: 61% 38%;
  will-change: transform, opacity;
}

.intro-atmosphere > .hero,
.intro-atmosphere > .concept {
  position: relative;
  z-index: 2;
  background: transparent;
}

@keyframes introShadowDrift {
  0% { transform: scale(1.02) translate3d(0, 0, 0); opacity: .92; }
  50% { opacity: 1; }
  100% { transform: scale(1.075) translate3d(-1.8%, 1.1%, 0); opacity: .9; }
}

@media (max-width: 768px) {
  .intro-atmosphere__shadow { opacity: .27; }

  .intro-atmosphere__shadow-sticky {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, #000 27%, rgba(0, 0, 0, .65) 100%);
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, #000 27%, rgba(0, 0, 0, .65) 100%);
  }

  .intro-atmosphere__shadow img {
    top: -4%;
    bottom: -4%;
    left: 0;
    width: 100%;
    height: 108%;
    object-position: 61% 44%;
    filter: contrast(.88) brightness(1.07);
    /* soft left falloff — the sticky container only masks vertically on SP */
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .7) 26%, #000 54%);
            mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .7) 26%, #000 54%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-atmosphere__shadow img {
    animation: none;
    transform: none;
    will-change: auto;
  }
}