/* ============================================================
   transform.css — Global Transformation Layer
   ============================================================
   Site-wide premium systems added in the "Complete Website
   Transformation" pass. Everything here is ADDITIVE and loaded
   LAST so it wins the cascade without rewriting any page. Nothing
   hides content if JS fails to run (no-JS = fully visible).

   Systems:
     1. Scroll-progress indicator (top hairline)
     2. Scroll-condensing navigation
     3. Back-to-top affordance
     4. Skeleton / shimmer loading utility
     5. Unified focus-visible ring (a11y)
     6. Gentle section + page reveal
   All motion is disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Scroll-progress indicator ---------- */
.bc-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-light), var(--gold) 55%, var(--red));
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease, ease);
  box-shadow: 0 0 12px rgba(201,162,39,0.5);
}
.bc-scroll-progress.on { opacity: 1; }

/* ---------- 2. Scroll-condensing navigation ---------- */
/* The nav already has its own base styling; we only tighten it once the
   user scrolls, for a denser, more focused reading surface. */
.nav {
  transition: padding .32s var(--ease, ease),
              background-color .32s var(--ease, ease),
              box-shadow .32s var(--ease, ease),
              backdrop-filter .32s var(--ease, ease);
  will-change: padding, background-color;
}
.nav.is-scrolled {
  background: rgba(12,12,14,0.72);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  box-shadow: 0 1px 0 var(--line-soft), 0 12px 34px rgba(0,0,0,0.34);
}
.nav.is-scrolled .nav-inner { padding-top: 10px; padding-bottom: 10px; }
.nav .nav-inner {
  transition: padding .32s var(--ease, ease);
}

/* ---------- 3. Back-to-top ---------- */
.bc-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(18px, 4vw, 34px);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  cursor: pointer;
  z-index: 1150;
  opacity: 0;
  transform: translateY(14px) scale(.92);
  pointer-events: none;
  transition: opacity .34s var(--ease, ease), transform .34s var(--ease, ease),
              border-color .2s var(--ease, ease), box-shadow .2s var(--ease, ease);
  box-shadow: var(--shadow-lg);
}
.bc-to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.bc-to-top:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow-gold);
  transform: translateY(-2px);
}
.bc-to-top:active { transform: translateY(0) scale(.96); }
.bc-to-top svg { width: 19px; height: 19px; }

/* ---------- 4. Skeleton / shimmer loading utility ---------- */
.bc-skel {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border-radius: var(--radius-s);
}
.bc-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.07) 45%,
    rgba(255,255,255,0.11) 50%,
    rgba(255,255,255,0.07) 55%,
    rgba(255,255,255,0) 100%);
  animation: bcShimmer 1.35s ease-in-out infinite;
}
@keyframes bcShimmer { 100% { transform: translateX(100%); } }
.bc-skel-line { height: 12px; border-radius: 6px; margin: 8px 0; }
.bc-skel-line.sm { width: 55%; }
.bc-skel-line.lg { height: 20px; }

/* ---------- 5. Unified focus-visible ring ---------- */
/* One consistent, accessible focus treatment across every interactive
   element. :focus-visible only, so mouse users never see a ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
/* Inputs already have a border radius; keep the ring hugging it. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 1px; }

/* ---------- 6. Gentle page + section reveal ---------- */
/* Reveal is applied only when JS marks the doc ready, and the resting
   state is fully visible — so content is never hidden without JS. */
html.bc-anim-ready [data-bc-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out, ease), transform .6s var(--ease-out, ease);
  will-change: opacity, transform;
}
html.bc-anim-ready [data-bc-reveal].bc-in { opacity: 1; transform: none; }

/* ---------- Reduced motion: neutralize everything above ---------- */
@media (prefers-reduced-motion: reduce) {
  .bc-scroll-progress { display: none; }
  .nav, .nav .nav-inner, .bc-to-top { transition: none; }
  .bc-skel::after { animation: none; }
  html.bc-anim-ready [data-bc-reveal] { opacity: 1; transform: none; transition: none; }
}