/* ============================================================================
   PRIMAL motion layer
   Shared, dependency free. Loaded by every page so the whole site moves the
   same way. Everything here is additive: if motion.js never runs, nothing is
   hidden and nothing shifts.
   ========================================================================== */

:root{
  --pm-ease: cubic-bezier(.22,.68,.24,1);
  --pm-ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. scroll reveal -------------------------------------------- */
/* .pm-anim is only ever added by JS, so no-JS keeps everything visible. */
.pm-anim{
  opacity:0;
  transform:translateY(26px);
  will-change:opacity,transform;
}
.pm-anim.pm-in{
  opacity:1;
  transform:none;
  transition:opacity .8s var(--pm-ease-out), transform .8s var(--pm-ease-out);
  transition-delay:var(--pm-d,0ms);
  will-change:auto;
}
/* headings get a touch more travel and a soft settle */
.pm-anim.pm-anim--lead{ transform:translateY(34px); }

/* ---------- 2. page to page fade ---------------------------------------- */
#pmFade{
  position:fixed; inset:0;
  background:#0A0A0A;
  z-index:9999;
  pointer-events:none;
  opacity:1;
  transition:opacity .5s ease;
}
html.pm-loaded #pmFade{ opacity:0; }
html.pm-leaving #pmFade{ opacity:1; transition-duration:.24s; }

/* ---------- 3. scroll progress ------------------------------------------ */
#pmBar{
  position:fixed; top:0; left:0;
  height:2px; width:0;
  background:var(--red,#FF3333);
  z-index:9998;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
html.pm-scrolled #pmBar{ opacity:1; }

/* ---------- 4. header ---------------------------------------------------- */
header{
  transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
html.pm-scrolled header{
  background-color:rgba(10,10,10,.88);
  border-bottom-color:rgba(255,255,255,.16);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
}

/* nav underline: some pages had it, now all of them do */
.navlink{ position:relative; }
.navlink::after{
  content:''; position:absolute; left:0; bottom:-6px;
  height:2px; width:0; background:var(--red,#FF3333);
  transition:width .28s var(--pm-ease);
}
.navlink:hover::after{ width:100%; }

/* dropdowns: Tailwind flips display, so an animation (not a transition) is
   what actually plays when the panel appears */
@keyframes pm-dd{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
header .group:hover > div > div,
header .group:focus-within > div > div{
  animation:pm-dd .24s var(--pm-ease-out) both;
}

/* ---------- 5. hover polish --------------------------------------------- */
.pm-motion a, .pm-motion button{ transition:color .22s ease, opacity .22s ease; }

.card, .dcard{ transition:transform .35s var(--pm-ease), border-color .3s ease, box-shadow .35s ease; }
.card:hover, .dcard:hover{ transform:translateY(-5px); }
.card:hover{ box-shadow:0 22px 40px -30px rgba(0,0,0,.55); }

.btn-red:active, .btn-ghost:active{ transform:translateY(0) scale(.985); }

/* every grouped image gets the same unhurried zoom */
.pm-motion .group img{ transition:transform .85s var(--pm-ease), filter .5s ease; }

/* keyboard users get a visible target everywhere */
.pm-motion a:focus-visible,
.pm-motion button:focus-visible,
.pm-motion [tabindex]:focus-visible{
  outline:2px solid var(--red,#FF3333);
  outline-offset:3px;
}

/* ---------- 6. opt out --------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .pm-anim, .pm-anim.pm-in{ opacity:1 !important; transform:none !important; transition:none !important; }
  #pmFade, #pmBar{ display:none !important; }
  header .group:hover > div > div,
  header .group:focus-within > div > div{ animation:none; }
  .card:hover, .dcard:hover{ transform:none; }
  .pm-motion .group img{ transition:none; }
}