/* =============================================
   MODUS DIGITAL - ANIMATIONS
   Blob, swirl, sticker, marquee, mouse gradient
   ============================================= */

/* -----------------------------------------
   Swirl animations (Lottie)
   ----------------------------------------- */
.md-swirls-animated,
.md-swirl-footer {
    position: absolute;
    z-index: var(--md-z-overlay);
}

#carouselHomepageHeader .md-swirls-animated dotlottie-player:first-of-type {
    top: -649px;
    position: relative;
    left: -1200px;
    transform: rotate(53deg);
    min-width: 1500px;
}

#carouselHomepageHeader .md-swirls-animated dotlottie-player:last-of-type {
    bottom: -339px;
    position: absolute;
    right: -1160px;
    transform: rotate(53deg);
    min-width: 1500px;
}

.md-swirl-footer dotlottie-player {
    top: -330px;
    position: relative;
    left: -86px;
    transform: rotate(-17deg);
    min-width: 1500px;
}

.md-working-method-intro .md-swirls-animated {
    z-index: -1;
}

.md-working-method-intro .md-swirls-animated dotlottie-player {
    right: -60%;
    left: unset;
    top: -120px;
}

.md-steps-vertical .md-swirls-animated {
    position: absolute;
    z-index: -1;
}

.md-steps-vertical .md-swirls-animated dotlottie-player {
    right: -60%;
    left: unset;
    top: -300px;
    transform: unset;
    position: relative;
}

/* -----------------------------------------
   Blob animation
   ----------------------------------------- */
#blobContainer {
    width: 35vw;
    height: 35vw;
}

#blobContainer .blob {
    position: relative;
    animation: blobPosition 30s cubic-bezier(0.43, 0.01, 0.49, 0.98) infinite;
    display: inline-block;
    width: 1px;
}

#blobContainer .blob:nth-child(2) {
    animation-delay: -10s;
}

#blobContainer .blob:nth-child(3) {
    animation-delay: -20s;
}

@keyframes blobPosition {
    0%, 100% {
        left: 30%;
        top: 20%;
    }
    30% {
        left: 80%;
        top: 50%;
    }
    70% {
        left: 20%;
        top: 70%;
    }
}

#blobContainer .blobVisual {
    width: calc(6vw + 90px);
    height: calc(6vw + 80px);
    background-color: rgba(100, 159, 243, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translate(-50%, -50%);
    animation: blobBody 30s cubic-bezier(0.24, 0.27, 0.49, 0.55) infinite;
    background-blend-mode: overlay;
}

#blobContainer .blob:nth-child(1) .blobVisual {
    background-color: rgba(255, 255, 0, 0.85);
}

#blobContainer .blob:nth-child(1) .blobVisual span {
    color: var(--md-color-black);
}

#blobContainer .blob:nth-child(2) .blobVisual {
    animation-delay: -10s;
    background-color: #036398d9;
}

#blobContainer .blob:nth-child(3) .blobVisual {
    animation-delay: -20s;
    background-color: #272E36d9;
}

@keyframes blobBody {
    0%, 100% { border-radius: 78% 22% 24% 76% / 79% 80% 20% 21%; }
    10%      { border-radius: 78% 22% 48% 52% / 71% 60% 40% 29%; }
    20%      { border-radius: 33% 67% 44% 56% / 53% 76% 24% 47%; }
    30%      { border-radius: 16% 84% 69% 31% / 46% 54% 46% 54%; }
    40%      { border-radius: 40% 60% 64% 36% / 62% 29% 71% 38%; }
    50%      { border-radius: 68% 32% 32% 68% / 62% 60% 40% 38%; }
    60%      { border-radius: 34% 66% 18% 82% / 39% 26% 74% 61%; }
    70%      { border-radius: 30% 70% 22% 78% / 30% 60% 40% 70%; }
    80%      { border-radius: 40% 60% 47% 53% / 65% 49% 51% 35%; }
    90%      { border-radius: 57% 43% 30% 70% / 36% 49% 51% 64%; }
}

#blobContainer .blobVisual span {
    color: var(--md-color-white);
    font-family: var(--md-font-body);
    position: absolute;
    z-index: 10;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
}

/* Blob responsive - consolidated (was duplicated in source) */
@media only screen and (max-width: 576px) {
    #blobContainer {
        width: 60vw;
        height: 60vw;
    }
    #blobContainer .blobVisual span {
        font-size: 14px;
    }
}

@media only screen and (min-width: 576px) and (max-width: 768px) {
    #blobContainer {
        width: 300px;
        height: 300px;
    }
    #blobContainer .blobVisual span {
        font-size: 14px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    #blobContainer {
        width: 330px;
        height: 330px;
    }
    #blobContainer .blobVisual {
        width: calc(4vw + 90px);
        height: calc(4vw + 90px);
    }
    #blobContainer .blobVisual span {
        font-size: 14px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    #blobContainer .blobVisual span {
        font-size: 16px;
    }
    #blobContainer {
        filter: url(#goo);
    }
}

@media screen and (min-width: 1200px) {
    #blobContainer {
        filter: url(#goo);
    }
}

/* Blob in carousel context */
.carousel-page-top .carousel-item #blobContainer .blobVisual {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.carousel-page-top .carousel-item #blobContainer {
    width: 35vw;
    height: 25vw;
    margin-left: auto;
    margin-top: 210px;
}

/* -----------------------------------------
   Animated marquee text
   ----------------------------------------- */
.md-text-anim {
    padding-top: 141px;
    padding-bottom: 100px;
    font-size: 120px;
    line-height: 120px;
    letter-spacing: 1.2px;
    font-family: var(--md-font-display);
    -webkit-text-stroke: 1px #1E609136;
    color: transparent;
}

/* -----------------------------------------
   Marquee (horizontal scroll)
   ----------------------------------------- */
.marquee {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: 150px;
    overflow-x: hidden;
}

.track {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 32s linear infinite;
}

.track-2 {
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee-2 32s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes marquee-2 {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

/* -----------------------------------------
   Rolling sticker
   ----------------------------------------- */
.sticker-container {
    overflow: hidden;
    width: 100%;
    height: 180px;
    position: relative;
    left: calc(-25% - 60px);
}

.rolling-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: absolute;
    left: -180px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    animation: rollIn 3s ease-in-out forwards;
}

@keyframes rollIn {
    0% {
        left: -180px;
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        left: calc(100% - 180px);
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes rollInCenter {
    0% {
        left: -180px;
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        left: calc(50% - 90px);
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Tablet + mobile: drop the desktop left offset (which pushed the
   container into the column gutter) and roll the sticker to center
   instead of the container's right edge. Keeps the rolling animation
   but ends the smiley centered under the heading on small screens. */
@media (max-width: 991.98px) {
    .sticker-container {
        left: 0;
    }
    .rolling-image {
        animation-name: rollInCenter;
    }
}

.md-sticker-smiley {
    max-width: 179px;
    margin-bottom: 43px;
}

.md-sticker-smiley-sm {
    max-width: 86px;
    margin-bottom: var(--md-space-5);
    margin-top: var(--md-space-5);
}

/* -----------------------------------------
   Mouse cursor gradient tracking
   ----------------------------------------- */
.mouse-cursor-gradient-tracking {
    position: relative;
    background: linear-gradient(210.81deg, #4195F850 0%, #276EC250 100%);
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    border: none;
    color: var(--md-color-white);
    cursor: pointer;
    outline: none;
    overflow: hidden;
}

.md-gradient-dark {
    background: linear-gradient(210.81deg, #439AAA50 0%, #20617150 100%);
}

.md-gradient-light {
    background: linear-gradient(210.81deg, #60C1DF50 0%, #228AAB50 100%);
}

.mouse-cursor-gradient-tracking .md-tile-inner {
    position: relative;
}

.mouse-cursor-gradient-tracking::before {
    z-index: -1;
    --size: 1240px;
    opacity: 0;
    content: '';
    position: absolute;
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #276EC2, #4195F8);
    transform: translate(-50%, -50%);
    transition: opacity var(--md-transition-base);
    border-radius: 100%;
}

.md-gradient-dark::before {
    background: radial-gradient(circle closest-side, #439AAA, #206171);
}

.md-gradient-light::before {
    background: radial-gradient(circle closest-side, #60C1DF, #228AAB);
}

.mouse-cursor-gradient-tracking:hover::before {
    --size: 1240px;
    opacity: 1;
    transition: opacity var(--md-transition-base);
}

/* -----------------------------------------
   Carousel shrink animation
   ----------------------------------------- */
@keyframes shrink {
    0%   { width: 40%; }
    100% { width: 25%; }
}