/* ==========================================================================
   Front-page hero background
   A 3D field of glowing blue dots rolling like a calm sea (drawn by
   assets/js/hero-waves.js), a light band on the horizon and a slow
   ambient glow. The headline side is shaded so text stays readable.
   ========================================================================== */

.hero-section-2.hero-animated {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: none;
    background-color: var(--DarkBg);
}

.hero-animated > .container {
    position: relative;
    z-index: 1;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Ambient glow + light band where the sea meets the horizon (42%) */
.hero-bg::before {
    content: "";
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(60% 9% at 55% 44%, rgba(120, 190, 255, 0.28), transparent 70%),
        radial-gradient(42% 30% at 62% 40%, rgba(67, 165, 254, 0.22), transparent 70%),
        radial-gradient(30% 34% at 15% 15%, rgba(0, 100, 193, 0.16), transparent 70%);
    animation: hero-glow 18s ease-in-out infinite alternate;
}

.hero-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-bg__canvas.is-ready { opacity: 1; }

/* Shade the headline side, soften the top, fade the bottom into the page */
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 5, 30, 0.78) 0%, rgba(5, 5, 30, 0.45) 35%, rgba(5, 5, 30, 0) 62%),
        linear-gradient(180deg, rgba(5, 5, 30, 0.5) 0%, rgba(5, 5, 30, 0) 30%, rgba(5, 5, 30, 0) 80%, var(--DarkBg) 100%);
}

@keyframes hero-glow {
    from { opacity: 0.85; transform: translate3d(0, 0, 0) scale(1); }
    to   { opacity: 1;    transform: translate3d(-3%, 1.5%, 0) scale(1.06); }
}

@media (max-width: 991px) {
    /* Text spans the full width on small screens: dim the lines a little more */
    .hero-bg::after {
        background:
            linear-gradient(180deg, rgba(5, 5, 30, 0.55) 0%, rgba(5, 5, 30, 0.6) 55%, rgba(5, 5, 30, 0.2) 80%, var(--DarkBg) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg::before { animation: none; }
    .hero-bg__canvas { transition: none; }
}

/* Headline: the main statement big, its continuation as a smaller line, so
   the client's long headline reads as one short statement */
.hero-title {
    margin: 0 0 28px;
    font-size: clamp(40px, 4.4vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--whiteColor);
}
.hero-title__main {
    display: block;
}
.hero-title__sub {
    display: block;
    margin-top: 0.3em;
    font-size: 0.5em;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    background: var(--gridColor);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Hero chart card — "Markkinoinnin tasapaino"
   Waste (grey bars) shrinks while results (blue line) grow. Glass card so
   it stays readable on top of the animated dot sea.
   ========================================================================== */

.mb-chart {
    position: relative;
    top: -56px;             /* sit higher in the hero (top, not transform: AOS animates transform) */
    max-width: 520px;
    margin: 0 0 0 auto;
    padding: 26px 26px 20px;
    /* see-through glass: the dot sea stays visible behind the chart */
    background: linear-gradient(160deg, rgba(20, 30, 70, 0.28) 0%, rgba(9, 13, 38, 0.18) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    -webkit-backdrop-filter: blur(3px) saturate(130%);
    backdrop-filter: blur(3px) saturate(130%);
    box-shadow: 0 0 0 1px rgba(67, 165, 254, 0.06) inset;
}

.mb-chart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 14px;
}
.mb-chart__title { font-family: var(--headingFont); font-size: 17px; font-weight: 700; color: #fff; }
.mb-chart__legend { display: flex; gap: 16px; }
.mb-chart__key {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--paragraphColorSecond);
}
.mb-chart__key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.mb-chart__key--waste::before { background: linear-gradient(180deg, rgba(143, 163, 196, 0.7), rgba(143, 163, 196, 0.2)); }
.mb-chart__key--result::before { height: 3px; border-radius: 2px; background: var(--mainColor2); box-shadow: 0 0 8px var(--mainColor2); }

.mb-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mb-chart__grid line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.mb-chart__bars rect { fill: url(#mbWaste); }
.mb-chart__area { fill: url(#mbArea); }
.mb-chart__line {
    fill: none;
    stroke: var(--mainColor2);
    stroke-width: 3.5;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(67, 165, 254, 0.7));
}
.mb-chart__dot { fill: #fff; stroke: var(--mainColor2); stroke-width: 3; }
.mb-chart__pulse { fill: none; stroke: var(--mainColor2); stroke-width: 2; }

.mb-chart__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 13px;
    color: rgba(195, 205, 219, 0.7);
}

@media (prefers-reduced-motion: no-preference) {
    .mb-chart__bars rect {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: mb-bar-in 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) both;
        animation-delay: calc(0.6s + var(--i) * 0.09s);
    }
    .mb-chart__line {
        stroke-dasharray: 100;
        animation: mb-line-draw 1.6s cubic-bezier(0.45, 0, 0.25, 1) 1s both;
    }
    .mb-chart__area { animation: mb-fade-in 1s ease 1.8s both; }
    .mb-chart__dot { transform-box: fill-box; transform-origin: center; animation: mb-dot-in 0.4s ease-out 2.5s both; }
    .mb-chart__pulse {
        transform-box: fill-box;
        transform-origin: center;
        animation: mb-pulse 2.4s ease-out 2.9s infinite;
        opacity: 0;
    }
}

@keyframes mb-bar-in   { from { transform: scaleY(0); opacity: 0.3; } }
@keyframes mb-line-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes mb-fade-in  { from { opacity: 0; } }
@keyframes mb-dot-in   { from { transform: scale(0); } }
@keyframes mb-pulse {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(3.2); opacity: 0; }
}

/* While the logo intro covers the page, hold the chart animation; it resumes
   (from the start) as soon as the intro is removed */
html.intro-play .mb-chart__bars rect,
html.intro-play .mb-chart__line,
html.intro-play .mb-chart__area,
html.intro-play .mb-chart__dot,
html.intro-play .mb-chart__pulse { animation-play-state: paused; }