/* Pattern Square Background */
.pattern-square {
    position: relative;
}

.pattern-square:after {
    background-image: url(/static/assets/images/pattern/pattern-square.svg);
    background-position: top;
    bottom: 0;
    content: "";
    height: 312px;
    left: 0;
    -webkit-mask-image: linear-gradient(0deg, transparent 35%, #000 75%);
    mask-image: linear-gradient(0deg, transparent 35%, #000 75%);
    padding: 40px 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

/* Text Pattern Line */
.text-pattern-line {
    position: relative;
}

.text-pattern-line:after {
    background-image: url(/static/assets/images/pattern/curve.svg);
    background-repeat: no-repeat;
    bottom: -22px;
    content: "";
    height: 20px;
    position: absolute;
    right: 0;
    width: 201px;
}

/* BG Pattern */
.bg-pattern {
    position: relative;
}

.bg-pattern:after {
    background-image: url(/static/assets/images/pattern/pattern-white.svg);
    background-position: top;
    background-repeat: no-repeat;
    bottom: 0;
    content: "";
    left: 0;
    -webkit-mask-image: linear-gradient(0deg, transparent 55%, #000 75%);
    mask-image: linear-gradient(0deg, transparent 55%, #000 75%);
    opacity: .3;
    position: absolute;
    right: 0;
    top: 0;
}

/* Line Pattern */
.line-pattern {
    position: relative;
}

.line-pattern:after {
    background-image: url(/static/assets/images/pattern/line-pattern.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

/* Right Slant Shape */
.right-slant-shape {
    position: relative;
}

.right-slant-shape:after {
    background-color: var(--bs-body-bg);
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: -1px;
    -webkit-clip-path: polygon(100% 81%, 0 100%, 100% 100%);
    clip-path: polygon(100% 81%, 0 100%, 100% 100%);
    content: "";
    height: 380px;
    position: absolute;
    width: 100%;
}

/* Marquee Animation */
.marquee {
    height: 65px;
    line-height: 4.5;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 100vw;
}

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

.marquee .text-track {
    animation: marquee 10s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

.marquee .track-2 {
    animation: marquee-left 100s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

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

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

/* ScrollCue Animations */
[data-cue]:not([data-show="true"]) {
    opacity: 0;
}

[data-cue="fadeIn"][data-show="true"] {
    animation: fadeIn 0.6s ease;
}

[data-cue="zoomIn"][data-show="true"] {
    animation: zoomIn 0.6s ease;
}

[data-cue="slideInLeft"][data-show="true"] {
    animation: slideInLeft 0.6s ease;
}

[data-cue="slideInRight"][data-show="true"] {
    animation: slideInRight 0.6s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Avatar sizes */
.avatar-lg {
    width: 56px;
    height: 56px;
}

/* Icon sizes */
.icon-xs {
    width: 16px;
    height: 16px;
}

/* Icon shape */
.icon-shape {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Scene for parallax */
.scene {
    position: relative;
}

/* Button logo */
.btn-logo {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

/* Text white stable */
.text-white-stable {
    color: #fff !important;
}

/* Background pattern gradient */
.bg-primary-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}