/* Base state */
.has-anim {
  opacity: 0;
  transform: translateZ(0);
  transition-property: opacity, transform;
  transition-duration: var(--anim-duration, .75s);
  transition-delay: var(--anim-delay, 0s);
  transition-timing-function: var(--anim-ease, ease);
  will-change: opacity, transform;
}

/* Final state */
.has-anim.anim-in {
  opacity: 1;
  transform: none;
}

/* --- Presets (initial transforms) --- */
.has-anim[data-anim="fadeIn"] { opacity: 0; transform: none; }
.has-anim.anim-in[data-anim="fadeIn"] { opacity: 1; transform: none; }
.has-anim[data-anim="fade-up"]   { opacity: 0; transform: translateY(16px); }
.has-anim.anim-in[data-anim="fade-up"]   { opacity: 1; transform: translateY(0); }
.has-anim[data-anim="fade-down"] { opacity: 0; transform: translateY(-16px); }
.has-anim.anim-in[data-anim="fade-down"] { opacity: 1; transform: translateY(0); }

/* Slide*/
.has-anim[data-anim="slideInLeft"]  { opacity: 0; transform: translateX(-5em); }
.has-anim.anim-in[data-anim="slideInLeft"]  { opacity: 1; transform: translateX(0); }
.has-anim[data-anim="slideInRight"] { opacity: 0; transform: translateX(5em); }
.has-anim.anim-in[data-anim="slideInRight"] { opacity: 1; transform: translateX(0); }
.has-anim[data-anim="slideInBottom"] { opacity: 0; transform: translateY(5em); }
.has-anim.anim-in[data-anim="slideInBottom"] { opacity: 1; transform: translateY(0); }

/*Zoom & Scale*/
.has-anim[data-anim="zoomIn"]   { opacity: 0; transform: scale(0.96); }
.has-anim.anim-in[data-anim="zoomIn"]   { opacity: 1; transform: scale(1); }
.has-anim[data-anim="zoom-out"]  { opacity: 0; transform: scale(1.04); }
.has-anim.anim-in[data-anim="zoom-out"]  { opacity: 1; transform: scale(1); }
.has-anim[data-anim="scale-up"]   { opacity: 0; transform: scale(0.85); }
.has-anim.anim-in[data-anim="scale-up"]   { opacity: 1; transform: scale(1); }
.has-anim[data-anim="scale-down"] { opacity: 0; transform: scale(1.15); }
.has-anim.anim-in[data-anim="scale-down"] { opacity: 1; transform: scale(1); }

/* ----- Rotations ----- */
.has-anim[data-anim="rotate-in-left"]  { opacity: 0; transform: rotate(-6deg); transform-origin: center; }
.has-anim.anim-in[data-anim="rotate-in-left"]  { opacity: 1; transform: rotate(0); }
.has-anim[data-anim="rotate-in-right"] { opacity: 0; transform: rotate(6deg); transform-origin: center; }
.has-anim.anim-in[data-anim="rotate-in-right"] { opacity: 1; transform: rotate(0); }


/* ----- Flips ----- */
.has-anim[data-anim="flip-x"] { opacity: 0; transform: rotateX(90deg); transform-origin: center; }
.has-anim.anim-in[data-anim="flip-x"] { opacity: 1; transform: rotateX(0); }
.has-anim[data-anim="flip-y"] { opacity: 0; transform: rotateY(90deg); transform-origin: center; }
.has-anim.anim-in[data-anim="flip-y"] { opacity: 1; transform: rotateY(0); }

/* ----- Skews ----- */
.has-anim[data-anim="skew-x"] { opacity: 0; transform: skewX(10deg); }
.has-anim.anim-in[data-anim="skew-x"] { opacity: 1; transform: skewX(0); }
.has-anim[data-anim="skew-y"] { opacity: 0; transform: skewY(10deg); }
.has-anim.anim-in[data-anim="skew-y"] { opacity: 1; transform: skewY(0); }


.has-anim[data-anim-keyframe="clipHorizontal"] {
    opacity: 1 !important;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-position: left top, right bottom;  /* anchor top to left; bottom to right */
    mask-repeat: no-repeat, no-repeat;
    mask-size: 0% 50%, 0% 50%;              /* both halves start hidden */

    /* Safari/WebKit */
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: left top, right bottom;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-size: 0% 50%, 0% 50%;
}

/* Editor tweak */
.is-editor.has-anim { opacity: 0.85; }

/* --- Keyframe presets (optional) --- */
@keyframes pop {
  0%   { transform: scale(.9);}
  60%  { transform: scale(1.05);}
  100% { transform: scale(1); }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(3deg); }
  75% { transform: rotate(-3deg); }
}
@keyframes tilt {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(2deg); }
}
@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
  transform-origin: top center;
}
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}
@keyframes clipHorizontal {
  from { mask-size: 0% 50%, 0% 50%; -webkit-mask-size: 0% 50%, 0% 50%; }
  to   { mask-size: 100% 50%, 100% 50%; -webkit-mask-size: 100% 50%, 100% 50%; }
}
@keyframes clipInLeft {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes clipInRight {
  0%   { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes clipVertical {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes wipe {
  0% { clip-path: inset(0 0 100% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .has-anim {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}