/* 
  © 2025 datsforge 
  Proprietary – See LICENSE for details. 
*/

/*=== HERO ===*/
.hero {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: var(--hero-height);

    background-position: center calc(50% + var(--hero-parallax, 0px));
    background-repeat: no-repeat;
    background-size: cover;
    will-change: background-position;

    font-family: var(--md-sys-font-primary);
    box-shadow: var(--md-sys-elevation-4);
    text-align: center;
}

.hero.hero-home {
    background-image: url('/assets/images/datsforge/hero/datsforge_banner_v003_1920x1080.png');
}

.hero.hero-f-phase {
    background-color: var(--md-sys-color-surface-container-lowest);
}

/*  Hero background overlay -Slight tint to boost foreground contrast */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--md-sys-color-shadow);
    opacity: 0.17;
    pointer-events: none;
    z-index: 1;
}

/* Hero content to position and center slogan block */
.hero .wrapper {
    position: relative;
    z-index: var(--md-sys-z-index-hero);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: var(--md-sys-shape-extra-large);
    padding: var(--md-sys-spacing-lg);
    gap: var(--md-sys-spacing-lg);

    /* width: 100%; */
    height: 100%;
}

/* ==== Slogan ==== */
.hero .slogan {
    display: flex;
    flex-direction: column;
    gap: var(--md-sys-spacing-sm);
    max-width: 820px;
    margin: 0;
    width: 100%;
}

/* Slogan Title — Centered */
.hero .slogan h1 {
    color: var(--md-sys-color-on-background);
    margin: 0 0 var(--md-sys-spacing-lg) 0;
    font-family: var(--md-sys-font-family-secondary);
    font-weight: 300;
    line-height: 1.2;
    text-align: center;
}

.hero.hero-home .slogan h1 {
    color: var(--color-on-background);
}

/* Slogan Subtext */
.hero.hero-home .slogan p {
    margin: 0;
    font-size: var(--md-sys-typescale-display-small);
    font-weight: 400;
    color: var(--color-yellow);
    text-align: right;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.6);
}

.hero .slogan strong {
    color: var(--color-yellow);
}

.hero.hero.hero-f-phase .slogan strong {
    border-radius: var(--md-sys-shape-small);
    padding:var(--md-sys-spacing-xs);
    background-color: rgba(0, 0, 0, 0.4);
}

.hero .contact-info {
    display: flex;
    position: absolute;
    gap: var(--md-sys-spacing-lg);
    left: var(--md-sys-spacing-lg);
    bottom: var(--md-sys-spacing-lg);
    z-index: var(--md-sys-z-index-overlay);
    /* background-color: red; */
    padding:var(--md-sys-spacing-sm);
}

.fireflies {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--md-sys-z-index-bg);
}

/* ==== Firefly animation ==== */
.firefly {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #ffd700, transparent 70%);
    border-radius: 50%;
    opacity: 0.8;
    filter: drop-shadow(0 0 4px #ffd700);
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }

    100% {
        /* Use CSS variables for X and Y offsets */
        transform: translate(var(--move-x), var(--move-y)) scale(0.7);
        opacity: 0.3;
    }
}

.typing-anim {
    white-space: nowrap;
    border-right: 2px solid var(--color-red);
    width: fit-content;
    overflow: hidden;
}

/* ==== Decoration bar ====*/
.hero-deco-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 41vw;
    height: 85px;
    background: linear-gradient(135deg, var(--color-red), var(--color-orange), var(--color-yellow));
    background-size: 200% 200%;
    animation: fireGlow 8s linear infinite alternate;
    /* Slower, linear for less GPU */
    border-radius: 0 var(--md-sys-shape-full) 0 0;
    transform: translateY(50px);
    z-index: 1;
    pointer-events: none;
    will-change: background-position, filter;
    /* Hint for browser optimization */
}

@keyframes fireGlow {
    0% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.1) saturate(1.15);
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1) saturate(1);
    }
}