/* 
 * Theme Factory — Variant Rules 
 * Concrete CSS implementations of the 08-variant-rules.md classes
 */

/* =========================================
   Variant: Simple
   ========================================= */
.variant-simple {
    /* minimal motion */
    --transition-default: all var(--motion-fast) ease;

    /* restrained shadows */
    --card-shadow: var(--shadow-1);

    /* typography scale */
    --heading-scale-ratio: 1.2;
}

.variant-simple * {
    transition: var(--transition-default);
}

.variant-simple .card {
    box-shadow: var(--card-shadow);
    border: none;
    background-color: var(--color-bg-primary);
}


/* =========================================
   Variant: Modern
   ========================================= */
.variant-modern {
    /* richer visual polish, stronger hierarchy */
    --card-shadow: var(--shadow-2);
    --card-border: 1px solid var(--color-border-subtle);
    --card-radius: var(--radius-md);

    /* moderate motion */
    --transition-default: all var(--motion-normal) var(--ease-standard);

    /* typography scale */
    --heading-scale-ratio: 1.25;
}

.variant-modern * {
    transition: var(--transition-default);
}

.variant-modern .card {
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    border-radius: var(--card-radius);
    background-color: var(--color-bg-primary);
}

/* hover states scale elements */
.variant-modern .card:hover,
.variant-modern .interactive-element:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-3);
}

/* soft fade-in utility (to be triggered via IntersectionObserver) */
.variant-modern .fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, visibility;
}

.variant-modern .fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   Variant: Advanced 3D
   ========================================= */
.variant-advanced-3d {
    /* Complex GSAP/Three.js rules would live in JS, but CSS sets up the canvas layers */
    --transition-default: all var(--motion-slow) var(--ease-decelerate);
}

/* WebGL Canvas underlay/overlay */
.webgl-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* Let clicks pass through to DOM unless specified */
    z-index: -1;
    /* Additive behind content */
}

/* Graceful degradation / Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .variant-simple *,
    .variant-modern *,
    .variant-advanced-3d * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transform: none !important;
    }

    .webgl-container {
        display: none !important;
    }
}