/* Home: intro above logo, logo uses remaining space (no vertical centring) */
.content--home {
    width:                  100%;
    max-width:              none;
    padding:                clamp(18px, 3vw, 56px) var(--container-pad-x);
    min-height:             0;
    display:                flex;
    flex-direction:         column;
    justify-content:        flex-start;
    gap:                    clamp(14px, 3vh, 28px);
}


.home-intro {
    width:                  100%;
    max-width:              980px;
    margin:                 0 auto;
    text-align:             left;
}

.home-intro p {
    margin:                 0 0 clamp(10px, 1.8vh, 16px);
    font-size:              clamp(1.02rem, 1.0vw + 0.75rem, 1.18rem);
    line-height:            1.45;
    color:                  rgb(255 255 255 / 0.86);
    letter-spacing:         0.01em;
}

.home-intro p:last-child {
    margin-bottom:          0;
}

.home-hero {
    flex:                   1 1 auto;
    width:                  100%;
    display:                flex;
    align-items:            flex-start;
    justify-content:        center;
    min-height:             0;
}

.hero-logo-wrap {
    position:               relative;
    width:                  min(1200px, 100%);
    height:                 clamp(260px, 52vh, 640px);
}

.hero-logo-inline,
.hero-logo-inline svg {
    width:                  100%;
    height:                 100%;
    display:                block;
}

.hero-logo-inline svg {
    overflow:               visible;
}

/* Sparkle positioning is percentage-based relative to .hero-logo-wrap */
.oryx-eye-sparkle {
    /* Automatically updated by js to sit exactly on the oryx eye */
    --eye-x:                92.013%;
    --eye-y:                40.607%;

    /* Visual tuning */
    --sparkle-size:         clamp(24px, 2vw, 49px);

    position:               absolute;
    left:                   var(--eye-x);
    top:                    var(--eye-y);
    width:                  var(--sparkle-size);
    height:                 var(--sparkle-size);
    transform:              translate(-50%, -50%) scale(0.60) rotate(0deg);
    opacity:                0;

    background:
        radial-gradient(circle, rgb(255 255 255 / 0.95) 0 22%, rgb(255 255 255 / 0) 55%),
        conic-gradient(
            from 0deg,
            rgb(255 232 56 / 0)      0  10%,
            rgb(255 232 56 / 0.95)  10% 12%,
            rgb(255 232 56 / 0)     12% 25%,
            rgb(255 232 56 / 0.85)  25% 27%,
            rgb(255 232 56 / 0)     27% 50%,
            rgb(255 232 56 / 0.95)  50% 52%,
            rgb(255 232 56 / 0)     52% 75%,
            rgb(255 232 56 / 0.85)  75% 77%,
            rgb(255 232 56 / 0)     77% 100%
        );

    border-radius:          999px;
    filter:
        drop-shadow(0 0  6px rgb(255 232 56 / 0.55))
        drop-shadow(0 0 14px rgb(255 232 56 / 0.35));
    animation:              oryx-sparkle 1.8s ease-in-out infinite;
    pointer-events:         none;
}

@keyframes oryx-sparkle {
    0% {
        opacity:            0;
        transform:          translate(-50%, -50%) scale(0.55) rotate(0deg);
        filter:
            drop-shadow(0 0 2px rgb(255 232 56 / 0.25))
            drop-shadow(0 0 8px rgb(255 232 56 / 0.18));
    }
    12% {
        opacity:            0.85;
    }
    20% {
        opacity:            1;
        transform:          translate(-50%, -50%) scale(1.20) rotate(18deg);
        filter:
            drop-shadow(0 0 8px rgb(255 232 56 / 0.70))
            drop-shadow(0 0 22px rgb(255 232 56 / 0.45));
    }
    36% {
        opacity:            0.25;
        transform:          translate(-50%, -50%) scale(0.75) rotate(35deg);
    }
    100% {
        opacity:            0;
        transform:          translate(-50%, -50%) scale(0.60) rotate(70deg);
        filter:
            drop-shadow(0 0 2px rgb(255 232 56 / 0.22))
            drop-shadow(0 0 8px rgb(255 232 56 / 0.15));
    }
}

@media (prefers-reduced-motion: reduce) {
    .oryx-eye-sparkle {
        animation:          none;
        opacity:            0.85;
        transform:          translate(-50%, -50%) scale(0.85);
    }
}

/* Tighten on small screens so text does not crush the logo */
@media (max-width: 700px) {
    .hero-logo-wrap {
        height:             clamp(220px, 46vh, 520px);
    }

    .content--home {
        padding:            clamp(16px, 4vw, 26px) var(--container-pad-x);
        gap:                clamp(12px, 2.5vh, 20px);
    }
}