/* Akhar Technology · logo animado y mascota Akhi (se usa en el sitio y en el panel) */

/* ---------- Logo 3D: SOLO las 3 pirámides dan una vuelta completa de 360° ----------
   Las imágenes (assets/img/logo/*.png) son recortes 3D sin sombra: la sombra va aquí, con drop-shadow.
   .logo-akhar es contenedor (container-type) para medir en cqw = % del ancho del logo (translateZ y drop-shadow no admiten %). */
.logo-akhar{--lw:240px;--t:6s;--esp:.2;--osc:.035;--pp:70cqw;position:relative;display:block;width:var(--lw);max-width:100%;aspect-ratio:var(--ar);flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;container-type:inline-size;user-select:none;
  /* tema claro: sombra gris suave */
  --sh-pir:drop-shadow(0 1.3cqw 1.5cqw rgba(20,30,60,.30));
  --sh-akhar:drop-shadow(0 1.1cqw 1.2cqw rgba(20,30,60,.28));
  --sh-tech:drop-shadow(0 1cqw 1.1cqw rgba(20,30,60,.26))}
/* tema oscuro: resplandor sutil naranja (pirámides y Akhar) y azul (Technology) */
html[data-tema="oscuro"] .logo-akhar{
  --sh-pir:drop-shadow(0 .4cqw 1.4cqw rgba(255,110,20,.42));
  --sh-akhar:drop-shadow(0 .3cqw 1.2cqw rgba(255,110,20,.38));
  --sh-tech:drop-shadow(0 .3cqw 1.1cqw rgba(110,170,255,.40))}
.logo-akhar>*{position:absolute;display:block}
.lk-akhar{object-fit:fill;pointer-events:none;-webkit-user-drag:none;filter:var(--sh-akhar)}
/* «Technology»: dos imágenes, azul marino (tema claro) y azul claro (tema oscuro) */
.lk-tech{object-fit:fill;pointer-events:none;-webkit-user-drag:none;filter:var(--sh-tech)}
.logo-akhar .lk-tech-claro{display:none}
html[data-tema="oscuro"] .logo-akhar .lk-tech{display:none}
html[data-tema="oscuro"] .logo-akhar .lk-tech-claro{display:block}
.lk-shine{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);background-size:260% 100%;background-position:170% 0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:soft-light;pointer-events:none;animation:lk-shine var(--t) ease-in-out infinite}
.lk-aura{left:-8%;top:-12%;width:34%;height:124%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,106,0,.55),rgba(255,106,0,.12) 60%,transparent 75%);filter:blur(10px);pointer-events:none;animation:lk-aura var(--t) ease-in-out infinite}
.lk-solo .lk-aura{left:-20%;top:-20%;width:140%;height:140%}

/* las pirámides: --n copias apiladas (ver logo_anim) dan grosor al girar. NUNCA poner filter/opacity/overflow en .lk-pir ni en su padre:
   aplanarían el 3D. La sombra va solo en la copia del fondo (.lk-back) y el oscurecimiento progresivo en cada copia. */
.lk-pir{transform-style:preserve-3d;transform-origin:50% 50%;animation:lk-spin var(--t) ease-in-out infinite;will-change:transform}
.lk-l{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;
  transform:translateZ(calc(((var(--n) - 1) / 2 - var(--i)) * var(--esp) * 1cqw));
  filter:brightness(calc(1 - var(--i) * var(--osc)))}
.lk-back{filter:brightness(calc(1 - var(--i) * var(--osc))) var(--sh-pir)}
.lk-front{filter:none}
.lk-solo{--esp:1.8;--pp:640cqw}
@keyframes lk-spin{0%,48%{transform:perspective(var(--pp)) rotateY(0)}80%,100%{transform:perspective(var(--pp)) rotateY(360deg)}}
@keyframes lk-spin-once{from{transform:perspective(var(--pp)) rotateY(0)}to{transform:perspective(var(--pp)) rotateY(360deg)}}
@keyframes lk-shine{0%,66%{background-position:170% 0}92%,100%{background-position:-70% 0}}
@keyframes lk-aura{0%,100%{opacity:.4;transform:scale(.92)}62%{opacity:1;transform:scale(1.08)}}
.logo-akhar.hablando{--t:2.6s}
.logo-akhar.rep .lk-pir{animation:lk-spin-once 1.3s ease-in-out}

.lk-brand{--lw:196px}
.lk-foot{--lw:250px}
.lk-about{--lw:min(540px,100%)}
.lk-admin{--lw:176px}
.lk-login{--lw:min(280px,80%)}
.lk-solo{--lw:64px}

@media (prefers-reduced-motion:reduce){.lk-pir,.lk-shine,.lk-aura{animation:none!important}}

/* ---------- Akhi, el halcón: cara (chat) ---------- */
.akhi{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 38% 28%,#27478f,#0b1530 72%)}
.ak-in{position:absolute;inset:0;display:block;transform-origin:46% 78%;animation:ak-idle 6s ease-in-out infinite}
.ak-head{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.ak-glow{position:absolute;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(110,240,255,.95),rgba(34,211,238,.38) 38%,transparent 70%);mix-blend-mode:screen;pointer-events:none;animation:ak-pulse 2.8s ease-in-out infinite}
.ak-lid{position:absolute;display:block;transform-origin:50% 0;transform:scaleY(0);pointer-events:none;-webkit-user-drag:none;animation:ak-blink 5.2s infinite}
.akhi.hablando .ak-in{animation:ak-talk .55s ease-in-out infinite}
.akhi.hablando .ak-glow,.akhi-body.hablando .ak-glow{animation-duration:.7s}
@keyframes ak-idle{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-1.6deg) scale(1.025)}70%{transform:rotate(1.2deg) scale(1.015)}}
@keyframes ak-talk{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-2.4deg) scale(1.05)}65%{transform:rotate(1.6deg) scale(1.03)}}
@keyframes ak-pulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes ak-blink{0%,92%,100%{transform:scaleY(0)}94%,96.5%{transform:scaleY(1)}}

/* ---------- Akhi de cuerpo completo ---------- */
.akhi-body{--w:420px;position:relative;display:block;width:min(var(--w),100%);aspect-ratio:var(--ar);margin-inline:auto}
.akhi-body::after{content:"";position:absolute;left:10%;right:10%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);filter:blur(7px);animation:ak-shadow 6s ease-in-out infinite}
html:not([data-tema="oscuro"]) .akhi-body::after{background:radial-gradient(closest-side,rgba(10,30,70,.35),transparent)}
.ak-fig{position:absolute;inset:0;filter:drop-shadow(0 22px 26px rgba(0,0,0,.35)) drop-shadow(0 0 26px rgba(34,211,238,.16));animation:ak-float 6s ease-in-out infinite}
.ak-img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;user-select:none}
.akhi-body .ak-glow{width:12%}
.ak-chest{position:absolute;width:17%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.75),transparent 65%);mix-blend-mode:screen;pointer-events:none;animation:ak-pulse 3.4s ease-in-out infinite .7s}
.ak-ring{position:absolute;left:50%;top:46%;width:118%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed rgba(34,211,238,.38);pointer-events:none;animation:ak-spin 44s linear infinite}
.ak-ring.r2{width:92%;border-color:rgba(255,106,0,.38);animation-direction:reverse;animation-duration:30s}
.akhi-body.hablando .ak-fig{animation:ak-talkbody .62s ease-in-out infinite}
@keyframes ak-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ak-shadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.88);opacity:.6}}
@keyframes ak-talkbody{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-8px) scale(1.012)}70%{transform:translateY(-3px) scale(1.006)}}
@keyframes ak-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ak-in,.ak-fig,.ak-ring,.ak-glow,.ak-chest,.ak-lid,.akhi-body::after{animation:none!important}}