/* Custom eased transitions for hover states */
.creative-eased, .creative-eased .list-item, .creative-eased a {
    transition: all linear 0.4s;
}

/****** GRADIENTS ******/
/* Animated gradient for the Cover Block background Color Mask */
/* This Color Mask can be cloned and dragged into any other block in the layout */
/* Click and hold the Color Mask and tap the esc key on the keyboard twice */
.background-gradient {
    background: linear-gradient(270deg, #91039e, #10069f);
    background-size: 400% 400%;
    animation: gradientMove 8s ease infinite;
    mix-blend-mode: hard-light !important;  
}

/* Animated gradients keyframes (which define the motion) */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Gradient circle shape */
.element-circle {
    background: linear-gradient(90deg, rgb(32, 44, 223), rgb(191, 18, 235),rgb(145, 3, 158) ) !important;
}

/* Gradient text for full lines of copy */
.gradient-text1 p {
    background: linear-gradient(90deg, rgb(32, 44, 223), rgb(191, 18, 235),rgb(145, 3, 158) ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Gradient text for spans of copy - phrases or words */
/* To edit this, use the "view code" editor in the bar at the top of the screen */
/* Place a span tag around the gradient text, like <span>gradient</span> */
.gradient-text span {
    background: linear-gradient(90deg, rgb(32, 44, 223), rgb(191, 18, 235),rgb(145, 3, 158) ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Moving gradient border */
.moving-gradient-border {
    position: relative;
    border-radius: 12px;
    z-index: 1;
}

/* Blurred gradient glow layer */
.moving-gradient-border::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(120deg, rgb(49, 1, 121), rgb(32, 44, 223), rgb(191, 18, 235), rgb(9, 3, 88), rgb(145, 3, 158));
    background-size: 300% 300%;
    filter: blur(13px);
    opacity: 0.8;
    z-index: -2;
    animation: moveBorder 6s 
    linear infinite;
}

/* Sharp border mask on top */
.moving-gradient-border::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: inherit;
    background-size: inherit;
    padding: 6px;   
    border-radius: 18px;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: moveBorder 6s linear infinite;
}

/* Gradient border animation keyframes (which define the motion) */
@keyframes moveBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Gradient border hover state default styles */
.hover-gradient-border {
    position: relative;
    padding: 15px 30px;
    color: white;
    border-radius: 12px;
    z-index: 1;
    background: transparent; /* normal state */
    border: 2px solid transparent; /* normal state */
    transition: all 0.3s ease;
}

/* Blurry gradient border - initially hidden */
.hover-gradient-border::before {
    content: "";
    position: absolute;
    top: -8px;    /* spread for blur */
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 20px;  /* slightly larger for blur */
    background: linear-gradient(120deg, #310179, #202cdf, #bf12eb, #090358, #91039e);
    background-size: 300% 300%;
    z-index: -1;
    filter: blur(12px);  /* heavy blur to spread glow */
    opacity: 0; /* hidden by default */
    transition: opacity 0.3s ease;
}

/* Show and animate on hover */
.hover-gradient-border:hover::before {
    opacity: 1;
    animation: moveBorder 6s linear infinite;
}

/* Gradient movement animation */
@keyframes moveBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Button Gradient */
.creative-eased-hover {
    background-image: linear-gradient(to right, #310179, #202cdf 50%, #bf12eb 100%);
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-size: 200% 100%;
    background-position: 0;
    transition: all 0.2s linear;
}
.creative-eased-hover:hover {
    background-position: 100% 0;
}

/****** LOADING KEYFRAME ANIMATIONS ******/
body.finetune .slide-in-left,
body.finetune .text-right-load,
body.finetune .text-up-load {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Content that slides in from the left */
.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    animation: slideInLeft 0.6s ease-out forwards;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Content that slides in from the right */
.text-right-load {
    opacity: 0;
    transform: translateX(40px);
    animation: slideInRight 1.2s ease-out forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Content that slides in from the bottom */
.text-up-load {
    opacity: 0;
    transform: translateY(40px);
    animation: scrollUpLoad 1.2s ease-out forwards;
}

@keyframes scrollUpLoad {
    0% {
        opacity: 0;
        transform: translateY(40px); /* start lower */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* move to normal position */
    }
}

/****** SCROLL-TRIGGERED ANIMATIONS ******/
/* General transitions from invisible to visible on scroll for all directional animations */
body:not(.finetune) .creative-fade {
    opacity: 0;
}
 
body:not(.finetune) .scrolled.creative-fade {
    animation: fadeIn 2s ease-in-out both;
}
 
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Content that slides in from the left on scroll */
.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    animation: slideInLeft 0.6s ease-out forwards;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Content that slides in from the right on scroll */
.text-right-load {
    opacity: 0;
    transform: translateX(40px);
    animation: slideInRight 1.2s ease-out forwards;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Content that slides in from the bottom on scroll */
.text-up-load {
    opacity: 0;
    transform: translateY(40px);
    animation: scrollUpLoad 1.2s ease-out forwards;
}

@keyframes scrollUpLoad {
    0% {
        opacity: 0;
        transform: translateY(40px); /* start lower */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* move to normal position */
    }
}

/************* REDUCED MOTION *************/
@media (prefers-reduced-motion: reduce) {  
    .creative-scroll {  
        transition: none !important;
        animation: none !important;
    } 
}