/* ════════════════════════════════════════════
   ATLAS HOME — Logo Animations v1.0
   Nivel: Apple Intelligence / OpenAI / Perplexity
   Sin dependencias externas
   ════════════════════════════════════════════ */

/* ── NODO HOLE (círculo interior — fill cambia por tema) ── */
.atlas-nodo-hole              { fill: #080E1C; }
.atlas-logo--light .atlas-nodo-hole { fill: #F8F9FA; }

/* ── BRAZOS — draw-in animation ── */
.atlas-brazo {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: atlasBrazoDraw 0.9s cubic-bezier(0.4,0,0.2,1) forwards;
}
.atlas-brazo1 { animation-delay: 0.08s; }
.atlas-brazo2 { animation-delay: 0.32s; }

@keyframes atlasBrazoDraw {
  to { stroke-dashoffset: 0; }
}

/* ── NODOS — spring pop + beat continuo ── */
.atlas-nodo {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation:
    atlasNodoPop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards,
    atlasNodoBeat 3.2s ease-in-out 1.5s infinite;
}
.atlas-n1 { animation-delay: 0.0s,  1.5s; }
.atlas-n2 { animation-delay: 0.5s,  2.0s; }
.atlas-n3 { animation-delay: 0.65s, 2.15s; }
.atlas-n4 { animation-delay: 0.8s,  2.3s; }

@keyframes atlasNodoPop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.28); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes atlasNodoBeat {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.45) drop-shadow(0 0 5px rgba(212,160,23,.65)); }
}

/* ── SHIMMER — luz que cruza los brazos ── */
.atlas-isotipo-anim.atlas-shimmer .atlas-brazo {
  animation: atlasShimmerLine 0.85s ease forwards;
}
@keyframes atlasShimmerLine {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.9) drop-shadow(0 0 8px rgba(243,210,122,.85)); }
  100% { filter: brightness(1); }
}

/* ── TEXTO "atlas." — stagger de letras ── */
.atlas-logo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0;
}
.atlas-logo-text .letter {
  display: inline-block;
  opacity: 0;
  animation: atlasLetterDrop 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.atlas-logo-text .letter:nth-child(1) { animation-delay: 0.82s; }
.atlas-logo-text .letter:nth-child(2) { animation-delay: 0.88s; }
.atlas-logo-text .letter:nth-child(3) { animation-delay: 0.94s; }
.atlas-logo-text .letter:nth-child(4) { animation-delay: 1.00s; }
.atlas-logo-text .letter:nth-child(5) { animation-delay: 1.06s; }

@keyframes atlasLetterDrop {
  0%   { opacity: 0; transform: translateY(-18px) scale(1.15); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── PUNTO DORADA — cuadrada, aparece girando y late ── */
.atlas-punto {
  display: inline-block;
  width: 0.13em;
  height: 0.13em;
  background: #D4A017;
  flex-shrink: 0;
  margin-left: 0.04em;
  margin-bottom: 0.1em;
  opacity: 0;
  animation:
    atlasPuntoIn  0.4s cubic-bezier(0.34,1.56,0.64,1) 1.15s forwards,
    atlasPuntoBeat 2.6s ease-in-out 2.0s infinite;
}
@keyframes atlasPuntoIn {
  0%   { opacity: 0; transform: scale(0) rotate(45deg); }
  65%  { transform: scale(1.45) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes atlasPuntoBeat {
  0%, 100% { transform: scale(1);    box-shadow: none; }
  50%       { transform: scale(1.22); box-shadow: 0 0 7px rgba(212,160,23,.55); }
}

/* ── HOME — expand de letra-comprimida ── */
.atlas-logo-home {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  line-height: 1;
  opacity: 0;
  animation: atlasHomeIn 0.7s ease 1.32s forwards;
}
@keyframes atlasHomeIn {
  0%   { opacity: 0; letter-spacing: 0.9em; }
  100% { opacity: 1; letter-spacing: 0.5em; }
}

/* ── SUBTÍTULO "Inteligencia Inmobiliaria" ── */
.atlas-logo-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  opacity: 0;
  animation: atlasSubIn 0.6s ease 1.62s forwards;
}
@keyframes atlasSubIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0.8; transform: translateY(0); }
}

/* ── LÍNEA DORADA expandible (xl / hero) ── */
.atlas-logo-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,160,23,.5), transparent);
  width: 0;
  opacity: 0;
  animation: atlasLineExpand 0.8s ease 1.82s forwards;
}
@keyframes atlasLineExpand {
  0%   { width: 0;     opacity: 0; }
  100% { width: 100%;  opacity: 1; }
}

/* ────────────────────────────────────────────
   TAMAÑOS
   ──────────────────────────────────────────── */

/* NAV — horizontal compacto */
.atlas-logo--nav {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}
.atlas-logo--nav .atlas-isotipo   { width: 34px; height: auto; }
.atlas-logo--nav .atlas-logo-text { font-size: 19px; }
.atlas-logo--nav .atlas-logo-home { font-size: 7.5px; letter-spacing: .4em; margin-top: 2px; }
.atlas-logo--nav .atlas-logo-sub  { display: none; }

/* SM */
.atlas-logo--sm .atlas-isotipo   { width: 38px; }
.atlas-logo--sm .atlas-logo-text { font-size: 20px; }
.atlas-logo--sm .atlas-logo-home { font-size: 7.5px; }
.atlas-logo--sm .atlas-logo-sub  { font-size: 6px; }

/* MD */
.atlas-logo--md .atlas-isotipo   { width: 54px; }
.atlas-logo--md .atlas-logo-text { font-size: 30px; }
.atlas-logo--md .atlas-logo-home { font-size: 9px; }
.atlas-logo--md .atlas-logo-sub  { font-size: 7px; }

/* LG */
.atlas-logo--lg .atlas-isotipo   { width: 78px; }
.atlas-logo--lg .atlas-logo-text { font-size: 46px; }
.atlas-logo--lg .atlas-logo-home { font-size: 13px; }
.atlas-logo--lg .atlas-logo-sub  { font-size: 9px; }

/* XL */
.atlas-logo--xl .atlas-isotipo   { width: 116px; }
.atlas-logo--xl .atlas-logo-text { font-size: 68px; }
.atlas-logo--xl .atlas-logo-home { font-size: 18px; }
.atlas-logo--xl .atlas-logo-sub  { font-size: 11px; }

/* HERO — full-screen / loading */
.atlas-logo--hero .atlas-isotipo   { width: clamp(100px,18vmin,180px); }
.atlas-logo--hero .atlas-logo-text { font-size: clamp(38px,7.5vmin,76px); }
.atlas-logo--hero .atlas-logo-home { font-size: clamp(11px,2vmin,21px); }
.atlas-logo--hero .atlas-logo-sub  { font-size: clamp(7px,1.1vmin,11px); }

/* SIDEBAR — compacto + centrado */
.atlas-logo--sidebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  text-decoration: none;
}
.atlas-logo--sidebar .atlas-isotipo   { width: 32px; flex-shrink: 0; }
.atlas-logo--sidebar .atlas-logo-text { font-size: 16px; }
.atlas-logo--sidebar .atlas-logo-home { font-size: 6px; letter-spacing: .36em; margin-top: 2px; }
.atlas-logo--sidebar .atlas-logo-sub  { display: none; }

/* ────────────────────────────────────────────
   TEMAS
   ──────────────────────────────────────────── */
.atlas-logo--dark .atlas-logo-text { color: #F8FAFC; }
.atlas-logo--dark .atlas-logo-home { color: #64748B; }
.atlas-logo--dark .atlas-logo-sub  { color: #334155; }

.atlas-logo--light .atlas-logo-text { color: #0B1120; }
.atlas-logo--light .atlas-logo-home { color: #6B7280; }
.atlas-logo--light .atlas-logo-sub  { color: #9CA3AF; }

.atlas-logo--gold .atlas-logo-text {
  background: linear-gradient(135deg, #F9E4A0, #D4A017, #B8860B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.atlas-logo--gold .atlas-logo-home { color: rgba(212,160,23,.6); }
.atlas-logo--gold .atlas-logo-sub  { color: rgba(212,160,23,.4); }

/* ────────────────────────────────────────────
   LOADING SCREEN
   ──────────────────────────────────────────── */
#atlas-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #080E1C;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.55s ease, transform 0.55s ease;
}
#atlas-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212,160,23,.07) 0%, transparent 60%);
  animation: atlasLoadingGlow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes atlasLoadingGlow {
  0%,100% { transform: scale(1);   opacity: .7; }
  50%      { transform: scale(1.2); opacity: 1; }
}
#atlas-loading.atlas-loading-out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
#atlas-loading-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, #B8860B, #F3D27A, #D4A017);
  width: 0%;
  transition: width 0.25s ease;
}

/* ────────────────────────────────────────────
   ÓRBITAS (hero / loading screen)
   ──────────────────────────────────────────── */
.atlas-orbit-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.atlas-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.12);
  transform: translate(-50%,-50%);
  animation: atlasOrbitSpin linear infinite;
}
.atlas-orbit-1 { width: 320px; height: 320px; animation-duration: 18s; }
.atlas-orbit-2 { width: 240px; height: 240px; animation-duration: 12s; animation-direction: reverse; }
.atlas-orbit-3 { width: 160px; height: 160px; animation-duration: 8s; }
@keyframes atlasOrbitSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
.atlas-orbit-dot {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #D4A017;
  top: -2.5px; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(212,160,23,.7);
}

/* ────────────────────────────────────────────
   PARTÍCULAS FLOTANTES
   ──────────────────────────────────────────── */
.atlas-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(212,160,23,.5);
  pointer-events: none;
  animation: atlasParticleFloat linear infinite;
  opacity: 0;
}
@keyframes atlasParticleFloat {
  0%   { transform: translateY(0) translateX(0);      opacity: 0; }
  8%   { opacity: .85; }
  92%  { opacity: .25; }
  100% { transform: translateY(-200px) translateX(22px); opacity: 0; }
}

/* ────────────────────────────────────────────
   MICRO HOVER EN NAVBAR
   ──────────────────────────────────────────── */
.atlas-logo--nav:hover .atlas-isotipo {
  filter: drop-shadow(0 0 9px rgba(212,160,23,.5));
  transition: filter .3s ease;
}
.atlas-logo--nav:hover .atlas-brazo {
  filter: brightness(1.35);
  transition: filter .3s ease;
}
.atlas-logo--sidebar:hover .atlas-isotipo {
  filter: drop-shadow(0 0 7px rgba(212,160,23,.45));
  transition: filter .3s ease;
}