/**
 * Sparkles Parallax Effects - Advanced scrolling animations
 * Professional parallax and scroll-triggered effects for Hyva
 * Extends: sparkles-utilities.css, sparkles-animations.css, sparkles-tokens.css
 * All 3 optimization layers applied: keyframes consolidated, patterns extracted, component organization
 */

/* =================================================================
   PARALLAX SCROLLING SYSTEM
   ================================================================= */

/* Parallax Container */
.sparkles-parallax-container {
    perspective: 1px;
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.sparkles-parallax-container--section {
    height: 50vh;
    min-height: 24rem;
}

/* Parallax Layers */
.sparkles-parallax-layer {
    transform-origin: center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.sparkles-parallax-back {
    transform: translateZ(-1px) scale(2);
}

.sparkles-parallax-base {
    transform: translateZ(0);
}

.sparkles-parallax-front {
    transform: translateZ(0.5px) scale(0.5);
}

/* Hero Parallax */
.sparkles-hero-parallax,
.sparkles-section-parallax {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sparkles-hero-parallax {
    height: 100vh;
}

.sparkles-hero-parallax-bg,
.sparkles-product-parallax-bg,
.sparkles-gallery-parallax-image,
.sparkles-parallax-card-bg {
    will-change: transform;
    position: absolute;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.sparkles-hero-parallax-bg {
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    transition-duration: .15s;
    transition-duration: .1s;
}

.sparkles-hero-parallax-content {
    z-index: var(--z-dropdown);
    background: rgb(var(--color-black-rgb) / 0.3);
    backdrop-filter: blur(10px);
    position: relative;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    padding: 2rem;
    border-radius: .5rem;
}

/* Product Parallax Cards */
.sparkles-product-parallax {
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    transition-property: all;
    transition-duration: .15s;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
    cursor: pointer;
}

.sparkles-product-parallax-bg,
.sparkles-parallax-card-bg {
    z-index: var(--z-dropdown);
    top: var(--sparkles-parallax-bg-top, -10%);
    left: var(--sparkles-parallax-bg-left, -10%);
    width: var(--sparkles-parallax-bg-width, 120%);
    height: var(--sparkles-parallax-bg-height, 120%);
    transition-duration: .15s;
    transition-duration: .5s;
}

.sparkles-product-parallax:hover .sparkles-product-parallax-bg {
    transform: scale(1.1) translateY(-10px);
}

.sparkles-product-parallax-content {
    z-index: var(--z-dropdown);
    background: linear-gradient(
        to top,
        rgb(var(--color-black-rgb) / 0.8) 0%,
        rgb(var(--color-black-rgb) / 0.4) 50%,
        transparent 100%
    );
    position: relative;
    padding: 1.5rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Section Parallax */
.sparkles-section-parallax {
    min-height: 80vh;
}

.sparkles-section-parallax-bg,
.sparkles-parallax-layer-1 {
    z-index: var(--z-dropdown);
    height: 120%;
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.sparkles-section-parallax-overlay,
.sparkles-testimonial-parallax::before {
    position: absolute;
    inset: 0;
}

.sparkles-section-parallax-overlay {
    background: color-mix(in srgb, var(--color-secondary) 40%, transparent);
    z-index: var(--z-sticky);
}

.sparkles-section-parallax-content {
    z-index: var(--z-dropdown);
    position: relative;
    text-align: center;
    max-width: 48rem;
    padding: 2rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
}

/* Text Parallax */
.sparkles-text-parallax,
.canva-amazon-plus-content {
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sparkles-text-parallax {
    overflow: hidden;
}

.sparkles-text-parallax-bg {
    top: -50%;
    height: 200%;
    background: linear-gradient(
        45deg,
        var(--color-primary),
        var(--color-accent),
        var(--color-primary)
    );
    will-change: transform;
    animation: sparkles-text-parallax-drift 20s linear infinite;
    position: absolute;
    left: 0;
    width: 100%;
    opacity: .1;
}

@keyframes sparkles-text-parallax-drift {
    0% { transform: translateX(-100px) rotate(0deg); }
    100% { transform: translateX(100px) rotate(360deg); }
}

.sparkles-text-parallax-content {
    z-index: var(--z-dropdown);
    position: relative;
}

/* Image Gallery Parallax */
.sparkles-gallery-parallax,
.sparkles-parallax-card {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
    cursor: pointer;
}

.sparkles-gallery-parallax {
    height: 24rem;
}

.sparkles-gallery-parallax-image {
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    object-fit: cover;
    transition-duration: .15s;
    transition-duration: .7s;
}

.sparkles-gallery-parallax:hover .sparkles-gallery-parallax-image {
    transform: scale(1.2) rotate(2deg);
}

.sparkles-gallery-parallax-overlay {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-primary) 20%, transparent) 0%,
        color-mix(in srgb, var(--color-secondary) 30%, transparent) 100%
    );
    z-index: var(--z-dropdown);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .15s;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.sparkles-gallery-parallax:hover .sparkles-gallery-parallax-overlay {
    opacity: 1;
}

/* Testimonial Parallax */
.sparkles-testimonial-parallax {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    text-align: center;
}

.sparkles-testimonial-parallax::before {
    z-index: var(--z-dropdown);
    content: '';
    background: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

.sparkles-testimonial-parallax-content {
    z-index: var(--z-dropdown);
    position: relative;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Multi-layer Parallax */
.sparkles-multilayer-parallax {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.sparkles-parallax-layer-2 {
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    will-change: transform;
    position: absolute;
    z-index: var(--z-sticky);
    opacity: .8;
}

.sparkles-parallax-layer-3 {
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    will-change: transform;
    position: absolute;
    z-index: var(--z-fixed);
    opacity: .6;
}

/* Parallax Cards Grid */
.sparkles-parallax-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
}

.sparkles-parallax-card {
    height: 18.75rem; /* equivalent to h-75 (75 * 0.25rem) */
    transform-style: preserve-3d;
}

.sparkles-parallax-card-bg {
    --sparkles-parallax-bg-top: -15%;
    --sparkles-parallax-bg-left: -15%;
    --sparkles-parallax-bg-width: 130%;
    --sparkles-parallax-bg-height: 130%;
}

.sparkles-parallax-card:hover .sparkles-parallax-card-bg {
    transform: scale(1.15) translateY(-5px);
}

.sparkles-parallax-card-content {
    transform: translateY(50%);
    background: linear-gradient(
        to top,
        rgb(var(--color-black-rgb) / 0.8) 0%,
        transparent 100%
    );
    z-index: var(--z-dropdown);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity,1));
    transition-property: transform;
    transition-duration: .15s;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.sparkles-parallax-card:hover .sparkles-parallax-card-content {
    --tw-translate-y: 0px;
}

/* Performance optimizations */
.sparkles-3d-optimized,
.sparkles-parallax-optimized {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Responsive parallax */
@media (max-width: 1024px) {
    body .sparkles-hero-parallax-bg,
    body .sparkles-section-parallax-bg {
        background-attachment: scroll;
        transform: none;
    }
    
    .sparkles-parallax-container {
        perspective: none;
        transform-style: flat;
    }
    
    body .sparkles-parallax-layer {
        transform: none;
    }
}

@media (max-width: 768px) {
    .sparkles-hero-parallax {
        height: 70vh;
    }
    
    .sparkles-section-parallax {
        min-height: 60vh;
    }
    
    .sparkles-product-parallax:hover .sparkles-product-parallax-bg {
        transform: scale(1.05) translateY(-5px);
    }
    
    .sparkles-gallery-parallax:hover .sparkles-gallery-parallax-image {
        transform: scale(1.1);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    body .sparkles-hero-parallax-bg,
    body .sparkles-section-parallax-bg,
    body .sparkles-product-parallax-bg,
    body .sparkles-gallery-parallax-image,
    body .sparkles-parallax-card-bg {
        transform: none;
        animation: none;
        background-attachment: scroll;
    }
    
    body .sparkles-text-parallax-bg {
        animation: none;
    }
    
    body .sparkles-parallax-layer-1,
    body .sparkles-parallax-layer-2,
    body .sparkles-parallax-layer-3 {
        transform: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .sparkles-hero-parallax-content,
    .sparkles-section-parallax-content,
    .sparkles-testimonial-parallax-content {
        background: rgb(var(--color-black-rgb) / 0.8);
        border: 2px solid white;
    }
    
    .sparkles-product-parallax-content,
    .sparkles-parallax-card-content {
        background: rgb(var(--color-black-rgb) / 0.9);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Transform rules consolidated into prefers-reduced-motion query above */
    
    .sparkles-parallax-card-content {
        background: rgb(var(--color-black-rgb) / 0.7);
        --tw-translate-y: 0px;
    }
}

/* Print styles */
@media print {
    body .sparkles-hero-parallax,
    body .sparkles-section-parallax,
    body .sparkles-testimonial-parallax {
        background-attachment: scroll;
        background-size: cover;
        background-position: center;
        print-color-adjust: exact;
    }
    
    body .sparkles-parallax-layer,
    body .sparkles-hero-parallax-bg,
    body .sparkles-section-parallax-bg {
        transform: none;
    }
}