/* ============================================================
   DERRICK INDUSTRIES — shared page chrome & motion primitives
   Opt-in: only pages that link this file get the behaviour, so
   selectors can stay unscoped. Pair with site-motion.js.
   ============================================================ */

:root{ --ease:cubic-bezier(.22,.9,.28,1); }

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  z-index:200;
  background:linear-gradient(90deg, var(--amber), #F6C87E);
  transform:scaleX(0);
  transform-origin:0 50%;
  will-change:transform;
}

/* ---------- header: condenses once the page moves ---------- */
/* header.site{
  border-bottom-color:transparent;
  background-color: #0D1B2E;
  transition:background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
} */
header.site .nav{ transition:height .35s var(--ease); }
body.is-scrolled header.site{
  background:rgba(44,66,88,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dk);
  box-shadow:0 12px 34px -20px rgba(0,0,0,.95);
}
body.is-scrolled header.site .nav{ height:64px; }
body.is-scrolled header.site .brand img { height: 48px; }

.brand .mark{ transition:transform .5s var(--ease), border-color .3s ease; }
.brand:hover .mark{ transform:rotate(90deg); border-color:var(--amber); }

nav.links a:not(.nav-cta)::before{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:6px;
  height:2px;
  background:var(--amber);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .35s var(--ease);
}
nav.links a:not(.nav-cta):hover::before{ transform:scaleX(1); }
nav.links a.active::after{
  transform-origin:0 50%;
  animation:navUnderline .6s var(--ease) both;
}
@keyframes navUnderline{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.nav-cta{ position:relative; overflow:hidden; }
.nav-cta::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-120%);
}
.nav-cta:hover::after{ animation:sheen .75s var(--ease); }
@keyframes sheen{ to{ transform:translateX(120%); } }

/* ---------- reveal-on-scroll ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0s);
}
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- arrow glyph nudge ---------- */
.arw{ display:inline-block; transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }

/* ---------- animated hazard rule ----------
   the -45deg stripe repeats every 20px along its axis, i.e.
   20 * sqrt(2) horizontally — shifting by exactly that loops seamlessly */
.hazard-rule{ animation:hazardSlide 2.2s linear infinite; }
@keyframes hazardSlide{ to{ background-position:28.284px 0; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hazard-rule{ animation:none !important; }
}