/* opslymoves.com — canonical design tokens (single source of truth)
   Reconciled to the opsly-brand skill. Edit values ONLY here.
   Linked by every page; do not re-declare :root in page <style> blocks. */
:root{
  /* color — field & surfaces */
  --ink:#060E1A;
  --navy:#0B1F3A;
  --navy2:#0D2444;
  /* color — accents */
  --blue:#2563EB;
  --sky:#38BDF8;
  --amber:#F59E0B;
  --rose:#EF4444;
  /* color — text & lines on dark */
  --slate:#7A8FA8;
  --dim:rgba(255,255,255,.45);
  --mid:rgba(255,255,255,.65);
  --bright:rgba(255,255,255,.90);
  --border:rgba(255,255,255,.07);
  --bblue:rgba(37,99,235,.3);
  /* radius */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:20px;
  /* motion */
  --ease:.25s ease;
  /* type */
  --fd:"Cormorant Garamond",serif;
  --fb:"DM Sans",sans-serif;
}

body{
  position:relative;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;
  inset:-22%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 22% 28%,rgba(37,99,235,.14),transparent 38%),
    radial-gradient(ellipse at 78% 66%,rgba(56,189,248,.09),transparent 34%);
  transform:translate3d(0,0,0);
  animation:opsly-ambient-drift 28s ease-in-out infinite alternate;
}
body.home-page::before{display:none;}
@keyframes opsly-ambient-drift{
  from{transform:translate3d(-1.5%, -1%, 0);}
  to{transform:translate3d(1.5%, 1%, 0);}
}

.hero>.wrap,
main>article,
main>.eyebrow,
main>h1,
main>.sub,
main>.stats,
main>.method-panel,
main>.section,
main>section,
.article>.section{
  animation:opsly-content-enter .65s cubic-bezier(.2,.7,.2,1) both;
}
.hero>.wrap{animation-delay:.08s;}
main>.stats{animation-delay:.12s;}
main>.method-panel{animation-delay:.18s;}
@keyframes opsly-content-enter{
  from{opacity:0;transform:translate3d(0,12px,0);}
  to{opacity:1;transform:translate3d(0,0,0);}
}

@media(hover:hover){
  .card,.skill,.pillar,.pc,.howc,.sys-c,.item,.stat,.result{
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  }
  .card:hover,.skill:hover,.pillar:hover,.pc:hover,.howc:hover,.sys-c:hover,.item:hover,.stat:hover,.result:hover{
    transform:translateY(-3px);
    border-color:rgba(56,189,248,.32);
    box-shadow:0 14px 32px -24px rgba(56,189,248,.45);
  }
}

@media(prefers-reduced-motion:reduce){
  body::before{animation:none;}
  .hero>.wrap,
  main>article,
  main>.eyebrow,
  main>h1,
  main>.sub,
  main>.stats,
  main>.method-panel,
  main>.section,
  main>section,
  .article>.section{
    animation:none;
  }
  .card,.skill,.pillar,.pc,.howc,.sys-c,.item,.stat,.result{
    transition:none;
  }
}