/* ==========================================================================
   Julian Cohecha · atmosfera comun ("vidrio liquido sobre noche")
   Fondo vivo, movimiento y revelado. Lo comparten la home y las paginas
   publicas del tenant. Va junto con jc-fx.js.
   ========================================================================== */
:root{
  --glass-a:rgba(255,255,255,.13);
  --glass-b:rgba(255,255,255,.04);
  --glass-edge:rgba(255,255,255,.16);
  --glass-hi:rgba(255,255,255,.22);
  --jc-ink:#EAF0F7;
  --jc-soft:#B8C4D6;
  --jc-dim:#8FA0B8;
}
@property --spot{ syntax:'<number>'; inherits:false; initial-value:0; }
html{ background:#071423; }
body{ background:transparent !important; }

/* ---------- Fondo vivo ---------- */
.fx{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #12315a 0%, rgba(18,49,90,0) 60%),
    linear-gradient(180deg,#0a1c33 0%,#071423 55%,#050e1a 100%); }
.fx .blob{ position:absolute; border-radius:50%; will-change:transform; }
.fx .b1{ width:62vmax; height:62vmax; left:-22vmax; top:-18vmax;
  background:radial-gradient(circle,rgba(200,162,76,.34),rgba(200,162,76,0) 66%); animation:fxA 26s ease-in-out infinite alternate; }
.fx .b2{ width:58vmax; height:58vmax; right:-24vmax; top:18vh;
  background:radial-gradient(circle,rgba(44,126,110,.40),rgba(44,126,110,0) 66%); animation:fxB 31s ease-in-out infinite alternate; }
.fx .b3{ width:52vmax; height:52vmax; left:-10vmax; bottom:-26vmax;
  background:radial-gradient(circle,rgba(86,128,214,.30),rgba(86,128,214,0) 66%); animation:fxC 29s ease-in-out infinite alternate; }
.fx .b4{ width:36vmax; height:36vmax; right:6vmax; bottom:6vh;
  background:radial-gradient(circle,rgba(226,199,131,.18),rgba(226,199,131,0) 66%); animation:fxA 22s ease-in-out infinite alternate-reverse; }
@keyframes fxA{ to{ transform:translate(14vmax,10vmax) scale(1.18); } }
@keyframes fxB{ to{ transform:translate(-16vmax,-8vmax) scale(.9); } }
@keyframes fxC{ to{ transform:translate(12vmax,-12vmax) scale(1.12); } }
.fx .grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent); mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent); }
.fx .dot{ position:absolute; bottom:-12px; border-radius:50%; background:rgba(226,199,131,.8);
  box-shadow:0 0 10px 2px rgba(226,199,131,.45); opacity:0; animation:rise linear infinite; }
@keyframes rise{ 0%{ transform:translate3d(0,0,0); opacity:0; } 12%{ opacity:.9; } 100%{ transform:translate3d(var(--dx,20px),-108vh,0); opacity:0; } }

.fx .warp{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ---------- Animaciones compartidas ---------- */
@keyframes flow{ to{ background-position:200% 0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes halo{ 50%{ transform:scale(1.18); opacity:.55; } }
@keyframes bob{ 50%{ transform:translateY(-5px); } }
@keyframes sheen{ 0%,62%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } }
@keyframes orbdrift{ to{ transform:translate(-60px,40px) scale(1.25); } }

/* Orbes de luz dentro de los encabezados (los crea jc-fx.js) */
.jc-orb{ position:absolute; z-index:-1; border-radius:50%; pointer-events:none; will-change:transform; }
.jc-orb.o1{ width:340px; height:340px; right:-90px; top:-120px; background:radial-gradient(circle,rgba(200,162,76,.34),transparent 68%); animation:orbdrift 14s ease-in-out infinite alternate; }
.jc-orb.o2{ width:300px; height:300px; left:-80px; bottom:-140px; background:radial-gradient(circle,rgba(44,126,110,.42),transparent 68%); animation:orbdrift 17s ease-in-out infinite alternate-reverse; }

/* ---------- Revelado al hacer scroll ---------- */
.js .rv{ opacity:0; translate:0 22px; scale:.985; transition:opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1), scale .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms); }
.js .rv.in{ opacity:1; translate:none; scale:none; }

/* ---------- Reducir movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .fx .blob,.fx .dot,.jc-orb{ animation:none !important; }
  .js .rv{ opacity:1; translate:none; scale:1; transition:none; }
}