/* ============================================================
   CompCode Solutions — motion layer (homepage)
   Direction A, restrained: reveals, one code sweep, a live strip.
   Everything here is off under prefers-reduced-motion.
   ============================================================ */

/* ── live strip: the site's own evidence, linked to /portfolio ── */
.livebar{
  display:flex; align-items:center; gap:var(--space-4);
  margin-top:var(--space-8); padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
  text-decoration:none; color:var(--color-gray-400);
  font-family:var(--font-mono); font-size:var(--text-sm);
  transition:color var(--transition-base);
  max-width:36rem;
}
.livebar:hover{ color:var(--color-white); }
.livebar__dots{ display:inline-flex; gap:4px; flex:none; }
.livebar__dots i{ width:7px; height:7px; border-radius:50%; background:#2f6b3f; opacity:.35; }
.livebar__text{ flex:1; }
.livebar__text b{ color:var(--color-white); font-weight:var(--weight-semibold); }
.livebar__go{ flex:none; transition:transform var(--transition-base); }
.livebar:hover .livebar__go{ transform:translateX(4px); }

/* ── headline: words rise out of a mask on load ── */
.wr{ display:inline-block; overflow:clip; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.wr > span{ display:inline-block; }

/* ── code panel: one sweep over the permission lines ── */
.code-panel{ position:relative; overflow:hidden; }
.code-sweep{
  position:absolute; left:0; right:0; top:0; height:38%;
  background:linear-gradient(180deg, transparent, rgba(28,75,124,.07), transparent);
  opacity:0; pointer-events:none;
}
.code-mark{ position:relative; }
.code-mark::after{
  content:""; position:absolute; left:-4px; right:-4px; top:-2px; bottom:-2px;
  background:rgba(28,75,124,.10); border-left:2px solid var(--color-blue);
  opacity:0; transition:opacity .5s ease; z-index:-1;
}
.is-lit .code-mark::after{ opacity:1; }

@media (prefers-reduced-motion: no-preference){
  .m-ready .wr > span{ transform:translateY(105%); opacity:0; transition:transform .9s cubic-bezier(.2,.75,.15,1), opacity .5s ease; }
  .m-in .wr > span{ transform:none; opacity:1; }
  .is-lit .code-sweep{ animation:codeSweep 2.6s cubic-bezier(.4,0,.2,1) .3s 1 forwards; }
  .livebar.is-lit .livebar__dots i{ animation:livePulse 2.8s ease-out infinite; }
  .livebar__dots i:nth-child(2){ animation-delay:.12s } .livebar__dots i:nth-child(3){ animation-delay:.24s }
  .livebar__dots i:nth-child(4){ animation-delay:.36s } .livebar__dots i:nth-child(5){ animation-delay:.48s }
  .livebar__dots i:nth-child(6){ animation-delay:.6s }  .livebar__dots i:nth-child(7){ animation-delay:.72s }
  .btn--primary{ will-change:transform; }
}
@keyframes codeSweep{ 0%{ opacity:1; transform:translateY(-40%);} 100%{ opacity:0; transform:translateY(260%);} }
@keyframes livePulse{ 0%,70%,100%{ opacity:.35; } 12%{ opacity:1; } }

@media (max-width:640px){ .livebar{ font-size:var(--text-xs); gap:var(--space-3); } }