/* Ocius · símbolo animado: la portada al abrir la web y el indicador de carga.
   Del encargo de diseño del 12/10/2026, con las variantes
   elegidas: portada «b · Abrazo» e indicador «chase · Comitiva». Lo enlaza
   index.html (la portada se pinta antes que el JavaScript) y lo usan
   components/OciusSimbolo.jsx y el marcado de index.html. */

/* Color según fondo */
.oc-symbol{--oc-ink:#7c3aed;--oc-accent:#ec4899;display:block;overflow:visible}
[data-bs-theme="dark"] .oc-symbol{--oc-ink:#a78bfa}
/* Sobre violeta (y sobre los botones de color) el rosa casi no se ve: amarillo */
.oc-on-violet .oc-symbol,.btn-primary .oc-symbol,.btn-danger .oc-symbol,.btn-success .oc-symbol,
.btn-secondary .oc-symbol,.btn-dark .oc-symbol{--oc-ink:#fff;--oc-accent:#fde68a}

/* Partes */
.oc-ring{fill:none;stroke:var(--oc-ink);stroke-width:6}
.oc-dot{fill:var(--oc-ink);transform-box:fill-box;transform-origin:center}
.oc-accent{fill:var(--oc-accent)}
.oc-dots,.oc-orbit{transform-box:view-box;transform-origin:50px 50px}

/* Portada — 800 ms, una vez, queda fijo */
.oc-on-violet{background:#7c3aed;color:#fff}
.oc-splash{display:flex;flex-direction:column;align-items:center;gap:20px}
.oc-splash .oc-symbol{width:112px;height:112px}
.oc-name{font:800 34px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.03em}

/* b · Abrazo: llegada en espiral y el anillo se cierra desde arriba por los dos lados */
.oc-splash-b .oc-orbit{animation:oc-swirl 520ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc((var(--i) - 1) * 20ms)}
.oc-splash-b .oc-dot{animation:oc-inward 520ms cubic-bezier(.16,1,.3,1) both;animation-delay:calc((var(--i) - 1) * 20ms)}
.oc-splash-b .oc-lead{animation:none}
.oc-splash-b .oc-accent{animation:oc-pop 260ms cubic-bezier(.33,1,.68,1) 320ms both}
.oc-splash-b .oc-ring{stroke-dasharray:0 188.5 0 0;animation:oc-close 400ms cubic-bezier(.65,0,.35,1) 360ms both}
.oc-splash-b .oc-name{animation:oc-rise 280ms cubic-bezier(.2,.8,.2,1) 520ms both}

/* La portada tapa la página mientras carga; main.jsx la quita al acabar */
.oc-portada{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;transition:opacity 200ms ease-out}
.oc-portada.oc-fuera{opacity:0;pointer-events:none}

/* Indicador de carga — 24–48 px, bucle. El tamaño, en el style del svg */
.oc-loader{flex:none}
.oc-cargando{display:inline-flex;vertical-align:middle}
.btn .oc-cargando{margin-block:-.25rem}

/* chase · Comitiva: vuelta escalonada detrás del acento; el logo se recompone en cada ciclo */
.oc-loader-chase .oc-orbit{animation:oc-chase 1400ms cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--j) * 24ms)}

@keyframes oc-pop{from{opacity:0;transform:scale(0)}55%{opacity:1;transform:scale(1.18)}to{opacity:1;transform:none}}
@keyframes oc-swirl{from{transform:rotate(-80deg)}to{transform:none}}
@keyframes oc-inward{from{opacity:0;transform:translateY(-26px) scale(.6)}35%{opacity:1}to{opacity:1;transform:none}}
@keyframes oc-close{from{stroke-dasharray:0 188.5 0 0}to{stroke-dasharray:94.25 0 94.25 0}}
@keyframes oc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes oc-chase{0%{transform:rotate(0deg)}72%,100%{transform:rotate(360deg)}}
@keyframes oc-fade{from{opacity:0}}
@keyframes oc-breathe{50%{opacity:.35}}

/* Movimiento reducido: portada = fundido; indicador = piezas quietas + opacidad */
@media (prefers-reduced-motion:reduce){
.oc-splash .oc-ring,.oc-splash .oc-orbit,.oc-splash .oc-dot,.oc-splash .oc-name{animation:none}
.oc-splash .oc-ring{stroke-dasharray:none}
.oc-splash{animation:oc-fade 240ms ease-out both}
.oc-loader .oc-dots,.oc-loader .oc-orbit,.oc-loader .oc-dot{animation:none}
.oc-loader{animation:oc-breathe 1200ms ease-in-out infinite}
}