/* Homepage hero (/test): "Originator" 3D character + background. Source: "ta-hero-3d 2.html". */

/* ---------- hero background (same as the source's demo hero) ---------- */
.tx-hero{background:radial-gradient(60% 50% at 75% 45%,rgba(227,16,30,.18),transparent 70%),#07070a}
/* Perspective grid floor (source: the demo hero's ::after), drawn on a canvas by hero-3d.js.
   CSS masks on 3D-transformed layers don't repaint reliably in every browser, so the floor is scripted. */
.tx-hero-floor{position:absolute;left:0;right:0;bottom:0;height:60%;z-index:-1;pointer-events:none}
.tx-hero-floor canvas{display:block;width:100%;height:100%}

/* ---------- layout: copy | character, as in the source ---------- */
.tx-hero .tx-hero-inner{grid-template-columns:1.1fr 1fr}
.tx-hero .tx-hero-visual{height:auto;display:flex;align-items:center;justify-content:center}
/* desktop: the character is pinned to the hero's bottom-right so it can be large without stretching the hero */
@media (min-width:992px){
  .tx-hero .tx-hero-inner{position:static}
  .tx-hero .tx-hero-visual{position:absolute;top:80px;bottom:0;right:max(56px,5vw);align-items:flex-end;pointer-events:none}
  .tx-hero .ta3d{width:min(620px,calc((100svh - 80px) * .635),44vw);pointer-events:auto}
}
@media (max-width:991.98px){
  .tx-hero .tx-hero-inner{grid-template-columns:minmax(0,1fr)}
  .tx-hero .tx-hero-visual{margin-top:30px}
  .tx-hero .ta3d{width:min(460px,92vw);max-width:100%}
}
/* style.css paints every span #ccc */
.ta3d span{color:inherit}

/* ===== TA3D START ===== */
.ta3d{
  --rx:0deg;--ry:0deg;--mx:0;--my:0;--s:1;
  --red:#e3101e;--red-glow:rgba(227,16,30,.55);--gold:#e0b25a;
  position:relative;width:min(520px,88vw);aspect-ratio:2/3.15;
  perspective:1400px;perspective-origin:50% 40%;
  container-type:inline-size;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:pan-y;
}
.ta3d *{box-sizing:border-box}
.ta3d__stage{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));will-change:transform}
.ta3d__layer{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.ta3d__frame{position:absolute;left:0;top:0;width:100%;aspect-ratio:2/3;transform-style:preserve-3d}
.ta3d svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* depth stack */
.ta3d__aura{transform:translateZ(-180px) scale(1.14);
  background:radial-gradient(50% 42% at 50% 42%,rgba(227,16,30,.42),transparent 72%);
  filter:blur(8px);animation:ta3d-breathe 6s ease-in-out infinite}
.ta3d__halo{transform:translateZ(-110px) scale(1.07)}
.ta3d__halo .spin{transform-origin:100px 125px;animation:ta3d-spin 50s linear infinite}
.ta3d__halo .spin.rev{animation-duration:80s;animation-direction:reverse}
.ta3d__ring-back{transform:translateZ(10px)}
.ta3d__portal{transform:translateZ(-10px)}
.ta3d__char{transform:translateZ(40px)}
.ta3d__ring-front{transform:translateZ(70px)}
.ta3d__fx{transform:translateZ(60px)}
.ta3d__badge-wrap{transform:translateZ(140px)}
.ta3d__chip-wrap{transform:translateZ(105px)}

/* solid 3D extrusion: stacked dark copies behind the character */
.ta3d__thick{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;
  filter:brightness(.22) saturate(1.6) sepia(.35);transform:translateZ(calc(var(--d) * -1.5px));
  clip-path:inset(100% 0 0 0)}
.ta3d__thick:last-of-type{filter:brightness(.12) drop-shadow(0 0 14px rgba(227,16,30,.45))}
.ta3d.is-ready .ta3d__thick{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.2,.8,.2,1)}
.ta3d__img{transform:translateZ(1px)}
.ta3d__eye{transform:translateZ(2px)}

/* character */
.ta3d__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  clip-path:inset(100% 0 0 0);
  filter:drop-shadow(calc(var(--mx) * -14px) calc(var(--my) * -10px) 18px var(--red-glow))
         drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.ta3d.is-ready .ta3d__img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s cubic-bezier(.2,.8,.2,1)}
.ta3d__scan{position:absolute;left:-4%;right:-4%;height:2px;top:100%;opacity:0;
  background:linear-gradient(90deg,transparent,var(--red),#fff,var(--red),transparent);
  box-shadow:0 0 18px 4px var(--red-glow)}
.ta3d.is-ready .ta3d__scan{animation:ta3d-scan 1.5s cubic-bezier(.2,.8,.2,1) forwards}
.ta3d__glare,.ta3d__holoskin{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}
.ta3d__glare{mix-blend-mode:overlay;opacity:.9;
  background:radial-gradient(38% 26% at calc(50% + var(--mx) * 45%) calc(32% + var(--my) * 40%),rgba(255,255,255,.45),transparent 65%)}
.ta3d__holoskin{opacity:0;transition:opacity .3s;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg,rgba(255,40,60,.22) 0 1px,transparent 1px 4px);animation:ta3d-scroll 1.2s linear infinite}
.ta3d.is-hover .ta3d__holoskin{opacity:.35}
.ta3d.is-glitch .ta3d__holoskin{opacity:1}
.ta3d.is-glitch .ta3d__img{animation:ta3d-glitch .45s steps(2) 1}

/* eyes power-up */
.ta3d__eye{position:absolute;top:22.9%;width:3.4%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,#fff 0 14%,#ff3a46 32%,rgba(255,0,20,0) 72%);
  mix-blend-mode:screen;opacity:0;transition:opacity .4s}
.ta3d.is-hover .ta3d__eye{opacity:.85;animation:ta3d-flicker 3s infinite}

/* hotspots */
.ta3d__spot{position:absolute;translate:-50% -50%;border-radius:50%;pointer-events:auto;cursor:pointer}
.ta3d__medal{left:50.5%;top:39.8%;width:13%;aspect-ratio:1;overflow:hidden}
.ta3d__medal::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(115deg,transparent 35%,rgba(255,240,200,.85) 50%,transparent 65%);
  mix-blend-mode:overlay;transform:translateX(-120%);animation:ta3d-shine 4.5s ease-in-out infinite 2s}
.ta3d__medal::after{content:"";position:absolute;inset:6%;border-radius:50%;border:2px solid var(--gold);opacity:0}
.ta3d__medal:hover::after{animation:ta3d-ping 1.1s ease-out infinite}
.ta3d__tablet{left:86.7%;top:46.4%;width:17%;aspect-ratio:1}
.ta3d__tablet::after{content:"";position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7),transparent 70%);
  animation:ta3d-blink 2.4s ease-in-out infinite;mix-blend-mode:screen}

.ta3d__tip{position:absolute;white-space:nowrap;font:600 2.3cqw/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(10,10,14,.75);border:1px solid rgba(224,178,90,.6);padding:.9cqw 1.6cqw;border-radius:99px;
  left:50.5%;top:31%;translate:-50% 0;transform:translateZ(80px) translateY(6px);opacity:0;transition:.3s}
.ta3d.show-medal .ta3d__tip{opacity:1;transform:translateZ(80px) translateY(0)}

/* tablet hologram */
.ta3d__beam{position:absolute;left:58%;top:28.5%;width:38%;height:16%;
  clip-path:polygon(2% 0,88% 0,96% 100%,68% 100%);
  background:linear-gradient(0deg,rgba(255,60,70,.55),rgba(255,60,70,.05));
  transform:translateZ(60px) scaleY(0);transform-origin:bottom;transition:transform .35s ease;mix-blend-mode:screen}
.ta3d__holo{position:absolute;left:55%;top:16%;width:38%;padding:1.8cqw 2cqw;border-radius:1.6cqw;
  border:1px solid rgba(255,70,80,.6);color:#ffdfe1;font:600 1.9cqw/1.25 Inter,system-ui,sans-serif;
  background:linear-gradient(180deg,rgba(227,16,30,.24),rgba(227,16,30,.05));
  box-shadow:0 0 24px rgba(227,16,30,.4),inset 0 0 18px rgba(227,16,30,.25);
  transform-origin:85% 100%;transform:translateZ(95px) translateY(4cqw) scale(.5) rotateX(-25deg);opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.25,1.25),opacity .35s}
.ta3d__holo::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);pointer-events:none}
.ta3d__holo-h{display:flex;justify-content:space-between;align-items:center;opacity:.85;letter-spacing:.05em;text-transform:uppercase;font-size:1.6cqw}
.ta3d__holo-h i{width:1.2cqw;height:1.2cqw;border-radius:50%;background:#ff3a46;box-shadow:0 0 6px #ff3a46;animation:ta3d-blink 1s infinite}
.ta3d__bars{display:flex;align-items:flex-end;gap:.8cqw;height:6cqw;margin:1.2cqw 0}
.ta3d__bars span{flex:1;background:linear-gradient(0deg,#e3101e,#ff8a90);border-radius:2px 2px 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.ta3d__holo-v{font:800 4.4cqw/1 Inter,system-ui,sans-serif;color:#fff;text-shadow:0 0 12px rgba(255,60,70,.8)}
.ta3d.show-holo .ta3d__beam{transform:translateZ(60px) scaleY(1)}
.ta3d.show-holo .ta3d__holo{opacity:1;transform:translateZ(95px) translateY(0) scale(1) rotateX(0)}
.ta3d.show-holo .ta3d__bars span{transform:scaleY(var(--h))}

/* shockwave */
.ta3d__wave{position:absolute;left:50.5%;top:39.8%;width:14%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  border:2px solid var(--red);box-shadow:0 0 20px var(--red-glow),inset 0 0 20px var(--red-glow);
  animation:ta3d-wave .9s cubic-bezier(.1,.7,.3,1) forwards;pointer-events:none}

/* floating glass badge */
.ta3d__badge{position:absolute;right:-7%;top:12%;padding:2.6cqw 3.4cqw;border-radius:2.4cqw;
  background:rgba(18,18,24,.62);border:1px solid rgba(255,255,255,.14);
  -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)) scale(.6);opacity:0;
  transition:opacity .6s .9s,transform .7s .9s cubic-bezier(.2,.9,.25,1.3)}
.ta3d.is-ready .ta3d__badge{opacity:1;transform:translate(calc(var(--mx) * 10px),calc(var(--my) * 8px)) scale(1);transition:opacity .6s .9s,transform .15s}
.ta3d__badge b{display:flex;align-items:center;gap:1.4cqw;font:800 3.6cqw/1.1 Inter,system-ui,sans-serif;color:#fff}
.ta3d__badge b i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#2bd46b;box-shadow:0 0 8px #2bd46b;animation:ta3d-blink 1.6s infinite}
.ta3d__badge small{display:block;margin-top:.8cqw;font:500 2.1cqw/1.3 Inter,system-ui,sans-serif;color:#a9a9b3;white-space:nowrap;overflow:hidden;width:0;border-right:1px solid transparent}
.ta3d.is-ready .ta3d__badge small{animation:ta3d-type 1.2s steps(30) 1.6s forwards}

.ta3d__chip{position:absolute;left:-5%;bottom:24%;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 2.6cqw;border-radius:99px;
  background:rgba(18,18,24,.7);border:1px solid rgba(227,16,30,.45);font:600 2.2cqw/1 Inter,system-ui,sans-serif;color:#eee;
  transform:translate(calc(var(--mx) * -8px),calc(var(--my) * -6px));opacity:0;transition:opacity .6s 1.3s}
.ta3d.is-ready .ta3d__chip{opacity:1}
.ta3d__chip .dots{display:flex}
.ta3d__chip .dots span{width:3.2cqw;height:3.2cqw;border-radius:50%;border:2px solid #121218;margin-left:-1.2cqw;background:linear-gradient(135deg,#e3101e,#7a0710)}
.ta3d__chip .dots span:nth-child(2){background:linear-gradient(135deg,#e0b25a,#8a5c12)}
.ta3d__chip .dots span:nth-child(3){background:linear-gradient(135deg,#3a7bff,#122a6b)}
.ta3d__chip .dots span:first-child{margin-left:0}

.ta3d__canvas{position:absolute;inset:-8%;width:116%;height:116%;pointer-events:none;z-index:5}
.ta3d__fallback{position:absolute;inset:0;display:none;place-items:center;text-align:center;color:#888;font:500 14px/1.5 Inter,system-ui;border:1px dashed #333;border-radius:12px}
.ta3d.no-img .ta3d__fallback{display:grid}

@keyframes ta3d-breathe{50%{opacity:.7;transform:translateZ(-180px) scale(1.2)}}
@keyframes ta3d-spin{to{transform:rotate(360deg)}}
@keyframes ta3d-scan{0%{top:100%;opacity:1}90%{opacity:1}100%{top:0;opacity:0}}
@keyframes ta3d-scroll{to{background-position:0 8px}}
@keyframes ta3d-glitch{0%{transform:translate(0)}25%{transform:translate(-4px,1px);filter:drop-shadow(4px 0 0 rgba(0,200,255,.7)) drop-shadow(-4px 0 0 rgba(255,0,40,.8))}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}100%{transform:translate(0)}}
@keyframes ta3d-flicker{0%,100%{opacity:.85}48%{opacity:.85}50%{opacity:.3}52%{opacity:.9}}
@keyframes ta3d-shine{0%{transform:translateX(-120%)}30%,100%{transform:translateX(120%)}}
@keyframes ta3d-ping{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
@keyframes ta3d-blink{50%{opacity:.35}}
@keyframes ta3d-wave{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(9)}}
@keyframes ta3d-type{to{width:100%}}
@keyframes ta3d-dash{to{stroke-dashoffset:-200}}

@media (prefers-reduced-motion:reduce){
  .ta3d *,.ta3d{animation:none!important;transition:none!important}
  .ta3d .ta3d__img,.ta3d .ta3d__thick{clip-path:none}
  .ta3d .ta3d__badge,.ta3d .ta3d__chip{opacity:1;transform:none}
  .ta3d .ta3d__badge small{width:auto}
}
/* ===== TA3D END ===== */