/*!
 * MIDAS — motion / FX styles
 * ---------------------------------------------------------------------------
 * Pairs with src/fx.js. All hooks are opt-in and inert without JavaScript.
 *
 * Hooks styled here
 *   #gold-dust                     ambient canvas (placed by the layout layer)
 *   .cursor-glow                   fine-pointer cursor aura, created by JS
 *   #scroll-progress               top reading-progress hairline
 *   #site-header.is-scrolled       condensed header after 24px of scroll
 *   [data-reveal]                  reveal transitions + data-delay 1..6
 *   .fx-nav-active                 current section link
 *
 * Behavior attributes (implemented in fx.js): [data-reveal] [data-delay="1..6"]
 * [data-count] [data-prefix] [data-suffix] [data-decimals] [data-parallax]
 * [data-magnetic].
 *
 * JS adds [data-reveal] hidden state only after it has set up observation,
 * so content remains visible when scripts are unavailable.
 * ---------------------------------------------------------------------------
 */

/* --------------------------------------------------------------------------
 * Ambient gold dust canvas
 * -------------------------------------------------------------------------- */

#gold-dust {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 720px) {
  #gold-dust {
    opacity: 0.68;
  }
}

/* --------------------------------------------------------------------------
 * Cursor glow — fine pointers only
 * -------------------------------------------------------------------------- */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-1000px, -1000px, 0) translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(246, 226, 122, 0.1) 0%,
    rgba(212, 175, 55, 0.06) 18%,
    rgba(138, 106, 31, 0.03) 40%,
    rgba(138, 106, 31, 0) 66%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 420ms ease;
  will-change: transform, opacity;
}

.cursor-glow.is-active {
  opacity: 1;
}

.cursor-glow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--gold-hi, #f6e27a);
  box-shadow:
    0 0 6px 1px rgba(246, 226, 122, 0.85),
    0 0 18px 5px rgba(212, 175, 55, 0.35);
}

@media (hover: none), (pointer: coarse) {
  .cursor-glow {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
 * Scroll progress
 * -------------------------------------------------------------------------- */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(138, 106, 31, 0.12) 0%,
    var(--gold-lo, #8a6a1f) 35%,
    var(--gold, #d4af37) 70%,
    var(--gold-hi, #f6e27a) 100%
  );
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* --------------------------------------------------------------------------
 * Header after scroll
 * -------------------------------------------------------------------------- */

#site-header.is-scrolled {
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

@media (min-width: 901px) {
  #site-header.is-scrolled {
    background-color: rgba(8, 7, 5, 0.94);
    background-color: color-mix(in srgb, var(--ink, #080705) 94%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

/* --------------------------------------------------------------------------
 * Scroll reveal
 * -------------------------------------------------------------------------- */

html.fx-reveal [data-reveal] {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0ms;
}

html.fx-reveal [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

html.fx-reveal [data-reveal][data-delay="1"] {
  transition-delay: 90ms;
}

html.fx-reveal [data-reveal][data-delay="2"] {
  transition-delay: 180ms;
}

html.fx-reveal [data-reveal][data-delay="3"] {
  transition-delay: 270ms;
}

html.fx-reveal [data-reveal][data-delay="4"] {
  transition-delay: 360ms;
}

html.fx-reveal [data-reveal][data-delay="5"] {
  transition-delay: 450ms;
}

html.fx-reveal [data-reveal][data-delay="6"] {
  transition-delay: 540ms;
}

/* --------------------------------------------------------------------------
 * Active navigation link
 * -------------------------------------------------------------------------- */

.fx-nav-active {
  color: var(--gold-hi, #f6e27a);
}

/* --------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #gold-dust,
  .cursor-glow {
    display: none !important;
  }

  html.fx-reveal [data-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}