/* ============================================================
   SAGEDIVINE ACADEMY — APP POLISH LAYER
   Loaded AFTER app.css. Applies to non-landing pages:
   product, checkout, auth, account, library, faq, admin.
   Infinite loops use transform/opacity only. Hover effects use
   transform/border/opacity so nothing reflows during animation.
   ============================================================ */

/* ---------- typography ---------- */
h1, h2, h3 {
    text-wrap: balance;
}

.eyebrow {
    letter-spacing: .26em;
}

.section-heading > p:not(.eyebrow),
.prose-block > p:not(.eyebrow),
.library-lead,
.welcome-lead {
    text-wrap: pretty;
}

/* gentle global readability lift */
body {
    font-size: 15.5px;
}

/* reveal gets smooth micro-properties so hover states still animate */
.reveal-ready .reveal {
    transition: opacity .65s var(--ease), transform .65s var(--ease), border-color .3s ease, background .3s ease, box-shadow .35s ease;
}

.highlights-block h3,
.curriculum-block h3,
.materials-block h3 {
    letter-spacing: -.015em;
}

/* ---------- buttons: infinite gold sheen + breathing glow ---------- */
.btn-gold::before {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -80%;
    width: 55%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 88%);
    transform: skewX(-18deg);
    animation: btnLoopSheen 6.5s var(--ease) infinite;
    pointer-events: none;
}

@keyframes btnLoopSheen {
    0%, 58% { transform: skewX(-18deg) translateX(0); }
    88%, 100% { transform: skewX(-18deg) translateX(340%); }
}

.btn-gold {
    box-shadow: 0 10px 30px rgba(227, 187, 115, .18), 0 0 0 0 rgba(227, 187, 115, 0);
    animation: btnGlowBreath 4.2s ease-in-out infinite alternate;
}

.btn-gold:hover {
    animation-play-state: paused;
}

@keyframes btnGlowBreath {
    0% { box-shadow: 0 10px 30px rgba(227, 187, 115, .16), 0 0 0 0 rgba(227, 187, 115, 0); }
    100% { box-shadow: 0 12px 34px rgba(227, 187, 115, .27), 0 0 18px rgba(227, 187, 115, .12); }
}

.btn-outline,
.btn-outline-light {
    transition: transform .3s var(--ease), border-color .3s ease, background .3s ease, color .3s ease, box-shadow .4s ease;
}

.btn-outline:hover,
.btn-outline-light:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
}

.btn .icon {
    transition: transform .3s var(--ease);
}

.btn:hover .icon {
    transform: translateX(2px);
}

/* ---------- header ---------- */
.account-pill {
    transition: border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}

.account-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.account-pill .avatar {
    box-shadow: 0 0 0 0 rgba(227, 187, 115, 0);
    transition: box-shadow .35s;
}

.account-pill:hover .avatar {
    box-shadow: 0 0 0 3px rgba(227, 187, 115, .2);
}

/* ---------- product cards ---------- */
.product-card {
    transition: transform .4s var(--ease), border-color .35s ease, box-shadow .4s ease;
}

.product-card-peek {
    transition: opacity .3s ease, transform .35s var(--ease);
}

.product-card:hover .product-card-peek {
    transform: translateY(0) rotate(6deg);
}

.product-card-cta {
    overflow: hidden;
}

.product-card-cta .icon {
    transition: transform .3s var(--ease);
}

.product-card:hover .product-card-cta .icon {
    transform: translateX(3px);
}

.price {
    transition: text-shadow .35s ease;
}

.product-card:hover .price {
    text-shadow: 0 0 16px rgba(240, 212, 160, .35);
}

.product-card-badge {
    animation: badgeDrift 6s ease-in-out infinite alternate;
}

@keyframes badgeDrift {
    0% { box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
    100% { box-shadow: 0 4px 20px rgba(227, 187, 115, .22); }
}

/* ---------- product page ---------- */
.cover-orbit {
    animation: orbitSpin 60s linear infinite;
}

.cover-orbit-b {
    animation-duration: 84s;
    animation-direction: reverse;
}

@keyframes orbitSpin {
    to { transform: rotate(360deg); }
}

.product-cover-frame {
    transition: transform .6s var(--ease), box-shadow .5s ease;
}

.product-cover-frame:hover {
    transform: translateY(-4px);
    box-shadow: 0 46px 96px rgba(0, 0, 0, .55);
}

.product-cover-chip {
    animation: chipGlow 5s ease-in-out infinite alternate;
}

@keyframes chipGlow {
    0% { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
    100% { box-shadow: 0 6px 26px rgba(227, 187, 115, .2); }
}

.product-cover-note {
    transition: border-color .3s ease, transform .35s var(--ease);
}

.product-cover-note:hover {
    border-color: var(--line-gold);
    transform: translateY(-2px);
}

.product-price {
    animation: priceSheen 8s ease-in-out infinite alternate;
}

@keyframes priceSheen {
    0% { text-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
    100% { text-shadow: 0 6px 34px rgba(227, 187, 115, .22); }
}

.product-fact-chip {
    transition: border-color .3s, transform .3s var(--ease);
}

.product-fact-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(227, 187, 115, .4);
}

.product-purchase-panel {
    position: relative;
    overflow: hidden;
}

.product-purchase-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(227, 187, 115, .45), transparent);
    transform: translateX(-100%);
    animation: topHairline 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes topHairline {
    0%, 55% { transform: translateX(-100%); }
    90%, 100% { transform: translateX(100%); }
}

.purchase-trust span {
    transition: color .25s, transform .3s var(--ease);
}

.purchase-trust span:hover {
    color: var(--gold-light);
    transform: translateY(-2px);
}

/* highlights / curriculum / materials */
.highlight-item {
    transition: border-color .3s ease, background .3s ease, transform .35s var(--ease);
}

.highlight-item:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 187, 115, .3);
    background: rgba(227, 187, 115, .045);
}

.highlight-item > span {
    animation: dotPulseSoft 4.5s ease-in-out infinite alternate;
}

@keyframes dotPulseSoft {
    0% { opacity: .7; }
    100% { opacity: 1; }
}

.curriculum-item[open] .curriculum-body {
    animation: trickleIn .45s var(--ease) both;
}

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

.material-row {
    transition: border-color .3s ease, background .3s ease, transform .35s var(--ease);
}

.material-row:hover {
    transform: translateX(4px);
    border-color: rgba(227, 187, 115, .26);
    background: rgba(227, 187, 115, .04);
}

.material-row .material-icon {
    transition: background .3s, color .3s, box-shadow .3s;
}

.material-row:hover .material-icon {
    box-shadow: 0 4px 18px rgba(227, 187, 115, .18);
}

/* ---------- auth pages ---------- */
.auth-visual {
    overflow: hidden;
}

.auth-orb {
    animation: orbBreathe 9s ease-in-out infinite alternate;
}

@keyframes orbBreathe {
    0% { opacity: .7; transform: scale(.96); }
    100% { opacity: 1; transform: scale(1.1); }
}

.auth-cover-1,
.auth-cover-2,
.auth-cover-3 {
    animation: coverFloat 7s ease-in-out infinite;
}

.auth-cover-2 { animation-delay: 1.2s; }
.auth-cover-3 { animation-delay: 2.4s; }

@keyframes coverFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-1.2deg); }
}

.auth-card {
    animation: cardEnter .8s var(--ease) both;
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

.auth-card-icon {
    animation: kickerPulse 5s ease-in-out infinite alternate;
}

@keyframes kickerPulse {
    0% { box-shadow: 0 6px 18px rgba(227, 187, 115, .12); }
    100% { box-shadow: 0 6px 26px rgba(227, 187, 115, .3); }
}

.auth-form input {
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

.auth-form input:focus {
    box-shadow: 0 0 0 3px rgba(227, 187, 115, .12);
}

/* ---------- account / dashboard ---------- */
.account-hero-orb {
    animation: orbBreathe 11s ease-in-out infinite alternate-reverse;
}

.account-stat {
    transition: border-color .3s ease, background .3s ease, transform .35s var(--ease);
}

.account-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 187, 115, .3);
    background: rgba(255, 255, 255, .05);
}

.account-stat-icon {
    animation: iconBob 6.5s ease-in-out infinite;
}

.account-stat-row:nth-child(2) .account-stat-icon { animation-delay: .8s; }
.account-stat-row:nth-child(3) .account-stat-icon { animation-delay: 1.6s; }

@keyframes iconBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.member-program {
    transition: transform .35s var(--ease), border-color .3s ease, box-shadow .35s ease;
}

.member-program:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 187, 115, .28);
    box-shadow: 0 24px 52px rgba(0, 0, 0, .32);
}

.member-program-cover {
    overflow: hidden;
}

.member-program-cover img {
    transition: transform .6s var(--ease);
}

.member-program:hover .member-program-cover img {
    transform: scale(1.05);
}

.progress-track {
    position: relative;
    overflow: hidden;
}

.progress-track span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-100%);
    animation: barShimmer 3.8s ease-in-out infinite;
}

@keyframes barShimmer {
    0%, 55% { transform: translateX(-100%); }
    90%, 100% { transform: translateX(100%); }
}

.access-dot {
    animation: dotGlow 3.6s ease-in-out infinite alternate;
}

@keyframes dotGlow {
    0% { box-shadow: 0 0 6px rgba(116, 217, 172, .4); }
    100% { box-shadow: 0 0 12px rgba(116, 217, 172, .85); }
}

.avatar-gold {
    animation: goldRing 5.5s ease-in-out infinite alternate;
}

@keyframes goldRing {
    0% { box-shadow: 0 0 0 0 rgba(227, 187, 115, .25); }
    100% { box-shadow: 0 0 0 5px rgba(227, 187, 115, .08); }
}

/* ---------- library ---------- */
.library-hero-orb {
    animation: orbBreathe 10s ease-in-out infinite alternate;
}

.library-cover-shine {
    overflow: hidden;
}

.library-cover-shine::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: -70%;
    width: 42%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 15%, rgba(255, 248, 230, .14) 50%, rgba(255, 255, 255, 0) 85%);
    transform: skewX(-16deg);
    animation: coverShineSheen 6.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes coverShineSheen {
    0%, 55% { transform: skewX(-16deg) translateX(0); }
    90%, 100% { transform: skewX(-16deg) translateX(430%); }
}

.library-material-card {
    transition: transform .35s var(--ease), border-color .3s ease, background .3s ease;
}

.library-material-card:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 187, 115, .28);
    background: rgba(255, 255, 255, .05);
}

.library-material-icon {
    transition: box-shadow .3s ease, color .3s;
}

.library-material-card:hover .library-material-icon {
    box-shadow: 0 6px 20px rgba(227, 187, 115, .2);
}

.library-material-arrow {
    transition: transform .3s var(--ease);
}

.library-material-card:hover .library-material-arrow {
    transform: translateX(3px);
}

.library-access-card {
    position: relative;
    overflow: hidden;
}

.library-access-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(227, 187, 115, .5), transparent);
    transform: translateX(-100%);
    animation: topHairline 8s ease-in-out infinite;
    pointer-events: none;
}

.library-locked-orb {
    animation: orbBreathe 8s ease-in-out infinite alternate;
}

/* ---------- checkout ---------- */
.payment-option {
    transition: border-color .3s ease, background .3s ease, transform .3s var(--ease), box-shadow .3s;
}

.payment-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.checkout-step .payment-icon {
    animation: iconBob 6s ease-in-out infinite;
}

.summary-card {
    position: relative;
    overflow: hidden;
}

.summary-product {
    transition: background .3s ease;
}

.summary-total strong {
    transition: text-shadow .4s ease;
}

.checkout-submit {
    overflow: hidden;
}

.checkout-secure {
    transition: color .3s;
}

.checkout-secure:hover {
    color: var(--gold-light);
}

/* ---------- checkout success ---------- */
.success-rays {
    animation: raysSpin 70s linear infinite;
}

@keyframes raysSpin {
    to { transform: rotate(360deg); }
}

.success-order-code strong {
    transition: color .3s;
}

.copy-button {
    transition: color .25s, border-color .25s, transform .25s var(--ease), background .25s;
}

.copy-button:hover {
    transform: translateY(-1px);
}

.copy-button:active {
    transform: scale(.96);
}

.success-next-step {
    transition: border-color .3s ease, transform .35s var(--ease), background .3s;
}

.success-next-step:hover {
    transform: translateX(4px);
    border-color: rgba(227, 187, 115, .3);
}

/* ---------- welcome ---------- */
.welcome-orb {
    animation: orbBreathe 12s ease-in-out infinite alternate;
}

.welcome-orb-b {
    animation-duration: 15s;
    animation-direction: alternate-reverse;
}

.welcome-book-glow {
    animation: bookGlow 7s ease-in-out infinite alternate;
}

@keyframes bookGlow {
    0% { opacity: .55; transform: scale(.97); }
    100% { opacity: 1; transform: scale(1.05); }
}

.welcome-book {
    animation: coverFloat 9s ease-in-out infinite;
}

.welcome-step {
    transition: border-color .3s ease, transform .35s var(--ease), background .3s;
}

.welcome-step:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 187, 115, .3);
}

.welcome-step-icon {
    animation: iconBob 7s ease-in-out infinite;
}

/* ---------- FAQ page ---------- */
.faq-orb {
    animation: orbBreathe 10s ease-in-out infinite alternate;
}

.faq-item {
    transition: border-color .3s ease, background .3s ease;
}

.faq-item:hover {
    border-color: rgba(227, 187, 115, .22);
    background: rgba(255, 255, 255, .03);
}

.faq-item[open] .faq-answer {
    animation: trickleIn .45s var(--ease) both;
}

.faq-contact-icon {
    animation: iconBob 6s ease-in-out infinite;
}

.faq-side-link {
    transition: transform .3s var(--ease), border-color .3s, color .3s;
}

.faq-side-link:hover {
    transform: translateX(3px);
}

/* ---------- error page ---------- */
.error-sigil {
    animation: sigilBreathe 6s ease-in-out infinite alternate;
}

@keyframes sigilBreathe {
    0% { opacity: .75; transform: scale(.97); filter: drop-shadow(0 0 14px rgba(227, 187, 115, .2)); }
    100% { opacity: 1; transform: scale(1.02); filter: drop-shadow(0 0 26px rgba(227, 187, 115, .38)); }
}

/* ---------- admin pages ---------- */
.admin-stat-card {
    transition: transform .35s var(--ease), border-color .3s ease, box-shadow .35s ease;
}

.admin-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(227, 187, 115, .3);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
}

.admin-stat-glyph {
    animation: iconBob 7s ease-in-out infinite;
}

.admin-table tbody tr {
    transition: background .2s ease, box-shadow .2s;
}

.admin-table tbody tr:hover {
    background: rgba(227, 187, 115, .05);
}

.admin-nav a {
    transition: border-color .25s ease, background .25s ease, color .25s, transform .25s var(--ease);
}

.admin-nav a:hover {
    transform: translateX(2px);
}

/* ---------- toast ---------- */
.toast {
    animation: toastIn .45s var(--ease) both;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* ---------- footer ---------- */
.footer-socials a {
    transition: transform .3s var(--ease), border-color .3s, color .3s, background .3s;
}

.footer-socials a:hover {
    transform: translateY(-3px);
}

.floating-help {
    overflow: visible;
}

.floating-help::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 1px solid rgba(227, 187, 115, .5);
    animation: helpRing 3.6s ease-out infinite;
    pointer-events: none;
}

@keyframes helpRing {
    0% { transform: scale(1); opacity: .5; }
    72% { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- final responsive guard ---------- */
@media (max-width: 640px) {
    /* keep infinite motion subtle on small devices */
    .product-purchase-panel::after,
    .library-access-card::after,
    .library-cover-shine::after {
        animation-play-state: paused;
    }

    .auth-cover-1,
    .auth-cover-2,
    .auth-cover-3,
    .welcome-book {
        animation-duration: 9s;
    }
}

@media (max-width: 430px) {
    .btn-gold::before {
        display: none;
    }

    .product-hero-grid .product-purchase-panel {
        padding-inline: 0;
    }
}

/* ---------- reduced motion: everything calm ---------- */
@media (prefers-reduced-motion: reduce) {
    .btn-gold::before,
    .btn-gold,
    .product-card-badge,
    .cover-orbit,
    .orbitSpin,
    .product-cover-chip,
    .product-price,
    .product-purchase-panel::after,
    .highlight-item > span,
    .auth-orb,
    .auth-cover-1,
    .auth-cover-2,
    .auth-cover-3,
    .auth-card,
    .auth-card-icon,
    .account-hero-orb,
    .account-stat-icon,
    .access-dot,
    .avatar-gold,
    .progress-track span::after,
    .library-hero-orb,
    .library-cover-shine::after,
    .library-locked-orb,
    .checkout-step .payment-icon,
    .success-rays,
    .welcome-orb,
    .welcome-orb-b,
    .welcome-book-glow,
    .welcome-book,
    .welcome-step-icon,
    .faq-orb,
    .faq-contact-icon,
    .error-sigil,
    .admin-stat-glyph,
    .floating-help::before {
        animation: none !important;
    }
}