/* TurnFile 360 - Enhancements CSS Bundle (Deferred Loading) */
/* Design System + Homepage Enhancements + Tier 2/3/4 Visual Polish */

/* DESIGN SYSTEM - Extended Variables */
:root {
    --color-primary-50: #eef2ff;
    --color-primary-100: #e0e7ff;
    --color-primary-200: #c7d2fe;
    --color-primary-300: #a5b4fc;
    --color-primary-400: #818cf8;
    --color-secondary-50: #faf5ff;
    --color-secondary-100: #f3e8ff;
    --color-secondary-200: #e9d5ff;
    --color-secondary-300: #d8b4fe;
    --color-secondary-400: #c084fc;
    --color-secondary-500: #764ba2;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-success-50: #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-error-50: #fef2f2;
    --color-error-100: #fee2e2;
    --color-error-500: #ef4444;
    --color-error-600: #dc2626;
    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-glow-primary: 0 0 20px rgba(102, 126, 234, 0.3);
    --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.3);
    --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.3);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.2);
    --radius-2xl: 1.5rem;
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --transition-fast: 150ms;
    --transition-base: 250ms;
    --transition-slow: 350ms;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

/* ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fade-in {
    animation: fadeIn 0.3s ease
}

.slide-up {
    animation: slideUp 0.4s ease
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s var(--ease-out) forwards
}

/* UTILITY CLASSES */
.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.visible {
    display: block !important
}

.flex {
    display: flex
}

.flex-col {
    flex-direction: column
}

.items-center {
    align-items: center
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-1 {
    gap: 0.5rem
}

.gap-2 {
    gap: 1rem
}

.gap-3 {
    gap: 1.5rem
}

.gap-4 {
    gap: 2rem
}

.transition-all {
    transition: all 0.3s ease
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease
}

.hover-lift:hover {
    transform: translateY(-4px)
}

*:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px
}

/* EXTENDED BUTTON STYLES */
.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 1.125rem
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem
}

/* CARDS */
.card {
    background: white;
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base) var(--ease-out)
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl)
}

.card-feature {
    position: relative;
    border-left: 4px solid var(--color-primary-500);
    overflow: hidden
}

.card-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, var(--color-primary-500) 100%);
    opacity: 0;
    transition: opacity var(--transition-base)
}

.card-feature:hover::before {
    opacity: 0.05
}

/* ICONS */
.icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    transition: transform var(--transition-base) var(--ease-spring)
}

.icon-lg {
    width: 3rem;
    height: 3rem
}

.icon-xl {
    width: 4rem;
    height: 4rem
}

.card:hover .icon {
    transform: scale(1.1)
}

/* TYPOGRAPHY */
.heading-1 {
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--color-gray-900)
}

@media(min-width:768px) {
    .heading-1 {
        font-size: 3.75rem
    }
}

.heading-2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-900)
}

@media(min-width:768px) {
    .heading-2 {
        font-size: 3rem
    }
}

.heading-3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-gray-800)
}

.text-muted {
    color: var(--color-gray-500)
}

.text-primary {
    color: var(--color-primary-600)
}

.text-success {
    color: var(--color-success-600)
}

.text-error {
    color: var(--color-error-600)
}

/* LAYOUTS */
.section {
    padding: 6rem 1.5rem
}

.gradient-primary {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500))
}

.gradient-success {
    background: linear-gradient(135deg, var(--color-success-50), var(--color-success-100))
}

.bg-primary {
    background-color: var(--color-primary-500)
}

.bg-success {
    background-color: var(--color-success-50)
}

.bg-gray-50 {
    background-color: var(--color-gray-50)
}

/* SPACING UTILITIES */
.m-0 {
    margin: 0
}

.mt-4 {
    margin-top: 1rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-8 {
    margin-bottom: 2rem
}

.mb-12 {
    margin-bottom: 3rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.p-8 {
    padding: 2rem
}

/* BORDER RADIUS UTILITIES */
.rounded {
    border-radius: var(--radius-md)
}

.rounded-lg {
    border-radius: var(--radius-lg)
}

.rounded-xl {
    border-radius: var(--radius-xl)
}

.rounded-full {
    border-radius: var(--radius-full)
}

/* SHADOW UTILITIES */
.shadow-sm {
    box-shadow: var(--shadow-sm)
}

.shadow-md {
    box-shadow: var(--shadow-md)
}

.shadow-lg {
    box-shadow: var(--shadow-lg)
}

.shadow-xl {
    box-shadow: var(--shadow-xl)
}

/* GRID UTILITIES */
.grid {
    display: grid
}

.gap-6 {
    gap: 1.5rem
}

.gap-8 {
    gap: 2rem
}

/* ACCESSIBILITY */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary-600);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: var(--z-tooltip)
}

.skip-link:focus {
    top: 0
}

/* HOMEPAGE SPECIFIC ENHANCEMENTS */
.hero-animation {
    animation: fade-in-up 0.8s var(--ease-out)
}

.tool-card-home-enhanced:hover {
    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.15)
}

.privacy-badge-enhanced {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.feature-card-enhanced .feature-icon {
    transition: transform 0.3s var(--ease-spring)
}

.feature-card-enhanced:hover .feature-icon {
    transform: scale(1.1) rotate(5deg)
}

/* TIER 2 VISUAL POLISH */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2)
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite
}

@keyframes shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.floating {
    animation: float 3s ease-in-out infinite
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

/* TIER 3 UX ENHANCEMENTS */
.smooth-scroll {
    scroll-behavior: smooth
}

.snap-scroll {
    scroll-snap-type: y mandatory
}

.snap-item {
    scroll-snap-align: start
}

.parallax {
    transform: translateZ(0);
    will-change: transform
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.5
    }
}

/* TIER 4 ADVANCED ANIMATIONS */
.bounce {
    animation: bounce 1s infinite
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-15px)
    }
}

.slide-in-left {
    animation: slide-in-left 0.5s ease
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

.slide-in-right {
    animation: slide-in-right 0.5s ease
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

.zoom-in {
    animation: zoom-in 0.3s ease
}

@keyframes zoom-in {
    from {
        transform: scale(0.9);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.rotate-in {
    animation: rotate-in 0.6s ease
}

@keyframes rotate-in {
    from {
        transform: rotate(-180deg) scale(0);
        opacity: 0
    }

    to {
        transform: rotate(0) scale(1);
        opacity: 1
    }
}