/*
 * Eco Glow hero light-strip animation.
 *
 * Ported by hand from a Figma-generated React prototype ("Dark Minimalist
 * Interior Scene") into plain CSS so it runs on the CakePHP homepage
 * without adding React to the project.
 *
 * Two "light strips" (ceiling + floor, either side of a wall seam) draw
 * themselves on when the page loads. Homepage-only file, loaded via
 * home.php's css block.
 */

.hero-glow-section {
    position: relative;
    overflow: hidden;
    background-color: #111110;
    display: flex;
    align-items: center;
    /* capped well under 100vh so the hero fits comfortably beneath the
       announcement bar + navbar on first load instead of overflowing the
       viewport */
    min-height: clamp(420px, 68vh, 620px);
}

.hero-glow-bg-svg,
.hero-glow-strips-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* === Light strip draw-in animation === */

.hero-glow-strip .outer,
.hero-glow-strip .core,
.hero-glow-strip .line {
    stroke-dasharray: var(--strip-len);
    stroke-dashoffset: var(--strip-len);
    animation-fill-mode: forwards;
}

@keyframes hero-draw-strip {
    from { stroke-dashoffset: var(--strip-len); }
    to   { stroke-dashoffset: 0; }
}

@keyframes hero-glow-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* load order (top -> bottom): A-ceil, B-ceil, A-floor, B-floor */

.hero-glow-strip[data-strip="a-ceil"] .outer {
    animation: hero-draw-strip .55s ease-in forwards, hero-glow-in .33s ease-out forwards;
    animation-delay: 0s, .17s;
}
.hero-glow-strip[data-strip="a-ceil"] .core,
.hero-glow-strip[data-strip="a-ceil"] .line {
    animation: hero-draw-strip .55s ease-in forwards;
}

.hero-glow-strip[data-strip="b-ceil"] .outer {
    animation: hero-draw-strip .55s ease-in forwards, hero-glow-in .33s ease-out forwards;
    animation-delay: .35s, .52s;
}
.hero-glow-strip[data-strip="b-ceil"] .core,
.hero-glow-strip[data-strip="b-ceil"] .line {
    animation: hero-draw-strip .55s ease-in forwards;
    animation-delay: .35s;
}

.hero-glow-strip[data-strip="a-floor"] .outer {
    animation: hero-draw-strip .72s ease-in forwards, hero-glow-in .43s ease-out forwards;
    animation-delay: .75s, .97s;
}
.hero-glow-strip[data-strip="a-floor"] .core,
.hero-glow-strip[data-strip="a-floor"] .line {
    animation: hero-draw-strip .72s ease-in forwards;
    animation-delay: .75s;
}

.hero-glow-strip[data-strip="b-floor"] .outer {
    animation: hero-draw-strip .72s ease-in forwards, hero-glow-in .43s ease-out forwards;
    animation-delay: .9s, 1.12s;
}
.hero-glow-strip[data-strip="b-floor"] .core,
.hero-glow-strip[data-strip="b-floor"] .line {
    animation: hero-draw-strip .72s ease-in forwards;
    animation-delay: .9s;
}

@media (prefers-reduced-motion: reduce) {
    .hero-glow-strip .outer,
    .hero-glow-strip .core,
    .hero-glow-strip .line {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* === Hero copy, overlaid on the dark scene === */

.hero-glow-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home .hero-glow-content .eyebrow {
    color: var(--brand-accent-on-dark);
}

.home .hero-glow-content h1 {
    color: #fff;
}

.home .hero-glow-content .hero-tagline {
    color: #e9e6dd;
}

.home .hero-glow-content .lead-text {
    color: #c7c4bb;
}

.home .hero-glow-content .btn-brand-outline {
    border-color: var(--brand-accent-on-dark);
    color: var(--brand-accent-on-dark);
}

.home .hero-glow-content .btn-brand-outline:hover,
.home .hero-glow-content .btn-brand-outline:focus {
    background-color: var(--brand-accent-on-dark);
    border-color: var(--brand-accent-on-dark);
    color: var(--brand-ink);
}