/* ==========================================================================
   ASTERISM COMMUNICATIONS - Homepage Styles
   ========================================================================== */

/* =========================================================================
   HERO SECTION - Dark with Constellation
   ========================================================================= */
.home-hero {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background: var(--color-black);
    overflow: hidden;
}

/* Constellation Background */
.constellation-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    animation: starFlash 3s ease-in-out infinite;
}

.star--small {
    width: 1px;
    height: 1px;
    animation-duration: 4s;
}

.star--medium {
    width: 2px;
    height: 2px;
    animation-duration: 3s;
}

.star--large {
    width: 3px;
    height: 3px;
    animation-duration: 2.5s;
}

.star--bright {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    animation: starBrightFlash 2s ease-in-out infinite;
}

@keyframes starFlash {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); 
    }
}

@keyframes starBrightFlash {
    0%, 100% { 
        opacity: 0.5; 
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        box-shadow: 0 0 10px rgba(255, 255, 255, 1),
                    0 0 20px rgba(255, 255, 255, 0.5);
        transform: scale(1.5);
    }
}

/* Asterism Pattern SVG */
.asterism-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Constellation stars with pulse animation */
.constellation-star {
    animation: constellationPulse 3s ease-in-out infinite;
}

.constellation-star:nth-child(odd) {
    animation-delay: 0.5s;
}

.constellation-star:nth-child(even) {
    animation-delay: 1.5s;
}

@keyframes constellationPulse {
    0%, 100% { 
        opacity: 0.6;
        filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
    }
    50% { 
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1));
    }
}

/* Legacy class for backwards compatibility */
.constellation-line {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
    fill: none;
    animation: constellationFade 6s ease-in-out infinite;
}

@keyframes constellationFade {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

/* Hero Content */
.home-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    text-align: left;
}

.home-hero .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.home-hero__title {
    color: var(--color-white);
    margin-bottom: var(--spacing-8);
    opacity: 0;
    animation: heroReveal 1s cubic-bezier(0.23, 1, 0.320, 1) 0.2s forwards;
    text-align: left;
}

/* Red accent for "storytelling" */
.home-hero__title .text-accent,
.home-hero__title span.text-accent {
    color: var(--color-accent-red);
}

/* Keep second line together */
.home-hero__line2 {
    white-space: nowrap;
}

.home-hero__subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-lead);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-12);
    opacity: 0;
    animation: heroReveal 1s cubic-bezier(0.23, 1, 0.320, 1) 0.5s forwards;
}

/* Hide subtitle break on very small screens where it would cause issues */
@media (max-width: 600px) {
    .home-hero__subtitle .subtitle-break {
        display: none;
    }
}

.home-hero__cta {
    display: flex;
    gap: var(--spacing-8);
    opacity: 0;
    animation: heroReveal 1s cubic-bezier(0.23, 1, 0.320, 1) 0.8s forwards;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================================
   SERVICES SECTION
   ========================================================================= */
.home-services {
    padding: var(--spacing-24) 0 var(--spacing-12);
}

/* =========================================================================
   PROJECTS SECTION
   ========================================================================= */
.home-projects {
    padding: var(--spacing-16) 0 var(--spacing-24);
    background: var(--color-white);
}

/* =========================================================================
   TESTIMONIALS SECTION
   ========================================================================= */
.home-testimonials {
    padding: var(--spacing-24) 0;
    background: var(--color-gray-bg);
}

.testimonial-card__quote {
    font-size: var(--font-size-md);
}

/* =========================================================================
   FINAL CTA SECTION
   ========================================================================= */
.home-cta {
    padding: var(--spacing-16) 0;
    background: var(--color-white);
    text-align: center;
}

.home-cta .cta-section__title,
.home-cta__title {
    font-family: var(--font-family-serif);
    font-size: var(--font-size-h3);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-8);
}

/* =========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */
@media (max-width: 968px) {
    /* Hide most constellation shapes on tablet/mobile to prevent clashing */
    .asterism-pattern #main-constellation,
    .asterism-pattern #upper-constellation,
    .asterism-pattern #lower-constellation,
    .asterism-pattern #edge-constellation {
        opacity: 0.3;
    }
}

@media (max-width: 768px) {
    .home-hero__title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
    
    .home-hero__line2 {
        white-space: normal;
    }
    
    .home-hero__subtitle {
        font-size: var(--font-size-md);
    }
    
    .home-hero__subtitle .subtitle-break {
        display: none;
    }
    
    .home-hero__cta {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .home-hero__cta .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Completely hide large constellations on mobile */
    .asterism-pattern #main-constellation,
    .asterism-pattern #upper-constellation,
    .asterism-pattern #lower-constellation,
    .asterism-pattern #edge-constellation {
        display: none;
    }
    
    /* Only keep small subtle pattern on mobile */
    .asterism-pattern #left-pattern {
        opacity: 0.6;
    }
}