/* ============================================================
   METEL — bottle animation stylesheet
   Pairs with bottle-metel.svg and bottle-animation.js
   Cinematic Dark Editorial / Film-Grain Intimacy (see design/perfume-showcase/visual-direction-v2.md)

   Motion principles:
   - warm, slow, weighty — no snap, no bounce
   - timing: 600-1500ms; easings: exp-out (entrance), ease-in-out (loop), linear (parallax/scroll)
   - every animated surface respects prefers-reduced-motion
   ============================================================ */

/* ------------------------------------------------------------
   1. Host container
   The page wraps <svg.metel-bottle/> in a .metel-bottle-wrap.
   The wrap owns the parallax translate and the hover-tilt transforms;
   the SVG itself owns the breathing scale (keeps transforms
   composable without fighting each other).
   ------------------------------------------------------------ */
.metel-bottle-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  /* CSS variables tilt + parallax write into */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --parallax-y: 0px;
  perspective: 1400px;
  transform-style: preserve-3d;
  /* soft warm atmosphere behind the flacon (radial halo, grounds it in the page) */
  isolation: isolate;
}

.metel-bottle-wrap::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  background:
    radial-gradient(60% 55% at 50% 55%,
      rgba(92, 26, 31, 0.28) 0%,
      rgba(92, 26, 31, 0.10) 45%,
      transparent 72%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.metel-bottle {
  display: block;
  width: 100%;
  height: 100%;
  /* parallax is the outermost transform, then tilt, then breathing (on the SVG) */
  transform: translate3d(0, var(--parallax-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-origin: 50% 62%;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  /* faint film-grain friendly contrast lift */
  filter: contrast(1.03) saturate(0.96);
}

/* ------------------------------------------------------------
   2. Breathing loop (SVG root group)
   1.0 → 1.02 → 1.0 over 4s, ease-in-out, infinite.
   Paused while the spray animation runs (.is-spraying class on wrap).
   ------------------------------------------------------------ */
@keyframes metel-breathe {
  0%, 100% { transform: scale(1.000); }
  50%      { transform: scale(1.020); }
}

.metel-bottle .metel-bottle__root {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: metel-breathe 4000ms ease-in-out infinite;
}

.metel-bottle-wrap.is-spraying .metel-bottle .metel-bottle__root {
  animation-play-state: paused;
}

/* ------------------------------------------------------------
   3. Cap press (the physical nozzle press that triggers the spray)
   Sequence: rest (0%) → press down 3px (22%) → hold (40%) → recover (100%)
   Applied via .is-spraying class, runs once per trigger.
   ------------------------------------------------------------ */
@keyframes metel-cap-press {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(3px); }
  40%  { transform: translateY(3px); }
  70%  { transform: translateY(-0.5px); }
  100% { transform: translateY(0); }
}

.metel-bottle .metel-bottle__cap {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 200ms ease-out;
}

.metel-bottle-wrap.is-spraying .metel-bottle .metel-bottle__cap {
  animation: metel-cap-press 1400ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}

/* ------------------------------------------------------------
   4. Spray mist halo (radial SVG group at the top of the bottle)
   Grows from 0 → full over 900ms, lingers 300ms, fades over 1200ms.
   Total 2400ms spray lifespan.
   ------------------------------------------------------------ */
@keyframes metel-mist-bloom {
  0%   { opacity: 0; transform: translateY(0) scale(0.3); }
  25%  { opacity: 0.9; transform: translateY(-6px) scale(0.7); }
  45%  { opacity: 1;   transform: translateY(-14px) scale(1); }
  100% { opacity: 0;   transform: translateY(-42px) scale(1.4); }
}

.metel-bottle .metel-bottle__mist {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
}

.metel-bottle-wrap.is-spraying .metel-bottle .metel-bottle__mist {
  animation: metel-mist-bloom 2200ms cubic-bezier(0.22, 1, 0.36, 1) 140ms 1 both;
}

/* ------------------------------------------------------------
   5. Spray particles (each <use> injected by JS gets class .metel-particle)
   Particles receive individual --dx / --dy / --delay vars from JS so
   the drift is deterministic-but-varied per burst.
   ------------------------------------------------------------ */
@keyframes metel-particle-drift {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.25), calc(var(--dy) * 0.20)) scale(0.85);
  }
  55% {
    opacity: 0.85;
    transform: translate(calc(var(--dx) * 0.65), calc(var(--dy) * 0.60)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1.15);
  }
}

.metel-particle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: metel-particle-drift 2000ms cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms) 1 forwards;
}

/* ------------------------------------------------------------
   6. Shadow pulse — when the cap presses, the floor shadow tightens briefly
   (adds weight to the spray motion without being loud)
   ------------------------------------------------------------ */
@keyframes metel-shadow-pulse {
  0%, 100% { opacity: 1;    transform: scaleX(1); }
  22%      { opacity: 1.08; transform: scaleX(0.92); }
  60%      { opacity: 0.95; transform: scaleX(1.03); }
}

.metel-bottle .metel-bottle__shadow {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.metel-bottle-wrap.is-spraying .metel-bottle .metel-bottle__shadow {
  animation: metel-shadow-pulse 1400ms cubic-bezier(0.4, 0, 0.2, 1) 1;
}

/* ------------------------------------------------------------
   7. Intro — the first appearance of the bottle (fades in, settles).
   JS adds .is-intro on mount, removes it when intro completes.
   ------------------------------------------------------------ */
@keyframes metel-intro {
  0%   { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.metel-bottle-wrap.is-intro .metel-bottle {
  animation: metel-intro 1500ms cubic-bezier(0.22, 1, 0.36, 1) 1 both;
}

/* ------------------------------------------------------------
   8. Hover lift — when the pointer enters the bottle region, the
   atmosphere halo warms up and the bottle lifts a hair.
   Tilt itself is applied inline by JS via --tilt-x/--tilt-y vars.
   ------------------------------------------------------------ */
.metel-bottle-wrap:hover::before {
  opacity: 1.15;
}

.metel-bottle-wrap:hover .metel-bottle {
  filter: contrast(1.05) saturate(1);
}

/* ------------------------------------------------------------
   9. Focus — keyboard users get a warm amber ring on the wrap
   (2px solid accent-amber with 2px offset, matching page focus spec).
   ------------------------------------------------------------ */
.metel-bottle-wrap:focus-visible {
  outline: 2px solid #B8461E;
  outline-offset: 6px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   10. Reduced motion — full static mode
   - no breathing, no cap press, no spray, no intro, no parallax, no tilt
   - the bottle still fades in (opacity only, 600ms) so it doesn't pop
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .metel-bottle,
  .metel-bottle .metel-bottle__root,
  .metel-bottle .metel-bottle__cap,
  .metel-bottle .metel-bottle__mist,
  .metel-bottle .metel-bottle__shadow,
  .metel-bottle-wrap.is-intro .metel-bottle,
  .metel-particle {
    animation: none !important;
    transition: opacity 600ms linear !important;
    transform: none !important;
  }

  .metel-bottle-wrap {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --parallax-y: 0px;
  }

  .metel-bottle .metel-bottle__mist,
  .metel-particle {
    opacity: 0 !important;
  }
}

/* ------------------------------------------------------------
   11. Mobile tuning (≤ 600px)
   Narrower halo, slightly reduced breathing amplitude.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .metel-bottle-wrap { max-width: 320px; }

  @keyframes metel-breathe {
    0%, 100% { transform: scale(1.000); }
    50%      { transform: scale(1.012); }
  }
}