[hidden]{display:none !important}
/* ============================================
   TheFrontHub — Animation System
   Adds life, depth, and polish across the site
   ============================================ */

/* ── 1. Animated Background Gradient ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255,122,0,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(255,177,93,.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(255,122,0,.02) 0%, transparent 60%);
  animation: bgShift 30s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes bgShift {
  0%   { opacity: 1; }
  100% { opacity: .85; }
}

:root.light body::before {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(255,122,0,.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(255,122,0,.03) 0%, transparent 60%);
}

/* ── 2. Floating Particles Background ── */
.particles-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
}

:root.light .particles-canvas {
  opacity: .3;
}

/* ── 3. Staggered Page Entrance ── */
.animate-entrance {
  opacity: 0;
  transform: translateY(24px);
  animation: entranceIn .6s cubic-bezier(.22,.68,.36,1.2) forwards;
}

@keyframes entranceIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Stagger delays */
.stagger-1 { animation-delay: .05s; }
.stagger-2 { animation-delay: .10s; }
.stagger-3 { animation-delay: .15s; }
.stagger-4 { animation-delay: .20s; }
.stagger-5 { animation-delay: .25s; }
.stagger-6 { animation-delay: .30s; }
.stagger-7 { animation-delay: .35s; }
.stagger-8 { animation-delay: .40s; }

/* ── 4. Scroll Reveal ──
   Subtle fade + slide-up. 280ms ease-out for a premium, snappy feel.
   Revealed when element enters viewport (IntersectionObserver in animations.js). */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .28s cubic-bezier(.16,1,.3,1),
              transform .28s cubic-bezier(.16,1,.3,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Direction variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .28s cubic-bezier(.16,1,.3,1),
              transform .28s cubic-bezier(.16,1,.3,1);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .28s cubic-bezier(.16,1,.3,1),
              transform .28s cubic-bezier(.16,1,.3,1);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale variant — for hero elements */
.reveal-scale {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .3s cubic-bezier(.16,1,.3,1),
              transform .3s cubic-bezier(.16,1,.3,1);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ── 5. Stat Cards — Enhanced Hover ──
   Note: removed perspective/preserve-3d (was creating a stacking context
   that made the game-mode dropdown appear BEHIND stat cards). */
.stat-card {
  transition: transform .25s cubic-bezier(.22,.68,.36,1.15),
              border-color .25s ease,
              box-shadow .25s ease !important;
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(255,122,0,.12), 0 0 0 1px var(--accent) !important;
}

/* Stat value count-up animation */
.stat-value.counting {
  display: inline-block;
}

/* ── 6. Cards — 3D Depth on Hover ── */
.feed-card,
.hof-card,
.content,
.chart-card,
.modal-stat,
.profile-main-card,
.profile-edit-form-card,
.profile-api-stat {
  transition: transform .25s cubic-bezier(.22,.68,.36,1.05),
              box-shadow .25s ease,
              border-color .25s ease !important;
  will-change: transform;
}
.feed-card:hover,
.content:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}

/* ── 7. Hall of Fame — 3D Card Lift ── */
.hof-card {
  transition: transform .3s cubic-bezier(.22,.68,.36,1.15),
              box-shadow .3s ease,
              border-color .3s ease !important;
}
.hof-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.2) !important;
}
.hof-1:hover {
  box-shadow: 0 20px 50px rgba(240,192,64,.15), 0 0 0 1px var(--gold) !important;
}
.hof-2:hover {
  box-shadow: 0 20px 50px rgba(143,168,192,.12), 0 0 0 1px var(--silver) !important;
}
.hof-3:hover {
  box-shadow: 0 20px 50px rgba(184,120,64,.12), 0 0 0 1px var(--bronze) !important;
}

/* ── 8. Run Rows — Slide-in + Hover Glow ── */
.run-row {
  transition: background .15s ease,
              transform .2s cubic-bezier(.22,.68,.36,1.05),
              box-shadow .2s ease !important;
}
.run-row:hover {
  background: rgba(255,122,0,.06) !important;
  transform: translateX(3px);
}
.run-row.is-me {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── 9. Feed Items — Staggered Entrance ── */
.feed-item {
  transition: background .12s ease,
              transform .2s cubic-bezier(.22,.68,.36,1.05) !important;
}
.feed-item:hover {
  background: rgba(255,122,0,.04) !important;
  transform: translateX(4px);
}

/* ── 10. Tab Switch — Smooth Morph ── */
.tab-btn:not(.nav-item) {
  position: relative;
  overflow: hidden;
}
.tab-btn:not(.nav-item)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 8px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22,.68,.36,1.05);
  z-index: -1;
}
.tab-btn:not(.nav-item).active::after {
  transform: scaleX(1);
}

/* ── 11. Modal — 3D Entrance ── */
.modal-overlay.active {
  animation: overlayIn .25s ease forwards;
}
@keyframes overlayIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(6px); }
}

.modal-overlay.active .modal {
  animation: modalIn .35s cubic-bezier(.22,.68,.36,1.15) forwards;
}
@keyframes modalIn {
  from { opacity: 0; transform: perspective(800px) rotateX(-8deg) scale(.92) translateY(20px); }
  to   { opacity: 1; transform: perspective(800px) rotateX(0) scale(1) translateY(0); }
}

/* ── 12. Shimmer Loading ── */
.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--bg2) !important;
  color: transparent !important;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.04) 20%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 80%,
    transparent 100%
  );
  animation: shimmerSlide 1.8s ease-in-out infinite;
}
:root.light .shimmer::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.03) 20%,
    rgba(0,0,0,.06) 50%,
    rgba(0,0,0,.03) 80%,
    transparent 100%
  );
}
@keyframes shimmerSlide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ── 13. Map Items — Hover Glow ── */
.map-item {
  transition: all .2s cubic-bezier(.22,.68,.36,1.05) !important;
}
.map-item:hover {
  transform: translateX(4px);
  border-left: 3px solid var(--accent);
  padding-left: 13px !important;
}
.map-item.active {
  animation: mapActive .3s ease;
}
@keyframes mapActive {
  from { transform: scale(.97); opacity: .7; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── 14. Buttons — Ripple Effect ── */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0);
  animation: rippleExpand .5s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(3); opacity: 0; }
}

/* ── 15. Number Count-Up ── */
@keyframes countPop {
  0%   { transform: scale(.8); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.count-pop {
  animation: countPop .4s cubic-bezier(.22,.68,.36,1.2) forwards;
}

/* ── 16. Live Badge — Animated ── */
.refresh-badge {
  position: relative;
}
.refresh-badge::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--green);
  animation: livePing 2s cubic-bezier(0,0,.2,1) infinite;
  z-index: -1;
}
@keyframes livePing {
  0%   { transform: scale(1); opacity: .6; }
  75%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* ── 17. Settings Gear — Rotation on Hover ── */
.settings-btn:hover svg {
  animation: gearSpin .5s cubic-bezier(.22,.68,.36,1.2);
}
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(90deg); }
}

/* ── 18. Profile Card — Depth Entrance ── */
.profile-main-card {
  transition: transform .3s cubic-bezier(.22,.68,.36,1.05),
              box-shadow .3s ease !important;
}
.profile-main-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* ── 19. Search Input — Focus Glow ── */
.search-input:focus,
.map-search-wrap input:focus,
.cmp-input input:focus,
.runs-controls input:focus,
.form-group input:focus {
  box-shadow: 0 0 0 3px rgba(255,122,0,.12), 0 0 20px rgba(255,122,0,.08) !important;
  animation: inputPulse .4s ease;
}
@keyframes inputPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,122,0,.3); }
  100% { box-shadow: 0 0 0 3px rgba(255,122,0,.12); }
}

/* ── 20. Game Version Badge ── */
.game-version {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--card2);
  border: 1px solid var(--rim);
  transition: all .2s ease;
}
.game-version:hover {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accentGlow);
}

/* ── 21. Back Link — Arrow Slide ── */
.profile-back-link {
  transition: all .2s cubic-bezier(.22,.68,.36,1.05) !important;
}
.profile-back-link:hover {
  transform: translateX(-4px);
}

/* ── 22. GG Button — Heartbeat on Active ── */
.gg-btn.active {
  animation: ggHeartbeat .4s ease;
}
@keyframes ggHeartbeat {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.12); }
  50%  { transform: scale(.95); }
  75%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── 23. Dropdown — Smooth Open ── */
.user-container.open .user-dropdown-menu {
  transform-origin: top right;
  animation: dropdownIn .2s cubic-bezier(.22,.68,.36,1.05) forwards;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: scale(.9) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 24. Logo — Floating Idle Animation ── */
.site-logo-img {
  transition: transform .25s cubic-bezier(.22,.68,.36,1.05),
              filter .25s ease !important;
}
.site-logo-img:not(.tilted):not(.click-flip):not(.exit-spin):not(.enter-anim) {
  animation: logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.site-logo:hover .site-logo-img:not(.tilted):not(.click-flip):not(.exit-spin) {
  filter: drop-shadow(0 0 16px var(--accentGlow));
}

/* ── 25. Rank Badges — Shimmer ── */
.run-rank.gold, .global-rank.gold {
  text-shadow: 0 0 8px rgba(240,192,64,.3);
}
.run-rank.silver, .global-rank.silver {
  text-shadow: 0 0 8px rgba(143,168,192,.2);
}
.run-rank.bronze, .global-rank.bronze {
  text-shadow: 0 0 8px rgba(184,120,64,.2);
}

/* ── 26. Compare Results — Animated Bars ── */
.dist-bar {
  transition: width .6s cubic-bezier(.22,.68,.36,1.05) !important;
}
.dist-bar:hover {
  transform: scaleY(1.3);
  box-shadow: 0 0 10px var(--accentGlow);
}

/* ── 27. Profile Stats Grid — Stagger ── */
.profile-stats-grid .modal-stat {
  transition: transform .25s cubic-bezier(.22,.68,.36,1.05),
              box-shadow .25s ease !important;
}
.profile-stats-grid .modal-stat:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

/* ── 28. Toggle Switch — Bouncy ── */
.toggle-switch.on::after {
  animation: toggleBounce .3s cubic-bezier(.22,.68,.36,1.4);
}
@keyframes toggleBounce {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(20px); }
  70%  { transform: translateX(16px); }
  100% { transform: translateX(18px); }
}

/* ── 29. Auth Buttons — Hover Slide ── */
.auth-btn {
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.22,.68,.36,1.05),
              filter .2s ease !important;
}
.auth-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%);
  transition: transform .4s ease;
}
.auth-btn:hover::after {
  transform: translateX(100%);
}

/* ── 30. Reduced Motion Preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══ 31. Premium Micro-Interactions (v2) ═══
   Subtle, snappy hover effects. 200-280ms ease-out for a premium feel.
   Use .lift on any card/button for a gentle elevation on hover. */

/* Generic lift — subtle translateY + shadow on hover */
.lift {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out) !important;
}
.lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow), var(--shadow-orange);
}

/* Gentle scale — for buttons, badges, icons */
.scale-hover {
  transition: transform var(--dur) var(--ease-out) !important;
}
.scale-hover:hover {
  transform: scale(1.04);
}

/* Color shift — for links and nav items */
.color-hover {
  transition: color var(--dur) var(--ease-out) !important;
}
.color-hover:hover {
  color: var(--orange);
}

/* Premium card — unified hover for all card-like elements
   (replaces scattered hover rules with one consistent effect) */
.premium-card {
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out) !important;
}
.premium-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--orange-glow-strong);
}

/* Focus ring — accessible + premium */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Smooth opacity fade for dynamic content */
.fade-in {
  animation: fadeIn var(--dur) var(--ease-out) forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide-up entrance (for JS-injected content) */
.slide-up {
  animation: slideUp var(--dur-slow) var(--ease-out) forwards;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   32. PREMIUM MOTION SYSTEM v2 (Linear/Apple-inspired)
   Ultra-professional, minimal, premium. Only transform + opacity.
   Duration 200-600ms. cubic-bezier(0.22, 1, 0.36, 1). No bounce.
   ════════════════════════════════════════════════════════════════ */

:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-premium: 400ms;
  --dur-premium-fast: 220ms;
  --dur-premium-slow: 600ms;
}

/* ── 32a. Scroll Reveal — fade + up (no blur for performance)
   Stagger via inline transition-delay (100ms per item, capped at 12). */
.reveal-premium {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-premium) var(--ease-premium),
    transform var(--dur-premium) var(--ease-premium);
  will-change: opacity, transform;
}
.reveal-premium.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variant: fade only (no movement) — for overlays, badges */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--dur-premium) var(--ease-premium);
}
.reveal-fade.is-visible { opacity: 1; }

/* Variant: slide from left — for sidebar, drawer content */
.reveal-slide-left {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity var(--dur-premium) var(--ease-premium),
    transform var(--dur-premium) var(--ease-premium);
}
.reveal-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variant: slide from right — for main content panels */
.reveal-slide-right {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity var(--dur-premium) var(--ease-premium),
    transform var(--dur-premium) var(--ease-premium);
}
.reveal-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variant: scale-in — for hero, modal content */
.reveal-scale-premium {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--dur-premium) var(--ease-premium),
    transform var(--dur-premium) var(--ease-premium);
}
.reveal-scale-premium.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── 32b. Top scroll progress bar ──
   Thin (3px) gradient bar fixed at top, grows with scroll progress. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-light) 100%);
  z-index: 9999;
  pointer-events: none;
  transition: width 80ms linear;
  box-shadow: 0 0 8px var(--orange-glow);
}

/* ── 32c. Magnetic hover + lift on buttons ──
   Apply .magnetic to any button/link. JS translates the element toward
   the cursor (magnetic effect) + adds a lift on hover. */
.magnetic {
  transition:
    transform var(--dur-premium-fast) var(--ease-premium),
    box-shadow var(--dur-premium) var(--ease-premium);
  will-change: transform;
}
.magnetic:hover {
  transform: translateY(-2px);
}
.magnetic:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 100ms;
}

/* ── 32d. Card scale on hover (1.02) ──
   Apply .card-scale to any card. Subtle 2% scale + soft shadow. */
.card-scale {
  transition:
    transform var(--dur-premium) var(--ease-premium),
    box-shadow var(--dur-premium) var(--ease-premium),
    border-color var(--dur-premium) var(--ease-premium);
  will-change: transform;
}
.card-scale:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--orange-glow);
}

/* ── 32e. Image zoom on hover ──
   Wrap an img in a container with .img-zoom. The img scales 1.05 on hover. */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform var(--dur-premium-slow) var(--ease-premium);
  will-change: transform;
}
.img-zoom:hover img {
  transform: scale(1.05);
}

/* ── 32f. Left-to-right underline on links ──
   Apply .link-underline. A gradient underline slides in from left on hover. */
.link-underline {
  position: relative;
  text-decoration: none;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-premium) var(--ease-premium);
}
.link-underline:hover::after {
  transform: scaleX(1);
}

/* ── 32g. Smooth page transitions ──
   Fade-out on navigate, fade-in on load. Applied to body.
   v5.38 — TRANSFORMS RETIRÉES des keyframes : un transform sur <body> en fait
   le containing block de TOUS les éléments position:fixed (sidebar, bottom-nav,
   banderole, chat…) pendant l'animation → la sidebar « glissait » avec le
   scroll restauré au refresh puis sautait à sa place à la fin (rebond du
   logo) ; en page-exit avec page scrollée, la sidebar fixed se retrouvait même
   hors écran (top:41px relatif au haut du document). L'opacité seule ne crée
   JAMAIS de containing block : le fondu visuel est identique, zéro décalage. */
body.page-enter {
  animation: pageEnter var(--dur-premium) var(--ease-premium);
}
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.page-exit {
  animation: pageExit var(--dur-premium-fast) var(--ease-premium) forwards;
}
@keyframes pageExit {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── 32h. Lenis smooth scroll classes ──
   Applied automatically by Lenis when active. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── 32i. Subtle nav-item hover (premium, no color flash) ──
   Replaces abrupt color changes with a smooth transform + opacity. */
.nav-item {
  transition:
    transform var(--dur-premium-fast) var(--ease-premium),
    background var(--dur-premium) var(--ease-premium),
    color var(--dur-premium) var(--ease-premium) !important;
}
.nav-item:hover {
  transform: translateX(2px);
}

/* ── 32j. Input focus — premium glow (no pulse) ── */
input:focus, textarea:focus, select:focus {
  transition: box-shadow var(--dur-premium) var(--ease-premium),
              border-color var(--dur-premium) var(--ease-premium) !important;
}

/* ── 32k. Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-premium,
  .reveal-fade,
  .reveal-slide-left,
  .reveal-slide-right,
  .reveal-scale-premium {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .magnetic:hover,
  .card-scale:hover {
    transform: none !important;
  }
  .img-zoom:hover img { transform: none !important; }
  .link-underline::after { transform: none !important; opacity: 0 !important; }
  body.page-enter, body.page-exit { animation: none !important; }
}