/* App Version: v1.2 - 3D title with hover, spacing improvements, full Safari compatibility */
/* Last updated: December 31, 2025 */

/* SECTION: Unused Earth Rotation - Legacy animation (currently not applied) */
/*
 * Purpose: Defines a slow continuous rotation keyframe and class
 * - Originally intended for background or decorative elements
 * - Currently unused in the page but retained for future possibilities
 */
@keyframes rotate-earth {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-rotate-earth {
    animation: rotate-earth 20s linear infinite;
    /* Purpose: Adds a subtle blue glow shadow */
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.5));
}

/* SECTION: Font Family - Inter typeface with system fallback */
/*
 * Purpose: Applies the primary font stack to elements with .font-inter
 * - Uses Google Fonts Inter for clean, modern typography
 * - Falls back to system-ui and sans-serif for performance
 */
.font-inter {
    font-family: 'Inter', system-ui, sans-serif;
}

/* SECTION: Glass Cards - Reusable frosted glass containers */
/*
 * Purpose: Styles the date/time and weather information cards
 * - Glassmorphism effect with blur and subtle transparency
 * - Consistent padding, border, and shadow for depth
 */
.glass-card {
    /* Purpose: Background and blur */
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Purpose: Border and rounding */
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 14px 28px;
    border-radius: 16px;
    
    /* Purpose: Elevation shadow */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}

/* SECTION: Cosmic Link Buttons - Interactive tool navigation buttons */
/*
 * Purpose: Styles the grid of tool links with a space-themed glass button look
 * - Glassmorphism base with subtle gradient overlay on hover
 * - Smooth lift, scale, and glow on hover/active states
 * - Responsive and accessible touch targets
 */
.link-button {
    position: relative;
    padding: 18px 24px;
    
    /* Purpose: Base appearance */
    background: rgba(255, 255, 255, 0.08);
    color: #e0e7ff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 16px;
    border: 1px solid rgba(100, 120, 255, 0.25);
    backdrop-filter: blur(12px);
    overflow: hidden;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    /* Purpose: Smooth transitions */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.link-button::before {
    content: '';
    position: absolute;
    inset: 0;
    
    /* Purpose: Subtle cosmic gradient overlay */
    background: linear-gradient(135deg, rgba(130, 100, 255, 0.2), rgba(80, 200, 255, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.link-button:hover {
    /* Purpose: Lift and scale with brighter accent */
    transform: translateY(-6px) scale(1.04);
    color: #ffffff;
    border-color: rgba(140, 160, 255, 0.7);
    box-shadow: 0 20px 40px rgba(120, 100, 255, 0.3);
}

.link-button:hover::before {
    opacity: 1;
}

.link-button:active {
    /* Purpose: Slight press feedback */
    transform: translateY(-2px) scale(1.02);
}

/* SECTION: 3D Title Styling - Extruded cosmic text with full cross-browser support */
/*
 * Purpose: Apply 3D extrusion and glow to the main "Cojoro" title
 * - Multiple text-shadow layers create depth and cosmic glow
 * - **Base state**: subtle extrusion and soft glow
 * - Hover: lift, scale, mild forward tilt, intensified glow
 * - Safari/macOS/iOS fixes: GPU layer promotion, backface visibility, perspective hint
 */
.title-3d {
    position: relative;
    display: inline-block;
    color: #ffffff;
    
    /* Purpose: Base extrusion and glow */
    text-shadow:
        /* Purpose: Deep extrusion shadow */
        0 8px 0 #1e3a8a,
        0 12px 0 #1e40af,
        0 16px 0 #312e81,
        /* Purpose: Soft outer glow */
        0 0 20px rgba(59, 130, 246, 0.6),
        0 0 40px rgba(129, 140, 248, 0.4);
    
    /* Purpose: Smooth hover animation */
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Purpose: Safari rendering fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, text-shadow;
    
    /* Purpose: Provide 3D context for rotateX */
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.title-3d span {
    /* Purpose: Yellow accent on "Cojoro" with matching glow */
    text-shadow:
        0 8px 0 #854d0e,
        0 12px 0 #b45309,
        0 16px 0 #92400e,
        0 0 25px rgba(250, 204, 21, 0.7),
        0 0 50px rgba(234, 179, 8, 0.5);
    
    /* Purpose: Inherit Safari fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}

.title-3d:hover {
    /* Purpose: Enhanced 3D lift and intensified glow */
    transform: translateY(-6px) scale(1.06) rotateX(6deg);
    text-shadow:
        /* Purpose: Enhanced extrusion on hover */
        0 12px 0 #1e3a8a,
        0 18px 0 #1e40af,
        0 24px 0 #312e81,
        /* Purpose: Brighter, larger glow */
        0 0 30px rgba(59, 130, 246, 0.9),
        0 0 60px rgba(129, 140, 248, 0.7),
        0 0 100px rgba(167, 139, 245, 0.5);
}

.title-3d:hover span {
    text-shadow:
        0 12px 0 #854d0e,
        0 18px 0 #b45309,
        0 24px 0 #92400e,
        0 0 40px rgba(250, 204, 21, 0.9),
        0 0 80px rgba(234, 179, 8, 0.7);
}