/**
 * Optional entrance / motion classes for design section templates (admin preview + future public use).
 * Apply wrapper class: .dst-anim-{key} (see DesignSectionTemplatesController::animationOptions).
 */
.dst-anim-none {
}
.dst-anim-fade-in {
  animation: dstFadeIn 0.75s ease-out both;
}
@keyframes dstFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.dst-anim-fade-up {
  animation: dstFadeUp 0.85s ease-out both;
}
@keyframes dstFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-fade-down {
  animation: dstFadeDown 0.85s ease-out both;
}
@keyframes dstFadeDown {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-fade-left {
  animation: dstFadeLeft 0.85s ease-out both;
}
@keyframes dstFadeLeft {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-fade-right {
  animation: dstFadeRight 0.85s ease-out both;
}
@keyframes dstFadeRight {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-zoom-in {
  animation: dstZoomIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dstZoomIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-zoom-out {
  animation: dstZoomOut 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dstZoomOut {
  from {
    opacity: 0;
    transform: scale(1.12);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-slide-up {
  animation: dstSlideUp 0.7s ease-out both;
}
@keyframes dstSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}
.dst-anim-slide-down {
  animation: dstSlideDown 0.7s ease-out both;
}
@keyframes dstSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: none;
  }
}
.dst-anim-slide-left {
  animation: dstSlideLeft 0.7s ease-out both;
}
@keyframes dstSlideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: none;
  }
}
.dst-anim-slide-right {
  animation: dstSlideRight 0.7s ease-out both;
}
@keyframes dstSlideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: none;
  }
}
.dst-anim-bounce-in {
  animation: dstBounceIn 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes dstBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  55% {
    opacity: 1;
    transform: scale(1.05);
  }
  75% {
    transform: scale(0.97);
  }
  to {
    transform: none;
  }
}
.dst-anim-flip-x {
  animation: dstFlipX 0.9s ease-out both;
}
@keyframes dstFlipX {
  from {
    opacity: 0;
    transform: perspective(900px) rotateX(-70deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-flip-y {
  animation: dstFlipY 0.9s ease-out both;
}
@keyframes dstFlipY {
  from {
    opacity: 0;
    transform: perspective(900px) rotateY(70deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-rotate-in {
  animation: dstRotateIn 0.85s ease-out both;
}
@keyframes dstRotateIn {
  from {
    opacity: 0;
    transform: rotate(-12deg) scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-blur-in {
  animation: dstBlurIn 0.9s ease-out both;
}
@keyframes dstBlurIn {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}
.dst-anim-glow-pulse {
  animation: dstGlowPulse 1.6s ease-in-out infinite alternate;
}
@keyframes dstGlowPulse {
  from {
    box-shadow: 0 0 0 rgba(14, 165, 233, 0);
  }
  to {
    box-shadow: 0 0 28px rgba(14, 165, 233, 0.45);
  }
}
.dst-anim-float {
  animation: dstFloat 3s ease-in-out infinite;
}
@keyframes dstFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.dst-anim-shake {
  animation: dstShake 0.65s ease-out both;
}
@keyframes dstShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-6px);
  }
  80% {
    transform: translateX(6px);
  }
}
.dst-anim-skew-reveal {
  animation: dstSkewReveal 0.85s ease-out both;
}
@keyframes dstSkewReveal {
  from {
    opacity: 0;
    transform: skewY(-6deg) translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dst-anim-scale-spring {
  animation: dstScaleSpring 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes dstScaleSpring {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  65% {
    opacity: 1;
    transform: scale(1.04);
  }
  to {
    transform: none;
  }
}

/* Image filter helpers (use on <img> with class + data-dst-filter) */
.dst-tpl-img[data-dst-filter='warm'] {
  filter: sepia(0.12) saturate(1.15) contrast(1.05);
}
.dst-tpl-img[data-dst-filter='cool'] {
  filter: saturate(0.95) hue-rotate(-8deg) brightness(1.02);
}
.dst-tpl-img[data-dst-filter='dramatic'] {
  filter: contrast(1.2) saturate(1.25) brightness(0.95);
}
.dst-tpl-img[data-dst-filter='soft'] {
  filter: brightness(1.05) contrast(0.95) saturate(0.9);
}
.dst-tpl-img[data-dst-filter='mono'] {
  filter: grayscale(1);
}
.dst-tpl-img[data-dst-filter='vivid'] {
  filter: saturate(1.35) contrast(1.08);
}