/* Homepage Specific Styles - Mobile First & Premium */

/* -----------------------------------------------------------------------------
   1. Animations & Keyframes
   ----------------------------------------------------------------------------- */

/* Smooth Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 3rem, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Float animation moved to global.css */

/* Pulse Glow for Buttons */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 var(--accent-primary-alpha);
    }

    70% {
        box-shadow: 0 0 0 1rem rgba(15, 118, 110, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(15, 118, 110, 0);
    }
}

/* Gradient Background Shift */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Hero Background Slide */
@keyframes heroSlide {
    0% {
        background-image: url('../assets/design/connect.jpg');
    }

    50% {
        background-image: url('../assets/design/worldconnection.jpg');
    }

    100% {
        background-image: url('../assets/design/connect.jpg');
    }
}

@keyframes drift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -50px) rotate(10deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* -----------------------------------------------------------------------------
   2. Global Homepage Settings
   ----------------------------------------------------------------------------- */

body {
    /* Premium subtle gradient background */
    background: linear-gradient(-45deg, var(--bg-primary), var(--bg-secondary), var(--bg-tertiary), var(--bg-primary));
    background-size: 400% 400%;
    animation: gradient-shift 20s ease infinite;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

[data-theme="dark"] body {
    background: var(--bg-primary);
    /* Subtle dark pattern or gradient can be added here if needed */
    background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 70%);
}

/* -----------------------------------------------------------------------------
   3. Hero Section
   ----------------------------------------------------------------------------- */

.hero-section {
    position: relative;
    min-height: 100vh;
    /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--header-height);
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    padding-bottom: 12vh;
    /* Lift content up visually */
}

/* Dynamic Background with Overlay */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: heroSlide 15s ease-in-out infinite;
    will-change: background-image;
}

/* Glass/Gradient Overlay */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Gradient from light/transparent to solid bottom to blend with content */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.7) 50%,
            var(--bg-primary) 100%);
    backdrop-filter: blur(4px);
}

[data-theme="dark"] .hero-bg::after {
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.9) 0%,
            rgba(15, 23, 42, 0.7) 50%,
            var(--bg-primary) 100%);
}

/* Particle Canvas */
#hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Above bg, below content */
    pointer-events: auto;
    /* Allow mouse interaction */
}

/* Animated Shapes */
.hero-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: drift 25s infinite ease-in-out;
}

.shape-1 {
    top: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: var(--accent-primary);
    animation-delay: 0s;
    opacity: 0.3;
}

.shape-2 {
    bottom: 10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: var(--accent-secondary);
    animation-delay: -7s;
    opacity: 0.2;
}

.shape-3 {
    top: 30%;
    left: 40%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--warning), transparent);
    opacity: 0.15;
    animation-delay: -15s;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 60rem;
    /* approx 960px */
    width: 100%;
    margin: 0 auto;
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent-primary);
    margin-bottom: var(--spacing-md);
    backdrop-filter: blur(var(--blur-amount));
    box-shadow: var(--shadow);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Main Title */
.hero-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    /* Highly responsive font size */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);

    /* Gradient Text */
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Fallback */
    -webkit-text-fill-color: transparent;

    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
    letter-spacing: -0.03em;
}

/* Hero Text Slider */
.hero-text-slider {
    position: relative;
    width: 100%;
    min-height: 200px;
    /* Reserve space */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.hero-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    /* Allow it to take up space in flow when active if needed, but absolute centering is safer for transitions */
    transform: translate(-50%, -50%);
}

/* Override active slide to be static relative for layout flow if we want height to adjust,
   but for smooth crossfade absolute is better. Let's stick to absolute centering
   and ensure container has height. */

/* Actually, let's use a grid stack approach for perfect overlap without absolute positioning issues */
.hero-text-slider {
    display: grid;
    grid-template-areas: "stack";
    align-items: center;
    justify-items: center;
}

.hero-slide {
    grid-area: stack;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-in-out;
    width: 100%;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transform: none;
}

/* Dynamic Text Section */
.typewriter-wrapper {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--accent-secondary);
    font-weight: 700;
    min-height: 1.6em;
    margin-top: var(--spacing-md);
    text-shadow: 0 2px 10px rgba(49, 130, 206, 0.2);
}

.cursor {
    display: inline-block;
    width: 3px;
    background-color: var(--accent-secondary);
    animation: blink 1s step-end infinite;
    margin-left: 4px;
    vertical-align: middle;
    height: 1.2em;
}

/* Subtitle */
.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}

/* Buttons Container */
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s backwards;
}

@media (min-width: 640px) {
    .hero-actions {
        flex-direction: row;
    }
}

/* Hero Buttons */
.hero-actions .btn {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
}

.btn-glow {
    animation: pulse-glow 3s infinite;
    box-shadow: 0 4px 14px 0 var(--accent-primary-alpha);
}

/* -----------------------------------------------------------------------------
   4. Features Section (Bento Grid)
   ----------------------------------------------------------------------------- */

.features-section {
    padding: var(--spacing-2xl) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding: 0 var(--spacing-md);
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-weight: 700;
}

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 40rem;
    margin: 0 auto;
}

.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding: 0 var(--spacing-md);
    max-width: var(--content-max-width);
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Feature Cards */
.bento-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy transition */
    backdrop-filter: blur(var(--blur-amount));
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--shadow-lg);
}

.bento-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent-primary);
    background: linear-gradient(to bottom right, var(--glass-bg), rgba(255, 255, 255, 0.9));
}

[data-theme="dark"] .bento-card:hover {
    background: linear-gradient(to bottom right, var(--glass-bg), rgba(30, 41, 59, 0.9));
}

.card-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

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

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.card-desc {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
    line-height: 1.6;
}

.card-link {
    color: var(--accent-primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.card-link:hover {
    border-bottom-color: var(--accent-primary);
    gap: 0.75rem;
}

/* -----------------------------------------------------------------------------
   5. CTA Section
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   6. Responsive Utils & Fixes
   ----------------------------------------------------------------------------- */

/* Ensure text doesn't overflow on very small screens */
@media (max-width: 380px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-actions .btn {
        width: 100%;
    }
}