/* =====================================================================
   MITIA MOTION SYSTEM v1 — Le carnet anime
   Foundation partagée par toutes les pages : tokens timing/easing/stagger
   + reduced-motion guard global + primitives réutilisables.

   Cohérence cross-page : / (landing) + /portfolio + /tarifs + /atelier
   + /design-system + pages projet partagent ce vocabulaire d'animation.
   ===================================================================== */

:root {
    /* === Durées éditoriales (échelle modulaire base 200ms · ratio 1.85) === */
    --time-instant: 120ms;
    --time-fast:    220ms;
    --time-medium:  450ms;
    --time-slow:    820ms;
    --time-epic:    1240ms;
    --time-ambient: 6000ms;

    /* === Staggers (cascade entre éléments) === */
    --stagger-tight: 28ms;
    --stagger-prose: 60ms;
    --stagger-block: 140ms;
    --stagger-epic:  220ms;

    /* === Easings nommés par intention === */
    --ease-expo:     cubic-bezier(0.16, 1.00, 0.30, 1.00);
    --ease-soft:     cubic-bezier(0.40, 0.00, 0.20, 1.00);
    --ease-natural:  cubic-bezier(0.65, 0.05, 0.36, 1.00);
    --ease-magnetic: cubic-bezier(0.34, 1.45, 0.64, 1.00);
    --ease-quiet:    cubic-bezier(0.50, 0.00, 0.50, 1.00);
    --ease-cut:      cubic-bezier(0.85, 0.00, 0.15, 1.00);
}

/* =====================================================================
   REDUCED MOTION GUARD GLOBAL (règle d'accessibilité absolue)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --time-instant: 0.01ms; --time-fast: 0.01ms; --time-medium: 0.01ms;
        --time-slow: 0.01ms; --time-epic: 0.01ms; --time-ambient: 0.01ms;
        --stagger-tight: 0ms; --stagger-prose: 0ms; --stagger-block: 0ms; --stagger-epic: 0ms;
    }
    *, *::before, *::after {
        animation-iteration-count: 1 !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   PRIMITIVE 1 — gradient-flow (texte qui coule en couleur)
   Utilisé sur titres signature (Andrimalala, accents éditoriaux)
   ===================================================================== */
.ms-gradient-flow {
    background: linear-gradient(90deg,
        var(--gold-2, #e4c486) 0%,
        var(--rose, #c4717f) 35%,
        var(--gold-2, #e4c486) 70%,
        var(--gold, #c8a25c) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: ms-gradient-flow var(--time-ambient) var(--ease-quiet) infinite;
}
@keyframes ms-gradient-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =====================================================================
   PRIMITIVE 2 — variable-font-breathe (Fraunces qui respire)
   ===================================================================== */
.ms-font-breathe {
    animation: ms-font-breathe calc(var(--time-ambient) * 1.5) var(--ease-quiet) infinite;
}
@keyframes ms-font-breathe {
    0%, 100% { font-variation-settings: 'opsz' 144, 'wght' 360, 'SOFT' 80; }
    50%      { font-variation-settings: 'opsz' 144, 'wght' 380, 'SOFT' 110; }
}

/* =====================================================================
   PRIMITIVE 3 — char-split-fade (lettre par lettre stagger)
   Pour: data-split="chars" via JS qui wrap chaque char en <span class="ch">
   ===================================================================== */
[data-split="chars"] .ch {
    display: inline-block;
    white-space: pre;
    opacity: 0;
    transform: translate3d(0, 0.6em, 0);
    transition:
        opacity var(--time-slow) var(--ease-expo),
        transform var(--time-slow) var(--ease-expo);
    transition-delay: calc(var(--i, 0) * var(--stagger-tight));
}
[data-split="chars"].is-split-in .ch {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =====================================================================
   PRIMITIVE 4 — reveal-cascade (eyebrow → titre → body)
   Pour: data-cascade sur container, .ms-cascade-item enfants
   ===================================================================== */
[data-cascade] .ms-cascade-item {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity var(--time-medium) var(--ease-expo),
        transform var(--time-medium) var(--ease-expo);
    transition-delay: calc(var(--i, 0) * var(--stagger-prose));
}
[data-cascade].is-revealed .ms-cascade-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =====================================================================
   PRIMITIVE 5 — mask-reveal-line (texte glisse par ligne verticale)
   Pour: data-reveal-lines sur container avec .pq-line > .pq-line-inner
   ===================================================================== */
[data-reveal-lines] .pq-line {
    display: block;
    overflow: hidden;
}
[data-reveal-lines] .pq-line-inner {
    display: inline-block;
    transform: translateY(105%);
    transition: transform var(--time-slow) var(--ease-expo);
}
[data-reveal-lines].is-revealed .pq-line-inner {
    transform: translateY(0);
}
[data-reveal-lines].is-revealed .pq-line:nth-child(2) .pq-line-inner { transition-delay: 180ms; }
[data-reveal-lines].is-revealed .pq-line:nth-child(3) .pq-line-inner { transition-delay: 320ms; }
[data-reveal-lines].is-revealed .pq-line:nth-child(4) .pq-line-inner { transition-delay: 440ms; }

/* =====================================================================
   PRIMITIVE 6 — eyebrow-line-draw (barre or qui se dessine)
   Pour: .section-label, .ed-eyebrow (utiliser ::after barre or scaleX)
   ===================================================================== */
.ms-eyebrow-line {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}
.ms-eyebrow-line::after {
    content: "";
    display: inline-block;
    width: clamp(28px, 5vw, 64px);
    height: 1px;
    background: var(--gold, #c8a25c);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--time-slow) var(--ease-expo);
}
.ms-eyebrow-line.is-revealed::after,
[data-cascade].is-revealed .ms-eyebrow-line::after {
    transform: scaleX(1);
}

/* =====================================================================
   PRIMITIVE 7 — drop-cap-clip-draw (lettrine qui se dessine)
   Pour: prose avec ::first-letter agrandie + clip-path inset
   ===================================================================== */
.ms-dropcap::first-letter {
    font-family: var(--serif, serif);
    font-style: italic;
    font-weight: 320;
    font-size: 4.4em;
    line-height: 0.82;
    float: left;
    margin: 0.08em 0.14em 0 0;
    color: var(--gold, #c8a25c);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--time-epic) var(--ease-expo) 200ms;
}
.ms-dropcap.is-revealed::first-letter {
    clip-path: inset(0 0 0% 0);
}

/* =====================================================================
   PRIMITIVE 8 — watermark-mask-reveal (XL ghost text)
   Pour: gros chiffres ou textes décoratifs en arrière-plan
   ===================================================================== */
.ms-watermark {
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--time-epic) var(--ease-expo);
}
.ms-watermark.is-revealed {
    clip-path: inset(0 0 0 0);
}

/* =====================================================================
   PRIMITIVE 9 — color-hover-link (transition douce gold)
   Pour: liens éditoriaux qui passent au gold au survol
   ===================================================================== */
.ms-color-hover {
    color: inherit;
    transition: color var(--time-fast) var(--ease-soft);
}
.ms-color-hover:hover,
.ms-color-hover:focus-visible {
    color: var(--gold-2, #e4c486);
}

/* =====================================================================
   PRIMITIVE 10 — corner-frame (4 coins éditoriaux)
   Pour: encadrer une section premium (booking, projet hero)
   ===================================================================== */
.ms-corner-frame {
    position: relative;
}
.ms-corner-frame > .cf-tl,
.ms-corner-frame > .cf-tr,
.ms-corner-frame > .cf-br,
.ms-corner-frame > .cf-bl {
    position: absolute;
    width: 36px;
    height: 36px;
    pointer-events: none;
    z-index: 2;
}
.ms-corner-frame > [class^="cf-"]::before,
.ms-corner-frame > [class^="cf-"]::after {
    content: "";
    position: absolute;
    background: rgba(237, 229, 214, 0.35);
    transform: scaleX(0);
    transition: transform var(--time-slow) var(--ease-expo);
}
.ms-corner-frame > [class^="cf-"]::before { width: 36px; height: 1px; }
.ms-corner-frame > [class^="cf-"]::after  { width: 1px; height: 36px; transform: scaleY(0); }
.ms-corner-frame.is-revealed > [class^="cf-"]::before { transform: scaleX(1); }
.ms-corner-frame.is-revealed > [class^="cf-"]::after  { transform: scaleY(1); }

/* =====================================================================
   PRIMITIVE 11 — number-roll-counter (chiffres qui roulent)
   Utilisation : data-counter-target="3500" + JS observer
   (le JS écrit le contenu, le CSS gère la lisibilité monospace stable)
   ===================================================================== */
[data-counter-target],
[data-price-target] {
    font-variant-numeric: tabular-nums;
    will-change: auto;
}

/* =====================================================================
   PRIMITIVE 12 — magnetic-area (zone qui attire le curseur)
   Pour: data-magnetic="lite" sur container, JS calcule --mx/--my
   ===================================================================== */
[data-magnetic] {
    transform: translate3d(
        calc(var(--mx, 0) * 8px),
        calc(var(--my, 0) * 8px),
        0
    );
    transition: transform var(--time-medium) var(--ease-magnetic);
}
[data-magnetic="strong"] {
    transform: translate3d(
        calc(var(--mx, 0) * 16px),
        calc(var(--my, 0) * 16px),
        0
    );
}

/* =====================================================================
   HELPER : auto-reveal sections en viewport (compatible IO partagé)
   data-reveal sur n'importe quel élément → .is-revealed quand visible
   Le JS partagé (waouh.js ou inline) observe et toggle .is-revealed
   ===================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition:
        opacity var(--time-medium) var(--ease-expo),
        transform var(--time-medium) var(--ease-expo);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* =====================================================================
   FIX CRITIQUE 1280×720 — data-reveal ne doit PAS bloquer le contenu
   au-dessus du fold. Le JS gère opacity inline seulement pour les
   éléments under-fold. Override les opacity:0 par défaut.
   ===================================================================== */
[data-reveal] {
    opacity: 1;
    transform: none;
}
[data-reveal].ms-pending {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}
[data-cascade] .ms-cascade-item {
    opacity: 1;
    transform: none;
}
[data-cascade].ms-pending .ms-cascade-item {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}
[data-reveal-lines] .pq-line-inner {
    transform: none;
}
[data-reveal-lines].ms-pending .pq-line-inner {
    transform: translateY(105%);
}
.ms-watermark {
    clip-path: none;
}
.ms-watermark.ms-pending {
    clip-path: inset(0 100% 0 0);
}
.ms-dropcap::first-letter {
    clip-path: none;
}
.ms-dropcap.ms-pending::first-letter {
    clip-path: inset(0 0 100% 0);
}
.ms-eyebrow-line::after {
    transform: scaleX(1);
}
.ms-eyebrow-line.ms-pending::after {
    transform: scaleX(0);
}