@font-face{
  font-family:"Comfortaa Sub";
  src:url(data:font/woff2;base64,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) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --brand:#F47B20; --brand-hi:#FFBE78;
  --ink-dark:#0b0a09; --tile-lo:#0f0e0c; --tile-hi:#16140f;
  --display:"Comfortaa Sub","Segoe UI",system-ui,sans-serif;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}

/* ===================== SPLASH: pantalla de carga (Blazor WASM boot) ===================== */
/* Reutilizada tambien en cualquier recarga completa de la SPA (p.ej. vuelta del flujo
   de login con Microsoft), no solo en el arranque inicial: index.html no distingue casos. */
#splash{
  position:fixed;inset:0;z-index:100;background:var(--ink-dark);overflow:hidden;
  transition:opacity 1.8s ease;
}
#splash.hide{opacity:0;pointer-events:none}
#splash .splash-fx{position:absolute;inset:0;transition:opacity 1.6s ease}
#splash .splash-fx.dim{opacity:0;pointer-events:none}
#splash .splash-canvas{position:absolute;inset:0;z-index:0}
#splash .splash-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 160px 50px rgba(0,0,0,.6)}
#splash .splash-center{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:48px}

#splash .splash-loader{--size:260px;--duration:2.6s;height:var(--size);aspect-ratio:1;position:relative}
#splash .splash-ring{
  position:absolute;border-radius:50%;
  background:linear-gradient(0deg, rgba(50,50,50,.25) 0%, rgba(100,100,100,.25) 100%);
  border-top:1px solid rgba(140,140,140,1);
  box-shadow:0 10px 24px -4px rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  animation:splash-ripple var(--duration) infinite ease-in-out;
}
#splash .splash-ring:nth-child(1){inset:40%;z-index:99}
#splash .splash-ring:nth-child(2){inset:30%;z-index:98;border-color:rgba(140,140,140,.8);animation-delay:.22s}
#splash .splash-ring:nth-child(3){inset:20%;z-index:97;border-color:rgba(140,140,140,.6);animation-delay:.44s}
#splash .splash-ring:nth-child(4){inset:10%;z-index:96;border-color:rgba(140,140,140,.4);animation-delay:.66s}
#splash .splash-ring:nth-child(5){inset:0%; z-index:95;border-color:rgba(140,140,140,.2);animation-delay:.88s}
@keyframes splash-ripple{
  0%{transform:scale(1);box-shadow:0 10px 14px -4px rgba(0,0,0,.6)}
  50%{transform:scale(1.12);box-shadow:0 22px 26px -4px rgba(0,0,0,.6)}
  100%{transform:scale(1);box-shadow:0 10px 14px -4px rgba(0,0,0,.6)}
}
#splash .splash-progress{
  position:absolute;inset:36.5%;z-index:98;border-radius:50%;
  background:conic-gradient(var(--brand) calc(var(--p,0)*1%), rgba(255,255,255,.1) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  filter:drop-shadow(0 0 3px rgba(255,190,120,.7)) drop-shadow(0 0 10px rgba(244,123,32,.6));
}
#splash .splash-pctwrap{
  position:absolute;inset:40%;z-index:100;display:grid;place-content:center;
  border-radius:50%;overflow:hidden;
  background:linear-gradient(0deg, rgba(50,50,50,.3) 0%, rgba(100,100,100,.3) 100%);
  border-top:1px solid rgba(140,140,140,.6);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4);
  backdrop-filter:blur(6px);
}
#splash .splash-pct{
  font-family:var(--mono);font-size:12px;font-weight:400;color:rgba(216,210,200,.65);
  font-variant-numeric:tabular-nums;
}

/* al llegar al 100%: los anillos exteriores encogen hasta igualar el tamano del anillo central */
#splash .splash-loader.collapsing .splash-ring{
  animation:none;
  transition:inset .95s cubic-bezier(.4,0,.2,1);
  inset:40%;
}

/* logo "mantra" volador: UN SOLO elemento, vive fuera de #splash (si viviera dentro,
   el opacity:0 del fade del splash se lo llevaria por delante aunque sea fixed -
   opacity de un padre afecta a los hijos siempre, position:fixed no escapa de eso).
   Empieza centrado en el splash y se DESPLAZA (no funde) hasta la posicion real
   de .brand-dock, medida en JS con getBoundingClientRect. Copiado literal de
   #flying-mantra en mantra-login.css. */
#flying-mantra{
  position:fixed;z-index:150;aspect-ratio:5525/963;
  left:50%;top:calc(50% + 176px);width:112px;
  transform:translateX(-50%);
  transition:left 1.6s cubic-bezier(.4,0,.2,1), top 1.6s cubic-bezier(.4,0,.2,1),
             width 1.6s cubic-bezier(.4,0,.2,1), transform 1.6s cubic-bezier(.4,0,.2,1);
}
#flying-mantra .logo{width:100%;height:auto;display:block;overflow:visible}
#flying-mantra .ltr{fill:#fff}
/* sin cursor/caja naranja durante la carga - el laser es cosa exclusiva de la llegada al login */
#flying-mantra .cursor{display:none}
#flying-mantra.arrived{opacity:0;transition:opacity .01s linear 1.85s}

#splash .splash-satic{position:absolute;z-index:3;left:6.5%;top:20px;height:30px;width:auto}
#splash .splash-satic img{height:100%;width:auto;display:block}

@media (prefers-reduced-motion:reduce){
  #splash .splash-ring, #flying-mantra{animation:none;transition:none}
}

/* ===================== PANEL IZQUIERDO DEL LOGIN ===================== */
.login-visual{
  position:relative;overflow:hidden;background:var(--ink-dark);
  isolation:isolate;height:100%;
}

.login-visual .iso-canvas{
  position:absolute;inset:0;z-index:0;display:block;
  opacity:0;transition:opacity 1.3s ease-out;
}
body.play .login-visual .iso-canvas{opacity:1}

.hero-glow{
  position:absolute;z-index:1;pointer-events:none;left:0;top:0;
  width:130px;height:130px;margin-left:-65px;margin-top:-65px;
  border-radius:50%;opacity:0;
  transform:translate(0,0) scale(1);
  background:radial-gradient(circle, rgba(255,200,140,.32) 0%, rgba(244,123,32,.14) 42%, transparent 70%);
}
body.play .hero-glow{
  animation-name: hero-fade, hero-breathe;
  animation-duration: .8s, 3.8s;
  animation-timing-function: ease-out, ease-in-out;
  animation-fill-mode: forwards, none;
  animation-delay: 2s, 2.8s;
  animation-iteration-count: 1, infinite;
}
@keyframes hero-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

.login-visual .text-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(8,7,6,.82) 0%, rgba(8,7,6,.68) 32%, rgba(8,7,6,.28) 56%, transparent 74%);
}

/* halo tenue de marca, arriba-izquierda (donde llega el beam) */
.brand-glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 680px 460px at 9% 8%, rgba(244,123,32,.16), transparent 62%);
}

.login-visual .vignette{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 140px 40px rgba(0,0,0,.55);
}

/* ===================== ZONA SUPERIOR: logo satic ===================== */
/* .satic-mark: misma posicion/tamano exactos que en la referencia (mantra-login.css),
   siempre visible (en la referencia tampoco esta condicionado a body.play). */
.satic-mark{
  position:absolute;z-index:3;left:6.5%;top:20px;height:30px;width:auto;opacity:.95;
}
.satic-mark img{height:100%;width:auto;display:block}

/* logo Lurpelan: sin equivalente en la referencia (que no tiene segundo logo).
   100px por debajo del wordmark "mantra" (.brand-dock), mas pequeno que el
   satic (36px vs 50px del login actual). El "top" real se fija en px por JS
   (positionLurpelanMark en login-visual.js): la altura de .brand-dock depende
   de su aspect-ratio (ancho en % pero alto resultante en px), y "top" solo
   puede expresarse en % de la ALTURA del panel, asi que no hay forma exacta de
   calcular esto en CSS puro - el valor de aqui es solo un respaldo aproximado
   hasta que el JS corra tras el primer render. */
.lurpelan-mark{
  position:absolute;z-index:3;left:6.5%;top:38%;height:36px;width:auto;
}
.lurpelan-mark img{height:100%;width:auto;display:block}

/* ===================== LOGO "mantra": quieto, el cursor entra (tecnica "laser") ===================== */
/* Copiado literal de .brand-dock en mantra-login.css (mismo left/top/width/aspect-ratio,
   mismas letras SVG via MantraWordmarkSvg.cs, mismo beam/cursor). Sin cambios. */
.brand-dock{
  position:absolute;z-index:3;aspect-ratio:5525/963;
  left:6.5%;top:23%;width:16.5%;
}
.brand-dock .logo{width:100%;height:auto;display:block;overflow:visible}
.brand-dock .ltr{fill:#fff;opacity:0}
body.play .brand-dock .ltr{opacity:1}

.brand-dock .beam{
  position:absolute;z-index:2;pointer-events:none;opacity:0;
  right:2.17%;width:9.86%;top:69.6%;height:16.9%;border-radius:2px;
  transform-origin:100% 50%;
  background:linear-gradient(90deg,rgba(255,214,160,0) 0%,rgba(255,214,160,.95) 40%,var(--brand) 100%);
}
body.play .brand-dock .beam{
  animation:beam-move 1.15s cubic-bezier(.05,.7,.1,1) forwards .1s,
            beam-glow  1.15s linear forwards .1s;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 9px rgba(255,206,150,1))
         drop-shadow(0 0 26px rgba(244,123,32,.95));
}
@keyframes beam-move{
  0%  {transform:translateX(70vw) scaleY(.22)}
  100%{transform:translateX(0)    scaleY(1)}
}
@keyframes beam-glow{
  0%  {opacity:.85}
  55% {opacity:1}
  88% {opacity:1}
  100%{opacity:0}
}

.brand-dock .cursor{
  fill:var(--brand);transform-box:fill-box;transform-origin:100% 50%;opacity:0;
}
body.play .brand-dock .cursor{
  animation:cursor-catch .01s steps(1,end) forwards 1.1s,
            idle-blink 4s ease-out 1.25s infinite;
}
@keyframes cursor-catch{ to{opacity:1} }
@keyframes idle-blink{
  0%  {opacity:1;filter:drop-shadow(0 0 4px rgba(255,190,120,1)) drop-shadow(0 0 18px rgba(244,123,32,1))
                        drop-shadow(0 0 44px rgba(244,123,32,.75)) drop-shadow(0 0 88px rgba(244,123,32,.5))}
  70% {opacity:.12;filter:none}
  100%{opacity:0;filter:none}
}

/* ===================== TITULAR + COPY ===================== */
/* top fijo (ya no depende del logo Lurpelan ni se recalcula por JS): se deja
   donde ya estaba encajado, y el hueco entre el logo Lurpelan y aqui se ajusta
   solo moviendo el logo (LURPELAN_GAP_PX en login-visual.js), nunca el titular. */
.hero-copy{
  position:absolute;z-index:3;left:6.5%;right:9%;top:45%;
  opacity:0;transform:translateY(10px);
}
body.play .hero-copy{
  animation:hero-fade .9s cubic-bezier(.2,.8,.2,1) forwards .55s;
}
@keyframes hero-fade{to{opacity:1;transform:translateY(0)}}
.hero-copy h1{
  font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(28px,3vw,40px);line-height:1.18;letter-spacing:.005em;
  text-wrap:balance;margin:0 0 20px;
}
.hero-copy h1 span{color:var(--brand)}
.hero-copy p{
  color:#b9b2a8;font-size:14.5px;line-height:1.7;max-width:38ch;margin:0;
}

.visual-footer{
  position:absolute;z-index:3;left:6.5%;bottom:26px;
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;color:#6b655c;
  opacity:0;
}
body.play .visual-footer{ animation:hero-fade .7s ease-out forwards 1.5s; }
.visual-footer .vcursor{color:var(--brand);animation:blink-simple 1.2s ease-in-out infinite}
@keyframes blink-simple{0%,100%{opacity:1}50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hero-copy,.visual-footer{animation:none!important;opacity:1!important;transform:none!important}
  .beam{animation:none!important;opacity:0!important}
  .cursor{animation:none!important;opacity:1!important;filter:none!important}
}