/**
 * Landing-page hero styles for the Santeri Leinonen theme.
 *
 * Ported from landing-animated.html. All selectors are namespaced
 * under .sl-hero so they can't collide with WordPress core or any
 * other theme CSS. The CSS is enqueued conditionally on the front
 * page only — see santeri_leinonen_enqueue_assets() in functions.php.
 *
 * Inner element class names (.globe-wrap, .stars, .star, .bright,
 * .faint, etc.) are scoped via the .sl-hero ancestor selector rather
 * than being prefixed to .sl-* — keeps the markup in front-page.php
 * unchanged from the dev sandbox and the descendants stay readable.
 *
 * @package Santeri_Leinonen
 */

/* ============================================================
   Scoped reset — applied only inside the hero, NOT globally.
   ============================================================ */
.sl-hero,
.sl-hero *,
.sl-hero *::before,
.sl-hero *::after {
    box-sizing: border-box;
}

/* ============================================================
   Hero container
   ============================================================ */
.sl-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image:
        radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0.30) 0%,
            rgba(2, 4, 16, 0.70) 100%
        ),
        url('space-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #050814;
    overflow: hidden;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Globe wrap, halo, blurred ::before, dark ::after
   ============================================================ */
.sl-hero .globe-wrap {
    --globe-size: clamp(380px, 70vh, 760px);
    position: absolute;
    top: 50%;
    right: 0;
    width: var(--globe-size);
    height: var(--globe-size);
    transform: translate(18%, -50%);
    pointer-events: none;
    border-radius: 50%;
    box-shadow:
        -8px   0 50px  4px rgba(140, 215, 255, 0.45),
        -45px  0 130px     rgba(85,  180, 250, 0.30),
        -140px 0 290px     rgba(50,  130, 240, 0.18);
}

.sl-hero .globe-wrap::before {
    content: '';
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 5% 48%,
        rgba(140, 215, 255, 0.45) 0%,
        rgba(95,  185, 250, 0.25) 12%,
        rgba(55,  140, 240, 0.10) 25%,
        rgba(40,  100, 220, 0)    40%
    );
    filter: blur(28px);
    pointer-events: none;
}

.sl-hero .globe-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 22% 82%,
            rgba(0, 0, 8, 0.55) 0%,
            rgba(0, 0, 0, 0)   48%
        ),
        radial-gradient(
            circle at 88% 50%,
            rgba(0, 0, 8, 0.55) 0%,
            rgba(0, 0, 8, 0.25) 30%,
            rgba(0, 0, 0, 0)    60%
        ),
        radial-gradient(
            ellipse 55% 20% at 50% 100%,
            rgba(0, 0, 10, 0.50) 0%,
            rgba(0, 0, 8,  0.22) 35%,
            rgba(0, 0, 0,  0)    75%
        );
    pointer-events: none;
}

.sl-hero .globe {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

.sl-hero .globe-spark {
    position: absolute;
    top: 20%;
    left: 7%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background: rgb(230, 245, 255);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    box-shadow:
        0 0 3px  rgba(220, 240, 255, 1.0),
        0 0 9px  rgba(160, 215, 255, 0.85),
        0 0 22px rgba(95,  185, 255, 0.55),
        0 0 48px rgba(60,  160, 250, 0.30);
    animation: sl-spark-pulse 3.6s ease-in-out infinite;
}

@keyframes sl-spark-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1);    }
    50%      { opacity: 1.0;  transform: scale(1.18); }
}

/* ============================================================
   Twinkling stars
   ============================================================ */
.sl-hero .stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.sl-hero .star {
    position: absolute;
    background: #e6f1ff;
    border-radius: 50%;
    pointer-events: none;
    opacity: var(--base-opacity);
    animation: sl-twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    will-change: opacity;
}

.sl-hero .star.warm     { background: #ffe6c4; }

.sl-hero .star.bright {
    box-shadow: 0 0 5px rgba(170, 210, 255, 0.7);
}
.sl-hero .star.brightest {
    box-shadow:
        0 0 4px  rgba(210, 230, 255, 0.95),
        0 0 12px rgba(120, 180, 255, 0.55);
}

.sl-hero .star.star-violet { background: #c971ff; }
.sl-hero .star.star-violet.bright {
    box-shadow: 0 0 5px rgba(195, 130, 250, 0.75);
}
.sl-hero .star.star-violet.brightest {
    box-shadow:
        0 0 4px  rgba(220, 170, 255, 0.95),
        0 0 12px rgba(170, 80,  240, 0.60);
}

.sl-hero .star.star-blue { background: #4d8ce8; }
.sl-hero .star.star-blue.bright {
    box-shadow: 0 0 5px rgba(110, 165, 240, 0.75);
}
.sl-hero .star.star-blue.brightest {
    box-shadow:
        0 0 4px  rgba(150, 195, 250, 0.95),
        0 0 12px rgba(70,  140, 240, 0.60);
}

@keyframes sl-twinkle {
    0%, 100% { opacity: var(--base-opacity); }
    50%      { opacity: var(--peak-opacity); }
}

/* ============================================================
   Beam stars (4-point + optional 8-point diffraction crosses)
   ============================================================ */
.sl-hero .star-beam {
    --beam-size: 3px;
    --beam-length: 22px;
    position: absolute;
    width: var(--beam-size);
    height: var(--beam-size);
    background: #e6f1ff;
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 calc(var(--beam-size) * 1.8) rgba(205, 230, 255, 0.95),
        0 0 calc(var(--beam-size) * 5)   rgba(100, 165, 250, 0.55);
    animation: sl-beam-twinkle var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    will-change: opacity, transform;
}

.sl-hero .star-beam::before,
.sl-hero .star-beam::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.sl-hero .star-beam::before {
    width: var(--beam-length);
    height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right,
        rgba(230, 240, 255, 0)    0%,
        rgba(200, 230, 255, 0.85) 50%,
        rgba(230, 240, 255, 0)    100%);
}

.sl-hero .star-beam::after {
    width: 1px;
    height: var(--beam-length);
    transform: translate(-50%, -50%);
    background: linear-gradient(to bottom,
        rgba(230, 240, 255, 0)    0%,
        rgba(200, 230, 255, 0.85) 50%,
        rgba(230, 240, 255, 0)    100%);
}

.sl-hero .star-beam .beam-diag-a,
.sl-hero .star-beam .beam-diag-b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--diag-length, 0px);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(230, 240, 255, 0)    0%,
        rgba(200, 230, 255, 0.55) 50%,
        rgba(230, 240, 255, 0)    100%);
}
.sl-hero .star-beam .beam-diag-a { transform: translate(-50%, -50%) rotate( 45deg); }
.sl-hero .star-beam .beam-diag-b { transform: translate(-50%, -50%) rotate(-45deg); }

@keyframes sl-beam-twinkle {
    0%, 100% { opacity: 0.45; transform: scale(0.90); }
    50%      { opacity: 1.0;  transform: scale(1.15); }
}

/* ============================================================
   Hairlines (network/data-stream SVG)
   ============================================================ */
.sl-hero .hairlines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    filter:
        drop-shadow(0 0 0.5px rgba(130, 200, 255, 1.0))
        drop-shadow(0 0 1.5px rgba(60, 160, 250, 0.60));
}

.sl-hero .hairlines line,
.sl-hero .hairlines polyline,
.sl-hero .hairlines polygon {
    stroke: rgb(105, 200, 255);
    stroke-width: 0.8;
    stroke-opacity: 0.50;
    vector-effect: non-scaling-stroke;
    fill: none;
}

.sl-hero .hairlines ellipse {
    fill: rgb(165, 220, 255);
    fill-opacity: 0.95;
    stroke: none;
}

.sl-hero .hairlines ellipse.hollow {
    fill: none;
    stroke: rgb(135, 210, 255);
    stroke-opacity: 0.85;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.sl-hero .hairlines line.bright,
.sl-hero .hairlines polyline.bright,
.sl-hero .hairlines polygon.bright {
    stroke-opacity: 0.92;
    stroke-width: 1;
}
.sl-hero .hairlines line.faint,
.sl-hero .hairlines polyline.faint,
.sl-hero .hairlines polygon.faint {
    stroke-opacity: 0.28;
    stroke-width: 0.5;
}
.sl-hero .hairlines ellipse.bright { fill-opacity: 1.0; }
.sl-hero .hairlines ellipse.faint  { fill-opacity: 0.55; }

.sl-hero .hairlines line.right-side,
.sl-hero .hairlines polyline.right-side,
.sl-hero .hairlines polygon.right-side {
    stroke: url(#grad-right-fade);
    stroke-opacity: 1;
    stroke-width: 0.5;
}

.sl-hero .hairlines line.edge-ray-left {
    stroke: url(#grad-edge-ray-left);
    stroke-opacity: 1;
    stroke-width: 0.5;
}
.sl-hero .hairlines line.edge-ray-right {
    stroke: url(#grad-edge-ray-right);
    stroke-opacity: 1;
    stroke-width: 0.4;
}

/* ============================================================
   Reduced motion — disable scene animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .sl-hero .star,
    .sl-hero .star-beam,
    .sl-hero .globe-spark { animation: none; }
}

/* ============================================================
   Hero text content (ACF fields populate the actual copy in W6)
   ============================================================ */
.sl-hero .content {
    position: absolute;
    left: clamp(60px, 10vw, 140px);
    top: 22%;
    z-index: 5;
    max-width: 540px;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: left;
    pointer-events: none;
}

.sl-hero .eyebrow {
    margin: 0 0 2rem 0;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(180, 200, 255, 0.72);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.sl-hero .content h1 {
    margin: 0 0 2.25rem 0;
    font-weight: 400;
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-shadow:
        0 2px 6px  rgba(0, 0, 0, 0.90),
        0 4px 18px rgba(0, 0, 0, 0.55);
}

.sl-hero .body-text {
    margin: 0 0 2.25rem 0;
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 480px;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.85),
        0 4px 14px rgba(0, 0, 0, 0.45);
}

.sl-hero .cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    pointer-events: auto;
}

.sl-hero .cta {
    display: inline-block;
    padding: 13px 22px;
    font-family: inherit;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                background 0.18s ease, border-color 0.18s ease;
    user-select: none;
}
.sl-hero .cta:hover { transform: translateY(-1px); }

.sl-hero .cta-primary {
    background: #ff7a1a;
    color: #ffffff;
    border: 1px solid #ff7a1a;
    box-shadow: 0 3px 10px rgba(255, 122, 26, 0.16);
}
.sl-hero .cta-primary:hover {
    background: #ff8a30;
    border-color: #ff8a30;
    box-shadow: 0 5px 18px rgba(255, 122, 26, 0.32);
}

.sl-hero .cta-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.70);
}
.sl-hero .cta-secondary:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: #ffffff;
}

/* ============================================================
   Fade-up animation — text waits for body.sl-scene-ready, set
   by the texture loader's onLoad callback in landing.js (W5).
   ============================================================ */
@keyframes sl-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.sl-hero .eyebrow,
.sl-hero .content h1,
.sl-hero .body-text,
.sl-hero .cta-row {
    opacity: 0;
    will-change: opacity, transform;
}

body.sl-scene-ready .sl-hero .content h1 { animation: sl-fade-up 0.6s ease 0.0s forwards; }
body.sl-scene-ready .sl-hero .eyebrow    { animation: sl-fade-up 1.0s ease 1.4s forwards; }
body.sl-scene-ready .sl-hero .body-text  { animation: sl-fade-up 1.0s ease 1.6s forwards; }
body.sl-scene-ready .sl-hero .cta-row    { animation: sl-fade-up 1.0s ease 2.2s forwards; }

@media (prefers-reduced-motion: reduce) {
    .sl-hero .eyebrow,
    .sl-hero .content h1,
    .sl-hero .body-text,
    .sl-hero .cta-row {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ============================================================
   Mobile hero — simplified: keep the running starfield, drop
   the globe and the hairlines so the layout has room to
   breathe on a small screen. Text is centered vertically and
   spans the full viewport with safe gutters; CTAs stack. The
   hamburger nav (style.css) handles the menu.
   ============================================================ */
@media (max-width: 720px) {
    .sl-hero .globe-wrap,
    .sl-hero .hairlines {
        display: none;
    }

    .sl-hero .content {
        position: absolute;
        left: 24px;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        max-width: none;
    }

    .sl-hero .eyebrow {
        margin-bottom: 1.25rem;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }

    .sl-hero .content h1 {
        margin-bottom: 1.5rem;
        font-size: clamp(2.1rem, 9vw, 2.8rem);
        line-height: 1.08;
    }

    .sl-hero .body-text {
        margin-bottom: 1.75rem;
        font-size: 1rem;
        line-height: 1.55;
    }

    .sl-hero .cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sl-hero .cta {
        text-align: center;
        padding: 14px 20px;
    }
}