* First Line * Second Line *

/**
 * ╔═══════════════════════════════════════════════════════════════════════╗
 * ║           GLOBAL HERO TITLE ANIMATION & STYLING SYSTEM                ║
 * ║           Single Source of Truth for All Hero Section Titles         ║
 * ╚═══════════════════════════════════════════════════════════════════════╝
 * 
 * USAGE:
 * 
 * 1. Include this CSS file in your page <head>:
 *    <link rel="stylesheet" href="css/hero-title.css">
 * 
 * 2. Apply the hero-title class to your main heading:
 *    <h1 class="hero-title hero-title-en lang-en">
 *        <span class="title-line">First Line</span>
 *        <span class="title-line gradient-text-hero">Second Line</span>
 *    </h1>
 * 
 * 3. The animation JavaScript looks for:
 *    - .hero-title-en or .hero-title-ar (language-specific)
 *    - .title-line (individual lines for animation)
 *    - .gradient-text-hero (gradient effect on specific lines)
 * 
 * Features:
 * ✅ Responsive text sizing (mobile to 2xl screens)
 * ✅ Gradient text effect for featured lines
 * ✅ Code animation integration (.code-line class)
 * ✅ Dark mode support
 * ✅ Smooth transitions and transforms
 * ✅ Bilingual support (EN/AR)
 */

/* ========================================================================
   HERO TITLE BASE STYLES
   ======================================================================== */

.hero-title {
    /* Responsive font sizes */
    font-size: 3rem;              /* Base: 48px */
    font-weight: 900;             /* Black weight */
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

/* Responsive breakpoints */
@media (min-width: 640px) {
    .hero-title {
        font-size: 3.75rem;       /* sm: 60px */
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4.5rem;        /* lg: 72px */
    }
}

@media (min-width: 1536px) {
    .hero-title {
        font-size: 6rem;          /* 2xl: 96px */
    }
}

/* ========================================================================
   TITLE LINE STYLES
   ======================================================================== */

.title-line {
    display: block;
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* CRITICAL: Hide initially until animation starts */
    opacity: 0;
    transform: translateY(20px);
}

/* Allow visibility control after animation begins */
.hero-title.animating .title-line,
.hero-title.animated .title-line {
    opacity: 1;
    transform: translateY(0);
}

/* Default text color - ONLY applies to standard sections */
.title-line {
    color: #07203F;               /* c21-text-primary */
}

/* Dark mode text color */
.dark .title-line {
    color: #FFFFFF;
}

/* EXCEPTION: Hero titles on gradient backgrounds MUST be white */
.gradient-mesh-hero .title-line,
.video-background-section .title-line {
    color: #FFFFFF !important;
}

/* Keep this rule in both light and dark modes */
.dark .gradient-mesh-hero .title-line,
.dark .video-background-section .title-line {
    color: #FFFFFF !important;
}

/* ========================================================================
   GRADIENT TEXT EFFECT
   ======================================================================== */

.gradient-text-hero {
    background: linear-gradient(135deg, #0085CA 0%, #003DA5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;           /* Fallback */
}

/* Dark mode gradient (slightly brighter) */
.dark .gradient-text-hero {
    background: linear-gradient(135deg, #00A3FF 0%, #0085CA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* EXCEPTION: On gradient backgrounds, use Pantone 1575 C (orange) for 2nd line */
.gradient-mesh-hero .gradient-text-hero,
.video-background-section .gradient-text-hero {
    background: none !important;
    -webkit-text-fill-color: #FF8200 !important;
    background-clip: unset !important;
    color: #FF8200 !important;
}

.dark .gradient-mesh-hero .gradient-text-hero,
.dark .video-background-section .gradient-text-hero {
    background: none !important;
    -webkit-text-fill-color: #FF8200 !important;
    background-clip: unset !important;
    color: #FF8200 !important;
}

/* ========================================================================
   CODE ANIMATION STYLES
   ======================================================================== */

.code-line {
    font-family: 'Courier New', monospace !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em;
    /* Colors now controlled by JavaScript inline styles */
}

/* Blinking cursor after code text */
.code-line::after {
    content: '▎';
    animation: blink 1s infinite;
    margin-left: 4px;
    /* Color inherited from parent */
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Dark mode - colors still controlled by JavaScript inline styles */

/* Code animation colors now handled by JavaScript for gradient backgrounds */
/* This allows line-specific colors: white for 1st line, orange for 2nd line */

/* ========================================================================
   ANIMATION STATES
   ======================================================================== */

/* Initial state for animation entrance */
.title-line[style*="opacity: 0"] {
    opacity: 0 !important;
}

/* Transformed state during animation */
.title-line[style*="transform"] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================================================
   LANGUAGE-SPECIFIC ADJUSTMENTS
   ======================================================================== */

/* Center alignment for hero sections (base) */
.hero-title {
    text-align: center !important;
}

/* Arabic text direction (keep center alignment) */
.hero-title-ar {
    direction: rtl;
}

/* English text direction (keep center alignment) */
.hero-title-en {
    direction: ltr;
}

/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .title-line,
    .code-line,
    .code-line::after {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gradient-text-hero {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: #0085CA;
    }
    
    .dark .gradient-text-hero {
        color: #00A3FF;
    }
}

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

/* REMOVED: .hidden class to avoid conflicts with Tailwind's responsive utilities
 * Use .lang-hidden for language-specific hiding (defined in global-design-system.css)
 * Tailwind's .hidden and responsive variants (md:flex, etc.) should work without conflicts
 */

/* Ensure proper spacing */
.hero-title + p {
    margin-top: 1rem;
}

/* ========================================================================
   NOTES FOR DEVELOPERS
   ======================================================================== */

/*
 * IMPORTANT: This CSS works in conjunction with JavaScript animation
 * 
 * The animation sequence:
 * 1. Title starts invisible (opacity: 0, transform: translateY(20px))
 * 2. Shows as code text with .code-line class
 * 3. Scrambles characters using JavaScript
 * 4. Reveals final text and restores .gradient-text-hero if present
 * 
 * DO NOT modify these classes without checking the animation JavaScript
 * in index.html (search for "showCode" and "scrambleToText" functions)
 */