
/* ================================================================
   Elite-Tek Interactive Logo FX · v13
   Drop-in animation layer for logo images across the site.
   ================================================================ */
:root{
  --et-logo-glow: rgba(200,168,75,.42);
  --et-logo-cyan: rgba(0,212,255,.32);
  --et-logo-scale: 1;
}
img.et-logo-interactive{
  transform: perspective(720px) rotateX(var(--et-tilt-y,0deg)) rotateY(var(--et-tilt-x,0deg)) scale(var(--et-logo-scale));
  transform-style: preserve-3d;
  transition: transform .18s ease, filter .22s ease, box-shadow .22s ease;
  will-change: transform, filter;
  cursor: pointer;
  animation: et-logo-breathe 4.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(200,168,75,.18));
}
img.et-logo-interactive:hover,
.et-logo-orb:hover img.et-logo-interactive{
  --et-logo-scale: 1.06;
  filter: drop-shadow(0 0 18px var(--et-logo-glow)) drop-shadow(0 0 28px var(--et-logo-cyan));
}
.et-logo-orb{
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  transform-style: preserve-3d;
}
.et-logo-orb::before,
.et-logo-orb::after{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:999px;
  border:1px solid rgba(200,168,75,.22);
  opacity:0;
  pointer-events:none;
  transform:scale(.82);
}
.et-logo-orb:hover::before,
body.et-logo-command .et-logo-orb::before{
  opacity:1;
  animation: et-logo-ring 1.8s ease-out infinite;
}
.et-logo-orb:hover::after,
body.et-logo-command .et-logo-orb::after{
  opacity:.75;
  border-color:rgba(0,212,255,.26);
  animation: et-logo-ring 2.5s ease-out .35s infinite;
}
.hero-brand-mark.et-logo-orb::before,
.hero-brand-mark.et-logo-orb::after,
.page-hero-logo.et-logo-orb::before,
.page-hero-logo.et-logo-orb::after{ inset:-14px; }
body.et-logo-command img.et-logo-interactive{
  animation: et-logo-command-spin 2.4s linear infinite, et-logo-breathe 4.8s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(200,168,75,.48)) drop-shadow(0 0 32px rgba(0,212,255,.28));
}
body.et-logo-command .logo-main,
body.et-logo-command .footer-logo,
body.et-logo-command .pre-logo{
  text-shadow:0 0 14px rgba(200,168,75,.9), 0 0 32px rgba(0,212,255,.35);
}
.et-logo-field{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  background:
    radial-gradient(circle at var(--et-mx,50%) var(--et-my,50%), rgba(0,212,255,.12), transparent 22%),
    radial-gradient(circle at 50% 20%, rgba(200,168,75,.08), transparent 28%);
  mix-blend-mode:screen;
}
body.et-logo-command .et-logo-field{ opacity:1; }
.et-logo-toast{
  position:fixed;
  right:18px;
  bottom:74px;
  z-index:99999;
  padding:12px 16px;
  border:1px solid rgba(200,168,75,.42);
  border-radius:999px;
  background:rgba(4,8,16,.94);
  color:#e8c96a;
  font-family:"Share Tech Mono", monospace, Arial;
  font-size:11px;
  letter-spacing:2px;
  box-shadow:0 0 24px rgba(200,168,75,.18);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:.25s ease;
}
.et-logo-toast.show{ opacity:1; transform:translateY(0); }
.et-logo-particle{
  position:fixed;
  width:7px;
  height:7px;
  border-radius:50%;
  pointer-events:none;
  z-index:99998;
  background:rgba(200,168,75,.92);
  box-shadow:0 0 12px rgba(200,168,75,.65), 0 0 20px rgba(0,212,255,.28);
  animation: et-logo-particle .72s ease-out forwards;
}
.et-logo-lab-hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:110px 24px 60px;
  background:
    radial-gradient(circle at 50% 20%, rgba(200,168,75,.14), transparent 34%),
    radial-gradient(circle at 25% 60%, rgba(0,212,255,.08), transparent 28%),
    #040810;
}
.et-logo-lab-card{
  width:min(100%,980px);
  border:1px solid rgba(200,168,75,.22);
  background:rgba(10,20,34,.82);
  border-radius:22px;
  padding:34px;
  box-shadow:0 30px 80px rgba(0,0,0,.34);
  text-align:center;
}
.et-logo-stage{
  width:220px;
  height:220px;
  margin:20px auto;
  display:grid;
  place-items:center;
  border-radius:999px;
  position:relative;
}
.et-logo-stage img{ width:170px; height:170px; object-fit:cover; border-radius:50%; border:1px solid rgba(200,168,75,.38); }
.et-logo-lab-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.et-logo-lab-actions button,.et-logo-lab-actions a{
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(200,168,75,.35);
  background:rgba(0,0,0,.25);
  color:#e8c96a;
  font-family:"Share Tech Mono", monospace, Arial;
  font-size:11px;
  letter-spacing:1.5px;
  cursor:pointer;
  text-decoration:none;
}
.et-logo-lab-actions button:hover,.et-logo-lab-actions a:hover{background:rgba(200,168,75,.08)}
.et-logo-code{
  text-align:left;
  margin-top:24px;
  padding:18px;
  border-radius:14px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(200,168,75,.12);
  overflow:auto;
  color:#c2cde0;
  font-size:12px;
  line-height:1.6;
}
@keyframes et-logo-breathe{
  0%,100%{ box-shadow:0 0 18px rgba(200,168,75,.14); }
  50%{ box-shadow:0 0 34px rgba(200,168,75,.35); }
}
@keyframes et-logo-ring{
  0%{ transform:scale(.78); opacity:.75; }
  100%{ transform:scale(1.45); opacity:0; }
}
@keyframes et-logo-command-spin{
  0%{ filter:drop-shadow(0 0 14px rgba(200,168,75,.38)) hue-rotate(0deg); }
  100%{ filter:drop-shadow(0 0 24px rgba(0,212,255,.34)) hue-rotate(360deg); }
}
@keyframes et-logo-particle{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(.15); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  img.et-logo-interactive,.et-logo-orb::before,.et-logo-orb::after,body.et-logo-command img.et-logo-interactive{animation:none!important;transition:none!important}
  .et-logo-particle{display:none!important}
}
@media(max-width:640px){
  .et-logo-toast{left:16px;right:16px;text-align:center;bottom:72px}
  .et-logo-stage{width:170px;height:170px}.et-logo-stage img{width:132px;height:132px}
}
