/* ============================================================
   ENHANCEMENT LAYER (loaded last)
   1. SMOOTHER ANIMATIONS — every transition moved to compositor-
      friendly properties (opacity/transform only). Blur() filters
      were being animated on large elements every scroll; removing
      them is the single biggest smoothness win.
   2. EASE OF ACCESS — skip link, visible keyboard focus, larger
      touch targets, marquee pause, back-to-top, reduced motion.
   3. PERFORMANCE — trims blanket will-change (GPU memory), keeps
      scroll work on the compositor.
   ============================================================ */

/* ------------------------------------------------------------
   1. SMOOTHER ANIMATIONS
   ------------------------------------------------------------ */

/* Reveal: opacity + transform only. Animating filter:blur() forced
   expensive repaints on every element entering the viewport. */
.reveal{
  filter:none !important;
  transform:translate3d(0,28px,0);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out) !important;
}
.reveal.in{filter:none !important;transform:translate3d(0,0,0)}

/* Section focus states while scrolling: drop the blur, keep the
   gentle fade/slide. Blur on a whole .wrap re-rasterized entire
   sections mid-scroll — the main source of jank. */
.section-fade .wrap,
.section-fade .hero-inner{
  transition:opacity .65s var(--ease-out), transform .65s var(--ease-out) !important;
  filter:none !important;
}
/* Scroll-dimming of past/next sections removed — full opacity always
   (the fading effect hurt readability for no real payoff). */
.section-fade.is-past .wrap,
.section-fade.is-past .hero-inner,
.section-fade.is-next .wrap,
.section-fade.is-next .hero-inner{
  opacity:1;
  transform:none;
  filter:none !important;
}

/* Card hovers: shorter, snappier, GPU-composited lift. */
.aud,.pillar,.term,.q,.concern,.tier,.way,.val,.card,.step,.fact,.s,.c,
.opp,.nb,.board{
  transition:transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out) !important;
}
.aud:hover,.pillar:hover,.term:hover,.q:hover,.concern:hover,.tier:hover,
.way:hover,.val:hover,.card:hover,.step:hover,.fact:hover{
  transform:translate3d(0,-6px,0);
}

/* Image zooms: promoted once, eased consistently. */
.framed img,.gallery img,.media img,.bgall img{
  transition:transform .9s var(--ease-out), filter .5s var(--ease-out), opacity .5s var(--ease-out) !important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.gallery a:hover img,.bgall > *:hover img{transform:scale(1.06) translateZ(0);}
.framed:hover img,.media:hover img{transform:scale(1.035) translateZ(0);}

/* Background cross-fade layers: opacity only (transform scale drift
   over 7s created continuous compositing work for little payoff). */
.site-bg-layer{
  transition:opacity 1.4s var(--ease-out), filter 1.4s var(--ease-out) !important;
  transform:none !important;
}

/* Scroll progress bar — now driven by transform:scaleX (compositor)
   instead of width (layout), re-enabled from enhance.js. */
html.js body::before{
  width:100% !important;
  transform:scaleX(var(--scroll-progress, 0));
  transform-origin:left;
  transition:transform .12s linear;
}

/* Smooth open animation for FAQ <details>. */
.faq details > *:not(summary){
  animation:faqOpen .45s var(--ease-out) both;
}
@keyframes faqOpen{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.faq summary{cursor:pointer;transition:color .25s var(--ease-out)}

/* Mobile menu: keep it out of the accessibility tree & tab order
   while closed, and ease it a touch faster. */
.mobile-menu{
  visibility:hidden;
  transition:transform .38s cubic-bezier(.7,0,.2,1), visibility 0s linear .38s;
}
.mobile-menu.open{visibility:visible;transition:transform .38s cubic-bezier(.7,0,.2,1)}

/* ------------------------------------------------------------
   2. EASE OF ACCESS
   ------------------------------------------------------------ */

/* Skip link — first focusable element on every page. */
.skip-link{
  position:fixed;
  top:12px;left:12px;z-index:10000;
  padding:12px 20px;
  background:var(--ink, #141414);
  color:#fff;
  font-family:var(--mono);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.35);
  border-radius:4px;
  transform:translateY(-200%);
  transition:transform .25s var(--ease-out);
}
.skip-link:focus{transform:none;outline:2px solid var(--gold-bright,#B31B1B);outline-offset:2px}

/* Visible keyboard focus everywhere (was missing entirely). */
:focus-visible{
  outline:2px solid var(--gold-bright, #B31B1B) !important;
  outline-offset:3px;
  border-radius:2px;
}
.btn:focus-visible,.chip:focus-visible{outline-offset:2px}
.mobile-menu a:focus-visible{outline-offset:6px}

/* Back-to-top button (injected by enhance.js). */
.to-top{
  position:fixed;
  right:22px;bottom:22px;z-index:95;
  width:46px;height:46px;
  display:grid;place-items:center;
  background:linear-gradient(180deg, rgba(14,14,14,.88), rgba(14,14,14,.74));
  color:var(--paper,#f7f1ef);
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 18px 45px -28px rgba(0,0,0,.85);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), border-color .25s;
}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--gold-bright,#B31B1B)}
.to-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* Slightly larger touch targets for nav + chips on small screens. */
@media (max-width:880px){
  .nav-links a,.chip{padding:10px 12px}
  .burger{padding:10px;margin:-4px}
}

/* Honor OS-level contrast preference on translucent cards. */
@media (prefers-contrast: more){
  .aud,.pillar,.term,.q,.concern,.tier,.way,.val,.card,.step,.fact,.s,.c{
    background:#111 !important;
    backdrop-filter:none !important;
    border-color:rgba(255,255,255,.4) !important;
  }
}

/* Screen-reader-only utility (used for live search status). */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------
   3. PERFORMANCE
   ------------------------------------------------------------ */

/* Blanket will-change on dozens of cards kept them permanently
   promoted to GPU layers (memory + composite cost). Browsers
   promote automatically during transitions — reset it. */
.btn,.aud,.pillar,.val,.way,.tier,.concern,.card,.step,.q,.term,.s,.c,.fact,
header.nav,.site-bg-layer,
.hero-bg img,.subhero .bg img,.framed img,.media img,.gallery img,.bgall img{
  will-change:auto !important;
}

/* Full reduced-motion coverage for everything added above.
   Selectors repeat the ones used earlier so they win the cascade. */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.in,
  .section-fade .wrap,.section-fade .hero-inner,
  .aud,.pillar,.term,.q,.concern,.tier,.way,.val,.card,.step,.fact,.s,.c,
  .opp,.nb,.board,
  .framed img,.gallery img,.media img,.bgall img,
  .site-bg-layer{transition:none !important}
  .reveal{opacity:1;transform:none}
  .skip-link,.to-top,.mobile-menu{transition:none !important}
  .to-top{opacity:1;transform:none}
  .faq details > *:not(summary){animation:none !important}
  html.js body::before{display:none !important}
  .section-fade.is-past .wrap,.section-fade.is-next .wrap,
  .section-fade.is-past .hero-inner,.section-fade.is-next .hero-inner{
    opacity:1 !important;transform:none !important;
  }
}