/* hero.css — Environment Hero layers (sky + mountain alpha) */

:root {
  --hero-env-transition-duration: var(--theme-transition-duration, 1800ms);
  --hero-env-transition-easing: var(--theme-transition-easing, cubic-bezier(0.65, 0, 0.35, 1));
  --hero-landscape-reveal-duration: 500ms;
}

.lim-hero-env {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lim-hero-env__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ——— Sky layers (day CSS + night canvas) ——— */
.lim-hero-env__sky-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--hero-env-transition-duration) var(--hero-env-transition-easing);
}

.lim-hero-env__sky-layer.is-current {
  opacity: 1;
  z-index: 2;
}

.lim-hero-env__sky-layer.is-beneath {
  opacity: 1;
  z-index: 1;
  transition: none;
}

.lim-hero-env__sky-layer.is-exiting {
  opacity: 1;
  z-index: 3;
}

.lim-hero-env__sky-layer.is-exiting.is-fading {
  opacity: 0;
}

.lim-hero-env__sky-canvas {
  /* display sizing inherited from sky-layer */
}

/* Day sky — from lim-light-hero-sky (Wakana Y.K. / happy358 textures, MIT) */
.lim-light-sky {
  --lim-sky-top: hsl(200 82% 57%);
  --lim-sky-middle: hsl(199 82% 77%);
  --lim-sky-bottom: hsl(201 78% 91%);
  --lim-cloud-back-opacity: 0.34;
  --lim-cloud-front-opacity: 0.52;
  overflow: hidden;
  user-select: none;
  contain: layout paint style;
  background: linear-gradient(
    180deg,
    var(--lim-sky-top) 0%,
    var(--lim-sky-middle) 53%,
    var(--lim-sky-bottom) 100%
  );
}

.lim-light-sky__clouds,
.lim-light-sky__clouds::before,
.lim-light-sky__clouds::after {
  position: absolute;
  inset: 0;
  content: "";
  background-repeat: repeat-x;
  /* Mid-sky band — raised from bottom toward vertical center */
  background-position: right center;
  will-change: transform, opacity, background-position, background-size;
}

.lim-light-sky__clouds::before,
.lim-light-sky__clouds::after {
  animation: lim-cloud-rise var(--lim-cloud-duration) linear infinite;
  animation-delay: var(--lim-cloud-delay);
  opacity: 0;
}

.lim-light-sky__clouds::after {
  transform: scaleX(-1);
}

.lim-light-sky__clouds--back {
  --lim-cloud-duration: 28s;
  --lim-cloud-delay: -7s;
  --lim-cloud-opacity: var(--lim-cloud-back-opacity);
}

.lim-light-sky__clouds--back::before,
.lim-light-sky__clouds--back::after {
  background-image: url("/assets/media/hero/cloud_back.png");
}

.lim-light-sky__clouds--back::after {
  animation-delay: -21s;
}

.lim-light-sky__clouds--front {
  --lim-cloud-duration: 22s;
  --lim-cloud-delay: -16.5s;
  --lim-cloud-opacity: var(--lim-cloud-front-opacity);
}

.lim-light-sky__clouds--front::before,
.lim-light-sky__clouds--front::after {
  background-image: url("/assets/media/hero/cloud_front.png");
}

.lim-light-sky__clouds--front::after {
  animation-delay: -5.5s;
}

/* Pause cloud drift when day layer is hidden (night theme active) */
.lim-light-sky:not(.is-current):not(.is-beneath):not(.is-exiting) .lim-light-sky__clouds::before,
.lim-light-sky:not(.is-current):not(.is-beneath):not(.is-exiting) .lim-light-sky__clouds::after {
  animation-play-state: paused;
}

@keyframes lim-cloud-rise {
  0% {
    opacity: 0;
    background-position: right 260px 58%;
    background-size: 24vh 24vh;
  }
  8%,
  76% {
    opacity: var(--lim-cloud-opacity);
  }
  100% {
    opacity: 0;
    background-position: right 42%;
    background-size: 245vh 82vh;
  }
}

/* Desktop — lower cloud band so sprite bottom sits behind mountain silhouette */
@media (min-width: 768px) {
  .lim-light-sky__clouds::before,
  .lim-light-sky__clouds::after {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 72%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 72%);
  }

  @keyframes lim-cloud-rise {
    0% {
      opacity: 0;
      background-position: right 280px bottom -28vh;
      background-size: 22vh 22vh;
    }
    8%,
    76% {
      opacity: var(--lim-cloud-opacity);
    }
    100% {
      opacity: 0;
      background-position: right bottom 18vh;
      background-size: 260vh 88vh;
    }
  }
}

@media (max-width: 767px) {
  .lim-light-sky {
    --lim-cloud-back-opacity: 0.28;
    --lim-cloud-front-opacity: 0.44;
  }

  .lim-light-sky__clouds::before,
  .lim-light-sky__clouds::after {
    /* stretch cloud sprites ~15% and soften bottom crop */
    transform-origin: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 78%);
  }

  .lim-light-sky__clouds::after {
    transform: scaleX(-1);
  }

  @keyframes lim-cloud-rise {
    0% {
      opacity: 0;
      background-position: right 140px bottom -22vh;
      background-size: 23vh 23vh; /* ~15% larger than 20vh */
    }
    8%,
    76% {
      opacity: var(--lim-cloud-opacity);
    }
    100% {
      opacity: 0;
      background-position: right bottom 14vh;
      background-size: 196vh 71vh; /* 170×1.15, 62×1.15 */
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lim-light-sky__clouds::before,
  .lim-light-sky__clouds::after {
    animation: none;
    opacity: var(--lim-cloud-opacity);
    background-position: center 48%;
    background-size: auto 72vh;
  }

  @media (min-width: 768px) {
    .lim-light-sky__clouds::before,
    .lim-light-sky__clouds::after {
      background-position: center bottom 16vh;
      background-size: auto 78vh;
    }
  }

  @media (max-width: 767px) {
    .lim-light-sky__clouds::before,
    .lim-light-sky__clouds::after {
      background-position: center bottom 12vh;
      background-size: auto 83vh; /* ~15% taller */
    }
  }
}

/* ——— Mountain layers ———
   Both themes share one geometry box on the parent.
   No per-image translate/left:50% — that caused day/night ghosting. */
.lim-hero-env__mountains {
  --hero-mountain-peak-y: 0.214;
  --hero-mountain-lift: 0px;
  --hero-mountain-anchor: 25%;
  --hero-mountain-aspect: 3276 / 3725;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.lim-hero-env__mountain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  object-fit: contain;
  object-position: center top;
  transform: none;
  z-index: 1;
  opacity: 0;
  transition: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.lim-hero-env__mountain.is-loaded {
  transition: opacity var(--hero-landscape-reveal-duration) var(--ease-standard);
}

.lim-hero-env__mountain.is-loaded.is-current,
.lim-hero-env__mountain.is-loaded.is-beneath {
  opacity: 1;
}

.lim-hero-env__mountain.is-loaded.is-exiting {
  opacity: 1;
  z-index: 3;
  transition: opacity var(--hero-env-transition-duration) var(--hero-env-transition-easing);
}

.lim-hero-env__mountain.is-loaded.is-exiting.is-fading {
  opacity: 0;
}

.lim-hero-env__mountain.is-error {
  opacity: 0;
}

/* Desktop — peak above hero title via shared parent geometry */
@media (min-width: 768px) {
  .lim-hero-env__mountains {
    left: 50%;
    right: auto;
    top: var(--hero-mountain-anchor);
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--hero-mountain-aspect);
    transform: translate(
      -50%,
      calc(var(--hero-mountain-peak-y) * -100% - var(--hero-mountain-lift))
    );
    overflow: visible;
  }

  .lim-hero-env__mountain {
    object-fit: fill;
    object-position: center top;
  }
}

/* Mobile — forest anchored to bottom, same crop box for both themes */
@media (max-width: 767px) {
  .lim-hero-env__mountains {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72%;
    min-height: 52%;
    max-height: 92%;
    transform: none;
    overflow: hidden;
  }

  .lim-hero-env__mountain {
    object-fit: cover;
    object-position: center bottom;
  }
}

/* Loading states (see hero-landscape.js) */
.lim-hero-env.is-loading-landscape .lim-hero-env__mountain {
  opacity: 0;
}

/* Sky replaces CSS scene only when present */
.home-hero--environment-canvas .home-hero__scene {
  background: transparent;
  transition:
    background var(--hero-env-transition-duration) var(--hero-env-transition-easing),
    filter var(--hero-env-transition-duration) var(--hero-env-transition-easing);
}

.home-hero--environment-mountains:not(.home-hero--environment-canvas) .home-hero__scene {
  transition:
    background var(--hero-env-transition-duration) var(--hero-env-transition-easing),
    filter var(--hero-env-transition-duration) var(--hero-env-transition-easing);
}

@media (prefers-reduced-motion: reduce) {
  .lim-hero-env__sky-layer,
  .lim-hero-env__mountain {
    transition-duration: 1ms !important;
  }
}