/* ═══════════════════════════════════════════════════════════════
   V51 · PRODUCTION FX · CSS
   Effets spectaculaires dédiés à production.html
   Chaque section a sa personnalité, sa transition, ses propres motions.
   Coexiste avec v51-fx.css (layer globale) — ne remplace rien.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. SECTION INDICATOR (fixed left rail)
   Indique la section courante pendant le scroll.
───────────────────────────────────────────── */
.prod-indicator{
  position:fixed;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:150;
  display:flex;
  flex-direction:column;
  gap:14px;
  pointer-events:none;
  mix-blend-mode:difference;
  opacity:0;
  transition:opacity .6s ease;
}
.prod-indicator.ready{opacity:1}
.prod-ind-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:9px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.22);
  transition:color .5s ease;
  pointer-events:auto;
  cursor:pointer;
  font-variant-numeric:tabular-nums;
}
.prod-ind-item .prod-ind-num{
  font-family:'Playfair Display',Georgia,serif;
  font-size:10px;
  font-style:italic;
  font-weight:400;
  opacity:.5;
  transition:opacity .5s;
}
.prod-ind-item .prod-ind-line{
  width:14px;
  height:1px;
  background:currentColor;
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.prod-ind-item .prod-ind-label{
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .5s,transform .5s;
}
.prod-ind-item.active{color:rgba(255,255,255,.95)}
.prod-ind-item.active .prod-ind-num{opacity:1}
.prod-ind-item.active .prod-ind-line{width:42px}
.prod-ind-item.active .prod-ind-label{opacity:1;transform:translateX(0)}
.prod-ind-item:hover{color:rgba(255,255,255,.7)}

/* ─────────────────────────────────────────────
   2. CHAPTER INTROS (giant kinetic word)
   Entre chaque section : un mot énorme, parallaxé.
───────────────────────────────────────────── */
.prod-chapter{
  position:relative;
  padding:72px 40px 52px;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.prod-chapter--dark{background:var(--bg,#0a0a0a)}
.prod-chapter--light{background:var(--off,#f5f5f3)}
.prod-chapter-inner{
  position:relative;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:28px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.prod-chapter-num{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(20px,2.4vw,34px);
  color:rgba(255,255,255,.18);
  letter-spacing:-1px;
  flex-shrink:0;
}
.prod-chapter--light .prod-chapter-num{color:rgba(0,0,0,.2)}
.prod-chapter-word{
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(64px,14vw,220px);
  font-weight:800;
  letter-spacing:-6px;
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.35);
  text-transform:uppercase;
  display:inline-block;
  will-change:transform;
}
.prod-chapter--light .prod-chapter-word{-webkit-text-stroke:1px rgba(0,0,0,.4)}
.prod-chapter-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent,#3a6aff);
  flex-shrink:0;
  box-shadow:0 0 24px rgba(58,106,255,.6);
}
.prod-chapter--light .prod-chapter-dot{background:var(--accent,#3a6aff)}

/* ─────────────────────────────────────────────
   3. KINETIC MARQUEE STRIP
   Bande horizontale qui défile, réactive au scroll.
───────────────────────────────────────────── */
.prod-marquee{
  position:relative;
  overflow:hidden;
  padding:32px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:var(--bg,#0a0a0a);
}
.prod-marquee--light{
  background:var(--off,#f5f5f3);
  border-color:rgba(0,0,0,.08);
}
.prod-marquee-track{
  display:flex;
  gap:56px;
  white-space:nowrap;
  will-change:transform;
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(34px,6vw,92px);
  font-weight:700;
  letter-spacing:-2px;
  text-transform:uppercase;
}
.prod-marquee-item{
  display:inline-flex;
  align-items:center;
  gap:28px;
  color:rgba(255,255,255,.9);
}
.prod-marquee--light .prod-marquee-item{color:var(--dark,#111)}
.prod-marquee-item em{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.45);
}
.prod-marquee--light .prod-marquee-item em{-webkit-text-stroke:1.5px rgba(0,0,0,.45)}
.prod-marquee-star{
  display:inline-block;
  width:28px;
  height:28px;
  color:var(--accent,#3a6aff);
  flex-shrink:0;
}
.prod-marquee-star svg{width:100%;height:100%}

/* ─────────────────────────────────────────────
   4. HERO — MASSIVE WATERMARK + SCROLL MOTION
───────────────────────────────────────────── */
.hero[data-prod-section="hero"]{position:relative}
.prod-hero-mark{
  position:absolute;
  bottom:-6vw;
  right:-2vw;
  z-index:1;
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(180px,28vw,440px);
  font-weight:800;
  letter-spacing:-14px;
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none;
  user-select:none;
  will-change:transform;
}
.prod-hero-mark em{
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:400;
  -webkit-text-stroke:1px rgba(108,140,255,.12);
}
/* Scroll-linked fade/scale du hero */
.prod-hero-inner{will-change:transform,opacity}

/* ─────────────────────────────────────────────
   5. GALLERY — HORIZONTAL DRIFT + MASK
───────────────────────────────────────────── */
.prod-gallery-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.prod-gallery-drift{
  position:absolute;
  top:30%;
  left:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(80px,16vw,240px);
  font-weight:800;
  letter-spacing:-10px;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.04);
  white-space:nowrap;
  will-change:transform;
}
.gallery-sec[data-prod-section]{position:relative}
.gallery-sec[data-prod-section] .gallery-top,
.gallery-sec[data-prod-section] .gallery-wrapper,
.gallery-sec[data-prod-section] .track-nav{position:relative;z-index:1}

/* ─────────────────────────────────────────────
   6. PRESTA — 3D TILT + HALO + NUMBER REVEAL
───────────────────────────────────────────── */
.presta-card{
  transform-style:preserve-3d;
  will-change:transform;
  transition:background .5s,transform .6s cubic-bezier(.2,.8,.2,1);
}
.presta-card.prod-tilt{transition:background .5s}
.presta-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at var(--halo-x,50%) var(--halo-y,50%),
    rgba(58,106,255,.12) 0%,
    transparent 60%
  );
  opacity:0;
  transition:opacity .5s;
  pointer-events:none;
}
.presta-card:hover::before{opacity:1}
.presta-card-num{
  position:absolute;
  top:32px;
  right:56px;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:11px;
  color:rgba(0,0,0,.2);
  letter-spacing:2px;
  pointer-events:none;
}
.presta-card .presta-top,
.presta-card .presta-desc,
.presta-card .presta-tags{position:relative;z-index:2}

/* ─────────────────────────────────────────────
   7. ABOUT — PINNED TEXT + FLOATING BG
───────────────────────────────────────────── */
.about-sec[data-prod-section]{position:relative;overflow:hidden}
.prod-about-bg{
  position:absolute;
  top:0;
  left:-8vw;
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(120px,22vw,340px);
  letter-spacing:-8px;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(108,140,255,.05);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  will-change:transform;
  z-index:0;
}
.about-sec[data-prod-section] .about-inner{position:relative;z-index:1}

/* ─────────────────────────────────────────────
   8. TESTIMONIALS — DARK BG EFFECT
───────────────────────────────────────────── */
.testi-sec[data-prod-section]{position:relative;overflow:hidden}
.prod-testi-glow{
  position:absolute;
  top:-50%;
  left:50%;
  transform:translateX(-50%);
  width:900px;
  height:900px;
  background:radial-gradient(
    circle,
    rgba(58,106,255,.08) 0%,
    transparent 60%
  );
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.testi-sec[data-prod-section] > *:not(.prod-testi-glow){position:relative;z-index:1}
.testi-card{
  transition:background .4s,border-color .4s,transform .35s,box-shadow .4s;
}
.testi-card:hover{
  box-shadow:0 20px 50px rgba(58,106,255,.12);
}

/* ─────────────────────────────────────────────
   9. FEATURED — MASSIVE NUMBER + SCALE IN
───────────────────────────────────────────── */
.featured-sec[data-prod-section]{position:relative;overflow:hidden}
.prod-featured-num{
  position:absolute;
  top:40px;
  right:40px;
  font-family:'Inter',system-ui,sans-serif;
  font-size:clamp(120px,18vw,260px);
  font-weight:800;
  line-height:.85;
  letter-spacing:-10px;
  color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.08);
  pointer-events:none;
  user-select:none;
  z-index:0;
  will-change:transform;
}
.featured-sec[data-prod-section] > *:not(.prod-featured-num){position:relative;z-index:1}
.featured-card{will-change:transform}

/* ─────────────────────────────────────────────
   10. CTA — GIANT EXPANDING SCROLL TEXT
───────────────────────────────────────────── */
.cta-sec[data-prod-section]{position:relative;overflow:hidden}
.prod-cta-big{
  position:absolute;
  top:-10vw;
  left:50%;
  transform:translateX(-50%);
  font-family:'Playfair Display',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(200px,32vw,520px);
  letter-spacing:-18px;
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px rgba(108,140,255,.06);
  pointer-events:none;
  user-select:none;
  z-index:0;
  white-space:nowrap;
  will-change:transform;
}
.cta-sec[data-prod-section] > *:not(.prod-cta-big){position:relative;z-index:1}

/* Magnétique sur CTA btn */
.cta-row .btn-w,
.cta-row .btn-o{will-change:transform}

/* ─────────────────────────────────────────────
   11. SCROLL PROGRESS (top bar)
───────────────────────────────────────────── */
.prod-scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:2px;
  background:linear-gradient(90deg,var(--accent,#3a6aff),var(--accent2,#6c8cff));
  z-index:300;
  transform-origin:left center;
  transform:scaleX(0);
  pointer-events:none;
  box-shadow:0 0 14px rgba(108,140,255,.5);
}

/* ─────────────────────────────────────────────
   12. SECTION REVEAL (clip-path enter)
───────────────────────────────────────────── */
.prod-clip-reveal{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s cubic-bezier(.77,0,.18,1);
}
.prod-clip-reveal.in-view{clip-path:inset(0 0 0 0)}

/* ─────────────────────────────────────────────
   13. RESPONSIVE — MOBILE
───────────────────────────────────────────── */
@media(max-width:900px){
  .prod-indicator{display:none}
  .prod-chapter{padding:48px 20px 28px}
  .prod-chapter-inner{gap:14px}
  .prod-chapter-num{font-size:14px}
  .prod-hero-mark{font-size:clamp(140px,34vw,280px);letter-spacing:-8px;bottom:-8vw;right:-4vw}
  .prod-marquee{padding:20px 0}
  .prod-marquee-track{gap:32px;font-size:clamp(28px,9vw,56px)}
  .prod-marquee-item{gap:18px}
  .prod-marquee-star{width:20px;height:20px}
  .prod-about-bg{font-size:clamp(80px,28vw,200px);top:auto;bottom:0;opacity:.6}
  .prod-cta-big{font-size:clamp(140px,44vw,300px);top:-6vw}
  .prod-featured-num{font-size:clamp(80px,24vw,160px);top:20px;right:20px}
  .prod-gallery-drift{font-size:clamp(60px,22vw,140px)}
  .presta-card-num{top:18px;right:24px;font-size:10px}
}

/* ─────────────────────────────────────────────
   14. REDUCED MOTION
───────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .prod-chapter-word,
  .prod-marquee-track,
  .prod-hero-mark,
  .prod-gallery-drift,
  .prod-about-bg,
  .prod-testi-glow,
  .prod-featured-num,
  .prod-cta-big{
    transform:none !important;
    animation:none !important;
  }
  .prod-chapter{padding:32px 40px 16px}
}