/* static/css/hero.css */
:root {
    --hero-navy: #0a1628;
    --hero-deep: #060d18;
    --hero-teal: #2dd4bf;
    --hero-teal-light: #5eead4;
    --hero-text: #f8fafc;
    --hero-muted: #cbd5e1;
}


html {
    scroll-behavior: smooth;
}


body > header {
    position: fixed !important;
    inset: 0 0 auto;
    z-index: 50;
    width: 100%;
}


body > header > div {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition:
        background-color 350ms ease,
        border-color 350ms ease,
        box-shadow 350ms ease,
        backdrop-filter 350ms ease;
}


body > header.is-scrolled > div {
    background: rgba(6, 13, 24, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}


/* =========================================================
   Navbar readability on hero
   - celý bar zůstává průhledný
   - jen logo + pravá akce mají lokální ztmavení
   ========================================================= */


body > header .navbar-start > a.btn,
body > header .navbar-end > a.btn,
body > header .navbar-end > .btn {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
}


/*
 * Měkký tmavý polštář za logem / buttony.
 * Funguje líp než blur: nerozmazává body do tyrkysové skvrny.
 */
body > header:not(.is-scrolled) .navbar-start > a.btn::before,
body > header:not(.is-scrolled) .navbar-end > a.btn::before,
body > header:not(.is-scrolled) .navbar-end > .btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    background: radial-gradient(
        ellipse at center,
        rgba(4, 10, 18, 0.42) 0%,
        rgba(4, 10, 18, 0.18) 46%,
        rgba(4, 10, 18, 0.00) 74%
    );
    opacity: 1;
    transition: opacity 280ms ease;
}


/* Logo */
body > header:not(.is-scrolled) .navbar-start > a.btn::before {
    inset: -14px -22px -14px -18px;
}


/* Přihlášení */
body > header:not(.is-scrolled) .navbar-end > a.btn-ghost::before {
    inset: -12px -16px;
}


/* Registrace — skoro nic */
body > header:not(.is-scrolled) .navbar-end > a.btn-primary::before {
    inset: -10px -12px;
    background: radial-gradient(
        ellipse at center,
        rgba(4, 10, 18, 0.28) 0%,
        rgba(4, 10, 18, 0.10) 50%,
        rgba(4, 10, 18, 0.00) 74%
    );
}


/* Po scrollu halo pryč — bar už je solid/glass */
body > header.is-scrolled .navbar-start > a.btn::before,
body > header.is-scrolled .navbar-end > a.btn::before,
body > header.is-scrolled .navbar-end > .btn::before {
    opacity: 0;
}


/*
 * Extra čitelnost bílého loga / ghost textu přes body.
 * drop-shadow je levný a nevytváří blur skvrny.
 */
body > header:not(.is-scrolled) .navbar-start > a.btn {
    filter:
        drop-shadow(0 1px 1px rgba(4, 10, 18, 0.35))
        drop-shadow(0 0 10px rgba(4, 10, 18, 0.25));
}


body > header:not(.is-scrolled) .navbar-end > a.btn-ghost {
    text-shadow:
        0 1px 1px rgba(4, 10, 18, 0.45),
        0 0 8px rgba(4, 10, 18, 0.25);
}


body > header.is-scrolled .navbar-start > a.btn {
    filter: none;
}


body > header.is-scrolled .navbar-end > a.btn-ghost {
    text-shadow: none;
}


/* =========================================================
   Hero layout — flex column:
   - .hero-content se roztáhne přes volné místo a centrovaně drží obsah
   - .hero-scroll sedí vždy na hraně foldu, v flow (ne absolute),
     takže se nikdy nepřekryje s CTA a nikdy "nevisí ve vzduchu"
   ========================================================= */


.equamate-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--hero-text);


    background:
        radial-gradient(
            ellipse 78% 56% at 50% 46%,
            rgba(24, 78, 98, 0.34) 0%,
            rgba(16, 54, 74, 0.20) 34%,
            rgba(10, 28, 46, 0.09) 56%,
            transparent 74%
        ),
        linear-gradient(145deg, var(--hero-navy), var(--hero-deep));


    padding-top: clamp(3.25rem, 6.5vh, 5.25rem);
    padding-bottom: 1.25rem; /* offset scroll-linku od spodní hrany foldu */
}
.equamate-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(6, 13, 24, 0.28) 0%,
        rgba(6, 13, 24, 0.10) 12%,
        transparent 24%,
        transparent 74%,
        rgba(6, 13, 24, 0.40) 100%
    );
}
#matching-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.hero-content {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;        /* roztáhne se přes volné místo mezi navbar a scroll-link */
    min-height: 0;         /* dovolí flex shrink na krátkých viewportech */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: min(100% - 2rem, 1100px);
    margin-inline: auto;
    text-align: center;


    /*
     * Jemně níž, ať story nemá kolizi s nadpisem.
     */
    transform: translateY(clamp(10px, 1.8vh, 24px));
}


.hero-title {
    max-width: 12ch;
    margin: 0;
    color: #fff;
    font-family: "DM Serif Display", Georgia, serif;
    font-size: clamp(3.25rem, 6.8vw, 7rem);
    font-weight: 400;
    line-height: 0.93;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: 0 3px 32px rgba(0, 0, 0, 0.28);
}


.hero-subtitle {
    margin: clamp(1.5rem, 2.2vw, 2.2rem) 0 0;
    color: var(--hero-muted);
    font-size: clamp(1.25rem, 1.25vw, 1.45rem);
    font-weight: 500;
    line-height: 1.65;
}


.hero-subtitle span {
    display: block;
}


.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(1.7rem, 2.2vw, 2.5rem);
}


.hero-cta.btn.btn-primary {
    min-height: clamp(3.1rem, 3.2vw, 3.75rem);
    padding-inline: clamp(1.7rem, 2.5vw, 2.4rem);
    border: 1px solid rgba(94, 234, 212, 0.68);
    background: var(--hero-teal);
    color: #06211f;
    font-size: clamp(0.95rem, 0.9vw, 1.12rem);
    font-weight: 700;
    box-shadow: 0 8px 28px rgba(45, 212, 191, 0.14);
}


.hero-cta.btn.btn-primary:hover {
    border-color: var(--hero-teal-light);
    background: var(--hero-teal-light);
    transform: translateY(-1px);
}


.hero-note {
    margin: 0.8rem 0 0;
    color: rgba(226, 232, 240, 0.58);
    font-size: clamp(0.78rem, 0.72vw, 0.95rem);
}


/*
 * Scroll-link v flow — vždy na hraně foldu, centrovaný přes align-self.
 * Žádné absolute, žádný translateX; pozice se neřídí výškou viewportu.
 */
.hero-scroll {
    position: static;
    z-index: 3; /* funguje i u flex itemu — drží link nad ::after přechodem */
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    margin-top: 1rem;   /* pojistná mezera od CTA na krátkých viewportech */
    padding: 0.5rem;
    color: rgba(226, 232, 240, 0.6);
    font-size: clamp(0.98rem, 0.95vw, 1.15rem);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s ease;
}


.hero-scroll:hover {
    color: rgba(226, 232, 240, 0.8);
}


.hero-scroll-arrow {
    display: inline-block;
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1;
    animation: hero-arrow 2.8s ease-in-out infinite;
}


@keyframes hero-arrow {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(-2px);
    }


    50% {
        opacity: 1;
        transform: translateY(4px);
    }
}


@media (min-width: 1800px) {
    .hero-content {
        transform:
            translateY(clamp(12px, 1.5vh, 22px))
            scale(1.08);
        transform-origin: center center;
    }
}


@media (max-width: 640px) {
    .equamate-hero {
        min-height: 590px;
        padding-top: clamp(4.75rem, 10vh, 6.5rem);
        padding-bottom: 1.25rem; /* stejný offset od foldu jako desktop */


        background:
            radial-gradient(
                ellipse 120% 54% at 50% 48%,
                rgba(24, 78, 98, 0.36) 0%,
                rgba(16, 54, 74, 0.22) 34%,
                rgba(10, 28, 46, 0.10) 56%,
                transparent 76%
            ),
            linear-gradient(145deg, var(--hero-navy), var(--hero-deep));
    }


    .hero-content {
        width: min(100% - 2.5rem, 560px);
        transform: translateY(clamp(18px, 3.4vh, 38px));
    }


    .hero-subtitle {
        margin-top: 1.35rem;
    }


    .hero-actions {
        margin-top: 1.55rem;
    }
}


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


    .hero-scroll-arrow {
        animation: none;
    }


    .hero-cta.btn.btn-primary:hover {
        transform: none;
    }
}