/**
 * Animation-specific styles for GSAP
 */

/* Reveal animations */
.reveal-text {
    overflow: hidden;
}

.reveal-text .char {
    display: inline-block;
    transform: translateY(100%);
}

/* Split text lines */
.split-lines .line {
    overflow: hidden;
}

.split-lines .line-inner {
    display: block;
    transform: translateY(100%);
}

/* Parallax elements */
[data-parallax] {
    will-change: transform;
}

/* Magnetic buttons */
.magnetic {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Stagger grid items */
.stagger-grid > * {
    opacity: 0;
    transform: translateY(40px);
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    opacity: 0.5;
}

.scroll-indicator-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--color-text), transparent);
    transform-origin: top;
}

.scroll-indicator-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    writing-mode: vertical-rl;
}

/* Marquee */
.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    animation: marquee 20s linear infinite;
}

.marquee-content span {
    padding: 0 var(--space-md);
}

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

/* Hover effects for cards */
.hover-lift {
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Image reveal */
.image-reveal {
    position: relative;
    overflow: hidden;
}

.image-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-bg);
    transform-origin: right;
}

.image-reveal.revealed::after {
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow effect */
.glow {
    position: relative;
}

.glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #ff006610, #00ff6610, #0066ff10);
    border-radius: inherit;
    filter: blur(20px);
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.glow:hover::before {
    opacity: 1;
}

/* Number counter */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Floating animation */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

.float {
    animation: float 6s ease-in-out infinite;
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Noise overlay for texture */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}