/* CAD BOLT shared FX — opt-in via data-fx="tilt" | data-fx="flow"
   Perf: GPU transforms only, no layout props animated, IntersectionObserver gates work. */

@property --cb-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ========== TILT ========== */
[data-fx="tilt"]{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg; --lift:0px;
  position:relative;
  transform-style:preserve-3d;
  isolation:isolate;
  transform:translate3d(0,var(--lift),0) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease-out, box-shadow .25s ease;
  will-change:transform;
  /* avoid CLS: reserve space; don't change size on hover */
}
[data-fx="tilt"].is-hot{
  --lift:-8px;
  z-index:2;
  box-shadow:0 24px 56px -22px rgba(0,0,0,.7),0 0 0 1px rgba(243,112,33,.35),0 0 36px -8px rgba(243,112,33,.42);
}
/* animated gradient border */
[data-fx="tilt"]:not(.th-conn):not(.cb-fx-conn)::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--cb-ang,0deg),#F37021,transparent 25%,#2DD4BF 50%,transparent 75%,#F37021);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s; pointer-events:none; z-index:4;
}
[data-fx="tilt"].is-hot::before{ opacity:1; animation:cbFxBorder 3.5s linear infinite }
@keyframes cbFxBorder{ to{ --cb-ang:360deg } }

/* spotlight + shine injected by JS as .cb-fx-spot / .cb-fx-shine */
[data-fx="tilt"] > .cb-fx-spot{
  position:absolute; inset:0; pointer-events:none; z-index:3; opacity:0; transition:opacity .25s;
  border-radius:inherit;
  background:radial-gradient(380px circle at var(--mx) var(--my),rgba(243,112,33,.26),rgba(45,212,191,.07) 38%,transparent 62%);
  mix-blend-mode:screen;
}
[data-fx="tilt"].is-hot > .cb-fx-spot{ opacity:1 }
[data-fx="tilt"] > .cb-fx-shine{
  position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; border-radius:inherit;
}
[data-fx="tilt"] > .cb-fx-shine::after{
  content:""; position:absolute; top:-20%; left:-40%; width:40%; height:140%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.26),rgba(255,255,255,.08),transparent);
  transform:translateX(-120%) skewX(-18deg); opacity:0;
}
[data-fx="tilt"].is-hot > .cb-fx-shine::after{ animation:cbFxShine .85s ease forwards }
@keyframes cbFxShine{
  0%{ transform:translateX(-120%) skewX(-18deg); opacity:0 }
  18%{ opacity:1 }
  100%{ transform:translateX(320%) skewX(-18deg); opacity:0 }
}
/* subtle image zoom + parallax when card has img */
[data-fx="tilt"] img{
  transform:scale(1.02) translate3d(0,0,0);
  transition:transform .45s ease-out;
  will-change:transform;
}
[data-fx="tilt"].is-hot img{
  transform:scale(1.07) translate3d(calc((var(--mx) - 50%) * -.06), calc((var(--my) - 50%) * -.06), 0);
}

@media (hover:none), (pointer:coarse){
  [data-fx="tilt"]{ transform:none!important }
  [data-fx="tilt"].is-hot{ --lift:0px; box-shadow:0 0 0 1px rgba(243,112,33,.4),0 12px 32px -16px rgba(243,112,33,.35) }
  [data-fx="tilt"]::before{ opacity:.45; animation:none }
  [data-fx="tilt"] > .cb-fx-spot{ display:none }
}
@media (prefers-reduced-motion:reduce){
  [data-fx="tilt"], [data-fx="tilt"] img{ transition:none!important; transform:none!important; animation:none!important }
  [data-fx="tilt"]::before, [data-fx="tilt"] > .cb-fx-shine::after{ animation:none!important }
  [data-fx="tilt"] > .cb-fx-spot{ display:none }
  [data-fx="tilt"].is-hot{ box-shadow:0 0 0 1px rgba(243,112,33,.45) }
}

/* ========== FLOW (scroll/hover active card) ========== */
[data-fx="flow"]{ --cb-glow:rgba(243,112,33,.42); position:relative }
[data-fx="flow"] > [data-fx-item],
[data-fx="flow"] > .cb-fx-item{
  position:relative; z-index:1;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
  will-change:transform;
}
/* description collapse — opt-in target */
[data-fx="flow"] [data-fx-desc],
[data-fx="flow"] > [data-fx-item] > .cb-fx-desc,
[data-fx="flow"] > .cb-fx-item > .cb-fx-desc{
  max-height:0; opacity:0; overflow:hidden; margin:0;
  transition:max-height .35s ease, opacity .3s ease, margin .3s ease;
}
[data-fx="flow"] > [data-fx-item].is-active > [data-fx-desc],
[data-fx="flow"] > [data-fx-item].is-active > .cb-fx-desc,
[data-fx="flow"] > .cb-fx-item.is-active > [data-fx-desc],
[data-fx="flow"] > .cb-fx-item.is-active > .cb-fx-desc,
[data-fx="flow"] > [data-fx-item].is-active > p.cb-fx-desc,
[data-fx="flow"] [data-fx-item].is-active [data-fx-desc]{
  max-height:5em; opacity:1; margin-top:.15rem;
}
/* soft expand for plain p when data-fx-collapse="1" on container */
[data-fx="flow"][data-fx-collapse="1"] > [data-fx-item] > p:not([data-fx-keep]),
[data-fx="flow"][data-fx-collapse="1"] > .cb-fx-item > p:not([data-fx-keep]){
  max-height:0; opacity:0; overflow:hidden; margin-top:0; margin-bottom:0;
  transition:max-height .35s ease, opacity .3s ease, margin .3s ease;
}
[data-fx="flow"][data-fx-collapse="1"] > [data-fx-item].is-active > p:not([data-fx-keep]),
[data-fx="flow"][data-fx-collapse="1"] > .cb-fx-item.is-active > p:not([data-fx-keep]){
  max-height:5em; opacity:1; margin-top:.25rem;
}

[data-fx="flow"] > [data-fx-item].is-active,
[data-fx="flow"] > .cb-fx-item.is-active{
  border-color:#F37021 !important;
  background:linear-gradient(135deg,rgba(243,112,33,.16),rgba(18,38,58,.92) 55%);
  box-shadow:0 0 0 1px rgba(243,112,33,.35),0 0 28px var(--cb-glow),0 14px 36px rgba(7,21,34,.4);
  transform:translateY(-5px) scale(1.015);
  z-index:3;
}

/* connectors between siblings in a row */
[data-fx="flow"] > [data-fx-item].cb-fx-conn::after,
[data-fx="flow"] > .cb-fx-item.cb-fx-conn::after{
  content:""; position:absolute; top:50%; right:-.7rem; width:.7rem; height:2px; z-index:4;
  background:linear-gradient(90deg,rgba(243,112,33,.15),#F37021,rgba(243,112,33,.15));
  background-size:200% 100%; transform:translateY(-50%); pointer-events:none; opacity:.3;
}
[data-fx="flow"] > [data-fx-item].cb-fx-conn.cb-fx-flow::after,
[data-fx="flow"] > [data-fx-item].is-active.cb-fx-conn::after,
[data-fx="flow"] > .cb-fx-item.cb-fx-conn.cb-fx-flow::after,
[data-fx="flow"] > .cb-fx-item.is-active.cb-fx-conn::after{
  opacity:1; animation:cbFxFlow 1.4s linear infinite;
}
[data-fx="flow"] > [data-fx-item].cb-fx-conn::before,
[data-fx="flow"] > .cb-fx-item.cb-fx-conn::before{
  content:""; position:absolute; top:50%; right:-.9rem; z-index:5;
  border:5px solid transparent; border-left-color:#F37021;
  transform:translateY(-50%); pointer-events:none; opacity:.3;
}
[data-fx="flow"] > [data-fx-item].cb-fx-conn.cb-fx-flow::before,
[data-fx="flow"] > [data-fx-item].is-active.cb-fx-conn::before,
[data-fx="flow"] > .cb-fx-item.cb-fx-conn.cb-fx-flow::before,
[data-fx="flow"] > .cb-fx-item.is-active.cb-fx-conn::before{ opacity:1 }
@keyframes cbFxFlow{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

@media (max-width:760px){
  [data-fx="flow"] > [data-fx-item].cb-fx-conn::after,
  [data-fx="flow"] > [data-fx-item].cb-fx-conn::before,
  [data-fx="flow"] > .cb-fx-item.cb-fx-conn::after,
  [data-fx="flow"] > .cb-fx-item.cb-fx-conn::before{ display:none }
  [data-fx="flow"] > [data-fx-item].is-active,
  [data-fx="flow"] > .cb-fx-item.is-active{ transform:translateY(-3px) scale(1.01) }
}
@media (prefers-reduced-motion:reduce){
  [data-fx="flow"] > [data-fx-item],
  [data-fx="flow"] > .cb-fx-item,
  [data-fx="flow"] [data-fx-desc],
  [data-fx="flow"][data-fx-collapse="1"] > [data-fx-item] > p{ transition:none!important }
  [data-fx="flow"] > [data-fx-item].is-active,
  [data-fx="flow"] > .cb-fx-item.is-active{ transform:none }
  [data-fx="flow"] > [data-fx-item].cb-fx-conn::after{ animation:none!important }
  [data-fx="flow"][data-fx-collapse="1"] > [data-fx-item] > p,
  [data-fx="flow"] [data-fx-desc]{ max-height:5em; opacity:1 }
}


/* broad item selectors (data-fx-items may nest) */
[data-fx="flow"] [data-fx-item],
[data-fx="flow"] .cb-fx-item{
  position:relative;z-index:1;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease;
  will-change:transform;
  overflow:visible;
}
[data-fx="flow"] [data-fx-item].is-active,
[data-fx="flow"] .cb-fx-item.is-active{
  border-color:#F37021 !important;
  background:linear-gradient(135deg,rgba(243,112,33,.16),rgba(18,38,58,.92) 55%);
  box-shadow:0 0 0 1px rgba(243,112,33,.35),0 0 28px var(--cb-glow,rgba(243,112,33,.42)),0 14px 36px rgba(7,21,34,.4);
  transform:translateY(-5px) scale(1.015);
  z-index:3;
}
[data-fx="tilt"]{ overflow:visible; }
[data-fx="tilt"]:not([class*="radius"]){ /* keep host radius */ }
/* default radius if host has none — inherit from glass etc. */

[data-fx="flow"] [data-fx-item].cb-fx-conn::after,
[data-fx="flow"] .cb-fx-item.cb-fx-conn::after{
  content:"";position:absolute;top:50%;right:-.7rem;width:.7rem;height:2px;z-index:4;
  background:linear-gradient(90deg,rgba(243,112,33,.15),#F37021,rgba(243,112,33,.15));
  background-size:200% 100%;transform:translateY(-50%);pointer-events:none;opacity:.3;
}
[data-fx="flow"] [data-fx-item].cb-fx-conn.cb-fx-flow::after,
[data-fx="flow"] [data-fx-item].is-active.cb-fx-conn::after,
[data-fx="flow"] .cb-fx-item.cb-fx-conn.cb-fx-flow::after{
  opacity:1;animation:cbFxFlow 1.4s linear infinite;
}
[data-fx="flow"] [data-fx-item].cb-fx-conn::before,
[data-fx="flow"] .cb-fx-item.cb-fx-conn::before{
  content:"";position:absolute;top:50%;right:-.9rem;z-index:5;
  border:5px solid transparent;border-left-color:#F37021;
  transform:translateY(-50%);pointer-events:none;opacity:.3;
}
[data-fx="flow"] [data-fx-item].cb-fx-conn.cb-fx-flow::before,
[data-fx="flow"] [data-fx-item].is-active.cb-fx-conn::before{opacity:1}
@media (max-width:760px){
  [data-fx="flow"] [data-fx-item].cb-fx-conn::after,
  [data-fx="flow"] [data-fx-item].cb-fx-conn::before{display:none}
}