/* ── CUBE TRANSITION ─────────────────────────────────────────────
   Full-screen overlay + real 6-faced CSS cube, used when navigating
   between Ifatron sections (home icon taps). See cube-transition.js. */

#cube-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 20, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, background-color 0.5s ease;
}

#cube-transition-overlay.ct-in {
  opacity: 1;
  background: rgba(20, 20, 20, 0.94);
  pointer-events: auto;
}

#cube-transition-overlay.ct-out {
  opacity: 0;
  background: rgba(20, 20, 20, 0);
}

.ct-stage {
  position: relative;
  width: 120px;
  height: 120px;
  -webkit-perspective: 700px;
  perspective: 700px;
}

.ct-shadow {
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 84px;
  height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
#cube-transition-overlay.ct-in .ct-shadow { opacity: 1; }

/* Corner brackets — L-shaped reticle, echoes Loot Radar's crosshair icon */
.ct-bracket {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #E88A1A;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ct-bracket.tl { top: -14px; left: -14px; border-right: none; border-bottom: none; }
.ct-bracket.tr { top: -14px; right: -14px; border-left: none; border-bottom: none; }
.ct-bracket.bl { bottom: -14px; left: -14px; border-right: none; border-top: none; }
.ct-bracket.br { bottom: -14px; right: -14px; border-left: none; border-top: none; }

#cube-transition-overlay.ct-in .ct-bracket { opacity: 0.75; }
#cube-transition-overlay.ct-brackets-tight .ct-bracket.tl { transform: translate(4px, 4px); }
#cube-transition-overlay.ct-brackets-tight .ct-bracket.tr { transform: translate(-4px, 4px); }
#cube-transition-overlay.ct-brackets-tight .ct-bracket.bl { transform: translate(4px, -4px); }
#cube-transition-overlay.ct-brackets-tight .ct-bracket.br { transform: translate(-4px, -4px); }

.ct-cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  transform: rotateX(0deg) rotateY(0deg);
  -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}

#cube-transition-overlay.ct-extrude .ct-cube {
  -webkit-transform: rotateX(-24deg) rotateY(35deg);
  transform: rotateX(-24deg) rotateY(35deg);
}

.ct-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 84px;
  height: 84px;
  border-radius: 8px;
  background: linear-gradient(155deg, #24211c 0%, #1A1A1A 55%, #141414 100%);
  border: 1px solid rgba(232,138,26,0.4);
  box-shadow: inset 0 0 18px rgba(232,138,26,0.08), 0 0 22px rgba(232,138,26,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0px);
  transform: translateZ(0px);
  -webkit-transition: -webkit-transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Flat/collapsed state: all six faces sit stacked at depth 0 (reads as
   one flat squircle) until .ct-extrude pushes them out to a real cube. */
.ct-face-front  { -webkit-transform: translateZ(0px); transform: translateZ(0px); }
.ct-face-back   { -webkit-transform: rotateY(180deg) translateZ(0px); transform: rotateY(180deg) translateZ(0px); }
.ct-face-right  { -webkit-transform: rotateY(90deg)  translateZ(0px); transform: rotateY(90deg)  translateZ(0px); }
.ct-face-left   { -webkit-transform: rotateY(-90deg) translateZ(0px); transform: rotateY(-90deg) translateZ(0px); }
.ct-face-top    { -webkit-transform: rotateX(90deg)  translateZ(0px); transform: rotateX(90deg)  translateZ(0px); }
.ct-face-bottom { -webkit-transform: rotateX(-90deg) translateZ(0px); transform: rotateX(-90deg) translateZ(0px); }

#cube-transition-overlay.ct-extrude .ct-face-front  { -webkit-transform: translateZ(42px); transform: translateZ(42px); }
#cube-transition-overlay.ct-extrude .ct-face-back   { -webkit-transform: rotateY(180deg) translateZ(42px); transform: rotateY(180deg) translateZ(42px); }
#cube-transition-overlay.ct-extrude .ct-face-right  { -webkit-transform: rotateY(90deg)  translateZ(42px); transform: rotateY(90deg)  translateZ(42px); }
#cube-transition-overlay.ct-extrude .ct-face-left   { -webkit-transform: rotateY(-90deg) translateZ(42px); transform: rotateY(-90deg) translateZ(42px); }
#cube-transition-overlay.ct-extrude .ct-face-top    { -webkit-transform: rotateX(90deg)  translateZ(42px); transform: rotateX(90deg)  translateZ(42px); }
#cube-transition-overlay.ct-extrude .ct-face-bottom { -webkit-transform: rotateX(-90deg) translateZ(42px); transform: rotateX(-90deg) translateZ(42px); }

.ct-face-front .ct-glyph {
  width: 26px;
  height: 26px;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Used on page-load landings: skip the entrance/extrude animation and
   drop straight into the fully-covered state, so only the fade-out
   (phase 3) is visible on the destination page. */
#cube-transition-overlay.ct-instant .ct-cube,
#cube-transition-overlay.ct-instant .ct-face,
#cube-transition-overlay.ct-instant .ct-bracket,
#cube-transition-overlay.ct-instant .ct-shadow {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #cube-transition-overlay {
    transition: opacity 0.15s ease, background-color 0.15s ease;
  }
  .ct-cube, .ct-face, .ct-bracket, .ct-shadow {
    transition: none !important;
    transform: none !important;
  }
  .ct-stage { display: none; }
}


/* Landing pages reached by cubeTransitionNavigate: hide the page itself
   until the cube cover is in place, so the destination never flashes
   uncovered before the overlay is built (see cubeTransitionOnLoad). */
html.ct-pending { background: #141414; }
html.ct-pending body { visibility: hidden; }
html.ct-pending #cube-transition-overlay { visibility: visible; }