/**
 * OS TigerLab Design System v2 — MOTION EXTRA
 * Header/Footer global + reward animations + hero word-by-word + loading bar.
 * Carga DESPUÉS de motion.css (extiende, no reemplaza).
 */

/* ================================================================== */
/*  HEADER STICKY GLOBAL · .ostl-header                                */
/* ================================================================== */
.ostl-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: color-mix(in oklab, var(--color-bg-primary) 85%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-subtle);
    transition: transform var(--d-base) var(--ease-out-cubic),
                background-color var(--d-base) var(--ease-smooth);
    padding-top: var(--safe-top);
}
.ostl-header[data-hidden="true"] { transform: translateY(-100%); }

.ostl-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: var(--nav-h);
}

.ostl-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.ostl-header__brand img {
    height: clamp(32px, 5vw, 44px);
    width: auto;
}

.ostl-header__nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex: 1;
    justify-content: center;
}
.ostl-header__link {
    position: relative;
    padding: var(--sp-2) var(--sp-3);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--r-sm);
    transition: color var(--d-fast) var(--ease-smooth),
                background-color var(--d-fast) var(--ease-smooth);
}
.ostl-header__link:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
}
.ostl-header__link[aria-current="page"] {
    color: var(--color-accent);
}
.ostl-header__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: 0;
    height: 2px;
    background: var(--color-accent);
    border-radius: 2px;
    animation: ostl-fade-up var(--d-base) var(--ease-out-cubic);
}

.ostl-header__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.ostl-header__toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--color-border-default);
    border-radius: var(--r-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.ostl-header__toggle-close { display: none; }
.ostl-header[data-mobile-open="true"] .ostl-header__toggle-open { display: none; }
.ostl-header[data-mobile-open="true"] .ostl-header__toggle-close { display: block; }

.ostl-header__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--color-bg-overlay);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: -1;
    animation: ostl-fade-in var(--d-base) var(--ease-smooth);
}

@media (max-width: 960px) {
    .ostl-header__toggle { display: inline-flex; }
    .ostl-header__nav {
        position: fixed;
        top: var(--nav-h);
        right: 0;
        bottom: 0;
        width: min(320px, 100%);
        background: var(--color-bg-primary);
        border-left: 1px solid var(--color-border-default);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-right, 0px)) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)) calc(var(--sp-4) + env(safe-area-inset-left, 0px));
        transform: translateX(100%);
        transition: transform var(--d-base) var(--ease-out-cubic);
        gap: var(--sp-1);
        z-index: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .ostl-header[data-mobile-open="true"] .ostl-header__nav {
        transform: translateX(0);
    }
    .ostl-header[data-mobile-open="true"] .ostl-header__backdrop {
        display: block;
    }
    .ostl-header__link {
        padding: var(--sp-3) var(--sp-3);
        font-size: var(--fs-base);
    }
    .ostl-header__link[aria-current="page"]::after { display: none; }
    .ostl-header__link[aria-current="page"] {
        background: var(--color-accent-soft);
    }
    .ostl-header__actions .ostl-btn { display: none; }
}

/* ================================================================== */
/*  FOOTER GLOBAL · .ostl-footer                                       */
/* ================================================================== */
.ostl-footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-subtle);
    padding-block: var(--sp-12) var(--sp-6);
    margin-top: var(--sp-16);
}

.ostl-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
    margin-bottom: var(--sp-10);
}
@media (max-width: 960px) {
    .ostl-footer__top {
        grid-template-columns: 1fr 1fr;
    }
    .ostl-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .ostl-footer__top { grid-template-columns: 1fr; }
}

.ostl-footer__brand img { max-width: 180px; height: auto; }
.ostl-footer__tagline {
    margin: var(--sp-3) 0 var(--sp-4);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    max-width: 32ch;
}
.ostl-footer__social {
    display: inline-flex;
    gap: var(--sp-2);
}
.ostl-footer__social-link {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    border: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
    transition: var(--t-all-fast);
}
.ostl-footer__social-link:hover {
    background: var(--color-bg-elevated);
    color: var(--color-accent);
    border-color: var(--color-border-accent);
    transform: translateY(-2px);
}

.ostl-footer__heading {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--sp-3);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}
.ostl-footer__list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--sp-2);
}
.ostl-footer__list a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: color var(--d-fast) var(--ease-smooth);
}
.ostl-footer__list a:hover {
    color: var(--color-accent);
}

.ostl-footer__newsletter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    border-radius: var(--r-lg);
    margin-bottom: var(--sp-6);
}
.ostl-footer__newsletter-form {
    display: flex;
    gap: var(--sp-2);
}
@media (max-width: 640px) {
    .ostl-footer__newsletter { grid-template-columns: 1fr; }
    .ostl-footer__newsletter-form { flex-direction: column; }
}

.ostl-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .ostl-footer__bottom { flex-direction: column; align-items: flex-start; }
    .ostl-footer__bottom > p:last-child { text-align: left !important; }
}

/* ================================================================== */
/*  LOADING BAR GLOBAL · NProgress-style                               */
/* ================================================================== */
.ostl-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
    transform-origin: left;
    transform: scaleX(0);
    z-index: calc(var(--z-toast) + 1);
    pointer-events: none;
    box-shadow: 0 0 8px var(--color-accent), 0 0 4px var(--color-accent);
    transition: transform 200ms var(--ease-out-cubic),
                opacity 200ms var(--ease-smooth);
    opacity: 0;
}
.ostl-loading-bar[data-active="true"] {
    opacity: 1;
}

/* ================================================================== */
/*  HERO WORD-BY-WORD REVEAL · usar con data-hero-words                */
/* ================================================================== */
.ostl-hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em) rotateX(-30deg);
    transform-origin: 50% 100%;
    transition: opacity var(--d-slower) var(--ease-out-expo),
                transform var(--d-slower) var(--ease-out-expo);
}
.ostl-hero-word.is-revealed {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* ================================================================== */
/*  REWARD: CHECK POP, GLOW PULSE, CONFETTI                            */
/* ================================================================== */
@keyframes ostl-check-pop {
    0%   { transform: scale(0) rotate(0); }
    60%  { transform: scale(1.2) rotate(-10deg); }
    100% { transform: scale(1) rotate(0); }
}
.ostl-check-pop {
    animation: ostl-check-pop 400ms var(--ease-bounce);
}

@keyframes ostl-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-soft); }
    50%      { box-shadow: 0 0 32px 6px var(--color-accent-soft); }
}
.ostl-glow {
    animation: ostl-glow-pulse 2.4s ease-in-out infinite;
}

@keyframes ostl-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.ostl-shake { animation: ostl-shake 320ms ease-in-out; }

/* Confetti container — el JS inserta partículas dinámicamente */
.ostl-confetti-burst {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-toast);
    overflow: hidden;
    inset: 0;
}
.ostl-confetti-piece {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 1px;
    will-change: transform, opacity;
}

@keyframes ostl-confetti-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
    100% { transform: translate3d(var(--cf-tx), var(--cf-ty), 0) rotate(var(--cf-r)); opacity: 0; }
}

/* ================================================================== */
/*  EMPTY STATE ANIM · pulse sutil                                     */
/* ================================================================== */
@keyframes ostl-empty-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.04); opacity: 0.8; }
}
.ostl-empty__illustration {
    animation: ostl-empty-pulse 3s ease-in-out infinite;
}

/* ================================================================== */
/*  404 GLITCH · sutil                                                 */
/* ================================================================== */
@keyframes ostl-glitch-x {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, 2px); }
    80% { transform: translate(1px, -2px); }
}
.ostl-glitch {
    animation: ostl-glitch-x 320ms steps(2) infinite;
    animation-play-state: paused;
}
.ostl-glitch:hover { animation-play-state: running; }

/* ================================================================== */
/*  PAGE TRANSITIONS (View Transitions API · cuando esté disponible)   */
/* ================================================================== */
@supports (view-transition-name: foo) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 280ms;
        animation-timing-function: var(--ease-out-cubic);
    }
}

/* ================================================================== */
/*  STICKY CTA MOBILE · entrada                                        */
/* ================================================================== */
@keyframes ostl-slide-up-in {
    from { transform: translate3d(0, 100%, 0); opacity: 0; }
    to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
.ostl-sticky-cta {
    animation: ostl-slide-up-in var(--d-base) var(--ease-out-cubic);
}

/* ================================================================== */
/*  DELIGHT — CTAs y superficies: más profundidad (GPU-friendly)        */
/* ================================================================== */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    html:not([data-motion="off"]) .ostl-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
        transform: translateY(-2px);
        box-shadow:
            0 10px 36px color-mix(in oklab, var(--color-accent) 42%, transparent),
            0 0 0 1px color-mix(in oklab, var(--color-accent) 28%, transparent);
    }

    html:not([data-motion="off"]) .btn-primary:hover:not(:disabled),
    html:not([data-motion="off"]) .btn-cta-nav:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow:
            0 12px 36px color-mix(in oklab, var(--accent, var(--color-accent)) 35%, transparent),
            0 0 0 1px color-mix(in oklab, var(--accent, var(--color-accent)) 22%, transparent);
    }

    html:not([data-motion="off"]) .home-academia .btn-primary:hover:not(:disabled) {
        transform: translateY(-3px);
    }

    html:not([data-motion="off"]) .checkout-submit:not(:disabled):hover {
        filter: brightness(1.04);
    }
}

html[data-motion="off"] .btn-primary:hover,
html[data-motion="off"] .btn-cta-nav:hover,
html[data-motion="off"] .ostl-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: none !important;
    filter: none;
}

html[data-motion="off"] .checkout-submit:not(:disabled):hover {
    filter: none;
}

html[data-motion="off"] .price-card:hover,
html[data-motion="off"] .price-card--featured:hover,
html[data-motion="off"] .ostl-card--interactive:hover {
    transform: none !important;
}

/* ================================================================== */
/*  REDUCE MOTION · hard overrides                                     */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ostl-hero-word { opacity: 1 !important; transform: none !important; }
    .ostl-empty__illustration { animation: none; opacity: 0.6; }
    .ostl-glow { animation: none; box-shadow: 0 0 16px var(--color-accent-soft); }
    .ostl-confetti-burst { display: none; }
    .ostl-glitch { animation: none; }
    .ostl-sticky-cta {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .ostl-footer__social-link:hover {
        transform: none;
    }
    .ostl-check-pop {
        animation: none;
    }
    .ostl-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
    .btn-primary:hover,
    .btn-cta-nav:hover {
        transform: none !important;
        filter: none;
    }
    .checkout-submit:not(:disabled):hover {
        filter: none;
    }
    .price-card:hover,
    .price-card--featured:hover,
    .ostl-card--interactive:hover {
        transform: none !important;
    }
}