/* ==========================================================================
   EL JUEGO DE CUBOS — SeqLogic
   Las piezas en 3D de los temas de cubos (Mundo de bloques, Reino de cubos…):
   monitos, princesas, castillos y cubos de energía hechos de cubos de verdad,
   con sus seis caras y su luz. Las arma muestrario/bloques3d.js.
   Solo se carga en los temas que traen  cubos3d: true  en temas.js.

   Cada tema le pone SUS colores con variables (en su tema.css):
     --piso-a / --piso-b      la rejilla del piso        (.piso3d)
     --loseta-a / --loseta-b  el piso de losetas         (.piso3d--loseta)
     --aro-1 / --aro-2        los aros de luz
     --brillo                 cuánto brillan los cubos con letra (24px = neón; 8px = suave)
     --f-cubos                la letra de los números y las letras de los cubos
     --porton / --oro         la puerta y las ventanas del castillo
   ========================================================================== */
/* ══════════════════════════════════════════════════════════════════════
   LAS PIEZAS
   .mundo3d  la ventana por la que se ve (pone la perspectiva)
   .camara3d el punto donde pisan; se le da vuelta para ver todo de lado
   .g3       un grupo que se mueve junto (el monito, un brazo, una pierna)
   .c3       un cubo: seis caras .f (frente, arriba, derecha, izquierda, atrás, abajo)
   La luz viene de arriba y de frente: arriba más clara, los lados más oscuros.
   ══════════════════════════════════════════════════════════════════════ */
.mundo3d{ position:relative; display:block; perspective:1000px; perspective-origin:50% 30%; pointer-events:none; }
/* OJO: las variables se heredan. Sin esto, el tamaño y el giro de un grupo se le pegarían otra vez a
   cada pieza de adentro (un brazo girado giraría también cada uno de sus cubos). Cada pieza empieza en cero. */
.g3, .c3{ --x:0px; --y:0px; --z:0px; --t:1; --giro:rotate(0deg); }
.camara3d{
  position:absolute; left:50%; top:var(--suelo, 84%); width:0; height:0; display:block;
  transform-style:preserve-3d; transform:rotateX(var(--pic, -13deg)) rotateY(var(--vuelta, -24deg));
}
.g3{
  position:absolute; left:0; top:0; width:0; height:0; display:block; transform-style:preserve-3d;
  transform:translate3d(var(--x,0), var(--y,0), var(--z,0)) scale3d(var(--t,1), var(--t,1), var(--t,1)) var(--giro, rotate(0deg));
}
.c3{
  position:absolute; left:0; top:0; display:block; width:var(--w); height:var(--h);
  margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style:preserve-3d; transform:translate3d(var(--x,0), var(--y,0), var(--z,0)) var(--giro, rotate(0deg));
}
.c3 > .f{ position:absolute; display:block; background:var(--c); backface-visibility:hidden; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); font-style:normal; }
.c3 > .f-a{ inset:0; transform:translateZ(calc(var(--d) / 2)); }
.c3 > .f-p{ inset:0; transform:rotateY(180deg) translateZ(calc(var(--d) / 2)); filter:brightness(.6); }
.c3 > .f-d{ top:0; height:100%; left:50%; width:var(--d); margin-left:calc(var(--d) / -2); transform:rotateY(90deg) translateZ(calc(var(--w) / 2)); filter:brightness(.76); }
.c3 > .f-i{ top:0; height:100%; left:50%; width:var(--d); margin-left:calc(var(--d) / -2); transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); filter:brightness(.64); }
.c3 > .f-t{ left:0; width:100%; top:50%; height:var(--d); margin-top:calc(var(--d) / -2); transform:rotateX(90deg) translateZ(calc(var(--h) / 2)); filter:brightness(1.18); }
.c3 > .f-b{ left:0; width:100%; top:50%; height:var(--d); margin-top:calc(var(--d) / -2); transform:rotateX(-90deg) translateZ(calc(var(--h) / 2)); filter:brightness(.46); }
/* la cara: ojos de cuadrito con su brillo y una boca chiquita */
.ojo{ position:absolute; top:40%; width:17%; height:26%; background:#12163A; }
.ojo--i{ left:19%; } .ojo--d{ right:19%; }
.ojo::after{ content:""; position:absolute; left:12%; top:10%; width:42%; height:36%; background:#fff; }
.boca{ position:absolute; left:36%; right:36%; top:76%; height:8%; background:#A8463A; }
.mejilla{ position:absolute; top:64%; width:15%; height:12%; background:#FF7FAE; opacity:.5; }
.mejilla--i{ left:7%; } .mejilla--d{ right:7%; }
.numero{ position:absolute; inset:0; display:grid; place-items:center; font:400 46px/1 var(--f-cubos, "Lilita One", "Arial Black", sans-serif); color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.35); }
/* los cubos de energía: brillan y traen su letra en las cuatro caras */
.cubo-letra > .f{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.5), inset 0 0 18px rgba(255,255,255,.35), 0 0 var(--brillo, 24px) var(--c); }
.cubo-letra > .f-d, .cubo-letra > .f-i{ filter:brightness(.86); } .cubo-letra > .f-p{ filter:brightness(.8); }
.letra{ position:absolute; inset:0; display:grid; place-items:center; font:400 calc(var(--w) * .64)/1 var(--f-cubos, "Lilita One", "Arial Black", sans-serif); color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.3); }
/* el piso: rejilla de neón que se pierde a lo lejos, y dos aros de luz */
.piso3d{
  position:absolute; left:0; top:0; display:block; width:1500px; height:1500px; margin:-750px 0 0 -750px; transform:rotateX(90deg);
  background:
    repeating-linear-gradient(0deg, var(--piso-a, rgba(77,232,255,.7)) 0 2px, transparent 2px 75px),
    repeating-linear-gradient(90deg, var(--piso-b, rgba(255,79,163,.65)) 0 2px, transparent 2px 75px);
  -webkit-mask-image:radial-gradient(circle, #000 0, #000 10%, transparent 40%); mask-image:radial-gradient(circle, #000 0, #000 10%, transparent 40%);
}
.aro3d{
  position:absolute; left:0; top:0; display:block; width:var(--aro, 280px); height:var(--aro, 280px); margin:calc(var(--aro, 280px) / -2) 0 0 calc(var(--aro, 280px) / -2);
  border-radius:50%; border:7px solid var(--aro-1, #4DE8FF); box-shadow:0 0 22px var(--aro-1, #4DE8FF), inset 0 0 22px var(--aro-1, #4DE8FF);
  transform:rotateX(90deg) translateZ(1px);
}
.aro3d--2{ --aro:180px; border-color:var(--aro-2, #FF4FA3); box-shadow:0 0 20px var(--aro-2, #FF4FA3), inset 0 0 20px var(--aro-2, #FF4FA3); transform:rotateX(90deg) translateZ(2px); }

/* otro piso: losetas de dos colores (para los temas de día, sin neón) */
.piso3d--loseta{
  background:conic-gradient(var(--loseta-a, #FFE3EF) 90deg, var(--loseta-b, #FFF8EE) 0 180deg, var(--loseta-a, #FFE3EF) 0 270deg, var(--loseta-b, #FFF8EE) 0) 0 0 / 150px 150px;
}
/* el castillo: su puerta y sus ventanas van pintadas en la cara de enfrente */
.porton{ position:absolute; left:36%; right:36%; bottom:0; height:60%; background:var(--porton, #8A5FA8); border-radius:46% 46% 0 0 / 34% 34% 0 0; box-shadow:inset 0 0 0 5px var(--oro, #F2C14E); }
.ventana{ position:absolute; left:32%; right:32%; top:24%; height:30%; background:var(--porton, #8A5FA8); border-radius:46% 46% 0 0 / 40% 40% 0 0; box-shadow:inset 0 0 0 3px rgba(255,255,255,.6); }
.ventana--i{ left:10%; right:auto; width:14%; top:26%; height:26%; } .ventana--d{ right:10%; left:auto; width:14%; top:26%; height:26%; }

/* lo que se mueve */
.camara3d.gira{ animation:c3-vuelta 7s ease-in-out infinite alternate; }
@keyframes c3-vuelta{ from{ transform:rotateX(-13deg) rotateY(-38deg); } to{ transform:rotateX(-13deg) rotateY(30deg); } }
.monito.saluda .brazo--d{ animation:c3-saludo .7s ease-in-out infinite alternate; }
@keyframes c3-saludo{ from{ transform:translate3d(54px,-152px,0) rotateZ(-138deg); } to{ transform:translate3d(54px,-152px,0) rotateZ(-168deg); } }
.princesa.saluda .brazo--d{ animation:c3-saludo-p .7s ease-in-out infinite alternate; }
@keyframes c3-saludo-p{ from{ transform:translate3d(50px,-150px,0) rotateZ(-136deg); } to{ transform:translate3d(50px,-150px,0) rotateZ(-166deg); } }
.cubo-letra.flota{ animation:c3-flota 3.4s ease-in-out infinite alternate; animation-delay:var(--espera, 0s); }
@keyframes c3-flota{
  from{ transform:translate3d(var(--x), var(--y), var(--z)) rotateY(-25deg) rotateX(10deg); }
  to{ transform:translate3d(var(--x), calc(var(--y) - 18px), var(--z)) rotateY(205deg) rotateX(-10deg); }
}