/* ═══════════════════════════════════════════════════════════════════════════
   EasyPDF — sélecteur de cas d'usage du hero (v4)
   Direction : docs/marketing/DIRECTION_LANDING_V4.fr.md (laurent, 2026-07-30)
   Identité  : docs/marketing/IDENTITE_VISUELLE.fr.md — palette MESURÉE §3
   ---------------------------------------------------------------------------
   ⚠️ CACHE. `_headers` sert `/assets/*` en `immutable, max-age=31536000`.
      Ce fichier est NOUVEAU et porte sa version dans son NOM (`-v4`). Il ne
      remplace pas `easypdf-v3.css` et n'en modifie pas un octet : renommer
      `easypdf-v3.css` aurait obligé à toucher les neuf pages qui le référencent.
      Toute modification de fond de CE fichier doit changer son NOM, pas seulement
      son contenu — sinon des visiteurs restent un an sur l'ancienne version.

   ⚠️ ORDRE DES RÈGLES. Ce fichier est chargé APRÈS `easypdf-v3.css`. À
      spécificité égale, c'est lui qui gagne. Les trois blocs sont dans cet ordre,
      et l'ordre EST le mécanisme :
        1. état par défaut = LA GRILLE (sans script, et repli de tout le reste) ;
        2. `@supports selector(:has(*))` + `html.js` = le mode SÉLECTEUR ;
        3. `prefers-reduced-motion: reduce` = retour à LA GRILLE, même en `html.js`.
      Déplacer le bloc 3 au-dessus du bloc 2 le rendrait inopérant — c'est le
      défaut exact qui a fait déborder le CTA d'en-tête en v2 (easypdf-v3.css §14).

   POURQUOI IL N'Y A NI DRAPEAU JS NI `matchMedia` POUR LE MOUVEMENT RÉDUIT.
   La grille est l'état PAR DÉFAUT du CSS ; c'est le mode sélecteur qui est
   conditionné à `html.js` (classe posée par `boot-v3.js`, NON DIFFÉRÉ, avant le
   premier rendu). Un visiteur en `reduce`, ou sans script, ou les deux, reçoit la
   grille au premier rendu : aucune bande n'apparaît puis ne disparaît, il n'y a
   donc rien à écouter et aucun `data-motion` à poser.

   SÉMANTIQUE COULEUR (non décorative) : bleu = ce qui est accessible ·
   rouge = frontière ou limite. `--red` ne fait JAMAIS du texte (`--red-ink` pour
   cela) ; `--ink-3` est une valeur PLANCHER et ne s'éclaircit jamais.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. ÉTAT PAR DÉFAUT — LA GRILLE ═══════════════════════════════════════
   Sans JavaScript, les cinq cas sont TOUS lisibles dans le HTML servi : titre
   long, phrase, ligne de limite et lien. Il n'y a pas de repli à écrire, il y a
   un repli à ne pas casser. */

/* `container-type:inline-size` fait du <fieldset> un CONTENEUR DE REQUÊTE : la
   bande de cartouches se règle sur SA largeur, pas sur celle de la fenêtre (voir
   §2, la mesure des 477 px). `inline-size` ne pose aucun confinement sur l'axe
   bloc : la hauteur reste libre, les panneaux ne sont jamais rognés. */
.cas{border:0; padding:0; margin:0; min-width:0; container-type:inline-size}
/* La bande de cartouches et l'aide clavier n'existent QUE dans le mode sélecteur :
   sans sélecteur, il n'y a rien à piloter, donc rien à annoncer. */
.cas__strip{display:none}
.cas__keys{display:none}
.cas__panels{display:grid; gap:clamp(1.5rem,3vw,2.25rem); min-width:0}
.cas__panel{display:block; min-width:0}
/* Jamais TROIS colonnes : sous 3 colonnes une scène 480×300 tombe en dessous de
   la taille à laquelle son contour reste lisible. Une, puis deux, et c'est tout. */
@media(min-width:720px){
  .cas__panels{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Le panneau : illustration → titre → phrase → LIMITE → lien ────────────
   Ordre de DOM IDENTIQUE sur les cinq (SC 3.2.6, aide cohérente). */
.cas__scene{
  display:block; width:100%; max-width:480px; height:auto;
  margin:0 auto .95rem; color:var(--ink); overflow:visible;
}
.cas__title{font-size:clamp(1.125rem,.45vw + 1.05rem,1.4rem); letter-spacing:-.018em; line-height:1.2}
.cas__phrase{margin-top:.6rem; color:var(--ink-2); font-size:1rem; line-height:1.5; max-width:54ch}
/* LA LIGNE DE LIMITE — structurelle, pas décorative. Cinq promesses en haut d'une
   page qui n'a AUCUN client exigent cinq limites dans le même écran, à la MÊME
   position sur les cinq panneaux. Un panneau sans sa ligne de limite ne se livre
   pas : sans elle, un dessin de porte devant un dossier bancaire devient une
   promesse implicite de DRM.
   Le rouge est ici un OBJET GRAPHIQUE (le filet), jamais le texte : le texte est
   `--ink-2`, 7,88:1 sur blanc. */
.cas__limit{
  margin-top:.9rem; padding:.6rem .8rem .6rem .95rem;
  border-left:5px solid var(--red); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--white); box-shadow:0 2px 0 var(--sky-3);
  font-size:.875rem; color:var(--ink-2); line-height:1.45; max-width:58ch;
}
.cas__go{margin-top:.85rem}
/* Le cas 3 n'a pas de lien tant que `/acces-controle/` n'existe pas : règle
   héritée du sélecteur de langue, un lien n'apparaît jamais avant sa page.
   Le marqueur est un COMMENTAIRE HTML, jamais un texte rendu (i18n T7). */

/* ══ 2. MODE SÉLECTEUR — avec script, et seulement si `:has()` existe ══════
   La commutation est en CSS pur : aucun JavaScript ne l'exécute, donc aucun
   JavaScript ne peut la faire défiler toute seule (WCAG 2.2.2 : la condition ne
   se présente pas, ce qui bat structurellement n'importe quel garde-fou).
   La dépendance `:has()` est DÉJÀ en production deux fois et vérifiée :
   easypdf-v3.css l. 462 (.wz-block:has(input:checked)) et l. 780 (.opt:has(…)).
   Un navigateur sans `:has()` n'entre pas dans ce bloc et garde la grille. */
@supports selector(:has(*)){

  /* ⚠️ TROIS COLONNES, PUIS CINQ — ET LE SEUIL EST CELUI DU CONTENEUR, PAS CELUI
     DE LA FENÊTRE. MESURÉ : à 1280 px comme à 1680 px, la colonne droite du hero
     fait 477 px (le `wrap` plafonne à 1140 px, moins le rembourrage, moins la
     gouttière de 2,5 rem, réparti .95/2). Un `flex-wrap` y plaçait QUATRE
     cartouches puis un cinquième seul, étiré sur toute la largeur — vu sur
     capture, invisible à toute mesure automatique. Une media query sur la fenêtre
     ne pouvait pas l'attraper : la fenêtre faisait 1280, le conteneur 477.
     Une grille de 3 colonnes donne le 3+2 que la direction §7 demande, à 360 px
     comme à 1680 px ; les cinq passent en ligne si le conteneur atteint 560 px,
     ce qui n'arrive que lorsque le hero est en une seule colonne. */
  html.js .cas__strip{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.5rem; margin:0 0 1.15rem; padding:0;
  }
  @container (min-width:560px){
    html.js .cas__strip{grid-template-columns:repeat(5,minmax(0,1fr))}
  }
  html.js .cas__keys{
    display:block; margin:0 0 1.15rem; font-size:.8125rem; color:var(--ink-3); line-height:1.45;
  }
  html.js .cas__panels{display:block}
  html.js .cas__panel{display:none}

  /* La commutation. `display:none` et jamais `opacity`/`visibility` : les quatre
     panneaux non choisis sortent de l'arbre d'accessibilité ET de la recherche
     dans la page. */
  html.js .cas:has(#cas-r-1:checked) #cas-p-1,
  html.js .cas:has(#cas-r-2:checked) #cas-p-2,
  html.js .cas:has(#cas-r-3:checked) #cas-p-3,
  html.js .cas:has(#cas-r-4:checked) #cas-p-4,
  html.js .cas:has(#cas-r-5:checked) #cas-p-5{display:block}

  /* ── Le cartouche ─────────────────────────────────────────────────────
     C'est un <label> qui ENVELOPPE son <input type="radio">. Le radio est
     effacé visuellement mais RÉEL, focalisable et de 1,5 rem = 24 px : la
     commande satisfait SC 2.5.8 par elle-même, sans dépendre de l'extension de
     cible offerte par le label. C'est le motif déjà livré par `.wz-block`.
     ⚠️ NE JAMAIS le passer en `.vh` (1 px) : `verify/check.mjs` mesure
     `input[type=radio]` et compte toute cible de largeur non nulle < 24 px. */
  /* ⚠️ BORDURE `--ink` ET NON `--line` — SC 1.4.11 (contraste NON TEXTE).
     CORRIGÉ le 2026-07-31, sur mesure et non sur goût. `--line` (#C2D6EE) contre
     le fond de section `--sky` (#EAF2FD) fait **1,32:1**, et le fond blanc du
     cartouche lui-même **1,13:1** : les QUATRE commandes non sélectionnées
     n'avaient donc AUCUNE limite perceptible contre la page, alors que 1.4.11
     exige 3:1 pour l'information visuelle nécessaire à identifier un composant.
     `--ink` (#14263D) fait **13,55:1** sur `--sky`. Ce n'est pas une valeur
     inventée : c'est EXACTEMENT le motif déjà en production pour `.wz-block`
     (easypdf-v3.css l. 433-437, `border:2px solid var(--ink)`), et c'est la règle
     d'IDENTITE_VISUELLE §5 (« contour `--ink` 2 px pour les objets de premier
     plan »). L'état sélectionné reste distinct : `--blue-ink` + fond `--blue-soft`
     + ombre `--blue` + la COCHE, qui est une forme et survit à forced-colors.
     Contrôle qui le tient : `HERO_NON_TEXT_CONTRAST` dans `verify-v3/behave.mjs`.
     Le projet ne mesurait NULLE PART le contraste non texte avant cette passe. */
  html.js .cas__tab{
    position:relative; min-width:0;
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:44px; padding:.6rem .55rem; cursor:pointer;
    background:var(--white); border:2px solid var(--ink); border-radius:var(--r-sm);
    box-shadow:0 3px 0 var(--sky-3);
    font-size:.8125rem; font-weight:700; line-height:1.2; letter-spacing:-.004em;
    color:var(--ink);
    /* i18n règle 10 : un libellé plus long en EN/ES passe sur deux lignes ; il ne
       se tronque jamais et ne rétrécit jamais la police. */
    overflow-wrap:break-word; hyphens:auto;
    transition:background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  }
  /* Le SURVOL SOURIS a son propre état, plus léger, et ne déplace JAMAIS le
     curseur clavier : sans cette séparation, souris et clavier se disputent une
     seule variable. */
  /* La bordure étant désormais `--ink` au repos, le survol ne peut plus se
     signaler par elle : il reprend l'enfoncement de `.wz-block:hover` — fond
     `--sky`, ombre pleine ramenée de 3 px à 2 px. Aucune translation : la
     direction v4 ne demande pas de mouvement au survol, et M24 instruit ce point. */
  html.js .cas__tab:hover{background:var(--sky); box-shadow:0 2px 0 var(--sky-3)}
  html.js .cas__tab input{
    position:absolute; top:.4rem; left:.4rem; width:1.5rem; height:1.5rem;
    opacity:0; margin:0;
  }
  /* État SÉLECTIONNÉ, franc — et jamais porté par la seule couleur : la coche du
     coin est une FORME, en plus du fond et de la bordure (WCAG 1.4.1).
     Même géométrie que `.wz-block:has(input:checked)::after`. */
  html.js .cas__tab:has(input:checked){
    background:var(--blue-soft); border-color:var(--blue-ink); box-shadow:0 3px 0 var(--blue);
  }
  html.js .cas__tab:has(input:checked)::after{
    content:""; position:absolute; top:.4rem; right:.5rem; width:12px; height:7px;
    border-left:3px solid var(--blue-ink); border-bottom:3px solid var(--blue-ink);
    transform:rotate(-45deg); border-radius:1px;
  }
  /* LE CURSEUR, c'est le focus clavier lui-même : il ne peut pas se
     désynchroniser du contrôle réellement actif. L'anneau se dessine sur le label
     qui enveloppe l'input, donc le défilement automatique du navigateur et
     l'anneau atterrissent au même endroit (motif livré l. 471-481 de la v3). */
  html.js .cas__tab:has(input:focus-visible){
    outline:3px solid var(--blue); outline-offset:3px;
    box-shadow:0 3px 0 var(--blue), 0 0 0 7px var(--blue-soft);
  }
  @media(prefers-reduced-motion:reduce){
    html.js .cas__tab{transition:none}
  }
}

/* ══ 3. MOUVEMENT RÉDUIT — RETOUR À LA GRILLE, même avec script ═══════════
   Direction v4 §5.1, verbatim : « pas en carrousel muet, en grille ». Ce n'est
   pas un chemin de code parallèle, c'est le MÊME HTML : le contenu, les clés
   i18n, l'ordre du DOM, les cinq <h2>, les cinq lignes de limite et les liens
   sont identiques. Les cinq cas restent lisibles d'un coup d'œil — strictement
   PLUS d'information qu'en mode sélecteur, jamais moins.
   ⚠️ Déclaré APRÈS le bloc `@supports` : `html.js .cas__panel{display:block}` et
      `html.js .cas__panel{display:none}` ont la même spécificité (0,2,1), c'est
      l'ordre qui tranche. */
@media(prefers-reduced-motion:reduce){
  html.js .cas__strip{display:none}
  html.js .cas__keys{display:none}
  html.js .cas__panels{display:grid}
  html.js .cas__panel{display:block}
}

/* ══ 4. LE HERO — la colonne de texte et le sélecteur ═════════════════════
   Ordre du DOM, définitif : h1 → sous-titre → LIGNE D'ÉTAT → CTA → note → lien
   d'exemple → sélecteur. La ligne d'état passe AVANT le CTA et AVANT le
   sélecteur : (1) la garantie « visible sans défiler » tient par construction, y
   compris quand la grille de cinq panneaux allonge le hero sous `reduce` ;
   (2) aucun changement de panneau ne peut faire bouger le CTA ni l'état,
   puisqu'ils sont en amont — toute la classe de bugs « le contenu saute sous le
   doigt » disparaît sans qu'on ait à réserver une hauteur ; (3) l'honnêteté
   arrive avant la demande, pas après. */
.hero__head{min-width:0}
.hero__head .state{margin-top:1.15rem}
.hero__head .hero__cta{margin-top:1.35rem}
@media(min-width:1000px){
  /* `align-items:center` de la v3 centrait la scène en face du texte. Avec cinq
     panneaux de hauteurs différentes, un alignement centré fait remonter et
     descendre la colonne de texte à chaque changement de cas. */
  .hero__grid{align-items:start}
}
/* Sans script comme sous `reduce`, le hero passe en UNE colonne pleine largeur et
   les panneaux en deux : à deux colonnes DANS la colonne étroite du hero, une
   scène 480×300 tomberait sous 210 px de large. */
@media(min-width:1000px){
  html:not(.js) .hero__grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce) and (min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
}
/* Budget vertical à 360 × 640 : chaque ligne gagnée l'a été contre une mesure,
   pas contre un goût. */
@media(max-width:599px){
  .hero__head .state{margin-top:.8rem}
  .hero__head .hero__cta{margin-top:.95rem}
  .cas__strip{gap:.4rem}
  html.js .cas__tab{font-size:.75rem; padding:.5rem .35rem}
  html.js .cas__strip{margin-bottom:.9rem}
  html.js .cas__keys{margin-bottom:.9rem; font-size:.75rem}
  .cas__scene{margin-bottom:.75rem}
  .cas__phrase{font-size:.9375rem}
}

/* ══ 5. MICRO-SÉQUENCES DES ILLUSTRATIONS ════════════════════════════════
   Ce qui répond à « carrousel animé façon cartoon » : la COMMUTATION est
   instantanée (écran de menu de console, aucun fondu croisé, aucune translation)
   et le mouvement vit dans les SCÈNES — 200 à 240 ms, UNE FOIS, jamais en boucle,
   jamais sur minuterie.

   ═══ LE CONTRAT D'ANIMATION EST IMPOSÉ PAR LES <symbol>, PAS PAR CE FICHIER ═══
   Les cinq scènes sont instanciées par `<use href="#i-case-…">`. Le contenu d'un
   `<use>` vit dans un ARBRE FANTÔME : aucune classe posée à l'intérieur n'est
   atteignable par un sélecteur CSS de ce document. Seules les PROPRIÉTÉS HÉRITÉES
   le traversent. Le `<defs>` d'`index.html` expose donc quatre propriétés
   personnalisées, toutes NEUTRES par défaut, et ce fichier ne fait que les
   animer :
     --cs-draw  <number>   1 → 0      tracé (paths en `pathLength="1"`)
     --cs-move  <length>   n → 0px    déplacement
     --cs-turn  <angle>    n → 0deg   pivot du battant de porte
     --cs-open  <color>    --sky-2 → --blue   ligne rendue accessible
   Elles sont posées ici sur `.cas__scene`, l'élément `<svg>` qui contient le
   `<use>` : la valeur descend dans l'arbre fantôme à chaque image.

   ⚠️ `@property` EST OBLIGATOIRE, ET AU PREMIER NIVEAU DU FICHIER. Une propriété
      personnalisée NON ENREGISTRÉE s'interpole de façon DISCRÈTE : elle sauterait
      de `from` à `to` à mi-parcours, et les cinq scènes clignoteraient au lieu de
      se dessiner. L'enregistrement leur donne un type, donc une interpolation.
      Sur un navigateur sans `@property` (avant Chrome 85 / Safari 16.4), la
      dégradation est ce saut à mi-parcours — inélégant, jamais cassé, et jamais
      infini.
      L'`initial-value` de chacune est EXACTEMENT l'état final : sans animation
      — sans script, sous `reduce`, ou avant tout clic — la scène est rendue
      COMPLÈTE. C'est la règle déjà arbitrée du projet, verbatim : wizard-spec
      §7.5, « on saute à l'état final ; on ne supprime jamais l'élément ».

   DÉCLENCHEUR : la SÉLECTION, et elle seule. `.cas.is-live` est posée par
   `carousel-v4.js` au premier `change` RÉEL — donc jamais au chargement, jamais
   sans script. Ensuite, chaque changement de cas fait passer le panneau de
   `display:none` à `block`, ce qui redémarre son animation tout seul : pas une
   ligne de script n'orchestre le mouvement.
   ÉCART ASSUMÉ avec la direction v4 §6 (« au survol du cartouche ET au focus du
   radio ») — PORTÉ AU REGISTRE SOUS **M24** le 2026-07-31, parce qu'un écart avec
   une direction écrite ne vit pas dans un commentaire de fichier.
   ⚠️ RECTIFICATION de la phrase qui était ici : elle disait que « la parité
   survol/focus est obtenue par CONSTRUCTION ». C'est faux au sens strict — la
   parité est obtenue en SUPPRIMANT LES DEUX déclencheurs, pas en les unifiant.
   MESURÉ le 2026-07-31, souris au centre du cartouche 4 sans clic, 250 ms
   d'attente : `document.getAnimations()` = [], radio coché inchangé, classe de
   `#cas` inchangée (« cas », sans `is-live`). Le seul déclencheur réel est le
   CHANGEMENT DE CAS : à la souris il vient du clic, au clavier des flèches, et un
   `:focus-visible` sur un radio de ce groupe coïncide toujours avec `:checked`.
   CONSÉQUENCE À DIRE : un visiteur qui lit le panneau servi et s'en va ne voit
   AUCUN mouvement. C'est l'écart avec « un caroussel animé façon cartoon », et
   c'est laurent qui arbitre s'il le veut comblé (M24, avec son coût instruit).

   AUCUN `animation-fill-mode`. L'état d'arrivée EST l'état neutre : rien à
   retenir après la fin. Conséquence VOULUE et vérifiable : `getAnimations()`
   retombe à 0 quand la séquence est finie, au lieu de laisser cinq animations
   « terminées mais persistantes » dans la page.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --cs-draw{syntax:"<number>"; inherits:true; initial-value:0}
@property --cs-move{syntax:"<length>"; inherits:true; initial-value:0px}
@property --cs-turn{syntax:"<angle>";  inherits:true; initial-value:0deg}
/* #2b5fc9 = --blue. La valeur littérale est obligatoire : `initial-value` est
   résolue une seule fois, hors de tout contexte d'héritage, et `var(--blue)` n'y
   est pas défini. Les deux valeurs sont vérifiées contre IDENTITE_VISUELLE §3. */
@property --cs-open{syntax:"<color>";  inherits:true; initial-value:#2b5fc9}

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

  /* 1 — RAPPORT, 200 ms : la flèche de métamorphose se trace et les lignes du
     cadre glissent de 6 unités vers le haut (le document est long, il commence). */
  @keyframes cs-rapport{
    from{--cs-draw:1; --cs-move:6px}
    to  {--cs-draw:0; --cs-move:0px}
  }
  /* 2 — CATALOGUE, 220 ms : les deux fiches ÉCHANGENT leur position. 78 px, c'est
     exactement l'écart entre leurs deux ancrages dans le <symbol> (translate 10 et
     translate 88) : la fiche ancienne part de la place de la nouvelle, et
     réciproquement.
     ⚠️ La pastille d'adresse N'EST PAS NOMMÉE ICI, et c'est le point : elle ne
     bouge pas, elle ne change pas de remplissage. Cette immobilité EST le message
     — c'est le seul objet rigoureusement identique entre l'image initiale et
     l'image finale. Toute règle qui l'animerait détruirait l'argument du panneau. */
  @keyframes cs-catalogue{
    from{--cs-draw:1; --cs-move:78px}
    to  {--cs-draw:0; --cs-move:0px}
  }
  /* 3 — ACCÈS, 200 ms : le battant pivote de quelques degrés et les trois lignes
     de la surface de lecture se tracent. Rien d'autre ne bouge : la frontière
     rouge au sol et la flèche de téléchargement qui s'y arrête sont FIXES —
     animer une limite reviendrait à suggérer qu'elle est négociable. */
  @keyframes cs-acces{
    from{--cs-draw:1; --cs-turn:-7deg}
    to  {--cs-draw:0; --cs-turn:0deg}
  }
  /* 4 — CAPTURE, 220 ms : l'enveloppe pleine parcourt son arc (le <symbol>
     multiplie --cs-move par -3 en x et -4 en y : elle arrive d'en haut à gauche)
     et la coche se trace. La case de consentement, elle, n'est jamais animée et
     n'est JAMAIS dessinée cochée. */
  @keyframes cs-capture{
    from{--cs-draw:1; --cs-move:8px}
    to  {--cs-draw:0; --cs-move:0px}
  }
  /* 5 — VENTE, 240 ms : la pièce tombe de 8 unités sur la barre, la flèche se
     trace, et la première ligne au-delà de la frontière passe de --sky-2 à
     --blue — c'est le sens de « la lecture reprend exactement là ».
     La SECONDE ligne reste verrouillée, et le cadenas ne bouge pas : il désigne un
     paywall, et un paywall qui s'anime tout seul est une promesse. */
  @keyframes cs-vente{
    from{--cs-draw:1; --cs-move:-8px; --cs-open:#dbe9fb}
    to  {--cs-draw:0; --cs-move:0px;  --cs-open:#2b5fc9}
  }

  .cas.is-live #cas-p-1 .cas__scene{animation:cs-rapport   200ms ease-out}
  .cas.is-live #cas-p-2 .cas__scene{animation:cs-catalogue 220ms cubic-bezier(.3,.7,.3,1)}
  .cas.is-live #cas-p-3 .cas__scene{animation:cs-acces     200ms ease-out}
  .cas.is-live #cas-p-4 .cas__scene{animation:cs-capture   220ms cubic-bezier(.3,.7,.3,1)}
  .cas.is-live #cas-p-5 .cas__scene{animation:cs-vente     240ms cubic-bezier(.3,1.15,.5,1)}
}