/* Comma ? modern entrance animations */

.comma-entrance[data-comma-entrance] {
  --comma-entrance-duration: 0.85s;
  --comma-entrance-delay: 0s;
  --comma-entrance-distance: 32px;
  --comma-entrance-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --comma-entrance-blur: 12px;
  --comma-entrance-scale: 0.92;
  --comma-entrance-rotate: 8deg;
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
  transition-property: opacity, transform, filter, clip-path;
  transition-duration: var(--comma-entrance-duration);
  transition-timing-function: var(--comma-entrance-ease);
  transition-delay: var(--comma-entrance-delay);
}

/* ??? Classic ??? */
.comma-entrance--fade {
  transform: none;
}

.comma-entrance--fade-up {
  transform: translate3d(0, var(--comma-entrance-distance), 0);
}

.comma-entrance--fade-down {
  transform: translate3d(0, calc(var(--comma-entrance-distance) * -1), 0);
}

.comma-entrance--fade-left {
  transform: translate3d(var(--comma-entrance-distance), 0, 0);
}

.comma-entrance--fade-right {
  transform: translate3d(calc(var(--comma-entrance-distance) * -1), 0, 0);
}

.comma-entrance--scale {
  transform: scale(var(--comma-entrance-scale));
}

.comma-entrance--blur {
  transform: translate3d(0, 14px, 0);
  filter: blur(var(--comma-entrance-blur));
}

/* ??? Modern: Apple-style soft rise ??? */
.comma-entrance--rise {
  transform: translate3d(0, var(--comma-entrance-distance), 0) scale(0.97);
  filter: blur(8px);
}

/* ??? Modern: spring pop ??? */
.comma-entrance--pop {
  --comma-entrance-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0.82);
  filter: blur(4px);
}

/* ??? Modern: zoom out from close-up ??? */
.comma-entrance--zoom-out {
  transform: scale(1.08);
  filter: blur(10px);
}

/* ??? Modern: soft 3D tilt ??? */
.comma-entrance--tilt {
  transform: perspective(900px) rotateX(var(--comma-entrance-rotate))
    translate3d(0, calc(var(--comma-entrance-distance) * 0.6), 0);
  transform-origin: center bottom;
  filter: blur(4px);
}

/* ??? Modern: soft flip (Y) ??? */
.comma-entrance--flip {
  transform: perspective(1000px) rotateY(calc(var(--comma-entrance-rotate) * -1.5))
    translate3d(0, 12px, 0);
  transform-origin: center center;
  filter: blur(3px);
}

/* ??? Modern: skew slide ??? */
.comma-entrance--skew {
  transform: translate3d(0, var(--comma-entrance-distance), 0) skewY(3deg);
  filter: blur(5px);
}

/* ??? Modern: clip wipe up ??? */
.comma-entrance--clip-up {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 18px, 0);
}

/* ??? Modern: clip wipe in (start from inline-end / right in LTR) ??? */
.comma-entrance--clip-in {
  opacity: 1;
  clip-path: inset(0 0 0 100%);
  transform: translate3d(16px, 0, 0);
}

[dir="rtl"] .comma-entrance--clip-in {
  clip-path: inset(0 100% 0 0);
  transform: translate3d(-16px, 0, 0);
}

/* ??? Modern: circle expand mask ??? */
.comma-entrance--circle {
  opacity: 1;
  clip-path: circle(0% at 50% 50%);
  transform: scale(0.96);
  filter: blur(6px);
}

/* ??? Modern: soft float (longer, airy) ??? */
.comma-entrance--float {
  --comma-entrance-ease: cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(0, calc(var(--comma-entrance-distance) * 1.35), 0) scale(0.94);
  filter: blur(14px);
}

/* ??? Revealed state ??? */
.comma-entrance.is-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  will-change: auto;
}

.comma-entrance--clip-up.is-in,
.comma-entrance--clip-in.is-in,
.comma-entrance--circle.is-in {
  clip-path: inset(0 0 0 0) !important;
}

.comma-entrance--circle.is-in {
  clip-path: circle(75% at 50% 50%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .comma-entrance[data-comma-entrance] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}