/* =====================================================================
   SAINT-CYPRIEN · activites.css — la page refaite.
   ---------------------------------------------------------------------
   Une grille de cartes, une bande claire pour l'accès libre, un
   vis-à-vis pour les équipements, un gong. Rien d'autre : la page
   répond à UNE question — « qu'est-ce que je peux pratiquer ici ? » —
   et elle doit se parcourir sans rien lire en entier.

   Tout est en HTML statique : l'ancienne version rendait ses cartes en
   JavaScript, ce qui la laissait vide pour un robot et cassait tout dès
   qu'un conteneur manquait.
   ===================================================================== */

.phero__note {
  margin-top: 1rem;
  max-width: 52ch;
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------- LA GRILLE ---------------------------- */
.agrid {
  display: grid;
  gap: clamp(.9rem, 2vw, 1.4rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
@media (min-width: 620px) { .agrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .agrid { grid-template-columns: repeat(3, 1fr); } }

.acard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.acard:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--spark-rgb), .38);
  box-shadow: var(--shadow);
}
/* la photo touche les bords de la carte : une image encadrée de fond à
   l'intérieur d'un cadre, ça fait deux cadres */
.acard__ph { border-radius: 0; }
.acard__ph::after { box-shadow: none; }

.acard__body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: clamp(1rem, 2vw, 1.3rem);
  flex: 1;
}
.acard__t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.acard__d {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
  flex: 1;
}
.acard__tag {
  align-self: flex-start;
  margin-top: .3rem;
  font: 600 .62rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--spark);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .5em .8em;
}

/* ------------------------- L'ACCÈS LIBRE -------------------------- */
.alibre__t { font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin-top: 1rem; }
.alibre__l { margin-top: .7rem; color: var(--ink-soft); }
.alibre {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .alibre { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .alibre { grid-template-columns: repeat(4, 1fr); } }
.alibre li {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--paper);
}
.alibre b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.alibre span { font-size: var(--step--1); line-height: 1.45; color: var(--muted); }

/* ------------------------- LES ÉQUIPEMENTS ------------------------ */
.equip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.1rem;
}
.equip li {
  font: 500 .78rem/1 var(--f-mono);
  letter-spacing: .03em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .6em .9em;
  background: var(--paper-2);
}

/* =====================================================================
   LES RANGÉES D'ACTIVITÉS — la page se construit au défilement.
   ---------------------------------------------------------------------
   Une rangée = une image + un bloc texte, alternés gauche/droite. Ce
   n'est PAS la carte entière qui se déplace : chaque élément arrive
   séparément, dans l'ordre — image, puis numéro, titre, description,
   étiquette. C'est ce décalage qui donne l'impression que la carte se
   compose, au lieu de coulisser d'un bloc.

   TROIS DIRECTIONS, jamais plus, pour que le rythme change sans devenir
   décoratif :
     g   image depuis la gauche, texte depuis la droite
     d   image depuis la droite, texte depuis la gauche
     x   arrivée diagonale — l'accent, une rangée sur trois

   ENTRÉE → POSITIONNEMENT → STABILITÉ. Aucune animation infinie :
   l'observateur relâche l'élément dès qu'il est arrivé, et plus rien ne
   bouge. Une page qui continue de flotter fatigue au deuxième écran.
   ===================================================================== */
.arows {
  display: flex;
  flex-direction: column;
  gap: clamp(3.5rem, 9vw, 8rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.arow {
  display: grid;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .arow { grid-template-columns: 1.05fr .95fr; }
  /* l'image passe à droite SANS toucher à l'ordre du DOM : un lecteur
     d'écran garde toujours image puis texte. */
  .arow[data-dir="d"] > .arow__ph { order: 2; }
}

.arow__ph { width: 100%; }
.arow__txt { display: flex; flex-direction: column; gap: .55rem; }
.arow__n {
  font: 700 .72rem/1 var(--f-mono);
  letter-spacing: .16em;
  color: var(--spark-2);
}
.arow__t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.arow__d {
  font-size: clamp(.95rem, 1.5vw, 1.08rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
}
.arow__tag {
  align-self: flex-start;
  margin-top: .5rem;
  font: 600 .64rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--spark);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .55em .9em;
}

/* ---------------- L'ÉTAT DE DÉPART ---------------------------------
   Posé sur [data-act="on"] et non sur la classe : c'est le script qui
   arme le mouvement. Sans JavaScript, rien n'est masqué — la page reste
   entièrement lisible. */
[data-act="on"] .arow__ph,
[data-act="on"] .arow__n,
[data-act="on"] .arow__t,
[data-act="on"] .arow__d,
[data-act="on"] .arow__tag {
  opacity: 0;
  transition: opacity .75s var(--ease-out), transform .95s var(--ease-out);
}

[data-act="on"][data-dir="g"] .arow__ph { transform: translateX(-90px) scale(.94) rotate(-1deg); }
[data-act="on"][data-dir="g"] .arow__n,
[data-act="on"][data-dir="g"] .arow__t,
[data-act="on"][data-dir="g"] .arow__d,
[data-act="on"][data-dir="g"] .arow__tag { transform: translateX(70px); }

[data-act="on"][data-dir="d"] .arow__ph { transform: translateX(90px) scale(.94) rotate(1deg); }
[data-act="on"][data-dir="d"] .arow__n,
[data-act="on"][data-dir="d"] .arow__t,
[data-act="on"][data-dir="d"] .arow__d,
[data-act="on"][data-dir="d"] .arow__tag { transform: translateX(-70px); }

[data-act="on"][data-dir="x"] .arow__ph { transform: translate(-38px, 70px) scale(.94) rotate(-.8deg); }
[data-act="on"][data-dir="x"] .arow__n,
[data-act="on"][data-dir="x"] .arow__t,
[data-act="on"][data-dir="x"] .arow__d,
[data-act="on"][data-dir="x"] .arow__tag { transform: translate(38px, -34px); }

/* ---------------- L'ARRIVÉE, DANS L'ORDRE --------------------------
   L'image part la première, le reste la suit. Les retards ne sont posés
   que sur l'état d'arrivée : au départ tout est déjà en place, sinon
   une sortie du champ rejouerait le décalage à l'envers. */
[data-act="on"].is-in .arow__ph,
[data-act="on"].is-in .arow__n,
[data-act="on"].is-in .arow__t,
[data-act="on"].is-in .arow__d,
[data-act="on"].is-in .arow__tag {
  opacity: 1;
  transform: none;
}
[data-act="on"].is-in .arow__ph  { transition-delay: 0ms; }
[data-act="on"].is-in .arow__n   { transition-delay: 110ms; }
[data-act="on"].is-in .arow__t   { transition-delay: 150ms; }
[data-act="on"].is-in .arow__d   { transition-delay: 240ms; }
[data-act="on"].is-in .arow__tag { transition-delay: 340ms; }

/* ---------------- LES BLOCS NUMÉROTÉS ET LE GONG -------------------
   Même grammaire, mais en montée verticale : la fin de page se pose au
   lieu de glisser. C'est ce qui la fait sentir comme une fin. */
.alibre li { position: relative; }
.alibre__n {
  font: 700 .68rem/1 var(--f-mono);
  letter-spacing: .16em;
  color: var(--spark);
  margin-bottom: .15rem;
}
.alibre__d { font-size: var(--step--1); line-height: 1.45; color: var(--muted); }

[data-act="on"][data-dir="n"] .alibre__n,
[data-act="on"][data-dir="n"] b,
[data-act="on"][data-dir="n"] .alibre__d,
[data-act="on"][data-dir="n"] .eyebrow,
[data-act="on"][data-dir="n"] .display,
[data-act="on"][data-dir="n"] .lead,
[data-act="on"][data-dir="n"] .gong__cta {
  opacity: 0;
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
}
[data-act="on"][data-dir="n"] .alibre__n { transform: translateY(30px); }
[data-act="on"][data-dir="n"] b          { transform: translateY(26px); }
[data-act="on"][data-dir="n"] .alibre__d { transform: translateY(22px); }
[data-act="on"][data-dir="n"] .eyebrow   { transform: translateY(30px); }
[data-act="on"][data-dir="n"] .display   { transform: translateY(40px); }
[data-act="on"][data-dir="n"] .lead      { transform: translateY(30px); }
[data-act="on"][data-dir="n"] .gong__cta { transform: translateY(20px); }

[data-act="on"][data-dir="n"].is-in .alibre__n,
[data-act="on"][data-dir="n"].is-in b,
[data-act="on"][data-dir="n"].is-in .alibre__d,
[data-act="on"][data-dir="n"].is-in .eyebrow,
[data-act="on"][data-dir="n"].is-in .display,
[data-act="on"][data-dir="n"].is-in .lead,
[data-act="on"][data-dir="n"].is-in .gong__cta { opacity: 1; transform: none; }

[data-act="on"][data-dir="n"].is-in .alibre__n { transition-delay: 0ms; }
[data-act="on"][data-dir="n"].is-in b          { transition-delay: 110ms; }
[data-act="on"][data-dir="n"].is-in .alibre__d { transition-delay: 220ms; }
[data-act="on"][data-dir="n"].is-in .eyebrow   { transition-delay: 0ms; }
[data-act="on"][data-dir="n"].is-in .display   { transition-delay: 90ms; }
[data-act="on"][data-dir="n"].is-in .lead      { transition-delay: 190ms; }
[data-act="on"][data-dir="n"].is-in .gong__cta { transition-delay: 300ms; }

/* ---------------- MOBILE : QUE DU VERTICAL -------------------------
   90 px de déplacement horizontal sur un écran de 375 px pousse le
   document et fabrique un défilement latéral. Tout repasse en
   translateY, avec des amplitudes plus courtes. */
@media (max-width: 899.98px) {
  [data-act="on"][data-dir] .arow__ph  { transform: translateY(60px) scale(.96); }
  [data-act="on"][data-dir] .arow__n   { transform: translateY(44px); }
  [data-act="on"][data-dir] .arow__t   { transform: translateY(40px); }
  [data-act="on"][data-dir] .arow__d   { transform: translateY(32px); }
  [data-act="on"][data-dir] .arow__tag { transform: translateY(26px); }
  [data-act="on"].is-in .arow__ph,
  [data-act="on"].is-in .arow__n,
  [data-act="on"].is-in .arow__t,
  [data-act="on"].is-in .arow__d,
  [data-act="on"].is-in .arow__tag { transform: none; }
}

/* ---------------- MOUVEMENT RÉDUIT --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-act="on"] .arow__ph,
  [data-act="on"] .arow__n,
  [data-act="on"] .arow__t,
  [data-act="on"] .arow__d,
  [data-act="on"] .arow__tag,
  [data-act="on"][data-dir="n"] * {
    transform: none !important;
    transition: opacity .3s linear !important;
    transition-delay: 0ms !important;
  }
}

/* =====================================================================
   LA FIN DE PAGE — composition reprise de la maquette du club.
   ---------------------------------------------------------------------
   Quatre temps : l'accès libre sur la photo de la salle, une respiration
   claire qui annonce les formules, les deux offres sur fond sombre, puis
   le gong. C'est un crescendo : on montre, on annonce, on chiffre, on
   demande.

   L'ORANGE DE LA MAQUETTE N'ENTRE PAS. Le site tient sur quatre couleurs
   (bleu nuit, blanc cassé, argent, noir) ; une cinquième pour deux
   boutons aurait cassé l'identité pour rien. L'accent reste le blanc
   chaud, et c'est le CONTRASTE — carte pleine contre carte creuse — qui
   désigne l'offre principale, pas une couleur d'alerte.
   ===================================================================== */

/* ------------------- 1. L'ACCÈS LIBRE, SUR LA SALLE ---------------- */
.libre {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.libre__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  z-index: -2;
}
/* voile bleu nuit — la photo doit rester lisible sous le texte, sans
   virer au gris comme le ferait un voile noir */
.libre::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(var(--void-rgb), .82) 0%,
    rgba(var(--navy-rgb), .86) 45%,
    rgba(var(--paper-rgb), .96) 100%);
}
.libre__say { text-align: center; }
.libre__say .eyebrow { justify-content: center; }
.libre__say .display {
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  margin-top: 1rem;
}
.libre__say .lead { margin: .9rem auto 0; max-width: 44ch; }

/* les quatre cartes, posées EN CHEVAUCHEMENT sur la photo — c'est ce
   décalage qui donne la profondeur de la maquette */
.libre__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7);
}
@media (min-width: 620px) { .libre__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .libre__grid { grid-template-columns: repeat(4, 1fr); } }
.libre__grid > li {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: rgba(var(--paper-2-rgb), .92);
  backdrop-filter: blur(10px);
}
.libre__n {
  font: 700 .68rem/1 var(--f-mono);
  letter-spacing: .16em;
  color: var(--spark);
}
.libre__i { width: 30px; height: 30px; color: var(--spark-2); margin-block: .3rem; }
.libre__grid b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.libre__d { font-size: var(--step--1); line-height: 1.45; color: var(--muted); }

.libre .equip { justify-content: center; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }

/* ------------------- 2. LA RESPIRATION CLAIRE --------------------- */
.formules {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 9rem);
  text-align: center;
}
/* le filigrane : le nom du club en très grand, très pâle, DERRIÈRE le
   titre. Il donne l'échelle sans rien réclamer. */
.formules__mark {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(4rem, 15vw, 12rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: var(--ink);
  opacity: .055;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.formules__say { position: relative; z-index: 1; }
.formules__say .eyebrow { justify-content: center; }
.formules__say .display {
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  margin-top: 1.1rem;
}
/* le trait sous le titre, comme sur la maquette */
.formules__say .display::after {
  content: "";
  display: block;
  width: 74px; height: 3px;
  margin: clamp(1.4rem, 3vw, 2rem) auto 0;
  border-radius: 3px;
  background: var(--spark);
}

/* ---------------------- 3. LES DEUX OFFRES ------------------------ */
.offres {
  background: var(--void);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.offres__grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) { .offres__grid { grid-template-columns: repeat(2, 1fr); } }

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--paper-2);
}
/* L'OFFRE PRINCIPALE SE DÉSIGNE PAR LE CONTRASTE, pas par une couleur
   d'alerte : cadre blanc chaud et halo, sur des cartes autrement sobres. */
.offre--phare {
  border-color: var(--spark);
  box-shadow: var(--glow), 0 26px 60px -30px rgba(0, 0, 0, .8);
}
.offre__flag {
  position: absolute;
  top: -.75em; left: clamp(1.3rem, 3vw, 2rem);
  background: var(--spark);
  color: var(--on-spark);
  font: 600 .6rem/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .6em 1em;
  border-radius: 100px;
}
.offre__head { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.4rem); }
/* le prix dans son disque — repris de la maquette, en argent */
.offre__disc {
  flex: none;
  width: clamp(88px, 15vw, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-content: center;
  text-align: center;
  gap: .1rem;
}
.offre--phare .offre__disc { border-color: var(--spark); }
.offre__disc b {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.offre__disc i {
  font-style: normal;
  font: 500 .58rem/1.2 var(--f-mono);
  letter-spacing: .06em;
  color: var(--muted);
}
.offre__n {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: -.01em;
  color: var(--ink);
}
.offre__s {
  margin-top: .3rem;
  font: 600 .68rem/1.3 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--spark-2);
}
.offre__l { display: grid; gap: .65rem; }
.offre__l li { display: flex; align-items: flex-start; gap: .8ch; }
.offre__c { width: 19px; height: 19px; flex: none; margin-top: .1em; color: var(--spark-2); }
.offre--phare .offre__c { color: var(--spark); }
.offre__l span { font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); }
.offre__cta { margin-top: auto; align-self: stretch; }

/* ------------------- LE BANDEAU DE RÉASSURANCE -------------------- */
.rassure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  width: var(--wrap);
  margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 760px) { .rassure { grid-template-columns: repeat(3, 1fr); } }
.rassure li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2vw, 1.4rem);
  background: var(--paper);
}
.rassure__i { width: 26px; height: 26px; flex: none; color: var(--spark-2); }
.rassure span { display: flex; flex-direction: column; gap: .12rem; }
.rassure b {
  font: 600 .72rem/1.3 var(--f-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.rassure span { font-size: .78rem; line-height: 1.35; color: var(--muted); }

/* ------------------- LE MOUVEMENT DE LA FIN DE PAGE ---------------
   Même grammaire que les rangées d'activités : montée verticale, dans
   l'ordre, puis stabilité. */
[data-act="on"][data-dir="n"].libre__say > *,
[data-act="on"][data-dir="n"].formules__say > *,
[data-act="on"][data-dir="n"] .libre__n,
[data-act="on"][data-dir="n"] .libre__i,
[data-act="on"][data-dir="n"] .libre__d,
[data-act="on"][data-dir="n"] .offre__flag,
[data-act="on"][data-dir="n"] .offre__head,
[data-act="on"][data-dir="n"] .offre__l,
[data-act="on"][data-dir="n"] .offre__cta,
[data-act="on"][data-dir="n"].equip > li,
[data-act="on"][data-dir="n"].rassure > li {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
}
[data-act="on"][data-dir="n"].is-in.libre__say > *,
[data-act="on"][data-dir="n"].is-in.formules__say > *,
[data-act="on"][data-dir="n"].is-in .libre__n,
[data-act="on"][data-dir="n"].is-in .libre__i,
[data-act="on"][data-dir="n"].is-in .libre__d,
[data-act="on"][data-dir="n"].is-in .offre__flag,
[data-act="on"][data-dir="n"].is-in .offre__head,
[data-act="on"][data-dir="n"].is-in .offre__l,
[data-act="on"][data-dir="n"].is-in .offre__cta,
[data-act="on"][data-dir="n"].is-in.equip > li,
[data-act="on"][data-dir="n"].is-in.rassure > li { opacity: 1; transform: none; }

[data-act="on"][data-dir="n"].is-in .offre__flag { transition-delay: 0ms; }
[data-act="on"][data-dir="n"].is-in .offre__head { transition-delay: 80ms; }
[data-act="on"][data-dir="n"].is-in .offre__l    { transition-delay: 180ms; }
[data-act="on"][data-dir="n"].is-in .offre__cta  { transition-delay: 280ms; }
[data-act="on"][data-dir="n"].is-in .libre__i    { transition-delay: 90ms; }
[data-act="on"][data-dir="n"].is-in .libre__d    { transition-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  [data-act="on"][data-dir="n"] * {
    transform: none !important;
    transition: opacity .3s linear !important;
    transition-delay: 0ms !important;
  }
}