/* =========================================
   BlockComs — Custom Styles
   ========================================= */

html {
    scroll-behavior: smooth;
}

::selection {
    background-color: #DBEAFE;
    color: #1E40AF;
}

/* ---- Hero background: subtle radial glow ---- */
.hero-bg {
    background: radial-gradient(
        ellipse 80% 60% at 50% 40%,
        rgba(37, 99, 235, 0.025) 0%,
        transparent 70%
    );
}

/* ---- Navbar: hidden by default, GSAP controls visibility ---- */
#navbar {
    transform: translateY(-100%);
    opacity: 0;
}

/* ---- Scroll indicator: animated chevron ---- */
.scroll-chevron {
    width: 12px;
    height: 12px;
    border-right: 1.5px solid #94A3B8;
    border-bottom: 1.5px solid #94A3B8;
    transform: rotate(45deg);
    animation: scrollBounce 2.4s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% {
        opacity: 0.3;
        transform: rotate(45deg) translateY(0);
    }
    50% {
        opacity: 0.7;
        transform: rotate(45deg) translateY(4px);
    }
}

/* ---- Contact card: blue top accent ---- */
.contact-card {
    border-top: 2px solid #2563EB;
}

/* ---- Tagline breathing — CSS-driven for GPU compositing ---- */
.breathe-1 {
    animation: breathe1 6s ease-in-out infinite;
    will-change: transform;
}
.breathe-2 {
    animation: breathe2 7s ease-in-out infinite;
    will-change: transform;
}
.breathe-3 {
    animation: breathe3 8s ease-in-out infinite;
    will-change: transform;
}
.breathe-sub {
    animation: breatheSub 9s ease-in-out infinite;
    will-change: transform;
}

@keyframes breathe1 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2.5px); }
}
@keyframes breathe2 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes breathe3 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@keyframes breatheSub {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.5px); }
}

/* ---- Parallax image section ---- */
.parallax-section {
    height: 70vh;
    min-height: 420px;
    background: url('../assets/network-bg.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.parallax-overlay {
    background: rgba(255, 255, 255, 0.15);
}

.parallax-wave--bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
    display: block;
}

/* iOS Safari doesn't support background-attachment: fixed */
@supports (-webkit-touch-callout: none) {
    .parallax-section {
        background-attachment: scroll;
    }
}

@media (max-width: 1023px) {
    .parallax-section {
        background-attachment: scroll;
    }
}

/* ---- Divider: starts at width 0, animated via GSAP ---- */
#divider {
    width: 0;
    max-width: 120px;
}

/* ---- Focus states for accessibility ---- */
a:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 4px;
    border-radius: 2px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .scroll-chevron {
        animation: none;
        opacity: 0.5;
    }

    #hero-logo,
    .tagline-word,
    #hero-subtitle,
    #scroll-indicator,
    .contact-item,
    .parallax-text {
        opacity: 1 !important;
        transform: none !important;
    }

    #navbar {
        transform: none;
        opacity: 1;
    }

    #divider {
        width: 120px;
    }

    .parallax-section {
        background-attachment: scroll;
    }
}

/* ---- Print ---- */
@media print {
    #navbar,
    #scroll-indicator {
        display: none;
    }

    .min-h-screen {
        min-height: auto;
    }

    section {
        page-break-inside: avoid;
    }

    #hero-logo,
    .tagline-word,
    #hero-subtitle,
    .contact-item,
    .parallax-text {
        opacity: 1 !important;
    }

    #divider {
        width: 120px;
    }
}