/* ═══════════════════════════════════════════════════════════════════════════
   CLICKHOUSE 3D INTERACTIVE RUBIK'S CUBE LOGO (VANILLA CSS)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ch-cube-yellow: #FADE2A;
  --ch-cube-orange: #FF5722;
  --ch-cube-red: #E53935;
  --ch-cube-cyan: #00BCD4;
  --ch-cube-green: #10B981;
  --ch-cube-white: #F8FAFC;
  --ch-cube-body: #131722;
  --ch-cube-inner: #0b0e14;
  --ch-cube-glow: rgba(250, 222, 42, 0.4);
}

.rubiks-cube-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  touch-action: none;
  cursor: grab;
  perspective: 900px;
  perspective-origin: 50% 50%;
  transition: filter 0.25s ease, transform 0.2s cubic-bezier(0.2, 0, 0, 1);
  vertical-align: middle;
}

.rubiks-cube-container:active {
  cursor: grabbing;
}

.rubiks-cube-container.is-hoverable:hover {
  filter: drop-shadow(0 0 10px var(--ch-cube-glow));
}

/* Sizing presets */
.rubiks-cube-container.size-xs { width: 26px; height: 26px; perspective: 350px; }
.rubiks-cube-container.size-sm { width: 34px; height: 34px; perspective: 450px; }
.rubiks-cube-container.size-md { width: 64px; height: 64px; perspective: 700px; }
.rubiks-cube-container.size-lg { width: 120px; height: 120px; perspective: 1000px; }
.rubiks-cube-container.size-xl { width: 200px; height: 200px; perspective: 1300px; }

.rubiks-scene {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rubiks-pivot {
  position: absolute;
  width: var(--cube-dim, 60px);
  height: var(--cube-dim, 60px);
  transform-style: preserve-3d;
  will-change: transform;
}

.rubiks-pivot.auto-spin {
  animation: rubiks-float-spin 16s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

@keyframes rubiks-float-spin {
  0% {
    transform: rotateX(-22deg) rotateY(35deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(-14deg) rotateY(215deg) rotateZ(8deg);
  }
  100% {
    transform: rotateX(-28deg) rotateY(395deg) rotateZ(-6deg);
  }
}

.rubiks-cube-container.variant-loader .rubiks-pivot {
  animation: rubiks-loader-spin 3.5s linear infinite;
}

@keyframes rubiks-loader-spin {
  0% { transform: rotateX(-25deg) rotateY(30deg) rotateZ(0deg); }
  100% { transform: rotateX(-25deg) rotateY(390deg) rotateZ(360deg); }
}

.rubiks-cubie {
  position: absolute;
  width: var(--cubie-size, 18px);
  height: var(--cubie-size, 18px);
  top: calc(50% - (var(--cubie-size, 18px) / 2));
  left: calc(50% - (var(--cubie-size, 18px) / 2));
  transform-style: preserve-3d;
  will-change: transform;
}

.cubie-face {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--ch-cube-body);
  border: 1px solid rgba(0, 0, 0, 0.75);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
}

.cubie-sticker {
  width: 82%;
  height: 82%;
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 
              inset 0 -1px 2px rgba(0, 0, 0, 0.45),
              0 0 1px rgba(0, 0, 0, 0.6);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.rubiks-cube-container:hover .cubie-sticker {
  filter: brightness(1.08);
}

.cubie-face.face-front  { transform: rotateY(0deg) translateZ(calc(var(--cubie-size, 18px) / 2)); }
.cubie-face.face-back   { transform: rotateY(180deg) translateZ(calc(var(--cubie-size, 18px) / 2)); }
.cubie-face.face-right  { transform: rotateY(90deg) translateZ(calc(var(--cubie-size, 18px) / 2)); }
.cubie-face.face-left   { transform: rotateY(-90deg) translateZ(calc(var(--cubie-size, 18px) / 2)); }
.cubie-face.face-top    { transform: rotateX(90deg) translateZ(calc(var(--cubie-size, 18px) / 2)); }
.cubie-face.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cubie-size, 18px) / 2)); }

.color-yellow { background: linear-gradient(135deg, #FFE600 0%, #FADE2A 70%, #D4BA1A 100%); }
.color-orange { background: linear-gradient(135deg, #FF7043 0%, #FF5722 70%, #D84315 100%); }
.color-red    { background: linear-gradient(135deg, #EF5350 0%, #E53935 70%, #B71C1C 100%); }
.color-cyan   { background: linear-gradient(135deg, #26C6DA 0%, #00BCD4 70%, #00838F 100%); }
.color-green  { background: linear-gradient(135deg, #34D399 0%, #10B981 70%, #059669 100%); }
.color-white  { background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 70%, #CBD5E1 100%); }
.color-none   { background: transparent; box-shadow: none; border-color: transparent; }

.rubiks-cube-container.is-twisting {
  filter: drop-shadow(0 0 14px rgba(250, 222, 42, 0.65));
}

.center-emblem {
  position: absolute;
  width: 55%;
  height: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5px;
  pointer-events: none;
}

.center-emblem span {
  display: block;
  width: 2px;
  background-color: #131722;
  border-radius: 1px;
}

.center-emblem span:nth-child(1) { height: 70%; }
.center-emblem span:nth-child(2) { height: 100%; }
.center-emblem span:nth-child(3) { height: 40%; }
.center-emblem span:nth-child(4) { height: 85%; }

.rubiks-ground-shadow {
  position: absolute;
  bottom: -15%;
  width: 75%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  transform: rotateX(90deg);
  pointer-events: none;
  filter: blur(3px);
}