/* ============================================================
 * OSC Scroll-Cinematic — CONTAINED gallery-slot styles
 * Brand palette: deep forest green, warm brown, gold-sand, cream.
 * Scoped under .osc-cin so it cannot leak into the WooCommerce theme.
 *
 * v2: the effect lives INSIDE the product feature-image slot, NOT full-bleed.
 * .osc-cin-host  = the WooCommerce gallery container (we hide its children).
 * .osc-cin-track = the scroll track inside it (gives the scrub its length).
 * .osc-cin-stage = the sticky, feature-image-sized box that paints the frames.
 * ============================================================ */
.osc-cin {
  --osc-cream: #f6f1e7;
  --osc-sand: #e7dcc6;
  --osc-gold: #c2a04e;
  --osc-green: #2d5016;
  --osc-brown: #4a3526;
  --osc-ink: #1c140e;
}

/* The host gallery slot keeps its theme width/float/position — we only hide
   its static children (slider/thumbnails/zoom) and drop in our track. */
.osc-cin-host > [data-osc-hidden] { display: none !important; }

.osc-cin-track {
  position: relative;
  width: 100%;
  margin: 0;
  /* height is set inline by the engine (stage height + scrub distance). */
}

.osc-cin-stage {
  position: -webkit-sticky;
  position: sticky;
  top: 16px;                 /* overridden inline by the engine (header offset) */
  width: 100%;
  height: 70vh;              /* overridden inline by the engine (feature size) */
  overflow: hidden;
  display: block;
  border-radius: var(--osc-radius, 10px);
  background: var(--osc-ink);
  box-shadow: 0 10px 40px rgba(28, 20, 14, 0.12);
}
.osc-cin--contain .osc-cin-stage { background: var(--osc-cream); }

.osc-cin-poster,
.osc-cin-canvas,
.osc-cin-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  margin: 0;
}
.osc-cin-poster,
.osc-cin-fallback { object-fit: cover; }
.osc-cin--contain .osc-cin-poster,
.osc-cin--contain .osc-cin-fallback { object-fit: contain; }
.osc-cin-poster { z-index: 1; }
.osc-cin-canvas { z-index: 2; }
.osc-cin-fallback { z-index: 2; }

/* legibility scrim — gentle on the cream bottle scene, stronger on cover scenes */
.osc-cin-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.50) 100%);
}
.osc-cin--contain .osc-cin-stage::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.0) 52%, rgba(74,53,38,0.26) 100%);
}

/* ---- overlay copy (scaled for the contained box, not full screen) ---- */
.osc-cin-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.osc-cin-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 5vh, 44px);
  margin: 0 auto;
  width: min(90%, 460px);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}
.osc-cin-line__main {
  display: block;
  font-family: "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.01em;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  color: var(--osc-cream);
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.osc-cin--contain .osc-cin-line__main {
  color: var(--osc-green);
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.osc-cin-line__sub {
  display: block;
  margin-top: 0.45rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: rgba(246,241,231,0.94);
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.osc-cin--contain .osc-cin-line__sub {
  color: var(--osc-brown);
  text-shadow: none;
}
.osc-cin-line__main::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 0.7rem auto 0;
  background: var(--osc-gold);
  opacity: 0.9;
}

/* ---- reduced-motion / poster-only: show copy statically, stacked ---- */
.osc-cin--poster .osc-cin-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(20px, 5vh, 44px);
  gap: 0.9rem;
}
.osc-cin--poster .osc-cin-line {
  position: static;
  opacity: 1 !important;
  transform: none !important;
}

/* ---- mobile / coarse pointer: collapse the track, show the loop video at the
        feature-image aspect (no sticky scrub, no frame download). ---- */
@media (max-width: 781px), (pointer: coarse) {
  .osc-cin-track { height: auto !important; }
  .osc-cin-stage {
    position: relative !important;
    top: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
  }
}