/* ============================================================
   COMPAGNIE MENESTREL — V54 MOTION
   Couche expérimentale : GSAP / ScrollTrigger / Three.js
   Cette feuille peut être supprimée sans affecter le site V53.
   ============================================================ */

html.motion-lab-ready { scroll-behavior: auto; }

.motion-lab-badge{
  position:fixed;right:16px;bottom:16px;z-index:1000;
  display:flex;align-items:center;gap:8px;padding:8px 11px;
  border:1px solid rgba(134,245,214,.28);border-radius:999px;
  background:rgba(6,13,25,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#dffcf5;font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;
  box-shadow:0 10px 32px rgba(0,0,0,.26);pointer-events:none;
}
.motion-lab-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#86f5d6;box-shadow:0 0 12px rgba(134,245,214,.9)}

/* WebGL hero layer ------------------------------------------------ */
.company-hero{isolation:isolate;overflow:hidden}
.motion-webgl{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;opacity:.72;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.42));
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.92),rgba(0,0,0,.42));
}
.company-hero::after{
  content:"";position:absolute;inset:-20%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,42%),rgba(134,245,214,.12),transparent 23%);
  opacity:.85;transition:opacity .25s ease;
}
.company-hero-copy{will-change:transform,opacity}
.company-hero-copy h1{transform-origin:left center}

/* A subtle depth treatment for cards ----------------------------- */
.motion-tilt{transform-style:preserve-3d;will-change:transform}
.motion-tilt .show-card-media,.motion-tilt .show-card-body,.motion-tilt img{transform-style:preserve-3d}
.motion-tilt .show-card-media{transform:translateZ(12px)}
.motion-tilt .show-card-body{transform:translateZ(6px)}
.motion-tilt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--tilt-x,50%) var(--tilt-y,50%),rgba(255,255,255,.11),transparent 38%);
  transition:opacity .25s ease;
}
.motion-tilt:hover::after{opacity:1}
.show-link.motion-tilt{position:relative}

/* Scrollytelling -------------------------------------------------- */
.motion-story{
  position:relative;background:
    radial-gradient(circle at 14% 15%,rgba(134,245,214,.09),transparent 25%),
    radial-gradient(circle at 84% 72%,rgba(151,126,255,.10),transparent 28%),
    #07101d;
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.motion-story-stage{
  min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  align-items:center;gap:clamp(26px,5vw,72px);max-width:1240px;margin:0 auto;padding:72px 40px;
}
.motion-story-visual{
  position:relative;aspect-ratio:16/10;border-radius:30px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:#0c1829;
  box-shadow:0 36px 90px rgba(0,0,0,.45);
  perspective:1100px;
}
.motion-story-frame{position:absolute;inset:0;opacity:0;transform:scale(1.07)}
.motion-story-frame:first-child{opacity:1}
.motion-story-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) contrast(1.03)}
.motion-story-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(5,12,24,.04),rgba(5,12,24,.28))}
.motion-story-orbit{
  position:absolute;left:50%;top:50%;width:78%;aspect-ratio:1;border-radius:50%;z-index:4;pointer-events:none;
  border:1px solid rgba(134,245,214,.22);transform:translate(-50%,-50%) rotate(-18deg);
  box-shadow:0 0 54px rgba(134,245,214,.06) inset;
}
.motion-story-orbit::before,.motion-story-orbit::after{content:"";position:absolute;border-radius:50%;background:#86f5d6;box-shadow:0 0 16px rgba(134,245,214,.9)}
.motion-story-orbit::before{width:8px;height:8px;left:10%;top:24%}
.motion-story-orbit::after{width:5px;height:5px;right:13%;bottom:20%}
.motion-story-progress{position:absolute;left:20px;right:20px;bottom:20px;height:2px;background:rgba(255,255,255,.16);z-index:5;border-radius:2px;overflow:hidden}
.motion-story-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#86f5d6,#f6d28d)}
.motion-story-copy{position:relative;z-index:3}
.motion-story-copy .eyebrow{margin-bottom:13px}
.motion-story-copy h2{font-size:clamp(34px,4vw,62px);line-height:1.02;margin:0 0 26px;max-width:640px}
.motion-story-intro{color:var(--muted);font-size:17px;line-height:1.65;max-width:620px;margin:0 0 26px}
.motion-story-steps{position:relative;min-height:250px}
.motion-story-step{
  position:absolute;inset:0 auto auto 0;max-width:590px;opacity:0;transform:translateY(28px);pointer-events:none;
}
.motion-story-step:first-child{opacity:1;transform:none}
.motion-story-step-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(134,245,214,.34);color:#aef9e6;font-weight:800;font-size:12px;margin-bottom:14px}
.motion-story-step h3{font-size:clamp(23px,2.2vw,34px);margin:0 0 10px}
.motion-story-step p{color:var(--muted);font-size:16px;line-height:1.65;margin:0}
.motion-story-hint{display:flex;align-items:center;gap:10px;margin-top:24px;color:#92a5c8;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.motion-story-hint::before{content:"";width:22px;height:34px;border:1px solid rgba(255,255,255,.28);border-radius:14px}

/* Site-wide cinematic reveals ----------------------------------- */
.motion-reveal{will-change:transform,opacity;backface-visibility:hidden}
.motion-divider{overflow:hidden}
.motion-divider::after{content:"";display:block;height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(134,245,214,.45),transparent);transform:scaleX(0);transform-origin:center}

@media (max-width: 920px){
  .motion-webgl{opacity:.42}
  .motion-story{padding:0}
  .motion-story-stage{min-height:auto;display:block;padding:54px 18px 64px}
  .motion-story-visual{aspect-ratio:4/3;border-radius:22px;margin-bottom:34px}
  .motion-story-copy h2{font-size:clamp(34px,10vw,50px)}
  .motion-story-steps{min-height:auto;display:grid;gap:22px}
  .motion-story-step{position:relative;opacity:1!important;transform:none!important;padding:18px 0 2px;border-top:1px solid rgba(255,255,255,.12)}
  .motion-story-frame:not(:first-child){display:none}
  .motion-story-hint{display:none}
  .motion-lab-badge{right:10px;bottom:10px;font-size:9px;opacity:.8}
}

@media (prefers-reduced-motion: reduce){
  .motion-webgl,.motion-story-orbit,.motion-lab-badge{display:none!important}
  .motion-story-step{position:relative!important;opacity:1!important;transform:none!important;margin-bottom:24px}
  .motion-story-steps{min-height:auto!important}
  .motion-story-frame:not(:first-child){display:none!important}
  .motion-tilt{transform:none!important}
}


/* ========================================================================== */
/* MOBILE MOTION PARITY — 02/11/2026                                         */
/* Scrollytelling animé conservé sur téléphone, adapté sans long pin vertical. */
/* ========================================================================== */
@media (max-width: 920px) and (prefers-reduced-motion: no-preference){
  .motion-story-stage{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    padding:44px 18px 62px;
  }
  .motion-story-visual{
    display:block;
    position:sticky;
    top:82px;
    z-index:5;
    aspect-ratio:4/3;
    margin:0 0 12px;
    background:#0c1829;
  }
  .motion-story-frame,
  .motion-story-frame:not(:first-child){
    display:block!important;
    opacity:0;
    transform:scale(1.055);
    transition:opacity .72s ease,transform .9s ease;
  }
  .motion-story-frame:first-child,
  .motion-story-frame.is-mobile-active{
    opacity:1!important;
    transform:scale(1)!important;
  }
  .motion-story-orbit{display:block;opacity:.72}
  .motion-story-progress{display:block}
  .motion-story-steps{display:grid;gap:0;min-height:auto}
  .motion-story-step{
    min-height:43vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    opacity:.42!important;
    transform:translateY(12px)!important;
    transition:opacity .4s ease,transform .4s ease;
  }
  .motion-story-step.is-mobile-active{
    opacity:1!important;
    transform:none!important;
  }
  .motion-story-hint{display:flex}
  .motion-webgl{display:block;opacity:.40}
}

/* ============================================================
   V5 MOBILE — PETITS POINTS LUMINEUX
   Atmosphère discrète inspirée de la version ordinateur.
   ============================================================ */
.motion-mobile-stars{
  position:fixed;
  inset:0;
  z-index:7;
  pointer-events:none;
  overflow:hidden;
  opacity:.82;
  mix-blend-mode:screen;
  contain:strict;
}
.motion-mobile-star{
  position:absolute;
  width:var(--s,3px);
  height:var(--s,3px);
  border-radius:50%;
  background:rgba(225,247,255,.96);
  box-shadow:
    0 0 5px rgba(182,236,255,.85),
    0 0 11px rgba(126,221,255,.36);
  opacity:var(--o,.62);
  transform:translate3d(0,0,0) scale(.72);
  animation:menestrelStarTwinkle var(--d,5.8s) ease-in-out var(--delay,0s) infinite;
  will-change:opacity,transform;
}
.motion-mobile-star:nth-child(3n){
  background:rgba(255,243,206,.96);
  box-shadow:0 0 5px rgba(255,231,171,.72),0 0 10px rgba(255,214,120,.28);
}
.motion-mobile-star:nth-child(5n){
  background:rgba(205,255,239,.95);
  box-shadow:0 0 5px rgba(152,245,215,.72),0 0 10px rgba(109,232,196,.24);
}
@keyframes menestrelStarTwinkle{
  0%,100%{opacity:calc(var(--o,.62)*.42);transform:translate3d(0,0,0) scale(.62)}
  45%{opacity:var(--o,.62);transform:translate3d(var(--dx,2px),var(--dy,-5px),0) scale(1)}
  70%{opacity:calc(var(--o,.62)*.68);transform:translate3d(calc(var(--dx,2px)*.45),calc(var(--dy,-5px)*.55),0) scale(.78)}
}
@media(min-width:921px){.motion-mobile-stars{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .motion-mobile-stars{display:none!important}
}