/*
Theme Name: Citrus Teams System - Master Unified
Version: 14.0.0
Description: Ultimate Stylesheet. Features: Continuous Neon Pulse for Testimonials, Cyberpunk Button Transitions, Figtree Typography, Moving Laser Bento, Dual-Cut Corners.
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   1. CORE SYSTEM & TYPOGRAPHY
   ========================================================================== */
html { 
    scroll-behavior: smooth; 
    scroll-padding-top: 80px; 
}

body, .font-sans { 
    font-family: 'Figtree', sans-serif; 
    -webkit-font-smoothing: antialiased;
}

.font-mono { 
    font-family: 'JetBrains Mono', monospace; 
}

/* --- Headings Style --- */
h1, h2, h3, h4 {
    font-family: 'Figtree', sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-style: normal;
}

/* ==========================================================================
   2. HEADER, NAVIGATION & HUD ELEMENTS
   ========================================================================== */

/* --- Cyberpunk Primary Button --- */
.cyber-button {
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    position: relative;
}

/* --- Navigation Links & Shapes --- */
.cta-cutout {
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.nav-laser-link { position: relative; }
.nav-laser-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: linear-gradient(to right, transparent, #a855f7, #ec4899, transparent);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.8);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-laser-link:hover::after { width: 100%; }

/* --- HUD Corner Frames & Heartbeat Animation --- */
@keyframes corner-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; filter: drop-shadow(0 0 2px #a855f7); }
    50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 10px #ec4899); border-color: #ec4899; }
}

.corner-frame {
    position: absolute; width: 24px; height: 24px; border-color: #a855f7;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 30; pointer-events: none;
    animation: corner-pulse 2s ease-in-out infinite; 
}
.frame-tl { top: -4px; left: -4px; border-top-width: 4px; border-left-width: 4px; }
.frame-tr { top: -4px; right: -4px; border-top-width: 4px; border-right-width: 4px; animation-delay: 1s; }
.frame-bl { bottom: -4px; left: -4px; border-bottom-width: 4px; border-left-width: 4px; animation-delay: 1s; }
.frame-br { bottom: -4px; right: -4px; border-bottom-width: 4px; border-right-width: 4px; }

/* --- Global Hover Effects --- */
.group:hover .corner-frame, 
.tron-agent-card:hover .corner-frame, 
.bento-tile:hover .corner-frame,
.location-card:hover .corner-frame { 
    width: 40px; height: 40px; border-color: #ec4899; filter: drop-shadow(0 0 10px #ec4899); 
}

/* ==========================================================================
   3. BENTO PROCESS SECTION
   ========================================================================== */
.process-container { display: flex; flex-direction: column; gap: 40px; }
.bento-row { display: flex; gap: 0; align-items: stretch; justify-content: center; position: relative; }

@media (min-width: 1024px) {
    .row-tri .bento-tile { width: 33.33%; }
    .row-duo .bento-tile { width: 40%; }
}

/* --- Laser Pulse Animations --- */
.laser-link-container { position: relative; width: 60px; display: flex; align-items: center; justify-content: center; }
.laser-link-line { width: 100%; height: 1px; background: rgba(168, 85, 247, 0.2); }
.laser-pulse {
    position: absolute; width: 25px; height: 2px; background: #ec4899;
    box-shadow: 0 0 15px #ec4899, 0 0 5px #fff; border-radius: 99px; left: -25px;
    animation: laser-move 2.5s linear infinite;
}
@keyframes laser-move { 0% { left: -10%; opacity: 0; } 100% { left: 110%; opacity: 0; } }

/* --- Bento Tile Shapes --- */
.bento-tile {
    position: relative; background: white; border: 1px solid rgba(168, 85, 247, 0.1); padding: 40px;
    clip-path: polygon(25px 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0% 100%, 0% 25px);
    transition: all 0.4s ease;
}
.dark .bento-tile { background: rgba(12, 10, 9, 0.95); border-color: rgba(168, 85, 247, 0.2); }

/* ==========================================================================
   4. TRON CARDS (TESTIMONIALS ONLY)
   ========================================================================== */

/* --- Continuous Neon Pulse Keyframes --- */
@keyframes neon-pulse {
    0% { 
        opacity: 0.4; 
        filter: drop-shadow(0 0 5px var(--agent-glow)); 
    }
    50% { 
        opacity: 1; 
        filter: drop-shadow(0 0 25px var(--agent-glow)); 
    }
    100% { 
        opacity: 0.4; 
        filter: drop-shadow(0 0 5px var(--agent-glow)); 
    }
}

.tron-agent-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 2px;
    clip-path: polygon(30px 0%, 100% 0%, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0% 100%, 0% 30px);
}
.tron-card-inner { clip-path: inherit; height: 100%; width: 100%; }

/* --- UPDATED: LED Border with Infinite Animation --- */
.tron-led-border {
    position: absolute; inset: 0; background: var(--agent-glow);
    /* This applies the continuous flash/blink automatically */
    animation: neon-pulse 2s ease-in-out infinite;
}

/* Optional: Enhance glow slightly on hover, but keep animation running */
.tron-agent-card:hover .tron-led-border { 
    filter: drop-shadow(0 0 35px var(--agent-glow)); 
}

/* --- Agent Image Handling --- */
.agent-image-wrapper { width: 100%; height: 320px; } 

.agent-fill-uniform {
    object-fit: cover !important; 
    padding: 0 !important;
    width: 100%; height: 100%;
}
.img-extra-zoom { transform: scale(1.15); } 

.tron-agent-card:hover .agent-image { transform: scale(1.1); }
.tron-agent-card:hover .img-extra-zoom { transform: scale(1.25); }

/* ==========================================================================
   5. COMPARISON & PROBLEM/SOLUTION SECTION
   ========================================================================== */
.cs-card {
    position: relative; overflow: hidden; transition: all 0.4s ease;
    clip-path: polygon(25px 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0% 100%, 0% 25px);
}

/* VS Badge: Centering Fix */
.comp-vs-badge {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 50px; height: 50px; background: #a855f7; color: white;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 4px solid #050507;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); z-index: 40; font-weight: 900;
    margin: 0; pointer-events: none; 
}

/* Problem Card: Force Clarity */
.comp-problem {
    opacity: 1 !important;
    filter: grayscale(0) !important;
}

/* ==========================================================================
   6. UTILITIES, BACKGROUNDS & GLOBAL ANIMATIONS
   ========================================================================== */

/* --- Retro Grid Background --- */
.retro-grid { 
    position: absolute; width: 200%; height: 200%; left: -50%; top: 0; 
    background-image: linear-gradient(to right, rgba(168, 85, 247, 0.1) 1px, transparent 1px), 
                      linear-gradient(to bottom, rgba(168, 85, 247, 0.1) 1px, transparent 1px); 
    background-size: 50px 50px; transform: perspective(500px) rotateX(60deg); 
    animation: grid-move 20s linear infinite; pointer-events: none; 
}
@keyframes grid-move { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } }

/* --- Live Status Indicators --- */
.status-pinger {
    width: 8px; height: 8px; background-color: #22c55e; border-radius: 9999px; position: relative;
}
.status-pinger::after {
    content: ''; position: absolute; inset: 0; border-radius: 9999px; background-color: #22c55e; animation: pinger-pulse 1.5s infinite;
}
@keyframes pinger-pulse { 75%, 100% { transform: scale(2.5); opacity: 0; } }

/* --- Helper Utilities --- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ==========================================================================
   7. MOBILE RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 1023px) {
    .bento-row { flex-direction: column; gap: 20px; }
    .laser-link-container { display: none; }
    .bento-tile, .tron-agent-card { width: 100% !important; }
    .comparison-row { grid-template-columns: 1fr; gap: 20px; }
}