/* Code Panther 3D hologram (homepage Task Force section). Source: "ta-code-panther.html".
   Markup in index.php, script in assets/js/code-panther.js. */
/* ===== TCP START ===== */
.tcp{--rx:0deg;--ry:0deg;--mx:0;--my:0;--blue:#2b8cff;--blue-hi:#7cc4ff;--red:#e3101e;
  position:relative;width:min(640px,92vw);aspect-ratio:776/661;margin:auto;perspective:1300px;perspective-origin:50% 45%;
  container-type:inline-size;user-select:none;-webkit-user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.tcp *{box-sizing:border-box}
.tcp__stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));will-change:transform}
.tcp__l{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.tcp__l svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* depth stack */
.tcp__aura{transform:translateZ(-160px) scale(1.18);background:radial-gradient(42% 40% at 52% 58%,rgba(43,140,255,.35),transparent 70%),
  radial-gradient(30% 30% at 30% 30%,rgba(227,16,30,.12),transparent 70%);filter:blur(6px);animation:tcp-breathe 6s ease-in-out infinite}
.tcp__orbit{transform:translateZ(-90px)}
.tcp__orbit .spin{transform-origin:50% 48%;animation:tcp-spin 60s linear infinite}
.tcp__body{transform:translateZ(0)}
.tcp__links{transform:translateZ(70px)}
.tcp__badge-l{transform:translateZ(150px)}

/* base character */
.tcp__img{position:absolute;inset:0;width:100%;height:100%;display:block;
  clip-path:inset(100% 0 0 0);filter:saturate(1.08) contrast(1.04) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.tcp.is-ready .tcp__img{clip-path:inset(0);transition:clip-path 1.6s cubic-bezier(.2,.8,.2,1)}
.tcp__scan{position:absolute;left:8%;right:8%;top:100%;height:2px;opacity:0;background:linear-gradient(90deg,transparent,var(--blue),#fff,var(--blue),transparent);box-shadow:0 0 18px 4px rgba(43,140,255,.6)}
.tcp.is-ready .tcp__scan{animation:tcp-scan 1.6s cubic-bezier(.2,.8,.2,1) forwards}
/* moving specular shine — only lands on lit parts of the image (luminance mask) */
.tcp__shine{position:absolute;inset:0;mix-blend-mode:screen;opacity:.9;
  background:linear-gradient(105deg,transparent 40%,rgba(160,215,255,.55) 49%,rgba(255,255,255,.75) 50%,rgba(160,215,255,.55) 51%,transparent 60%);
  background-size:260% 100%;background-position:calc(110% - var(--mx) * 20%) 0;
  -webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat;
  animation:tcp-sweep 5.5s cubic-bezier(.6,0,.3,1) 2.2s infinite}
.tcp__rim{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;
  -webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat;
  background:radial-gradient(38% 30% at calc(50% + var(--mx) * 30%) calc(36% + var(--my) * 25%),rgba(43,140,255,.22),transparent 70%)}
.tcp__visor{position:absolute;left:39%;top:20%;width:23%;height:14%;border-radius:40%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(90,180,255,.55),transparent);animation:tcp-visor 3.2s ease-in-out infinite}
.tcp__globe{position:absolute;left:56%;top:68%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(120,200,255,.5),transparent);animation:tcp-globe 2.4s ease-in-out infinite}
.tcp__ring{position:absolute;left:56%;top:72%;width:34%;aspect-ratio:3/1;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(124,196,255,.7);
  box-shadow:0 0 14px rgba(43,140,255,.7);opacity:0;animation:tcp-ring 2.8s ease-out infinite}
.tcp__ring.r2{animation-delay:1.4s}
.tcp.is-glitch .tcp__img{animation:tcp-glitch .45s steps(2) 1}

/* floating hologram panels */
.tcp__panel{position:absolute;pointer-events:auto;cursor:pointer;transform-style:preserve-3d;
  transform:translateZ(var(--z)) translateY(20px) scale(.6) rotateX(30deg);opacity:0;
  transition:transform .9s cubic-bezier(.2,.9,.25,1.3),opacity .6s;transition-delay:calc(1.2s + var(--i) * .14s)}
.tcp.is-ready .tcp__panel{opacity:1;transform:translateZ(var(--z))}
.tcp.settled .tcp__panel{transition:transform .5s cubic-bezier(.2,.9,.3,1.2),opacity .4s;transition-delay:0s}
.tcp__panel .fl{position:absolute;inset:0;animation:tcp-float 5s ease-in-out calc(var(--i) * -1.3s) infinite}
.tcp__panel img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(43,140,255,.55));transition:filter .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.tcp__panel:hover img,.tcp__panel.on img{filter:drop-shadow(0 0 22px rgba(80,170,255,.95)) brightness(1.25);transform:scale(1.12)}
.tcp.settled .tcp__panel:hover{transform:translateZ(calc(var(--z) + 40px))}
.tcp__tip{position:absolute;left:50%;top:-8%;translate:-50% -100%;white-space:nowrap;padding:.9cqw 1.6cqw;border-radius:99px;
  font:600 clamp(9px,1.7cqw,12px)/1 Inter,sans-serif;letter-spacing:.06em;color:#fff;background:rgba(6,14,30,.85);border:1px solid rgba(80,170,255,.6);
  box-shadow:0 0 18px rgba(43,140,255,.4);opacity:0;transform:translateY(6px);transition:.3s;pointer-events:none}
.tcp__tip b{color:var(--red);margin-right:.5em}
.tcp__panel .tcp__tip{z-index:2}
.tcp__panel.low .tcp__tip{top:auto;bottom:-8%;translate:-50% 100%}
.tcp__panel:hover .tcp__tip,.tcp__panel.on .tcp__tip{opacity:1;transform:none}
.tcp__links path{fill:none;stroke:rgba(90,175,255,.55);stroke-width:1.2;stroke-dasharray:4 6;vector-effect:non-scaling-stroke;animation:tcp-flow 1.6s linear infinite}
.tcp__links circle{fill:#bfe3ff}

/* shockwave */
.tcp__wave{position:absolute;left:56%;top:68%;width:12%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid var(--blue-hi);
  box-shadow:0 0 20px rgba(43,140,255,.8),inset 0 0 20px rgba(43,140,255,.6);animation:tcp-wave .9s cubic-bezier(.1,.7,.3,1) forwards;pointer-events:none}

/* glass badge */
.tcp__badge{position:absolute;left:2%;top:4%;padding:2.2cqw 3cqw;border-radius:2cqw;background:rgba(10,14,26,.6);border:1px solid rgba(120,190,255,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px rgba(0,0,0,.45);
  transform:translate(calc(var(--mx) * 10px),calc(var(--my) * 8px));opacity:0;transition:opacity .6s 1.6s}
.tcp.is-ready .tcp__badge{opacity:1}
.tcp__badge b{display:flex;align-items:center;gap:1.2cqw;font:800 clamp(13px,3.2cqw,20px)/1.1 Inter,sans-serif}
.tcp__badge b i{width:1.4cqw;height:1.4cqw;min-width:7px;min-height:7px;border-radius:50%;background:#2bd46b;box-shadow:0 0 8px #2bd46b;animation:tcp-blink 1.6s infinite}
.tcp__badge small{display:block;margin-top:.6cqw;font:500 clamp(9px,1.9cqw,12px)/1.3 Inter,sans-serif;color:#9fb3cc}
.tcp__count{position:absolute;right:3%;top:0;padding:1.2cqw 2.2cqw;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,14,.6);
  font:600 clamp(10px,2cqw,13px)/1 Inter,sans-serif;color:#9aa;opacity:0;transition:opacity .6s 1.8s}
.tcp__count b{color:var(--red)}
.tcp.is-ready .tcp__count{opacity:1}

.tcp__canvas{position:absolute;inset:-6%;width:112%;height:112%;pointer-events:none;z-index:5}

@keyframes tcp-breathe{50%{opacity:.75;transform:translateZ(-160px) scale(1.25)}}
@keyframes tcp-spin{to{transform:rotate(360deg)}}
@keyframes tcp-scan{0%{top:100%;opacity:1}90%{opacity:1}100%{top:0;opacity:0}}
@keyframes tcp-sweep{0%{background-position:130% 0}45%,100%{background-position:-40% 0}}
@keyframes tcp-visor{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes tcp-globe{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}
@keyframes tcp-ring{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.25)}}
@keyframes tcp-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3.5%) rotate(-1.5deg)}}
@keyframes tcp-flow{to{stroke-dashoffset:-20}}
@keyframes tcp-wave{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(8)}}
@keyframes tcp-blink{50%{opacity:.35}}
@keyframes tcp-glitch{0%{transform:translate(0)}25%{transform:translate(-4px,1px);filter:drop-shadow(4px 0 0 rgba(0,200,255,.8)) drop-shadow(-4px 0 0 rgba(255,0,40,.8))}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .tcp *,.tcp{animation:none!important;transition:none!important}
  .tcp .tcp__img{clip-path:none}.tcp .tcp__panel{opacity:1;transform:translateZ(var(--z))}
  .tcp .tcp__badge,.tcp .tcp__count{opacity:1}
}
/* ===== TCP END ===== */