/* Home page motion and polish (loaded after home-sections.css). Transform and opacity only. The reveal states exist only while
   js/pages/home-motion.js has marked the page (html.hm), and everything is switched off for prefers-reduced-motion. */

/* ---- reveal on scroll: a keyframe animation, so hover transforms keep working once an element has appeared */
.hm .hm-wait:not(.hm-in) { opacity: 0; }
.hm .hm-wait.hm-in { animation: hm-up .75s cubic-bezier(.2, .75, .25, 1) var(--hm-d, 0ms) backwards; }
.hm .hm-wait.hm-in[data-hm="left"] { animation-name: hm-left; }
.hm .hm-wait.hm-in[data-hm="right"] { animation-name: hm-right; }
@keyframes hm-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes hm-left { from { opacity: 0; transform: translateX(-42px); } to { opacity: 1; transform: none; } }
@keyframes hm-right { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: none; } }

/* ---- section headings: a brass rule that draws itself under the title */
.hm .section-head h2 { position: relative; padding-bottom: .65rem; }
.hm .section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.5rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transform-origin: left; }
.hm .section-head.hm-in h2::after { animation: hm-rule .9s cubic-bezier(.2, .75, .25, 1) .35s backwards; }
.section-head.text-center h2::after, .text-center .section-head h2::after { left: 50%; margin-left: -1.75rem; }
@keyframes hm-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- the logo lifts slightly on hover */
.home-logo { transition: transform .4s ease, filter .4s ease; }
.home-logo:hover { transform: translateY(-3px) scale(1.02); filter: drop-shadow(0 14px 26px rgba(11, 31, 63, .25)); }

/* ---- hover polish on cards and figures */
.home-obj, .home-aud, .nx-panel, .home-facts-card, .home-band .stat, .accordion-item { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.home-obj:hover, .home-aud:hover, .nx-panel:hover, .home-facts-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3, 0 14px 30px rgba(11, 31, 63, .16)); }
.home-band .stat:hover { transform: translateY(-3px); }
.home-band .stat-ic { transition: transform .35s ease, background-color .3s ease; }
.home-band .stat:hover .stat-ic { transform: scale(1.12) rotate(-6deg); }
.accordion-item:hover { box-shadow: 0 6px 18px rgba(11, 31, 63, .1); }
.home-step-art, .home-obj-art, .home-aud-art { transition: transform .5s ease; }
.home-step:hover .home-step-art, .home-obj:hover .home-obj-art, .home-aud:hover .home-aud-art { transform: translateY(-4px) scale(1.04); }
.link-arrow .bi-arrow-right { transition: transform .25s ease; }
.link-arrow:hover .bi-arrow-right { transform: translateX(5px); }
.btn-primary, .btn-gold { transition: transform .2s ease, box-shadow .25s ease, background-color .2s ease; }
.btn-primary:hover, .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 31, 63, .22); }

/* ---- reading progress bar */
.hm-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500)); box-shadow: 0 0 8px rgba(216, 180, 90, .6); pointer-events: none; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hm .hm-wait, .hm .hm-wait.hm-in { opacity: 1 !important; animation: none !important; }
    .hm .section-head.hm-in h2::after { animation: none; }
    .home-obj:hover, .home-aud:hover, .nx-panel:hover, .home-facts-card:hover, .home-band .stat:hover, .btn-primary:hover, .btn-gold:hover { transform: none; }
    .hm-progress { display: none; }
}