/* Skinjo Farm scroll depth system V2
   Stronger desktop perspective with clear depth layers. Mobile and reduced motion remain simple. */

.motion-surface {
  --motion-x: 0px;
  --motion-y: 0px;
  --motion-z: 0px;
  --motion-rx: 0deg;
  --motion-ry: 0deg;
  --motion-rz: 0deg;
  --motion-scale: 1;
  --motion-opacity: 1;
  --motion-shadow-y: 18px;
  --motion-shadow-blur: 44px;
  --motion-shadow-alpha: .12;
  --motion-media-y: 0px;
  --motion-media-scale: 1.1;
  --motion-perspective: 1100px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.motion-surface.is-motion-active {
  will-change: transform, opacity, box-shadow;
}

.motion-media {
  overflow: hidden;
}

.motion-media > img {
  transform: translate3d(0, var(--motion-media-y), 0) scale(var(--motion-media-scale));
  transform-origin: 50% 50%;
}

.motion-media.is-motion-active > img {
  will-change: transform;
}

.hero .hero-media img {
  transform: translate3d(0, var(--skinjo-hero-y, 0px), 0) scale(var(--skinjo-hero-scale, 1.16));
  transform-origin: 50% 48%;
}

.hero .hero-main {
  transform: perspective(1050px)
    translate3d(0, var(--skinjo-hero-copy-y, 0px), var(--skinjo-hero-copy-z, 120px))
    rotateX(var(--skinjo-hero-copy-rx, 0deg))
    scale(var(--skinjo-hero-copy-scale, 1));
  opacity: var(--skinjo-hero-copy-opacity, 1);
  transform-style: preserve-3d;
}

@media (min-width: 901px) {
  .farm-grid,
  .gallery-grid,
  .feature-split,
  .detail-grid,
  .contact-details-grid {
    perspective: 1350px;
    perspective-origin: 50% 44%;
  }

  body.motion-3d-ready .motion-surface {
    transform: perspective(var(--motion-perspective))
      translate3d(var(--motion-x), var(--motion-y), var(--motion-z))
      rotateX(var(--motion-rx))
      rotateY(var(--motion-ry))
      rotateZ(var(--motion-rz))
      scale(var(--motion-scale));
    opacity: var(--motion-opacity);
    box-shadow: 0 var(--motion-shadow-y) var(--motion-shadow-blur)
      rgba(8, 14, 8, var(--motion-shadow-alpha));
  }

  .motion-farm {
    --motion-perspective: 980px;
    transform-origin: 50% 62%;
  }

  .motion-gallery {
    --motion-perspective: 920px;
    transform-origin: 50% 55%;
  }

  .motion-story {
    --motion-perspective: 1050px;
    transform-origin: 50% 50%;
  }

  .motion-panel {
    --motion-perspective: 1200px;
    transform-origin: 50% 58%;
  }

  /* Real depth inside the cards rather than only moving a flat rectangle. */
  .farm-card.motion-farm .farm-card-content {
    transform: translateZ(48px);
    backface-visibility: hidden;
  }

  .gallery-item.motion-gallery .gallery-label {
    transform: translateZ(42px);
    backface-visibility: hidden;
  }

  .feature-media.motion-story .feature-badge {
    transform: translateZ(52px);
    backface-visibility: hidden;
  }

  .info-panel.motion-panel > *,
  .availability-card.motion-panel > *,
  .contact-detail-card.motion-panel > * {
    position: relative;
    transform: translateZ(18px);
    backface-visibility: hidden;
  }

  .motion-surface.is-motion-active {
    outline: 1px solid rgba(255, 255, 255, .08);
  }
}

/* Mobile gets a compact entrance response rather than continuous 3D. */
@media (max-width: 900px) {
  .motion-surface,
  .hero .hero-main,
  .hero .hero-media img,
  .motion-media > img,
  .farm-card.motion-farm .farm-card-content,
  .gallery-item.motion-gallery .gallery-label,
  .feature-media.motion-story .feature-badge,
  .info-panel.motion-panel > *,
  .availability-card.motion-panel > *,
  .contact-detail-card.motion-panel > * {
    will-change: auto;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: inherit;
  }

  .motion-mobile-reveal {
    opacity: 0;
    transform: translateY(18px) scale(.975);
    transition: opacity .46s ease, transform .46s cubic-bezier(.2,.72,.2,1);
  }

  .motion-mobile-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-surface,
  .hero .hero-main,
  .hero .hero-media img,
  .motion-media > img,
  .motion-mobile-reveal,
  .motion-mobile-reveal.is-visible,
  .farm-card.motion-farm .farm-card-content,
  .gallery-item.motion-gallery .gallery-label,
  .feature-media.motion-story .feature-badge,
  .info-panel.motion-panel > *,
  .availability-card.motion-panel > *,
  .contact-detail-card.motion-panel > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
    box-shadow: inherit !important;
    outline: 0 !important;
  }
}