/* ==========================================================================
   MLB × KARINA — SS26 · css/motion.css (v3)
   --------------------------------------------------------------------------
   Couche d'animations, chargée APRÈS css/styles.css.
   Tout est rangé sous la classe .motion (posée sur <html> par le petit
   script du <head>) : si le visiteur a demandé « réduire les animations »,
   rien ici ne s'applique.

   Sommaire
     1. Écran de chargement (logo MLB + compteur 000 → 100)
     2. Intro de l'accueil (volets + titre)
     3. Sections qui se chevauchent au défilement
     4. Titres qui montent mot par mot
     5. Grandes photos qui se dévoilent (3 seulement, pour ne pas lasser)
     6. Blocs et grilles en cascade
     7. En-tête qui s'adapte aux sections sombres
     8. Indicateur de section + barre de progression
     9. Parallaxe
    10. Boutons magnétiques
    11. Curseur cercle
    12. Lookbooks : glisser à la souris
    13. Téléphone
   ========================================================================== */

:root {
  --ease-curtain: cubic-bezier(.7, 0, .2, 1);   /* volets : départ lent, fin douce */
}


/* ==========================================================================
   1. ÉCRAN DE CHARGEMENT
   Affiché seulement à la 1re visite de la session (classe .is-loading).
   Le logo MLB se remplit de gauche à droite pendant que le compteur
   passe de 000 à 100, puis l'écran remonte comme un rideau.
   ========================================================================== */
.loader { display: none; }
html.is-loading { overflow: hidden; }
.is-loading .loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ink); color: var(--snow); }
.loader.is-leaving { transform: translateY(-100%); transition: transform .9s var(--ease-curtain); }
.ld-inner { width: min(520px, 76vw); display: grid; gap: 22px; }
.ld-logo { position: relative; width: 100%; aspect-ratio: 100 / 28; }
.ld-logo svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: currentColor; }
.ld-dim { opacity: .14; }
.ld-fill { clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }   /* --p réglé par motion.js */
.ld-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ld-n { font-variant-numeric: tabular-nums; }
.ld-bar { height: 1px; background: rgba(241, 242, 243, .2); overflow: hidden; }
.ld-bar i { display: block; height: 100%; background: var(--snow); transform: scaleX(var(--q, 0)); transform-origin: left; }


/* ==========================================================================
   2. INTRO DE L'ACCUEIL
   ========================================================================== */
.motion .hero-pic { transition: clip-path 1.3s var(--ease-curtain); clip-path: inset(0 0 0 0); }
.motion .hero-pic + .hero-pic { transition-delay: .08s; }
.motion.is-intro .hero-pic:first-child { clip-path: inset(0 0 0 100%); }   /* s'ouvre depuis le centre vers la gauche */
.motion.is-intro .hero-pic + .hero-pic { clip-path: inset(0 100% 0 0); }   /* s'ouvre depuis le centre vers la droite */

.motion .hero-h > * { transition: transform 1s var(--e), opacity 1s var(--e); }
.motion .hero-h > :nth-child(1) { transition-delay: .45s; }
.motion .hero-h > :nth-child(2) { transition-delay: .55s; }
.motion .hero-h > :nth-child(3) { transition-delay: .6s; }
.motion.is-intro .hero-h > * { transform: translateY(40%); opacity: 0; }

.motion .hdr { transition: opacity .8s var(--e) .7s, transform .8s var(--e) .7s, color .4s var(--e); }
.motion .hero-tag, .motion .hero-seam, .motion .hero-meta { transition: opacity .8s var(--e) .7s, transform .8s var(--e) .7s; }
.motion.is-intro .hdr { opacity: 0; transform: translateY(-14px); }
.motion.is-intro .hero-tag, .motion.is-intro .hero-meta { opacity: 0; transform: translateY(14px); }
.motion.is-intro .hero-seam { opacity: 0; }


/* ==========================================================================
   3. SECTIONS QUI SE CHEVAUCHENT
   Les sections .stack (accueil, index casquettes, films) restent en place
   pendant que la section suivante glisse PAR-DESSUS. La section recouverte
   s'assombrit et recule un peu (--cover et --shrink, réglés par motion.js).
   Pour ajouter / retirer un chevauchement : liste STACKS dans motion.js.
   ========================================================================== */
.motion-ready main > section { position: relative; z-index: 1; }
.motion-ready main > .stack { position: sticky; top: var(--stick, 0px); z-index: 0; transform: scale(var(--shrink, 1)); transform-origin: 50% 100%; }
.motion-ready .stack::after { content: ''; position: absolute; inset: 0; z-index: 30; background: #000; opacity: var(--cover, 0); pointer-events: none; }
.motion-ready .stack.is-covered { visibility: hidden; }
.motion-ready .over { box-shadow: 0 -28px 60px rgba(0, 0, 0, .22); }
.motion-ready .camp { background: var(--paper); }     /* la campagne doit être opaque pour recouvrir l'accueil */


/* ==========================================================================
   4. TITRES — chaque mot monte depuis un masque
   ========================================================================== */
.motion .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .03em; margin: -.12em -.03em; }
.motion .wi { display: inline-block; transform: translateY(110%); transition: transform 1.05s var(--e); transition-delay: calc(var(--i, 0) * 55ms); }
.motion .is-in .wi { transform: none; }


/* ==========================================================================
   5. GRANDES PHOTOS — volet du bas vers le haut + léger dézoom
   Réservé à 3 grandes images (campagne, 1re photo des collages, grande
   photo du Drop 02). Les autres photos s'affichent simplement.
   ========================================================================== */
.motion .rv-img img { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--ease-curtain), transform 1.4s var(--e); }
.motion .rv-img.is-in img { clip-path: inset(0 0 0 0); }
.motion .rv-zoom.is-in img { animation: unzoom 1.7s var(--e) both; }
@keyframes unzoom { from { scale: 1.12; } to { scale: 1; } }


/* ==========================================================================
   6. BLOCS ET GRILLES EN CASCADE
   ========================================================================== */
.motion-ready .rv { animation: none; opacity: 0; transform: translateY(36px); transition: opacity 1s var(--e), transform 1.1s var(--e); }
.motion-ready .rv.is-in { opacity: 1; transform: none; }
.motion .stag { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--e), transform .9s var(--e); transition-delay: calc(var(--i, 0) * 70ms); }
.motion .stag.is-in { opacity: 1; transform: none; }


/* ==========================================================================
   7. EN-TÊTE — version sombre au-dessus des sections noires
   ========================================================================== */
.motion .hdr.is-solid.is-dark:not(.is-menu) { color: var(--snow); }
.motion .hdr.is-solid.is-dark:not(.is-menu) .row { background: rgba(11, 12, 14, .82); border-bottom-color: var(--lined); }
.motion .hdr.is-solid.is-dark:not(.is-menu) .cart-n { background: var(--snow); color: var(--ink); }
.motion .hdr.is-solid.is-dark:not(.is-menu) .lang button.is-on { background: var(--snow); color: var(--ink); }


/* ==========================================================================
   8. INDICATEUR DE SECTION (bas gauche) + BARRE DE PROGRESSION (haut)
   ========================================================================== */
.sx { position: fixed; left: var(--pad); bottom: 22px; z-index: 45; display: flex; align-items: baseline; gap: 12px; color: #fff; mix-blend-mode: difference; pointer-events: none; font-family: var(--fm); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sx-n { display: inline-block; min-width: 2ch; }
.sx-n::after { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; margin-left: 12px; vertical-align: middle; transition: width .6s var(--e); }
.sx.is-changing .sx-n::after { width: 48px; }
.sx-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.sx-t { display: inline-block; transition: transform .45s var(--e), opacity .45s var(--e); }
.sx-t.is-out { transform: translateY(-100%); opacity: 0; }
.sx-t.is-below { transform: translateY(100%); opacity: 0; transition: none; }
.sp { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; pointer-events: none; }


/* ==========================================================================
   9. PARALLAXE
   ========================================================================== */
.motion [data-parallax] { height: 118% !important; position: relative; top: -9%; will-change: translate; }


/* ==========================================================================
   10. BOUTONS MAGNÉTIQUES
   Les boutons principaux se décalent légèrement vers la souris
   (force réglable dans motion.js, section 7) puis reviennent en douceur.
   ========================================================================== */
.motion-ready .mag { transition: translate .6s var(--e), background .35s var(--e), color .35s var(--e), border-color .35s var(--e), transform .3s var(--e); }
.motion-ready .mag.is-pulling { transition: translate .16s linear, background .35s var(--e), color .35s var(--e), border-color .35s var(--e), transform .3s var(--e); }


/* ==========================================================================
   11. CURSEUR CERCLE (souris uniquement)
   ========================================================================== */
.cur { position: fixed; left: 0; top: 0; z-index: 100; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; display: grid; place-items: center; transition: opacity .3s var(--e), width .45s var(--e), height .45s var(--e), margin .45s var(--e), background-color .45s var(--e), border-color .45s var(--e); }
.cur.is-on { opacity: 1; }
.cur.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background-color: rgba(255, 255, 255, .14); }
.cur.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cur.has-label { width: 88px; height: 88px; margin: -44px 0 0 -44px; mix-blend-mode: normal; background-color: var(--snow); border-color: var(--snow); }
.cur-l { font-family: var(--fm); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .3s var(--e), transform .45s var(--e); }
.cur.has-label .cur-l { opacity: 1; transform: none; }
.cur.is-hidden { opacity: 0; }
.is-loading .cur { opacity: 0; }


/* ==========================================================================
   12. LOOKBOOKS — glisser à la souris ; clic sur la vidéo
   ========================================================================== */
.motion .strip { cursor: grab; }
.motion .strip img { -webkit-user-drag: none; user-select: none; }
.motion .strip.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.motion .film-stage { cursor: pointer; }


/* ==========================================================================
   13. TÉLÉPHONE
   ========================================================================== */
@media (max-width: 720px) {
  .sx { display: none; }
  .motion-ready main > .stack { transform: none; }   /* pas de recul sur petit écran */
}