/* Site-wide motion — expo easing, clip reveals, hover gated, reduced-motion safe */

:root {
    --sm-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --sm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sm-ease-move: cubic-bezier(0.65, 0, 0.35, 1);
    --sm-press: 140ms;
    --sm-ui: 220ms;
    --sm-enter: 560ms;
    --sm-hero: 720ms;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.home-hero-swiper.swiper-container-fade .swiper-slide,
.home-hero-swiper.swiper-fade .swiper-slide {
    pointer-events: none;
}

.home-hero-swiper .swiper-slide-active,
.home-hero-swiper .swiper-slide-active a {
    pointer-events: auto;
}

/* ---------- Hero choreography (CSS only — photo stays for LCP) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .home-hero-copy > .home-eyebrow {
        animation: sm-rise var(--sm-enter) var(--sm-expo) 60ms both;
    }

    .home-hero-copy .home-eyebrow-line {
        transform-origin: left center;
        animation: sm-line 640ms var(--sm-expo) 140ms both;
    }

    .home-hero-title {
        animation: sm-title var(--sm-hero) var(--sm-expo) 110ms both;
    }

    .home-hero-lead {
        animation: sm-rise var(--sm-enter) var(--sm-expo) 220ms both;
    }

    .home-hero-copy > .home-hero-ctas {
        animation: none;
    }

    .home-hero-ctas > * {
        animation: sm-pop-in 520ms var(--sm-expo) both;
    }

    .home-hero-ctas > *:nth-child(1) { animation-delay: 300ms; }
    .home-hero-ctas > *:nth-child(2) { animation-delay: 360ms; }
    .home-hero-ctas > *:nth-child(3) { animation-delay: 420ms; }

    .home-platform .home-hero-ctas a.home-pill-pulse {
        animation:
            sm-pop-in 520ms var(--sm-expo) 360ms both,
            home-pill-pulse 2s linear 880ms infinite;
    }

    .home-hero-search {
        animation: sm-rise var(--sm-enter) var(--sm-expo) 460ms both;
    }

    .home-hero-nav,
    .home-hero-pagination {
        animation: sm-fade 360ms var(--sm-expo) 520ms both;
    }

    .home-hero-inner {
        transform: translateY(calc(var(--sm-hero-scroll, 0) * 32px));
        will-change: transform;
    }

    .home-hero-swiper .swiper-slide-active .home-hero-photo {
        animation: sm-ken 18s linear forwards;
        will-change: transform;
    }

    .home-hero-glow-gold {
        animation: sm-drift 16s var(--sm-ease-move) infinite;
    }

    .home-hero-glow-teal {
        animation: sm-drift 18s var(--sm-ease-move) infinite reverse;
    }

    .home-hero-glow-gold-corner {
        animation: sm-drift 22s var(--sm-ease-move) infinite;
    }

    .home-hero-glow-teal-corner {
        animation: sm-drift 20s var(--sm-ease-move) infinite reverse;
    }

    .home-nav-link {
        animation: sm-nav 420ms var(--sm-expo) both;
    }

    .home-nav-link:nth-child(1) { animation-delay: 40ms; }
    .home-nav-link:nth-child(2) { animation-delay: 70ms; }
    .home-nav-link:nth-child(3) { animation-delay: 100ms; }
    .home-nav-link:nth-child(4) { animation-delay: 130ms; }
    .home-nav-link:nth-child(5) { animation-delay: 160ms; }
    .home-nav-link:nth-child(6) { animation-delay: 190ms; }
    .home-nav-link:nth-child(7) { animation-delay: 220ms; }

    #site-main .auth .card {
        animation: sm-pop-in 560ms var(--sm-expo) both;
    }
}

@keyframes sm-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sm-title {
    from {
        opacity: 0;
        transform: translateY(22px);
        filter: blur(8px);
        clip-path: inset(0 0 35% 0);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
        clip-path: inset(0);
    }
}

@keyframes sm-line {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes sm-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sm-nav {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sm-pop-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sm-ken {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
}

@keyframes sm-drift {
    0%,
    100% { transform: translate(0, 0); }
    50% { transform: translate(16px, -10px); }
}

@keyframes sm-glow-pulse {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            0 0 18px rgba(197, 168, 114, 0.2),
            0 10px 24px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 0 32px 8px rgba(197, 168, 114, 0.42),
            0 10px 24px rgba(0, 0, 0, 0.2);
    }
}

@keyframes sm-pop {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.home-platform .home-hero-ctas a.home-pill-pulse:active {
    transform: none;
    animation-play-state: paused;
    scale: 0.97;
}

/* ---------- Scroll reveal ---------- */
html.js-motion .site-panel .sm-wait,
html.js-motion .site-panel .sm-wait.is-in,
html.js-motion #site-main.panel .sm-wait,
html.js-motion #site-main.panel .sm-wait.is-in {
    opacity: 1;
    transform: none;
}

html.js-motion .sm-wait {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--sm-enter) var(--sm-expo),
        transform var(--sm-enter) var(--sm-expo),
        box-shadow var(--sm-ui) var(--sm-expo),
        clip-path 640ms var(--sm-expo),
        filter 480ms var(--sm-expo);
    transition-delay: calc(var(--sm-i, 0) * 55ms);
}

html.js-motion .sm-wait.is-in {
    opacity: 1;
    transform: none;
}

html.js-motion .sm-wait-scale {
    transform: translateY(12px) scale(0.96);
}

html.js-motion .sm-wait-scale.is-in {
    transform: none;
}

html.js-motion .home-footer-logo,
html.js-motion .home-footer-logo.sm-wait,
html.js-motion .home-footer-logo.sm-wait-scale,
html.js-motion .home-footer-logo.sm-wait.is-in,
html.js-motion .home-footer-logo.sm-wait-scale.is-in {
    opacity: 1;
    transform: none;
}

/* Cards: image clip + body follow */
html.js-motion .sm-wait.sm-clip {
    opacity: 1;
    transform: none;
}

html.js-motion .sm-wait.sm-clip .home-card-media img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.1);
    transition:
        clip-path 680ms var(--sm-expo),
        transform 680ms var(--sm-expo);
    transition-delay: calc(var(--sm-i, 0) * 55ms);
}

html.js-motion .sm-wait.sm-clip.is-in .home-card-media img {
    clip-path: inset(0);
    transform: none;
}

html.js-motion .sm-wait.sm-clip .home-card-body,
html.js-motion .sm-wait.sm-clip .home-card-foot {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 480ms var(--sm-expo),
        transform 480ms var(--sm-expo);
    transition-delay: calc(var(--sm-i, 0) * 55ms + 90ms);
}

html.js-motion .sm-wait.sm-clip.is-in .home-card-body,
html.js-motion .sm-wait.sm-clip.is-in .home-card-foot {
    opacity: 1;
    transform: none;
}

html.js-motion .sm-wait.sm-quote {
    opacity: 1;
    transform: none;
}

html.js-motion .sm-wait.sm-quote .home-quote-ayah {
    clip-path: inset(0 0 100% 0);
    filter: blur(6px);
    transform: translateY(16px);
    transition:
        clip-path 700ms var(--sm-expo),
        filter 560ms var(--sm-expo),
        transform 700ms var(--sm-expo),
        opacity var(--sm-enter) var(--sm-expo);
}

html.js-motion .sm-wait.sm-quote.is-in .home-quote-ayah {
    clip-path: inset(0);
    filter: blur(0);
    transform: none;
}

html.js-motion .sm-wait.sm-quote .home-quote-inner footer,
html.js-motion .sm-wait.sm-quote footer {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 480ms var(--sm-expo) 120ms, transform 480ms var(--sm-expo) 120ms;
}

html.js-motion .sm-wait.sm-quote.is-in .home-quote-inner footer,
html.js-motion .sm-wait.sm-quote.is-in footer {
    opacity: 1;
    transform: none;
}

.home-section-head .home-eyebrow-line {
    transform-origin: right center;
    transition: transform 520ms var(--sm-expo);
}

html.js-motion .home-section-head.sm-wait:not(.is-in) .home-eyebrow-line {
    transform: scaleX(0);
}

html.js-motion .home-section-head.is-in .home-eyebrow-line {
    transform: scaleX(1);
    transition-delay: 90ms;
}

html.js-motion .home-section-head.sm-wait:not(.is-in) h2 {
    opacity: 0;
    transform: translateY(12px);
}

html.js-motion .home-section-head.is-in h2 {
    opacity: 1;
    transform: none;
    transition: opacity 520ms var(--sm-expo) 60ms, transform 520ms var(--sm-expo) 60ms;
}

html.js-motion .home-stat.sm-wait {
    transform: translateY(16px) scale(0.94);
}

html.js-motion .home-stat.is-in {
    transform: none;
}

/* ---------- Cards / hover ---------- */
.home-card-media {
    position: relative;
}

.home-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
    transform: translateX(120%);
    pointer-events: none;
    opacity: 0;
}

.home-card-media img {
    transition: transform 640ms var(--sm-expo);
}

.home-voice {
    transition: transform var(--sm-ui) var(--sm-expo), box-shadow var(--sm-ui) var(--sm-expo);
}

@media (hover: hover) and (pointer: fine) {
    .home-card:hover .home-card-media img,
    html.js-motion .home-card.is-in:hover .home-card-media img {
        transform: scale(1.07);
        clip-path: inset(0);
    }

    .home-card:hover .home-card-media::after {
        opacity: 1;
        transform: translateX(-120%);
        transition:
            transform 720ms var(--sm-expo),
            opacity 160ms ease;
    }

    .home-card:hover,
    html.js-motion .home-card.is-in:hover,
    html:not(.js-motion) .home-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 48px -18px rgba(11, 43, 27, 0.2);
    }

    .home-voice:hover,
    html.js-motion .home-voice.is-in:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px -14px rgba(11, 43, 27, 0.14);
    }

    .home-pill:hover,
    .home-platform a.home-pill-teal:hover,
    a.home-pill-teal:hover,
    .home-card:hover .home-pill-teal {
        transform: translateY(-2px);
    }

    .home-platform .home-hero-ctas .home-pill:hover {
        transform: none;
    }

    .home-chrome a.home-nav-link:hover:not(.is-active) {
        color: #f5ebe0;
    }

    .home-article-link:hover .home-article-link-arrow,
    .home-card:hover .home-article-link-arrow {
        transform: translateX(-4px);
    }

    .home-start-pill:hover .home-start-pill-arrow {
        transform: rotate(180deg) translateX(4px);
    }

    .home-footer-col a:hover {
        color: var(--hp-gold);
    }

    .home-hero-search:focus-within {
        transform: translateY(-2px);
        box-shadow:
            0 0 28px 8px rgba(197, 168, 114, 0.32),
            0 10px 26px -12px rgba(0, 0, 0, 0.2);
    }

    body.has-home-chrome:not(.is-home-platform) .edu-item:hover img {
        transform: scale(1.06);
    }
}

.home-hero-search {
    transition: transform var(--sm-ui) var(--sm-expo), box-shadow var(--sm-ui) var(--sm-expo);
}

.home-article-link-arrow,
.home-start-pill-arrow {
    transition: transform 200ms var(--sm-expo);
}

.home-start-pill-arrow {
    transform: rotate(180deg);
}

.home-pill:active,
.home-platform a.home-pill-teal:active,
a.home-pill-teal:active {
    transform: scale(0.97);
}

/* Nav underline */
.home-chrome a.home-nav-link {
    position: relative;
    display: inline-block;
}

.home-chrome a.home-nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: #f8e5b0;
    box-shadow: 0 0 12px rgba(248, 229, 176, 0.65);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--sm-ui) var(--sm-expo);
}

.home-chrome a.home-nav-link:hover::after,
.home-chrome a.home-nav-link.is-active::after {
    transform: scaleX(1);
}

.home-chrome a.home-nav-link.is-active::after {
    box-shadow:
        0 0 16px rgba(248, 229, 176, 0.75),
        0 2px 6px rgba(11, 43, 27, 0.4);
}

@media (max-width: 991px) {
    .home-chrome a.home-nav-link::after {
        display: none;
    }

    .home-nav-link {
        animation: none;
    }
}

/* Burger → X */
.home-nav-burger-lines,
.home-nav-burger-lines::before,
.home-nav-burger-lines::after {
    transition:
        transform var(--sm-ui) var(--sm-expo),
        opacity var(--sm-press) ease,
        top var(--sm-ui) var(--sm-expo),
        background-color var(--sm-press) ease;
}

.home-nav-burger[aria-expanded="true"] .home-nav-burger-lines {
    background-color: transparent;
}

.home-nav-burger[aria-expanded="true"] .home-nav-burger-lines::before {
    top: 0;
    transform: rotate(45deg);
}

.home-nav-burger[aria-expanded="true"] .home-nav-burger-lines::after {
    top: 0;
    transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
    html.js-motion .home-nav-drawer.show .home-nav-drawer-link {
        animation: sm-rise 320ms var(--sm-expo) both;
    }

    html.js-motion .home-nav-drawer.show .home-nav-drawer-link:nth-child(1) { animation-delay: 40ms; }
    html.js-motion .home-nav-drawer.show .home-nav-drawer-link:nth-child(2) { animation-delay: 70ms; }
    html.js-motion .home-nav-drawer.show .home-nav-drawer-link:nth-child(3) { animation-delay: 100ms; }
    html.js-motion .home-nav-drawer.show .home-nav-drawer-link:nth-child(4) { animation-delay: 130ms; }
    html.js-motion .home-nav-drawer.show .home-nav-drawer-link:nth-child(5) { animation-delay: 160ms; }
    html.js-motion .home-nav-drawer.show .home-nav-drawer-link:nth-child(6) { animation-delay: 190ms; }
    html.js-motion .home-nav-drawer.show .home-nav-drawer-link:nth-child(7) { animation-delay: 220ms; }
}

.home-chrome.is-scrolled .home-header {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.home-chrome .home-logo img {
    transition: transform var(--sm-ui) var(--sm-expo);
}

.home-chrome.is-scrolled .home-logo img {
    transform: scale(0.92);
}

body.has-home-chrome:not(.is-home-platform) .edu-item img {
    transition: transform 640ms var(--sm-expo);
}

.has-home-chrome .dropdown-menu.show {
    animation: sm-pop 180ms var(--sm-expo) both;
    transform-origin: top right;
}

.has-home-chrome .modal.fade .modal-dialog {
    transition: transform 240ms var(--sm-expo), opacity 240ms var(--sm-expo);
}

.has-home-chrome .modal.fade:not(.show) .modal-dialog {
    transform: scale(0.96) translateY(8px);
}

.has-home-chrome .modal.show .modal-dialog {
    transform: none;
}

html.js-motion .home-support.sm-wait {
    transform: translateY(12px) scale(0.94);
}

html.js-motion .home-support.sm-wait.is-in {
    transform: none;
}

.has-home-chrome .pagination a {
    transition: background-color var(--sm-ui) ease, transform var(--sm-press) var(--sm-expo);
}

.has-home-chrome .pagination a:active {
    transform: scale(0.97);
}

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

    .home-hero-copy > .home-eyebrow,
    .home-hero-copy .home-eyebrow-line,
    .home-hero-title,
    .home-hero-lead,
    .home-hero-ctas > *,
    .home-hero-search,
    .home-hero-nav,
    .home-hero-pagination,
    .home-hero-swiper .swiper-slide-active .home-hero-photo,
    .home-hero-glow-gold,
    .home-hero-glow-teal,
    .home-hero-glow-gold-corner,
    .home-hero-glow-teal-corner,
    .home-nav-link,
    #site-main .auth .card,
    .home-pill-pulse,
    .home-platform .home-hero-ctas a.home-pill-pulse,
    .has-home-chrome .dropdown-menu.show {
        animation: none;
        filter: none;
        clip-path: none;
        scale: 1;
    }

    html.js-motion .sm-wait,
    html.js-motion .sm-wait.is-in,
    html.js-motion .sm-wait-scale,
    html.js-motion .sm-wait.sm-clip .home-card-media img,
    html.js-motion .sm-wait.sm-clip .home-card-body,
    html.js-motion .sm-wait.sm-clip .home-card-foot,
    html.js-motion .sm-wait.sm-quote .home-quote-ayah,
    html.js-motion .home-section-head .home-eyebrow-line,
    html.js-motion .home-section-head h2,
    .home-card-media img,
    .home-voice,
    .home-article-link-arrow,
    .home-start-pill-arrow,
    .home-chrome a.home-nav-link::after,
    .home-nav-burger-lines,
    .home-nav-burger-lines::before,
    .home-nav-burger-lines::after,
    .home-chrome .home-logo img,
    body.has-home-chrome:not(.is-home-platform) .edu-item img,
    .has-home-chrome .modal.fade .modal-dialog,
    .has-home-chrome .pagination a,
    .home-hero-search,
    .home-hero-inner {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }

    html.js-motion .home-nav {
        transition: none;
    }

    html.js-motion .home-nav-drawer.show .home-nav-drawer-link {
        animation: none;
    }

    .home-card:hover,
    .home-card:hover .home-card-media img,
    html.js-motion .home-card.is-in:hover,
    .home-voice:hover,
    .home-pill:hover,
    .home-chrome.is-scrolled .home-logo img,
    .has-home-chrome .modal.fade:not(.show) .modal-dialog {
        transform: none;
    }
}
