/* ============================================================
   POLISH — motion, glow, cursor response.
   Remove this file's <link> in layout/theme.liquid to disable.

   ⚠️ The glows below are HARDCODED rgba, not var(--glow). They do
   not follow the :root block, so a palette change must sweep this
   file by hand — changing the tokens alone leaves purple halos
   behind on the spec panel and inside every card.
   ============================================================ */

/* scroll progress */
/* 2026-08-24 - was width:0 + transition:width. Animating width forces a
   LAYOUT on every scroll frame; transform:scaleX is compositor-only, so the
   GPU moves it without touching layout or paint. Identical look, no layout
   work while scrolling - which is exactly when the browser is busiest.
   ⚠️ culmen.js now sets bar.style.transform, NOT bar.style.width. These two
   must change together or the bar stays invisible at width:0. */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,#38BDF8,#A5F3FC);
  box-shadow:0 0 14px var(--glow);transition:transform .1s linear;
}

/* faint technical grid behind the hero */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 34%, #000 0%, transparent 78%);
}
.hero .wrap{position:relative;z-index:1}

/* glow behind the spec panel */
.note::after{
  content:'';position:absolute;inset:-70px -50px;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 44% at 50% 44%, rgba(103,232,249,.24), transparent 72%);
  filter:blur(38px);
}
.note__card{animation:noteIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes noteIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}

/* cursor spotlight inside cards */
.card::before,.pcard::before,.pane::before,.princ__item::before{
  content:'';position:absolute;inset:0;opacity:0;pointer-events:none;z-index:0;
  transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
             rgba(103,232,249,.13), transparent 62%);
}
.card:hover::before,.pcard:hover::before,.pane:hover::before,.princ__item:hover::before{opacity:1}

/* light sweeping the top edge of a card on hover */
.card::after,.pcard::after,.princ__item::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--violet-hi),transparent);
  opacity:0;transform:translateX(-100%);
  transition:opacity .3s ease;
}
.card:hover::after,.pcard:hover::after,.princ__item:hover::after{
  opacity:1;animation:sweep 1.1s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sweep{to{transform:translateX(100%)}}

.card>*,.pcard>*,.pane>*,.princ__item>*{position:relative;z-index:1}

/* stat cells glow from beneath on hover */
.stat::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);
  transition:opacity .3s ease;
}
.stat:hover::after{opacity:1}

/* scroll reveal */
.js-motion [data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
}
.js-motion [data-reveal].is-in{opacity:1;transform:none}

/* buttons: shine on hover */
.btn--fill{overflow:hidden}
.btn--fill::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.30) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn--fill:hover::after{animation:shine .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes shine{to{transform:translateX(120%)}}

/* focus ring that matches the theme */
.selector select:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-dim)}

@media(prefers-reduced-motion:reduce){
  .js-motion [data-reveal]{opacity:1!important;transform:none!important}
  .note__card{animation:none}
  .progress{display:none}
  .card::after,.pcard::after,.princ__item::after,.btn--fill::after{display:none}
}