/*
 * Ové / afternoon under the olive canopy.
 * Lighting only: load after experience.css. Scroll owns the inline transform
 * and opacity of the five named layers; no CSS animations or transitions.
 */
.ove-daylight-scroll {
  position: relative;
  height: 185vh;
  height: 185svh;
}

.ove-daylight-scroll > #hero {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  /* Keep experience.css's 100dvh minimum and its responsive copy layout. */
}

/* Keep the negative lighting layer inside the body's stacking context, above
 * its base paint but behind ALL page content. Isolation does not establish a
 * fixed-position containing block or change the sticky sections' geometry. */
body {
  isolation: isolate;
}

/* The sunlight and multiply shadows composite against their own paper, never
 * against letters, bottle pixels, photography, navigation, or dialog content. */
.ove-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  isolation: isolate;
  background: var(--ove-paper);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* These are the ONLY surfaces that expose the lit paper. Explicit host IDs
 * beat the opaque backgrounds in the later immersive/infusions/USP sheets,
 * including the reduced-motion USP fallback. Clear both the shop host AND
 * its panels; clearing just the outer wall would leave the sunlight hidden.
 * Photograph stages, hero, footer, title backplates and control fills stay
 * opaque. No foreground opacity, z-index, transform or filter is changed. */
body #ove-world.ove-introduction,
body #ove-selection.ove-selection,
body #ove-selection #infusions,
body #ove-selection .ove-flavour-phase,
body #ove-selection #products.ove-shopping,
body #ove-selection #products .ove-shop-panel,
body #ove-enjoy[data-ove-usp],
body #ove-enjoy .ove-usp-wall,
body #ove-enjoy .ove-usp-message {
  background: transparent;
}

/* These four images are RGBA cutouts. Multiplying them against a lit wall
 * would still recolour the bottle despite putting the light behind it.
 * Normal compositing preserves opaque image pixels and their clear edges. */
body #ove-selection #products .ove-shop-panel > div:first-child img {
  mix-blend-mode: normal;
}

.ove-atmosphere > div {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  transform-origin: 52% 42%;
}

/* Ambient exposure changes with the sun, without a moving rectangular edge. */
.ove-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #68674f;
  mix-blend-mode: multiply;
  opacity: var(--ove-surface-shade, .035);
  pointer-events: none;
}

.ove-sun-wash {
  opacity: .5;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse at 43% 38%, #fff9de 0%, #ffedb8b3 24%, #f1cd8100 62%),
    radial-gradient(ellipse at 66% 65%, #efc47b66 0%, #efc47b00 52%);
  /* Even the light has a soft falloff if a rotated layer enters the viewport. */
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 45%, #000000b3 68%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 45%, #000000b3 68%, transparent 100%);
}

.ove-canopy-far,
.ove-canopy-near {
  mix-blend-mode: multiply;
}

.ove-canopy-far::before,
.ove-canopy-near::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./attached_assets/ove-canopy-shadow.svg");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  /* Feather the SVG's actual image boundary, not only individual leaves.
     Blurred foliage alone still exposes a straight, rotated image edge. */
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 45%, #000000b3 68%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 45%, #000000b3 68%, transparent 100%);
}

.ove-canopy-far {
  opacity: .12;
}

.ove-canopy-far::before {
  background-position: 65% 35%;
  background-size: 123% 118%;
  transform: scaleX(-1);
  filter: blur(17px);
  opacity: .62;
}

.ove-canopy-near {
  opacity: .20;
}

.ove-canopy-near::before {
  background-position: 50% 42%;
  /* The penumbra is in the original artwork, not a repeated leaf symbol. */
  opacity: .92;
}

/* Video stays at its existing level; overlays precede labels (2), controls
 * (3), and mobile copy (2). These are exposure changes, not image movement. */
.ove-hero-media > .ove-film-shade,
.ove-hero-media > .ove-film-sun {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ove-film-shade {
  opacity: 0;
  background:
    linear-gradient(115deg, #354a48e6 0%, #1d3039 68%, #233c42 100%);
  mix-blend-mode: multiply;
}

.ove-film-sun {
  opacity: .16;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 35% 12%, #f4d29b 0%, #e2ab62b3 34%, #ba824b00 78%),
    linear-gradient(135deg, #ebbb7066, #ebbb7000 70%);
}

@media (max-width: 767px) {
  /* One broad drifting projection on a narrow viewport, not a scaled-down
   * confetti pattern. Child opacity attenuates scroll's inline layer opacity. */
  .ove-canopy-near::before {
    background-size: auto 112%;
    background-position: 59% 38%;
    opacity: .80;
    filter: blur(3px);
  }
  .ove-canopy-far::before {
    background-size: auto 130%;
    background-position: 72% 42%;
    opacity: .40;
    filter: blur(22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ove-daylight-scroll {
    height: auto;
  }
  .ove-daylight-scroll > #hero {
    position: relative;
    top: auto;
    height: auto;
  }
  .ove-atmosphere > div {
    transform: none !important;
    will-change: auto;
  }
  .ove-canopy-near { opacity: .10 !important; }
  .ove-canopy-far { opacity: .045 !important; }
  .ove-sun-wash { opacity: .08 !important; }
  .ove-atmosphere::before { opacity: .025; }
  .ove-hero-media > .ove-film-shade,
  .ove-hero-media > .ove-film-sun {
    display: none;
  }
}