/*
 * Component Styles
 * Single Responsibility: Styles for reusable UI components
 */

/* Column Animation Classes */
.col-anim {
    animation: columnReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    will-change: clip-path;
}

/* Staggered Delays for Grid Columns */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

.delay-6 {
    animation-delay: 0.6s;
}

.delay-7 {
    animation-delay: 0.7s;
}

/* Animation on Scroll State Management */
.animate-on-scroll {
    animation-play-state: paused !important;
}

.animate-on-scroll.animate {
    animation-play-state: running !important;
}

/* Animated Shiny CTA Button Styles */
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 20%;
    inherits: false;
}

@property --gradient-shine {
    syntax: "<color>";
    initial-value: #fb923c;
    inherits: false;
}

.shiny-cta {
    --gradient-angle: 0deg;
    --gradient-angle-offset: 0deg;
    --gradient-percent: 20%;
    --gradient-shine: #fb923c;
    position: relative;
    overflow: hidden;
    border-radius: 9999px;
    padding: 1.25rem 3rem;
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(#000000, #000000) padding-box,
        conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent 0%, #ea580c 5%, var(--gradient-shine) 15%, #ea580c 30%, transparent 40%, transparent 100%) border-box;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px #1a1818;
    outline: none;
    transition: --gradient-angle-offset 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-percent 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-shine 800ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s;
    cursor: pointer;
    isolation: isolate;
    outline-offset: 4px;
    z-index: 0;
    animation: border-spin 2.5s linear infinite;
}

.shiny-cta:active {
    transform: translateY(1px);
}

.shiny-cta::before {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    --size: calc(100% - 6px);
    --position: 2px;
    --space: 4px;
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle at var(--position) var(--position), white 0.5px, transparent 0) padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
    border-radius: inherit;
    opacity: 0.4;
}

.shiny-cta::after {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(-50deg, transparent, #ea580c, transparent);
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.6;
    animation: shimmer 4s linear infinite;
}

.shiny-cta span {
    position: relative;
    z-index: 2;
    display: inline-block;
}

.shiny-cta span::before {
    content: '';
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    --size: calc(100% + 1rem);
    width: var(--size);
    height: var(--size);
    box-shadow: inset 0 -1ex 2rem 4px #ea580c;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1);
    animation: breathe 4.5s linear infinite;
}

/* Progressive Blur CSS */
.gradient-blur {
    position: fixed;
    z-index: 5;
    inset: 0 0 auto 0;
    height: 12%;
    pointer-events: none;
}

.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after {
    position: absolute;
    inset: 0;
}

.gradient-blur::before {
    content: "";
    z-index: 1;
    backdrop-filter: blur(0.5px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0) 37.5%);
}

.gradient-blur > div:nth-of-type(1) {
    z-index: 2;
    backdrop-filter: blur(1px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 12.5%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 0) 50%);
}

.gradient-blur > div:nth-of-type(2) {
    z-index: 3;
    backdrop-filter: blur(2px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 62.5%);
}

.gradient-blur > div:nth-of-type(3) {
    z-index: 4;
    backdrop-filter: blur(4px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 37.5%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 0) 75%);
}

.gradient-blur > div:nth-of-type(4) {
    z-index: 5;
    backdrop-filter: blur(8px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 87.5%);
}

.gradient-blur > div:nth-of-type(5) {
    z-index: 6;
    backdrop-filter: blur(16px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 62.5%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 0) 100%);
}

.gradient-blur > div:nth-of-type(6) {
    z-index: 7;
    backdrop-filter: blur(32px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 87.5%, rgba(0, 0, 0, 1) 100%);
}

.gradient-blur::after {
    content: "";
    z-index: 8;
    backdrop-filter: blur(64px);
    mask: linear-gradient(to top, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
}

/* Border Gradient Utility */
[style*="--border-gradient"]::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: var(--border-radius-before, inherit);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background: var(--border-gradient);
    pointer-events: none;
}

/* Type Writer Effect */
.type-writer {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #10b981;
    width: 0;
    animation: typing 1.5s steps(30, end) 2.5s forwards, blink-caret 0.75s step-end infinite;
}

/* Infinite Scroll Animation (legacy - percentage based) */
.animate-infinite-scroll {
    animation: infinite-scroll 40s linear infinite;
}

/* Faster animation on mobile */
@media (max-width: 768px) {
    .animate-infinite-scroll {
        animation: infinite-scroll 17s linear infinite;
    }
}

/* Precise Infinite Scroll Animation (pixel-based for seamless looping) */
@keyframes infinite-scroll-precise {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(var(--scroll-width, 50%) * -1));
    }
}

.animate-infinite-scroll-precise {
    animation: infinite-scroll-precise 40s linear infinite;
    will-change: transform;
}

/* Faster animation on mobile */
@media (max-width: 768px) {
    .animate-infinite-scroll-precise {
        animation: infinite-scroll-precise 20s linear infinite;
    }
}

/* Pause animation on hover */
.group:hover .animate-infinite-scroll,
.group:hover .animate-infinite-scroll-precise {
    animation-play-state: paused;
}

/* Carousel Animation */
.animate-carousel {
    animation: carousel 15s infinite;
}