/* ============================================================
   Velvet & Co. — Motion System v2
   Dark luxury editorial: deliberate, slow, cinematic
   - Durate 200-700ms, easing cubic-bezier(.22,.61,.36,1)
   - Tutto rispetta prefers-reduced-motion
   - Variabili motion centralizzate per coerenza
   ============================================================ */

:root {
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-in:    cubic-bezier(.55,.06,.68,.19);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --motion-fast: 200ms;
  --motion-base: 400ms;
  --motion-slow: 700ms;
}

@media (prefers-reduced-motion: no-preference) {

  /* ── Reveal: fade up (default) ─────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity var(--motion-slow) var(--ease-out),
      transform var(--motion-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
    will-change: opacity, transform;
  }
  .reveal.revealed { opacity: 1; transform: translateY(0); }

  .reveal--fade { opacity: 0; transform: none; transition: opacity 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .reveal--fade.revealed { opacity: 1; }

  .reveal--left  { opacity: 0; transform: translateX(-36px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
  .reveal--left.revealed  { opacity: 1; transform: translateX(0); }

  .reveal--right { opacity: 0; transform: translateX(36px); transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out); }
  .reveal--right.revealed { opacity: 1; transform: translateX(0); }

  .reveal--scale { opacity: 0; transform: scale(.94); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .reveal--scale.revealed { opacity: 1; transform: scale(1); }

  /* ── Mask reveal (image curtain reveal) ────────────────────── */
  .reveal--mask {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  .reveal--mask.revealed { clip-path: inset(0 0 0 0); }

  .reveal--mask-x {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 900ms var(--ease-out);
  }
  .reveal--mask-x.revealed { clip-path: inset(0 0 0 0); }

  /* ── Split text (word-by-word fade up) ─────────────────────── */
  .split-text .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.4em);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    transition-delay: calc(var(--w, 0) * 55ms);
    will-change: opacity, transform;
  }
  .split-text.revealed .word { opacity: 1; transform: translateY(0); }

  .split-text--italic .word { font-style: italic; }

  /* ── Hero above-the-fold: entrata CSS-only (no JS-gating) ──────
     Il contenuto hero NON deve dipendere da reveal.js/IntersectionObserver
     (defer) per diventare visibile: è above-the-fold e contiene l'elemento
     LCP (h1). Animiamo l'entrata con keyframe CSS che parte subito al load
     (animation-delay piccolo, fill backwards) → l'LCP dipinge al primo frame
     utile invece di attendere il giro defer+IO. Le regole .reveal--fade
     globali (opacity:0) sono qui sovrascritte dentro .hero. */
  .hero__title--in {
    opacity: 0;
    animation: velvet-hero-in 700ms var(--ease-out) 60ms both;
  }
  .hero .reveal--fade {
    opacity: 0;
    animation: velvet-hero-in 800ms var(--ease-out) both;
    animation-delay: calc(120ms + var(--i, 0) * 80ms);
    transition: none; /* l'opacità è guidata dal keyframe, non da .revealed */
  }
  @keyframes velvet-hero-in {
    from { opacity: 0; transform: translateY(.5em); }
    to   { opacity: 1; transform: none; }
  }

  /* ── Counter (numeric reveal) ──────────────────────────────── */
  .counter { font-variant-numeric: tabular-nums; }

  /* ── Hero parallax background ──────────────────────────────── */
  .hero__bg.active { transform: scale(1); transition: transform 8s var(--ease-out); }

  .hero--kenburns .hero__bg {
    animation: kenburns 18s var(--ease-out) infinite alternate;
  }
  @keyframes kenburns {
    0%   { transform: scale(1.08) translate(0,0); }
    100% { transform: scale(1.18) translate(-1.5%,1%); }
  }

  /* ── Image hover zoom ──────────────────────────────────────── */
  .velvet-zoom img { transition: transform 800ms var(--ease-out); }
  .velvet-zoom:hover img { transform: scale(1.05); }

  /* ── Product card hover: secondary image cross-fade ────────── */
  .product-card__img-wrap img.is-secondary {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 500ms var(--ease-out);
  }
  .product-card:hover .product-card__img-wrap img.is-secondary { opacity: 1; }

  .product-card__price--animated {
    display: inline-block;
    transition: transform 350ms var(--ease-spring);
  }
  .product-card:hover .product-card__price--animated { transform: translateX(4px); }

  /* ── Magnetic links underline (gold) ───────────────────────── */
  .link-gold {
    position: relative;
    display: inline-block;
  }
  .link-gold::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 450ms var(--ease-out);
  }
  .link-gold:hover::after { transform: scaleX(1); transform-origin: left; }

  /* ── CTA gold shimmer on hover ─────────────────────────────── */
  .btn--gold {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn--gold::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    transform: translateX(-120%);
    transition: transform 700ms var(--ease-out);
    pointer-events: none;
    z-index: 1;
  }
  .btn--gold:hover::before { transform: translateX(120%); }

  /* ── Cart count pulse on update ────────────────────────────── */
  @keyframes cart-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.4); }
    100% { transform: scale(1); }
  }
  .nav-cart-count.pulse { animation: cart-pulse 500ms var(--ease-spring); }

  /* ── Mini-cart item enter/exit ─────────────────────────────── */
  @keyframes mc-item-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .mini-cart__item { animation: mc-item-in 400ms var(--ease-out) both; }

  /* ── Page transition (View Transitions API) ────────────────── */
  @keyframes vt-slide-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  ::view-transition-new(root) {
    animation: vt-slide-in 380ms var(--ease-out) both;
  }
  ::view-transition-old(root) {
    animation: vt-slide-in 220ms reverse both;
  }
  ::view-transition-group(product-image) {
    animation-duration: 500ms;
    animation-timing-function: var(--ease-out);
  }

  /* ── Gold shimmer skeleton ─────────────────────────────────── */
  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .shimmer {
    background: linear-gradient(
      90deg,
      var(--color-bg-2) 25%,
      rgba(201,169,110,.08) 50%,
      var(--color-bg-2) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
  }

  /* ── Marquee (eyebrow announcement strip) ──────────────────── */
  .marquee {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    gap: 3rem;
  }
  .marquee__track {
    display: inline-flex;
    gap: 3rem;
    animation: marquee 32s linear infinite;
    flex-shrink: 0;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  /* ── Navbar enter on first paint ───────────────────────────── */
  @keyframes nav-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .site-header { animation: nav-in 600ms var(--ease-out) both; animation-delay: 200ms; }

  /* ── PDP gallery thumbnail active state ────────────────────── */
  .pdp-gallery__thumb {
    opacity: .55;
    transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  }
  .pdp-gallery__thumb:hover { opacity: .85; transform: translateY(-2px); }
  .pdp-gallery__thumb.is-active { opacity: 1; }

  .pdp-gallery__main img {
    transition: opacity 350ms var(--ease-out), transform 600ms var(--ease-out);
  }
  .pdp-gallery__main.is-switching img { opacity: 0; }

  /* ── Sticky add-to-cart slide-up ───────────────────────────── */
  @keyframes stick-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  .sticky-atc { animation: stick-in 400ms var(--ease-out) both; }

  /* ── Hover tilt (cursor-aware micro-tilt on featured cards) ── */
  .tilt {
    transform-style: preserve-3d;
    transition: transform 400ms var(--ease-out);
    will-change: transform;
  }

  /* ── Subtle background grain ───────────────────────────────── */
  .grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
}

/* Always visible when reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--fade,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--mask,
  .reveal--mask-x,
  .split-text .word,
  .hero__title--in,
  .hero .reveal--fade {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
    animation: none;
  }
  .hero--kenburns .hero__bg,
  .hero__velvet-folds,
  .hero__velvet-glow,
  .hero__velvet-sheen,
  .marquee__track,
  .shimmer,
  .nav-cart-count.pulse { animation: none; }
}

/* ── Hero velvet keyframes ─────────────────────────────────────
   Drift lentissimo per "respiro" del velluto, sheen ogni 22s,
   glow auto-drift quando il mouse non muove.                    */
@keyframes velvet-folds {
  0%   { transform: scale(1.4) rotate(0deg); }
  100% { transform: scale(1.4) rotate(360deg); }
}

@keyframes velvet-glow-drift {
  0%, 100% { opacity: 0.9;  filter: blur(0); }
  50%      { opacity: 1.0;  filter: blur(8px); }
}

@keyframes velvet-sheen {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  60%  { opacity: 1; }
  80%  { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(100%); opacity: 0; }
}