/*
F3L1X Bento Grid + Glassmorphism 2.0 + Dynamic Theming
Performance-first styling for Django 6.0.1
*/

/* ===========================================
   DYNAMIC THEMING - CSS Custom Properties
   Time-based and scroll-reactive colors
   =========================================== */
:root {
    /* Base theme (default - evening) */
    --theme-primary: #3b82f6;
    --theme-secondary: #8b5cf6;
    --theme-accent: #06b6d4;
    --theme-glow: rgba(59, 130, 246, 0.4);

    /* Dopamine palette for CTAs */
    --dopamine-blue: #00d4ff;
    --dopamine-pink: #ff006e;
    --dopamine-purple: #8338ec;
    --dopamine-orange: #ff9500;

    /* Glass properties */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 16px;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);

    /* Transition for theme changes */
    --theme-transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Morning theme (6am - 12pm) */
[data-theme="morning"] {
    --theme-primary: #0ea5e9;
    --theme-secondary: #6366f1;
    --theme-accent: #14b8a6;
    --theme-glow: rgba(14, 165, 233, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.05);
}

/* Afternoon theme (12pm - 6pm) */
[data-theme="afternoon"] {
    --theme-primary: #3b82f6;
    --theme-secondary: #a855f7;
    --theme-accent: #f59e0b;
    --theme-glow: rgba(59, 130, 246, 0.4);
}

/* Evening theme (6pm - 10pm) */
[data-theme="evening"] {
    --theme-primary: #6366f1;
    --theme-secondary: #ec4899;
    --theme-accent: #8b5cf6;
    --theme-glow: rgba(99, 102, 241, 0.5);
}

/* Night theme (10pm - 6am) */
[data-theme="night"] {
    --theme-primary: #8b5cf6;
    --theme-secondary: #ec4899;
    --theme-accent: #06b6d4;
    --theme-glow: rgba(139, 92, 246, 0.5);
    --glass-bg: rgba(0, 0, 0, 0.2);
}

/* Scroll-intensity reactive theme */
[data-scroll-intensity="high"] {
    --theme-glow: rgba(236, 72, 153, 0.6);
}

/* ===========================================
   GLASSMORPHISM 2.0
   Frosted glass with subtle depth
   =========================================== */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition: all var(--theme-transition);
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 30px var(--theme-glow);
    transform: translateY(-4px);
}

/* Glass with colored tint */
.glass-blue {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.glass-purple {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
}

.glass-cyan {
    background: rgba(6, 182, 212, 0.08);
    border-color: rgba(6, 182, 212, 0.2);
}

/* Glass shine effect (top highlight) */
.glass-shine {
    position: relative;
    overflow: hidden;
}

.glass-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.glass-shine:hover::before {
    left: 100%;
}

/* ===========================================
   BENTO GRID LAYOUTS
   Asymmetric, modular card arrangements
   =========================================== */
.bento-grid {
    display: grid;
    gap: 20px;
    padding: 20px;
}

/* 4-column bento layout */
.bento-4 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
}

/* Named grid areas for complex layouts */
.bento-hero {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, minmax(150px, auto));
    grid-template-areas:
        "main main main main main main main side side side side side"
        "main main main main main main main side side side side side"
        "stat1 stat1 stat1 stat2 stat2 stat2 stat3 stat3 stat3 stat4 stat4 stat4";
}

.bento-hero .bento-main { grid-area: main; }
.bento-hero .bento-side { grid-area: side; }
.bento-hero .bento-stat-1 { grid-area: stat1; }
.bento-hero .bento-stat-2 { grid-area: stat2; }
.bento-hero .bento-stat-3 { grid-area: stat3; }
.bento-hero .bento-stat-4 { grid-area: stat4; }

/* Feature grid - asymmetric */
.bento-features {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, minmax(200px, auto));
    grid-template-areas:
        "feat1 feat1 feat1 feat1 feat2 feat2 feat2 feat2 feat3 feat3 feat3 feat3"
        "feat4 feat4 feat4 feat4 feat4 feat4 feat5 feat5 feat5 feat5 feat5 feat5";
}

.bento-features .bento-feat-1 { grid-area: feat1; }
.bento-features .bento-feat-2 { grid-area: feat2; }
.bento-features .bento-feat-3 { grid-area: feat3; }
.bento-features .bento-feat-4 { grid-area: feat4; }
.bento-features .bento-feat-5 { grid-area: feat5; }

/* Agents grid - varied sizes */
.bento-agents {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(180px, auto));
    grid-template-areas:
        "agent1 agent1 agent2 agent2 agent3 agent3"
        "agent4 agent4 agent4 agent5 agent5 agent5";
}

.bento-agents .bento-agent-1 { grid-area: agent1; }
.bento-agents .bento-agent-2 { grid-area: agent2; }
.bento-agents .bento-agent-3 { grid-area: agent3; }
.bento-agents .bento-agent-4 { grid-area: agent4; }
.bento-agents .bento-agent-5 { grid-area: agent5; }

/* Bento cell styling */
.bento-cell {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 150px;
}

.bento-cell.large {
    padding: 40px;
    min-height: 300px;
}

.bento-cell h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--f3l1x-text-primary);
}

.bento-cell p {
    color: var(--f3l1x-text-muted);
    line-height: 1.6;
}

.bento-cell .bento-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    color: var(--theme-primary);
}

/* Responsive bento */
@media (max-width: 1200px) {
    .bento-hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "main"
            "side"
            "stat1"
            "stat2"
            "stat3"
            "stat4";
    }

    .bento-features {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "feat1 feat2"
            "feat3 feat4"
            "feat5 feat5";
    }
}

@media (max-width: 768px) {
    .bento-grid {
        gap: 15px;
        padding: 15px;
    }

    .bento-4 {
        grid-template-columns: 1fr;
    }

    .bento-features {
        grid-template-columns: 1fr;
        grid-template-areas:
            "feat1"
            "feat2"
            "feat3"
            "feat4"
            "feat5";
    }

    .bento-agents {
        grid-template-columns: 1fr;
        grid-template-areas:
            "agent1"
            "agent2"
            "agent3"
            "agent4"
            "agent5";
    }
}

/* ===========================================
   KINETIC TYPOGRAPHY
   Scroll-triggered text animations
   =========================================== */
.kinetic-text {
    will-change: transform, opacity;
    transition: transform 0.1s linear;
}

/* Text reveal animation */
.text-reveal {
    overflow: hidden;
}

.text-reveal .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal.revealed .char {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for characters */
.text-reveal .char:nth-child(1) { transition-delay: 0.02s; }
.text-reveal .char:nth-child(2) { transition-delay: 0.04s; }
.text-reveal .char:nth-child(3) { transition-delay: 0.06s; }
.text-reveal .char:nth-child(4) { transition-delay: 0.08s; }
.text-reveal .char:nth-child(5) { transition-delay: 0.1s; }
.text-reveal .char:nth-child(6) { transition-delay: 0.12s; }
.text-reveal .char:nth-child(7) { transition-delay: 0.14s; }
.text-reveal .char:nth-child(8) { transition-delay: 0.16s; }
.text-reveal .char:nth-child(9) { transition-delay: 0.18s; }
.text-reveal .char:nth-child(10) { transition-delay: 0.2s; }

/* Scale text on scroll */
.scale-text {
    transform-origin: left center;
}

/* Weight shift on scroll */
.weight-shift {
    font-variation-settings: 'wght' 400;
    transition: font-variation-settings 0.3s ease;
}

.weight-shift.active {
    font-variation-settings: 'wght' 700;
}

/* Gradient text that shifts on scroll */
.gradient-shift {
    background: linear-gradient(
        90deg,
        var(--theme-primary),
        var(--theme-secondary),
        var(--theme-accent)
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Split text animation */
.split-text {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.split-text .word {
    display: inline-block;
    margin-right: 0.3em;
    overflow: hidden;
}

.split-text .word-inner {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-text.in-view .word-inner {
    transform: translateY(0);
    opacity: 1;
}

/* ===========================================
   DOPAMINE CTAs
   High-engagement button styles
   =========================================== */
.dopamine-btn {
    position: relative;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--dopamine-blue), var(--dopamine-purple));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 15px rgba(0, 212, 255, 0.3),
        0 0 0 0 rgba(0, 212, 255, 0.5);
}

.dopamine-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(0, 212, 255, 0.4),
        0 0 30px rgba(131, 56, 236, 0.3);
}

.dopamine-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Pulse animation for attention */
.dopamine-btn.pulse {
    animation: dopaminePulse 2s ease-in-out infinite;
}

@keyframes dopaminePulse {
    0%, 100% {
        box-shadow:
            0 4px 15px rgba(0, 212, 255, 0.3),
            0 0 0 0 rgba(0, 212, 255, 0.5);
    }
    50% {
        box-shadow:
            0 4px 15px rgba(0, 212, 255, 0.3),
            0 0 0 15px rgba(0, 212, 255, 0);
    }
}

/* Glow variant */
.dopamine-btn.glow {
    background: linear-gradient(135deg, var(--dopamine-pink), var(--dopamine-orange));
    box-shadow:
        0 4px 15px rgba(255, 0, 110, 0.3),
        0 0 20px rgba(255, 0, 110, 0.2);
}

.dopamine-btn.glow:hover {
    box-shadow:
        0 8px 25px rgba(255, 0, 110, 0.4),
        0 0 40px rgba(255, 149, 0, 0.3);
}

/* ===========================================
   MICRO-INTERACTIONS
   Subtle feedback animations
   =========================================== */

/* Hover lift */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Magnetic effect (requires JS) */
.magnetic {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scale feedback */
.scale-feedback {
    transition: transform 0.15s ease;
}

.scale-feedback:hover {
    transform: scale(1.05);
}

.scale-feedback:active {
    transform: scale(0.95);
}

/* Border glow on focus */
.focus-glow:focus {
    outline: none;
    box-shadow:
        0 0 0 2px var(--theme-primary),
        0 0 20px var(--theme-glow);
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Theme-reactive colors */
.text-theme-primary { color: var(--theme-primary); }
.text-theme-secondary { color: var(--theme-secondary); }
.text-theme-accent { color: var(--theme-accent); }
.bg-theme-glow { background: var(--theme-glow); }

/* Dopamine colors */
.text-dopamine-blue { color: var(--dopamine-blue); }
.text-dopamine-pink { color: var(--dopamine-pink); }
.text-dopamine-purple { color: var(--dopamine-purple); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .kinetic-text,
    .text-reveal .char,
    .split-text .word-inner,
    .dopamine-btn,
    .hover-lift,
    .scale-feedback,
    .glass-card,
    .gradient-shift {
        transition: none !important;
        animation: none !important;
    }
}

/* ===========================================
   UNIFIED CARD OVERRIDES
   Resolves conflicts between service-item and glass-card
   =========================================== */

/* When glass-card is combined with service-item, glass wins */
.service-item.glass-card,
.box-item.glass-card {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.service-item.glass-card:hover,
.box-item.glass-card:hover {
    background: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(59, 130, 246, 0.3) !important;
    transform: translateY(-6px);
}

/* Unified hover lift - single transform value */
.glass-card.hover-lift:hover,
.service-item.glass-card.hover-lift:hover {
    transform: translateY(-6px);
}

/* Fade in scroll - ensure visibility toggle works */
/* GSAP handles fade-in-scroll - see kinetic-theme.js */
.fade-in-scroll.no-gsap {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-scroll.visible,
.fade-in-scroll.wow-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Glass shine z-index fix */
.glass-shine::before {
    z-index: 1;
    pointer-events: none;
}

/* Stat cards unified styling */
.stat-card-3d.tilt-card {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}