/* Akrahanza · logo animado y mascota Akra (se usa en el sitio y en el panel) */

/* ---------- Logo 3D: SOLO el emblema (hoja + circuito) da una vuelta completa de 360° sobre el nombre ----------
   Las imágenes (assets/img/logo/*.png) son recortes 3D sin sombra: la sombra va aquí, con drop-shadow.
   .logo-akrahanza es contenedor (container-type) para medir en cqw = % del ancho del logo. */
.logo-akrahanza{--lw:240px;--t:7s;--esp:.22;--osc:.03;--pp:90cqw;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;
  --sh-pir:drop-shadow(0 1.3cqw 1.5cqw rgba(10,40,30,.28));
  --sh-nombre:drop-shadow(0 1.1cqw 1.2cqw rgba(10,30,60,.28))}
html[data-tema="oscuro"] .logo-akrahanza{
  --sh-pir:drop-shadow(0 .4cqw 1.6cqw rgba(60,220,110,.40));
  --sh-nombre:drop-shadow(0 .3cqw 1.2cqw rgba(110,170,255,.38))}
.logo-akrahanza>*{position:absolute;display:block}
.lk-nombre{object-fit:fill;pointer-events:none;-webkit-user-drag:none;filter:var(--sh-nombre)}
.logo-akrahanza .lk-nombre-claro{display:none}
html[data-tema="oscuro"] .logo-akrahanza .lk-nombre{display:none}
html[data-tema="oscuro"] .logo-akrahanza .lk-nombre-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:14%;top:-6%;width:72%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,200,100,.5),rgba(60,200,100,.1) 60%,transparent 75%);filter:blur(12px);pointer-events:none;animation:lk-aura var(--t) ease-in-out infinite}
.lk-solo .lk-aura{left:-10%;top:-10%;width:120%;height:120%}

/* el emblema: --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.6;--pp:640cqw}
@keyframes lk-spin{0%,40%{transform:perspective(var(--pp)) rotateY(0)}78%,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-akrahanza.hablando{--t:2.8s}
.logo-akrahanza.rep .lk-pir{animation:lk-spin-once 1.4s ease-in-out}

.lk-brand{--lw:150px}
.lk-foot{--lw:230px}
.lk-about{--lw:min(460px,100%)}
.lk-admin{--lw:150px}
.lk-login{--lw:min(250px,80%)}
.lk-solo{--lw:64px}

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

/* ---------- Akra, el halcón: cara (chat) ---------- */
.akra{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}
.akra.hablando .ak-in{animation:ak-talk .55s ease-in-out infinite}
.akra.hablando .ak-glow,.akra-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)}}

/* ---------- Akra de cuerpo completo ---------- */
.akra-body{--w:420px;position:relative;display:block;width:min(var(--w),100%);aspect-ratio:var(--ar);margin-inline:auto}
.akra-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"]) .akra-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}
.akra-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(34,168,74,.38);animation-direction:reverse;animation-duration:30s}
.akra-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,.akra-body::after{animation:none!important}}

/* ---------- Logo horizontal (cabecera): emblema que gira + nombre ---------- */
.brand-lock{display:inline-flex;align-items:center;gap:.55rem}
.brand-lock .logo-akrahanza{--lw:50px}
.brand-name{position:relative;display:block;width:128px;aspect-ratio:var(--nar);flex:none}
.brand-name .bn{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 2px 3px rgba(10,30,60,.28))}
.brand-name .bn-claro{display:none}
html[data-tema="oscuro"] .brand-name .bn{display:none}
html[data-tema="oscuro"] .brand-name .bn-claro{display:block;filter:drop-shadow(0 0 8px rgba(110,170,255,.38))}
@media (max-width:480px){.brand-name{width:108px}.brand-lock .logo-akrahanza{--lw:42px}}

/* puntos decorativos del logo (anillo punteado y rejilla): fijos, no giran con el emblema */
.lk-puntos{object-fit:fill;pointer-events:none;-webkit-user-drag:none;opacity:.9}