/* ================================================================
   ANIMATIONS.CSS — Sistema de Animaciones Pro v2.0
   Scroll reveal, hover effects, parallax, floating, typing.
   ON por defecto. Body con clase .no-animations desactiva todo.
   Respeta prefers-reduced-motion automáticamente.
================================================================ */

/* === PÁGINAS TRANSACCIONALES (todos los temas) — nunca ocultar por scroll reveal === */
html body.storefront-utility-page .section,
html body[class*="theme-"].storefront-utility-page .section,
html body.storefront-utility-page .storefront-page,
html body[class*="theme-"].storefront-utility-page .storefront-page,
.storefront-page.section,
.storefront-page .section,
.storefront-page.visible {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-down, .reveal-left, .reveal-right,
  .reveal-zoom, .reveal-zoom-out, .reveal-flip,
  .section-block[data-animate],
  .hover-lift, .hover-glow, .hover-shine, .hover-border, .hover-scale, .hover-tilt,
  .animate-float, .animate-pulse, .animate-gradient {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hover-shine::after { display: none !important; }
}

/* ================================================================
   SCROLL REVEAL SYSTEM
   Clases: .reveal + variante de dirección
   Activado: .is-visible (agregado via JS con IntersectionObserver)
================================================================ */
.reveal {
  opacity: 0;
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Variantes de entrada — .reveal-* para elementos individuales */
.reveal-up    { transform: translateY(52px); }
.reveal-down  { transform: translateY(-32px); }
.reveal-left  { transform: translateX(-64px); }
.reveal-right { transform: translateX(64px); }
.reveal-zoom  { transform: scale(0.86); }
.reveal-zoom-out { transform: scale(1.14); }
.reveal-flip  { transform: perspective(800px) rotateX(18deg) translateY(30px); transform-origin: top center; }

/* Section-block transforms via data-animate attribute. Solo después de que animations.js marca
   lo que ya está en pantalla (html.dp-reveal-armed): así lo primero se ve sin esperar al JS. */
html.dp-reveal-armed .section-block[data-animate="fade-up"]:not(.is-visible)    { transform: translateY(52px); }
html.dp-reveal-armed .section-block[data-animate="fade-down"]:not(.is-visible)  { transform: translateY(-32px); }
html.dp-reveal-armed .section-block[data-animate="fade-left"]:not(.is-visible)  { transform: translateX(-64px); }
html.dp-reveal-armed .section-block[data-animate="fade-right"]:not(.is-visible) { transform: translateX(64px); }
html.dp-reveal-armed .section-block[data-animate="zoom"]:not(.is-visible)       { transform: scale(0.86); }
html.dp-reveal-armed .section-block[data-animate="zoom-out"]:not(.is-visible)   { transform: scale(1.14); }
html.dp-reveal-armed .section-block[data-animate="flip"]:not(.is-visible)       { transform: perspective(800px) rotateX(18deg) translateY(30px); transform-origin: top center; }
.section-block[data-animate="fade"]       { /* only opacity */ }

/* ================================================================
   STAGGER CHILDREN
   El padre lleva .stagger-children, los hijos tienen .reveal
   Los delays se incrementan automáticamente por posición
================================================================ */
.stagger-children > .reveal:nth-child(1)  { transition-delay: 0ms; }
.stagger-children > .reveal:nth-child(2)  { transition-delay: 90ms; }
.stagger-children > .reveal:nth-child(3)  { transition-delay: 180ms; }
.stagger-children > .reveal:nth-child(4)  { transition-delay: 270ms; }
.stagger-children > .reveal:nth-child(5)  { transition-delay: 360ms; }
.stagger-children > .reveal:nth-child(6)  { transition-delay: 450ms; }
.stagger-children > .reveal:nth-child(7)  { transition-delay: 540ms; }
.stagger-children > .reveal:nth-child(8)  { transition-delay: 630ms; }
.stagger-children > .reveal:nth-child(n+9) { transition-delay: 700ms; }

/* ================================================================
   SECTION BLOCK ANIMATIONS
   .section-block[data-animate] se anima al entrar al viewport.
   JS agrega .reveal + .reveal-{direction} + .is-visible
   CSS maneja el estado inicial para evitar flash.
================================================================ */
.section-block[data-animate] {
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.dp-reveal-armed .section-block[data-animate]:not(.is-visible) {
  opacity: 0;
}
/* Entrada al abrir: cada sección aparece con su dirección apenas se pinta la página, sin esperar
   al JS (antes arrancaba invisible hasta que llegaba animations.js). Las que quedan más abajo las
   esconde animations.js (dp-reveal-armed + sin is-visible) y repiten esta animación al scrollear. */
.section-block[data-animate]                     { animation: dpSecIn-up .72s cubic-bezier(0.22, 1, 0.36, 1) both; }
.section-block[data-animate="fade"]              { animation-name: dpSecIn-fade; }
.section-block[data-animate="fade-down"]         { animation-name: dpSecIn-down; }
.section-block[data-animate="fade-left"]         { animation-name: dpSecIn-left; }
.section-block[data-animate="fade-right"]        { animation-name: dpSecIn-right; }
.section-block[data-animate="zoom"]              { animation-name: dpSecIn-zoom; }
.section-block[data-animate="zoom-out"]          { animation-name: dpSecIn-zoomout; }
.section-block[data-animate="flip"]              { animation-name: dpSecIn-flip; transform-origin: top center; }
html.dp-reveal-armed .section-block[data-animate]:not(.is-visible) { animation: none; }
/* La primera sección (la portada) se ve de una al abrir: su fundido desde el fondo hacía titilar las
   portadas oscuras (bloques HTML con banda negra) cada vez que se cargaba la página. */
.section-block[data-animate]:not(.section-block ~ .section-block) { animation: none; }
@keyframes dpSecIn-up      { from { opacity: 0; transform: translateY(52px); }  to { opacity: 1; transform: none; } }
@keyframes dpSecIn-fade    { from { opacity: 0; }                               to { opacity: 1; } }
@keyframes dpSecIn-down    { from { opacity: 0; transform: translateY(-32px); } to { opacity: 1; transform: none; } }
@keyframes dpSecIn-left    { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@keyframes dpSecIn-right   { from { opacity: 0; transform: translateX(64px); }  to { opacity: 1; transform: none; } }
@keyframes dpSecIn-zoom    { from { opacity: 0; transform: scale(0.86); }       to { opacity: 1; transform: none; } }
@keyframes dpSecIn-zoomout { from { opacity: 0; transform: scale(1.14); }       to { opacity: 1; transform: none; } }
@keyframes dpSecIn-flip    { from { opacity: 0; transform: perspective(800px) rotateX(18deg) translateY(30px); } to { opacity: 1; transform: none; } }
/* Celular: misma animación, más corta y con menos recorrido para que no se sienta pesada.
   (Un @keyframes dentro de @media reemplaza al de arriba cuando la pantalla es chica.) */
@media (max-width: 767px) {
  .section-block[data-animate] { animation-duration: .5s; }
  @keyframes dpSecIn-up      { from { opacity: 0; transform: translateY(22px); }  to { opacity: 1; transform: none; } }
  @keyframes dpSecIn-down    { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
  @keyframes dpSecIn-left    { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
  @keyframes dpSecIn-right   { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: none; } }
  @keyframes dpSecIn-zoom    { from { opacity: 0; transform: scale(0.95); }       to { opacity: 1; transform: none; } }
  @keyframes dpSecIn-zoomout { from { opacity: 0; transform: scale(1.05); }       to { opacity: 1; transform: none; } }
  @keyframes dpSecIn-flip    { from { opacity: 0; transform: perspective(800px) rotateX(8deg) translateY(14px); } to { opacity: 1; transform: none; } }
  html.dp-reveal-armed .section-block[data-animate]:not(.is-visible) { transform: translateY(22px); }
}
/* Sin !important: un !important le gana a la animación de entrada y la cortaba a la mitad. */
.section-block[data-animate].is-visible {
  opacity: 1;
  transform: none;
}
/* Vista rápida: no heredar opacity/transform del section-block (modal va al body, pero por si queda legacy en DOM) */
.section-block[data-animate] > #quick-view-modal,
.section-block > #quick-view-modal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
/* Fallback: si JS no corrió (no-js / SSR) */
.no-js .section-block[data-animate] {
  opacity: 1;
  transform: none;
}

/* Animación de header de sección (título + subtítulo) */
html.dp-reveal-armed .section-block[data-animate] .sec-title-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
html.dp-reveal-armed .section-block[data-animate] .sec-subtitle-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.22s, transform 0.6s ease 0.22s;
}
.section-block[data-animate].is-visible .sec-title-anim,
.section-block[data-animate].is-visible .sec-subtitle-anim {
  opacity: 1;
  transform: none;
}

/* ================================================================
   HOVER EFFECTS — Cards, products, feature items
================================================================ */

/* Lift: sube con sombra profunda */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease !important;
}
.hover-lift:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16) !important;
}

/* Glow: resplandor del color primario */
.hover-glow {
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.hover-glow:hover {
  box-shadow: 0 0 0 2px var(--primary-color, #6366f1),
              0 8px 40px rgba(var(--primary-rgb, 99 102 241) / 0.28) !important;
}

/* Shine: destello que cruza la tarjeta */
.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  left: -120%;
  width: 60%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  transform: skewX(-15deg);
  transition: none;
  pointer-events: none;
}
.hover-shine:hover::after {
  animation: shine-sweep 0.55s ease forwards;
}
@keyframes shine-sweep {
  0%   { left: -120%; }
  100% { left: 150%; }
}

/* Border: borde color primario al hover */
.hover-border {
  transition: border-color 0.28s ease, box-shadow 0.28s ease !important;
}
.hover-border:hover {
  border-color: var(--primary-color, #6366f1) !important;
  box-shadow: 0 0 0 1px var(--primary-color, #6366f1) !important;
}

/* Scale: escala sutil */
.hover-scale {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.hover-scale:hover {
  transform: scale(1.04) !important;
}

/* Tilt: aplicado por JS (no CSS) */
.hover-tilt {
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}

/* ================================================================
   PRODUCT CARDS — hover effects
================================================================ */
.product-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease !important;
}
.product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.13) !important;
}
.product-card .product-image img {
  transition: transform 0.45s ease, opacity 0.45s ease !important;
}
.product-card:hover .product-image.no-hover img {
  transform: scale(1.06) !important;
}
.product-card:hover .product-image.has-hover .hover-img {
  transform: scale(1.06) !important;
}

/* Feature cards */
.feature-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease !important;
}
.feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--primary-color, #6366f1) !important;
}

/* Review / testimonial cards */
.review-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.review-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
}

/* ================================================================
   ICON BOX hover — para secciones de services, features
================================================================ */
.icon-box {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease !important;
}
.feature-card:hover .icon-box,
.service-card:hover .icon-box {
  transform: scale(1.12) rotate(-4deg) !important;
}

/* ================================================================
   CONTINUOUS ANIMATIONS (no dependen de scroll)
================================================================ */

/* Float: objetos decorativos */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}
.animate-float {
  animation: float 5s ease-in-out infinite;
}

/* Pulse: indicadores, botones de atención */
@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0 var(--primary-color, #6366f1); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.animate-pulse {
  animation: pulse-glow 2.2s ease infinite;
}

/* Gradient shift: fondos animados */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 7s ease infinite;
}

/* Spin: loaders, decorativos */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin-slow 8s linear infinite;
}

/* ================================================================
   TYPING EFFECT
   El JS escribe el texto, el CSS añade cursor parpadeante
================================================================ */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-cursor::after {
  content: '|';
  animation: blink-cursor 0.9s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}

/* ================================================================
   COUNT-UP
================================================================ */
.count-up {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ================================================================
   SECTION-BLOCK CSS VAR SYSTEM
   Las variables --sec-* se aplican al contenido de la sección.
   Solo se aplican cuando están explícitamente definidas en el style.
================================================================ */
.section-block {
  /* Variables por defecto (se heredan si no se definen por sección) */
  --sec-bg: transparent;
  --sec-text: inherit;
  --sec-max-width: 1200px;
  --sec-pt: var(--section-padding, 80px);
  --sec-pb: var(--section-padding, 80px);
}

/* Solo aplicar background cuando está explícitamente configurado */
.section-block[style*="--sec-bg"]:has(> section.hero.has-image),
.section-block[style*="--sec-bg"]:has(> section.hero.hero-has-pattern),
.section-block[style*="--sec-bg"]:has(> section.hero-editorial-section),
.section-block[style*="--sec-bg"]:has(> section.video-hero-section) {
  background-color: transparent !important;
}
.section-block[style*="--sec-bg"] > section:not(.hero.has-image):not(.hero.hero-has-pattern):not(.hero-editorial-section):not(.video-hero-section),
.section-block[style*="--sec-bg"] > .section {
  background-color: var(--sec-bg) !important;
}
.section-block[style*="--sec-bg"] > section.hero.has-image,
.section-block[style*="--sec-bg"] > section.hero.hero-has-pattern,
.section-block[style*="--sec-bg"] > section.hero-editorial-section,
.section-block[style*="--sec-bg"] > section.video-hero-section {
  background-color: transparent !important;
  background-image: none !important;
}
.section-block[style*="--sec-bg"] > section.hero.has-image > .hero-bg {
  background-color: var(--sec-bg);
}

/* Padding override */
.section-block[style*="--sec-pt"] > section,
.section-block[style*="--sec-pt"] > .section {
  padding-top: var(--sec-pt) !important;
}
.section-block[style*="--sec-pb"] > section,
.section-block[style*="--sec-pb"] > .section {
  padding-bottom: var(--sec-pb) !important;
}

/* Text color override */
.section-block[style*="--sec-text"] > section,
.section-block[style*="--sec-text"] > .section {
  color: var(--sec-text) !important;
}

/* Max width override (sobre el .container interno) */
.section-block[style*="--sec-max-width"] > section .container,
.section-block[style*="--sec-max-width"] > .section .container {
  max-width: var(--sec-max-width) !important;
}

/* ================================================================
   DISABLE ANIMATIONS OVERRIDE
   Agrega .no-animations al body para desactivar todo
================================================================ */
body.no-animations .reveal,
body.no-animations .reveal-up,
body.no-animations .reveal-down,
body.no-animations .reveal-left,
body.no-animations .reveal-right,
body.no-animations .reveal-zoom,
body.no-animations .reveal-flip,
body.no-animations .section-block[data-animate],
body.no-animations .section-block[data-animate] .sec-title-anim,
body.no-animations .section-block[data-animate] .sec-subtitle-anim {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.no-animations .hover-lift:hover,
body.no-animations .hover-scale:hover,
body.no-animations .product-card:hover,
body.no-animations .feature-card:hover,
body.no-animations .review-card:hover {
  transform: none !important;
  box-shadow: inherit !important;
}

body.no-animations .hover-shine::after,
body.no-animations .hover-glow:hover,
body.no-animations .hover-border:hover {
  animation: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

body.no-animations .animate-float,
body.no-animations .animate-pulse,
body.no-animations .animate-gradient,
body.no-animations .animate-spin {
  animation: none !important;
}

/* ================================================================
   LEGACY SUPPORT — viejo sistema .section.visible
   Secciones sin section-block usan el sistema anterior
================================================================ */
/* (El JS de animations.js mantiene backward-compat) */

/* ================================================================
   NEW PRO SECTIONS — animaciones específicas
================================================================ */

/* Timeline */
.timeline-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-item.is-visible {
  opacity: 1;
  transform: none;
}

/* Pricing cards hover */
.pricing-card {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease !important;
}
.pricing-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18) !important;
}
.pricing-card.featured {
  transform: translateY(-8px);
}
.pricing-card.featured:hover {
  transform: translateY(-16px) !important;
}

/* Team cards */
.team-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.team-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14) !important;
}
.team-layout-overlay .team-card:hover {
  box-shadow: none !important;
}
.team-layout-overlay .team-card .team-photo {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.team-layout-overlay .team-card:hover .team-photo {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18) !important;
}
.team-card--linked:focus-visible {
  outline: 2px solid var(--primary-color, #667eea);
  outline-offset: 4px;
}
.team-card .team-overlay {
  opacity: 0;
  transition: opacity 0.3s ease !important;
}
.team-card:hover .team-overlay {
  opacity: 1 !important;
}

/* Service cards */
.service-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease !important;
}
.service-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14) !important;
  border-color: var(--primary-color, #6366f1) !important;
}
.service-card .service-number {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.3s ease !important;
}
.service-card:hover .service-number {
  transform: scale(1.2) !important;
  color: var(--primary-color, #6366f1) !important;
}

/* Masonry gallery */
.masonry-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden;
}
.masonry-item img {
  transition: transform 0.5s ease !important;
}
.masonry-item:hover img {
  transform: scale(1.06) !important;
}
.masonry-item:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Hero split */
.hero-split-content {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.hero-split-image-wrap,
.hero-split-media {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease 0.35s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
/* Hero arriba del pliegue: sin data-animate → visible de inmediato */
.section-block:not([data-animate]) .hero-split-content,
.section-block:not([data-animate]) .hero-split-image-wrap,
.section-block:not([data-animate]) .hero-split-media {
  opacity: 1 !important;
  transform: none !important;
}
.section-block.is-visible .hero-split-content,
.section-block.is-visible .hero-split-image-wrap,
.section-block.is-visible .hero-split-media {
  opacity: 1;
  transform: none;
}

/* Split content existing section */
.split-section .split-content {
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}
.split-section .split-image {
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}
.section-block[data-animate] .split-section .split-content {
  opacity: 0;
  transform: translateX(40px);
}
.section-block[data-animate] .split-section.reverse .split-content {
  transform: translateX(-40px);
}
.section-block[data-animate] .split-section .split-image {
  opacity: 0;
  transform: translateX(-40px);
}
.section-block[data-animate] .split-section.reverse .split-image {
  transform: translateX(40px);
}
.section-block[data-animate].is-visible .split-section .split-content,
.section-block[data-animate].is-visible .split-section .split-image {
  opacity: 1;
  transform: none;
}

/* ================================================================
   HERO PROGRESSIVE IMAGE LOADING (blur-up)
   El .hero-bg empieza difuminado; JS quita .hero-bg-loading
   cuando la imagen termina de cargar → transición suave
================================================================ */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -4;
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-bg.hero-bg-loading {
  filter: blur(14px);
  transform: scale(1.06); /* oculta bordes borrosos */
}

/* Carousel slides also support blur-up when .hero-bg-loading class is added */
.carousel-slide.hero-bg-loading {
  filter: blur(14px);
  transform: scale(1.06);
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}