/* Preloader cube styles */
.root_fix {}
:root { --cube-size: 220px; }
.preloader{ position:fixed; inset:0; background: #031b3a; display:flex; align-items:center; justify-content:center; z-index:99999; }
.cube-container{ perspective: 900px; }
.cube{ width:var(--cube-size); height:var(--cube-size); position:relative; transform-style:preserve-3d; }
.face{ position:absolute; width:100%; height:100%; background-size:80% auto; background-repeat:no-repeat; background-position:center; border-radius:8px; box-shadow: 0 20px 40px rgba(2,6,23,0.6); background-color:#07233f; }
.face.front  { transform: translateZ(calc(var(--cube-size)/2));  }
.face.back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size)/2));  opacity:0.95; }
.face.right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size)/2));  opacity:0.9; }
.face.left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size)/2));  opacity:0.9; }
.face.top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size)/2));  opacity:0.85; }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size)/2));  opacity:0.85; }

/* Animation: 3 turns to the right, then shrink/backwards fade */
/* separate rotate and shrink so rotation stays linear and shrinking doesn't reverse */
@keyframes rotateAnim {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(540deg); }
}

@keyframes shrinkAnim {
  from { transform: rotateY(540deg) scale(1) translateZ(0); opacity:1; }
  to   { transform: rotateY(540deg) scale(0.12) translateZ(-260px); opacity:0; }
}

/* run rotate first (2.1s linear), then hold 0.5s fully visible, then shrink (0.4s) — total 3s */
.cube.animate {
  animation: rotateAnim 2.1s linear forwards,
             holdAnim 0.5s linear forwards 2.1s,
             shrinkAnim 0.4s cubic-bezier(.2,.8,.2,1) forwards 2.6s;
}

@keyframes holdAnim {
  from { transform: rotateY(540deg) scale(1) translateZ(0); opacity:1; }
  to   { transform: rotateY(540deg) scale(1) translateZ(0); opacity:1; }
}

/* hide preloader after animation (fade out) */
.preloader.hidden{ pointer-events:none; opacity:0; transition: opacity 0.45s ease; visibility:hidden; }

/* small screens */
@media (max-width:576px){ :root{ --cube-size:160px } }