/* 01. Golden Horde motion tokens */
:root {
  --gh-accent: var(--gold);
  --gh-brand: var(--maroon);
  --gh-brand-dark: var(--maroon-dark);
  --gh-ink: var(--ink);
  --gh-paper: var(--paper);
  --gh-motion-fast: 150ms;
  --gh-motion-base: 400ms;
  --gh-motion-slow: 760ms;
  --gh-ease-out: cubic-bezier(.22, 1, .36, 1);
  --gh-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

html {
  overflow-x: clip;
}

/* 02. Scoped monochrome photography */
.gh-photo {
  -webkit-filter: grayscale(1) contrast(1.12) brightness(1.02);
  filter: grayscale(1) contrast(1.12) brightness(1.02);
}

/* 03. Page-load wipe with a CSS-only failsafe */
body.gh-loading::before {
  position: fixed;
  inset: 0;
  z-index: 1000;
  content: "";
  pointer-events: none;
  background: var(--gh-brand);
  transform: scaleX(1);
  transform-origin: right center;
  animation: gh-wipe-failsafe 1200ms var(--gh-ease-out) forwards;
}

body.gh-loading.gh-loaded::before {
  animation: gh-wipe-clear 400ms var(--gh-ease-out) forwards;
}

@keyframes gh-wipe-clear {
  to { transform: scaleX(0); }
}

@keyframes gh-wipe-failsafe {
  0%, 58% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* 04. Reveal and stagger engine */
.gh-motion-ready .gh-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.985);
  transition:
    opacity var(--gh-motion-slow) var(--gh-ease-out),
    transform var(--gh-motion-slow) var(--gh-ease-out);
  transition-delay: var(--gh-delay, 0ms);
}

.gh-motion-ready .gh-reveal.gh-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.gh-motion-ready .gh-stagger {
  transition-delay: var(--gh-delay, 0ms);
}

/* 05. Hero cinematics */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.cover img {
  transform-origin: center;
  animation: gh-ken-burns 20s ease-in-out infinite alternate;
  will-change: transform;
}

.cover::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--gh-brand) 22%, transparent),
      transparent 46%,
      color-mix(in srgb, var(--gh-accent) 18%, transparent)
    );
  mix-blend-mode: color;
}

.cover::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  opacity: .045;
  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      var(--gh-ink) 0,
      transparent 1px,
      transparent 3px
    );
  background-size: 5px 5px;
  mix-blend-mode: multiply;
}

@keyframes gh-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.hero h1 {
  position: relative;
}

.hero h1::after {
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  height: 4px;
  content: "";
  background: var(--gh-accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: gh-rule-in 700ms var(--gh-ease-out) 480ms forwards;
}

@keyframes gh-rule-in {
  to { transform: scaleX(1); }
}

.gh-scroll-cue {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--gh-brand);
  border-radius: 50%;
  color: var(--gh-brand);
  background: color-mix(in srgb, var(--gh-paper) 86%, transparent);
  transform: translateX(-50%);
  animation: gh-cue-bounce 1600ms ease-in-out infinite;
}

.gh-scroll-cue::after {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

@keyframes gh-cue-bounce {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  50% { transform: translate3d(-50%, 7px, 0); }
}

/* 06. Physical and magnetic buttons */
.button {
  position: relative;
  isolation: isolate;
  transform: translate3d(var(--gh-magnet-x, 0), var(--gh-magnet-y, 0), 0);
  transition: transform 220ms var(--gh-ease-spring);
}

.button::after {
  position: absolute;
  inset: 4px;
  z-index: -1;
  content: "";
  border-radius: inherit;
  background: var(--gh-brand);
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.94);
  filter: blur(9px);
  transition: opacity 220ms ease, transform 220ms var(--gh-ease-out);
}

.button:hover,
.button:focus-visible {
  transform:
    translate3d(
      var(--gh-magnet-x, 0),
      calc(var(--gh-magnet-y, 0) - 2px),
      0
    );
}

.button:hover::after,
.button:focus-visible::after {
  opacity: .35;
  transform: translate3d(0, 9px, 0) scale(1);
}

.button:active {
  transform: translate3d(var(--gh-magnet-x, 0), var(--gh-magnet-y, 0), 0);
}

/* 07. Link underline wipe and focus */
main a:not(.button):not(.chapter-card):not(.gh-scroll-cue),
footer a {
  position: relative;
  text-decoration-color: transparent;
}

main a:not(.button):not(.chapter-card):not(.gh-scroll-cue)::after,
footer a::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--gh-motion-fast) ease;
}

main a:not(.button):not(.chapter-card):not(.gh-scroll-cue):hover::after,
main a:not(.button):not(.chapter-card):not(.gh-scroll-cue):focus-visible::after,
footer a:hover::after,
footer a:focus-visible::after {
  transform: scaleX(1);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--gh-accent);
  outline-offset: 4px;
}

/* 08. Content-card depth and corner accent */
.chapter-card {
  isolation: isolate;
  transform:
    perspective(900px)
    translate3d(0, var(--gh-card-lift, 0), 0)
    rotateX(var(--gh-tilt-x, 0deg))
    rotateY(var(--gh-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform 260ms var(--gh-ease-out);
}

.chapter-card::before {
  position: absolute;
  inset: 8px;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: var(--gh-brand);
  opacity: 0;
  transform: translate3d(0, 16px, -1px) scale(.96);
  filter: blur(15px);
  transition: opacity 260ms ease, transform 260ms var(--gh-ease-out);
}

.chapter-card::after {
  position: absolute;
  top: -4px;
  right: -1px;
  width: 44px;
  height: 44px;
  content: "";
  pointer-events: none;
  border-top: 4px solid var(--gh-accent);
  border-right: 4px solid var(--gh-accent);
  transform: scale(0);
  transform-origin: top right;
  transition: transform 220ms var(--gh-ease-spring);
}

.chapter-card:hover,
.chapter-card:focus-visible {
  --gh-card-lift: -5px;
}

.chapter-card:hover::before,
.chapter-card:focus-visible::before {
  opacity: .18;
  transform: translate3d(0, 18px, -1px) scale(1);
}

.chapter-card:hover::after,
.chapter-card:focus-visible::after {
  transform: scale(1);
}

/* 09. Icon micro-interactions */
.brand-mark,
.button > svg,
.chapter-card svg {
  transition: transform 220ms var(--gh-ease-spring);
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark,
.button:hover > svg,
.button:focus-visible > svg,
.chapter-card:hover svg,
.chapter-card:focus-visible svg {
  transform: rotate(6deg) scale(1.08);
}

/* 10. Living navigation and progress */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .brand {
  position: relative;
  transform-origin: left center;
  transition: transform 300ms var(--gh-ease-out);
}

.site-header .brand::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 50px;
  height: 2px;
  content: "";
  background: var(--gh-accent);
  transform: scaleX(.22);
  transform-origin: left center;
  transition: transform 300ms var(--gh-ease-out);
}

.gh-scrolled .site-header .brand {
  transform: scale(.9);
}

.gh-scrolled .site-header .brand::after {
  transform: scaleX(1);
}

.gh-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
  background: var(--gh-accent);
  transform: scaleX(var(--gh-progress, 0));
  transform-origin: left center;
}

/* 11. Section divider */
.chapters {
  position: relative;
}

.chapters::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(240px, 42vw);
  height: 4px;
  content: "";
  background: var(--gh-accent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 700ms var(--gh-ease-out);
}

.chapters.gh-section-visible::before {
  transform: translateX(-50%) scaleX(1);
}

/* 12. Back to top */
.gh-back-to-top {
  position: fixed;
  z-index: 60;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 34px);
  width: 46px;
  height: 46px;
  border: 2px solid var(--gh-accent);
  border-radius: 50%;
  color: var(--gh-paper);
  background: var(--gh-brand-dark);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 12px, 0) scale(.9);
  transition: opacity 220ms ease, transform 220ms var(--gh-ease-spring);
}

.gh-back-to-top.gh-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

/* 13. Responsive safeguards */
.chapters {
  scroll-margin-top: 76px;
}

@media (max-width: 600px) {
  .gh-scroll-cue {
    display: none;
  }

  .chapters {
    scroll-margin-top: 66px;
  }

  .chapter-card {
    transform: translate3d(0, var(--gh-card-lift, 0), 0);
  }

  .basketball-runner {
    max-width: calc(100vw - 8px);
  }
}

@media (hover: none), (pointer: coarse) {
  .chapter-card {
    transform: translate3d(0, var(--gh-card-lift, 0), 0);
  }
}

/* 14. Reduced motion: static, readable, and final-position exact */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.gh-loading::before,
  .gh-scroll-cue,
  .gh-progress,
  .basketball-runner,
  .button::after,
  .chapter-card::before,
  .chapter-card::after {
    display: none;
  }

  .gh-motion-ready .gh-reveal,
  .gh-motion-ready .gh-reveal.gh-visible,
  .cover,
  .cover:hover,
  .cover img,
  .hero h1::after,
  .button,
  .chapter-card,
  .brand-mark,
  .site-header .brand,
  .site-header .brand::after,
  .chapters::before,
  main a:not(.button):not(.chapter-card):not(.gh-scroll-cue)::after,
  footer a::after,
  .gh-back-to-top {
    animation: none !important;
    transition: none !important;
  }

  .gh-motion-ready .gh-reveal,
  .gh-motion-ready .gh-reveal.gh-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .cover img,
  .hero-copy,
  .button,
  .chapter-card,
  .site-header .brand,
  .gh-back-to-top {
    transform: none !important;
  }

  .hero h1::after,
  .chapters::before,
  .site-header .brand::after {
    transform: scaleX(1);
  }

  .cover,
  .cover:hover {
    transform: rotate(1.2deg) !important;
  }
}