/* Shared professional hero styles for the sports academy page and hero sample, layered on css/sports-academy.css.
   Uses the site's own palette and Poppins, with status-dot, chip and CTA motion that respects reduced-motion preferences. */

.hp-hero {
    background:
        radial-gradient(900px 520px at 88% -6%, rgba(56, 110, 255, 0.42), transparent 62%),
        radial-gradient(760px 460px at -8% 108%, rgba(0, 178, 255, 0.18), transparent 60%),
        linear-gradient(160deg, #000027 0%, #050c38 52%, #0b1a55 100%);
    padding: 84px 0 96px;
}

.hp-hero .sa-hero__eyebrow {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 24px;
    max-width: 640px;
}

.hp-pill {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #dbe7ff;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0.07em;
    padding: 8px 16px 8px 12px;
    text-transform: uppercase;
}

.hp-pill::before {
    background: #3ddc97;
    border-radius: 50%;
    content: "";
    flex: none;
    height: 8px;
    width: 8px;
}

.hp-sub {
    color: #aebfe8;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.6;
}

.hp-hero h1 {
    font-size: clamp(2.4rem, 4.5vw, 4.3rem);
    font-weight: 760;
    letter-spacing: -0.042em;
    line-height: 1.05;
    max-width: 760px;
}

.hp-grad {
    background: linear-gradient(92deg, #8db8ff 0%, #5fe3ff 55%, #bff3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #8db8ff;
    -webkit-text-fill-color: transparent;
    padding-bottom: 0.06em;
}

.hp-typing {
    animation: none;
}

.hp-typing .hp-l {
    visibility: hidden;
}

.hp-typing .hp-l.is-on {
    visibility: visible;
}

.hp-caret {
    animation: hp-caret-blink 0.7s steps(1) infinite;
    background: rgba(255, 255, 255, 0.85);
    display: inline-block;
    height: 0.86em;
    margin-left: 2px;
    vertical-align: -0.06em;
    width: 3px;
}

.hp-caret.is-done {
    animation: none;
    opacity: 0;
    transition: opacity 500ms ease;
}

@keyframes hp-caret-blink {
    50% { opacity: 0.25; }
}

.hp-hero .sa-hero__intro {
    color: #c6d5fb;
    font-size: clamp(1rem, 1.3vw, 1.14rem);
    margin: 24px 0 32px;
    max-width: 600px;
}

.hp-hero .sa-primary-button {
    box-shadow: 0 14px 36px rgba(30, 89, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    gap: 16px;
    padding: 12px 12px 12px 26px;
}

.hp-hero .sa-primary-button i {
    background: #ffffff;
    border-radius: 50%;
    color: var(--sa-blue-dark);
    display: grid;
    font-size: 0.9rem;
    height: 30px;
    place-items: center;
    width: 30px;
}

.hp-hero .sa-secondary-button {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.26);
}

/* Hero CTA feedback, enabled only on the main sports academy page. */
.hp-hero .sa-hero__actions--animated {
    animation: none;
}

.hp-hero .sa-hero__actions--animated a {
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transition: transform 200ms var(--sa-ease-out), background-color 180ms ease, border-color 180ms ease;
}

.hp-hero .sa-hero__actions--animated .hp-button__label,
.hp-hero .sa-hero__actions--animated i {
    position: relative;
    z-index: 1;
}

.hp-hero .sa-hero__actions--animated i {
    flex: none;
    transition: transform 200ms var(--sa-ease-out);
}

.hp-hero .sa-hero__actions--animated a::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    content: "";
    inset: 0 auto 0 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-150%) skewX(-20deg);
    transition: transform 260ms var(--sa-ease-out), opacity 180ms ease;
    width: 40%;
}

@media (hover: hover) and (pointer: fine) {
    .hp-hero .sa-hero__actions--animated a:hover {
        transform: translateY(-3px);
    }

    .hp-hero .sa-hero__actions--animated a:hover::before {
        opacity: 1;
        transform: translateX(350%) skewX(-20deg);
    }

    .hp-hero .sa-hero__actions--animated .sa-primary-button:hover i {
        transform: translateX(4px) rotate(-25deg);
    }

    .hp-hero .sa-hero__actions--animated .sa-secondary-button:hover i {
        transform: translate(3px, -3px);
    }
}

.hp-hero .sa-hero__actions--animated a:active {
    transform: scale(0.98);
    transition-duration: 100ms;
}

/* Separate entrance translation from the hover transform so both remain responsive. */
@keyframes hp-button-enter-left {
    from { opacity: 0; translate: -100vw 0; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes hp-button-enter-right {
    from { opacity: 0; translate: 100vw 0; }
    to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .hp-hero .sa-hero__actions--animated .sa-primary-button {
        animation: hp-button-enter-left 780ms var(--sa-ease-out) 160ms backwards;
    }

    .hp-hero .sa-hero__actions--animated .sa-secondary-button {
        animation: hp-button-enter-right 780ms var(--sa-ease-out) 220ms backwards;
    }

    .hp-hero .sa-hero__actions--animated a:focus-visible {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-hero .sa-hero__actions--animated a,
    .hp-hero .sa-hero__actions--animated a:hover,
    .hp-hero .sa-hero__actions--animated a:active,
    .hp-hero .sa-hero__actions--animated a i,
    .hp-hero .sa-hero__actions--animated .sa-primary-button:hover i,
    .hp-hero .sa-hero__actions--animated .sa-secondary-button:hover i {
        transform: none;
    }

    .hp-hero .sa-hero__actions--animated a::before {
        display: none;
    }
}

.hp-points {
    color: #b9c9f2;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.86rem;
    font-weight: 600;
    gap: 10px 22px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.hp-points li {
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.hp-points i {
    color: #5fe3ff;
}

.hp-hero .sa-hero__visual::before {
    background: radial-gradient(closest-side, rgba(72, 128, 255, 0.55), rgba(72, 128, 255, 0));
    content: "";
    filter: blur(34px);
    inset: 6% -4% -8% 8%;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.hp-hero .sa-product-motion-shell {
    z-index: 1;
}

.hp-hero .sa-product-frame {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    box-shadow: 0 40px 100px rgba(0, 0, 40, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.06);
}

.hp-hero .sa-hero__proof li {
    backdrop-filter: blur(8px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
    border-color: rgba(255, 255, 255, 0.14);
}

.hp-chip {
    align-items: center;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 40, 0.35);
    color: var(--sa-ink);
    display: flex;
    font-size: 0.8rem;
    font-weight: 700;
    gap: 10px;
    line-height: 1.25;
    padding: 9px 16px 9px 9px;
    position: absolute;
    white-space: nowrap;
    z-index: 3;
}

.hp-chip i {
    background: linear-gradient(135deg, var(--sa-blue), var(--sa-blue-dark));
    border-radius: 10px;
    color: #ffffff;
    display: grid;
    flex: none;
    font-size: 1rem;
    height: 34px;
    place-items: center;
    width: 34px;
}

.hp-chip small {
    color: var(--sa-muted);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
}

.hp-chip--a {
    left: -34px;
    top: 12%;
}

.hp-chip--b {
    right: -18px;
    top: 46%;
}

.hp-chip--c {
    bottom: -24px;
    left: 8%;
}

@media (min-width: 1200px) {
    .hp-chip--a {
        left: -52px;
    }

    .hp-chip--b {
        right: -30px;
    }
}

@media (max-width: 991px) {
    .hp-hero {
        padding: 56px 0 72px;
    }

    .hp-chip {
        display: none;
    }

    .hp-hero .sa-hero__visual--animated-chips {
        margin-bottom: 24px;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip {
        display: flex;
        max-width: calc(100% - 24px);
        white-space: normal;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip--a {
        left: 8px;
        top: 8%;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip--b {
        right: 8px;
        top: 46%;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip--c {
        bottom: -12px;
        left: 8%;
    }
}

@media (max-width: 767px) {
    .hp-hero .sa-hero__eyebrow {
        margin-bottom: 20px;
    }

    .hp-points {
        gap: 10px 18px;
        margin-top: 24px;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip {
        border-radius: 12px;
        font-size: 0.72rem;
        gap: 7px;
        padding: 7px 10px 7px 7px;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip i {
        border-radius: 8px;
        font-size: 0.85rem;
        height: 28px;
        width: 28px;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip small {
        font-size: 0.62rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes hp-ping {
        0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5); }
        70% { box-shadow: 0 0 0 10px rgba(61, 220, 151, 0); }
        100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
    }

    @keyframes hp-float {
        to { translate: 0 -8px; }
    }

    .hp-pill::before {
        animation: hp-ping 2.4s ease-out infinite;
    }

    .hp-chip {
        animation: hp-float 6s ease-in-out infinite alternate;
    }

    .hp-chip--b {
        animation-delay: -2s;
    }

    .hp-chip--c {
        animation-delay: -4s;
    }
}

/* Main-page card entrances; mobile replays when the image re-enters view.
   Floating uses a separate translate property to avoid competing with the entrance. */
@keyframes hp-chip-enter-left {
    from { opacity: 0; transform: translate3d(-100vw, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hp-chip-enter-right {
    from { opacity: 0; transform: translate3d(100vw, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hp-chip-enter-bottom {
    from { opacity: 0; transform: translate3d(0, 100vh, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    .hp-hero .sa-hero__visual--animated-chips .hp-chip {
        animation:
            hp-chip-enter-left 780ms var(--sa-ease-out) 420ms backwards,
            hp-float 6s var(--sa-ease-in-out) 1200ms infinite alternate;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip--b {
        animation-name: hp-chip-enter-right, hp-float;
        animation-delay: 480ms, 1260ms;
    }

    .hp-hero .sa-hero__visual--animated-chips .hp-chip--c {
        animation-name: hp-chip-enter-bottom, hp-float;
        animation-delay: 540ms, 1320ms;
    }
}

@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
    .hp-hero .sa-hero__visual--animated-chips.hp-chips-observed:not(.hp-chips-visible) .hp-chip {
        animation: none;
        opacity: 0;
    }
}