/* ============================================================
   BEBO COLD PRESS — PREMIUM MOTION LAYER
   Vanilla CSS — GPU-accelerated transforms only.
   Pairs with assets/js/bebo-motion.js
   ============================================================ */

/* ── Scroll progress bar (top of viewport) ───────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

/* ── 3D tilt wrapper ─────────────────────────────────────── */
/* Applied to .shot-card, .ritual-card, .location-menu-card, [data-tilt] */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
[data-tilt].is-tilting {
  transition: transform 0.1s linear;
}
/* Lift inner image slightly on tilt for depth */
[data-tilt] img,
[data-tilt] .shot-card__image,
[data-tilt] .ritual-card__image {
  transform: translateZ(28px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover zoom on product cards — combined with the 3D tilt depth so both coexist */
.shot-card:hover .shot-card__image,
.shot-card:hover img.shot-card__image,
.ritual-card:hover .ritual-card__image {
  transform: translateZ(28px) scale(1.09);
}

/* Glare sheen that follows the cursor on tilt cards */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0) 55%
  );
  transition: opacity 0.4s var(--ease);
  z-index: 4;
  mix-blend-mode: overlay;
}
[data-tilt].is-tilting .tilt-glare { opacity: 1; }

/* ── Reveal: clip-path image masks ───────────────────────── */
.reveal-img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
.reveal-img.is-visible { clip-path: inset(0 0 0 0); }

/* Subtle internal scale so the photo "settles" as the mask opens */
.reveal-img img,
.reveal-img > picture > img {
  transform: scale(1.12);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.reveal-img.is-visible img,
.reveal-img.is-visible > picture > img { transform: scale(1); }

/* ── Reveal: blur + rise (richer than fade-up) ───────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(38px);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease-out),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s var(--ease-out);
  will-change: transform, opacity, filter;
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Stagger children of a [data-stagger] container */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s var(--ease-out);
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── Parallax (translateY driven by JS scroll) ───────────── */
[data-parallax] { will-change: transform; }

/* ── Hero depth: bottle/image follows pointer ────────────── */
.hero__video,
[data-hero-depth] {
  will-change: transform;
}

/* ── Magnetic buttons ────────────────────────────────────── */
[data-magnetic] {
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Hover zoom on any image flagged .img-zoom ───────────── */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.img-zoom:hover img { transform: scale(1.07); }

/* ── Continuous Ken Burns zoom+pan for .img-kenburns (starts once its .reveal-img parent has settled in) ── */
.reveal-img.is-visible .img-kenburns {
  animation: kenburns-drift 9s ease-in-out 0.4s infinite;
  transform-origin: 50% 40%;
  will-change: transform;
}
@keyframes kenburns-drift {
  0%, 100% { transform: scale(1.05) translate(0, 0); }
  50%      { transform: scale(1.18) translate(-1.5%, -2%); }
}

/* ── Count-up numbers ────────────────────────────────────── */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ── Shimmer accent for premium headings (optional hook) ─── */
.shimmer-text {
  background: linear-gradient(
    100deg,
    var(--c-text) 30%,
    var(--c-brand) 50%,
    var(--c-text) 70%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* ── Floating ambient orbs (decorative depth) ────────────── */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: float-orb 14s ease-in-out infinite;
}
@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(24px, -30px) scale(1.08); }
  66%      { transform: translate(-20px, 18px) scale(0.96); }
}

/* ── Reduced motion: turn everything off, show final state ─ */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  [data-tilt],
  [data-tilt] img,
  [data-tilt] .shot-card__image,
  [data-tilt] .ritual-card__image,
  [data-magnetic],
  [data-parallax],
  [data-hero-depth] {
    transform: none !important;
    transition: none !important;
  }
  .tilt-glare { display: none; }
  .reveal-img { clip-path: inset(0 0 0 0) !important; }
  .reveal-img img { transform: none !important; }
  .img-kenburns { animation: none !important; transform: none !important; }
  .reveal-up,
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .shimmer-text { animation: none; -webkit-text-fill-color: var(--c-text); }
  .ambient-orb { animation: none; }
}