/* AISC Cinematic Layer — preview pass */
/* Uses AISC brand green #7ED957 and the existing design-system tokens. */

/* Reveal class lives in style.css — cinematic.js drives the is-visible toggle. */

/* ─── Spotlight hover on cards & image frames ─── */
.card,
.price-card,
.article-card,
.feat-row__img-inner{isolation:isolate}
.card::before,
.price-card::before,
.article-card::before,
.feat-row__img-inner::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(126,217,87,.12),transparent 65%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:0;
}
.card:hover::before,
.price-card:hover::before,
.article-card:hover::before,
.feat-row__img-inner:hover::before{opacity:1}
.card > *,
.price-card > *,
.article-card > *{position:relative;z-index:1}
.feat-row__img-inner > img{position:relative;z-index:1}

/* ─── 3D mouse tilt ─── */
[data-tilt]{
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
[data-tilt].is-tilting{transition:box-shadow .3s ease}

/* Kill the hover transform reset that stock style.css has on feat-row img, so data-tilt takes over */
.feat-row__img-inner[data-tilt]{transform:perspective(1200px) rotateX(0) rotateY(0)}
.feat-row--reverse .feat-row__img-inner[data-tilt]{transform:perspective(1200px) rotateX(0) rotateY(0)}

/* ─── Button inner glow on cursor (hero__btn-primary excluded — hero reserved) ─── */
.btn--primary,
.audit-bar__btn{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after,
.audit-bar__btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(140px circle at var(--btn-mx,50%) var(--btn-my,50%),rgba(255,255,255,.3),transparent 60%);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.btn--primary:hover::after,
.audit-bar__btn:hover::after{opacity:1}

/* ─── Kinetic marquee band ─── */
.kinetic-band{
  background:linear-gradient(180deg,rgba(126,217,87,.04),transparent 70%);
  padding:32px 0;
  overflow:hidden;
  border-top:1px solid var(--border-s);
  border-bottom:1px solid var(--border-s);
  position:relative;
}
.kinetic-band__track{
  display:flex;
  gap:0;
  white-space:nowrap;
  animation:kineticScroll 55s linear infinite;
  will-change:transform;
  width:max-content;
}
.kinetic-band:hover .kinetic-band__track{animation-play-state:paused}
.kinetic-band__item{
  flex:0 0 auto;
  font-family:'Inter',sans-serif;
  font-size:clamp(34px,6vw,72px);
  font-weight:800;
  letter-spacing:-.03em;
  text-transform:uppercase;
  line-height:1;
  padding:0 28px;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(126,217,87,.55);
}
.kinetic-band__item--filled{
  color:var(--text-1);
  -webkit-text-stroke:0;
}
.kinetic-band__dot{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  padding:0 20px;
  font-size:32px;
  line-height:1;
  color:var(--green);
}
@keyframes kineticScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ─── Mesh ambient canvas (for audit-section etc.) ─── */
.audit-section{position:relative;overflow:hidden}
.audit-section > .container{position:relative;z-index:2}
.audit-section::before,
.audit-section::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  height:110px;
  pointer-events:none;
  z-index:1;
}
.audit-section::before{
  top:0;
  background:linear-gradient(to top,transparent 0%,rgba(0,0,0,.55) 55%,var(--dark) 100%);
}
.audit-section::after{
  bottom:0;
  background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.55) 55%,var(--dark) 100%);
}
.mesh-ambient{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.9;
}

/* ─── Text scramble characters ─── */
.cine-scramble .cine-char{display:inline;transition:color .12s ease}
.cine-scramble .cine-char.is-scrambling{color:rgba(126,217,87,.6);font-family:'JetBrains Mono',monospace}
.cine-scramble .cine-char.is-resolved{color:inherit;font-family:inherit}

/* ─── Particle elements (created in JS) ─── */
.cine-particle{
  position:fixed;
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  box-shadow:0 0 10px rgba(126,217,87,.6);
  will-change:transform,opacity;
}

/* ─── Reduced-motion fallbacks ─── */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .kinetic-band__track{animation:none}
  [data-tilt]{transition:none}
  .cine-scramble .cine-char{transition:none}
}

/* ─── Kinetic band responsive tuning ─── */
@media(max-width:991px){
  .kinetic-band{padding:24px 0}
  .kinetic-band__item{font-size:clamp(28px,7vw,48px);padding:0 20px}
  .kinetic-band__dot{padding:0 14px;font-size:24px}
}