/* ============================================================
   local.css — behaviour layer for the offline copy
   Only additions. The original site.css is untouched.
   ============================================================ */

/* --- Scroll reveal -------------------------------------------------
   The React app set inline opacity:0 on ~24 blocks and faded them in
   on scroll. local.js re-adds that; this supplies the transition. */
[data-reveal]{
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),
             transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
[data-reveal="in"]{
  opacity:1 !important;
  transform:none !important;
}

/* --- Header background once you scroll off the hero ---------------- */
header.is-scrolled{
  background:rgba(11,17,19,.92) !important;
  backdrop-filter:saturate(170%) blur(12px);
  -webkit-backdrop-filter:saturate(170%) blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}

/* --- Mobile drawer (rebuilt; React rendered it conditionally) ------ */
.local-drawer{
  display:none;
  border-top:1px solid rgba(255,255,255,.14);
  background:rgba(11,17,19,.97);
  backdrop-filter:saturate(170%) blur(12px);
  -webkit-backdrop-filter:saturate(170%) blur(12px);
}
.local-drawer.is-open{display:block;}
.local-drawer ul{list-style:none;margin:0;padding:8px 0;}
.local-drawer a{
  display:block;
  padding:14px 24px;
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:color .2s,background .2s;
}
.local-drawer a:hover{color:#fff;background:rgba(255,255,255,.05);}
.local-drawer li:last-child a{border-bottom:0;}

@media (min-width:1024px){
  .local-drawer{display:none !important;}
}

/* --- Back to top --------------------------------------------------- */
.local-totop{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,17,19,.9);
  color:#d9bc6a;
  border:1px solid rgba(217,188,106,.4);
  cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s,transform .3s,background .3s,color .3s;
}
.local-totop.is-visible{opacity:1;pointer-events:auto;transform:none;}
.local-totop:hover{background:#c9a227;color:#12181a;border-color:#c9a227;}

/* --- Nothing should stay invisible if JS is off -------------------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none;}
}