/* =========================================================
   KOSTKA 3D – konfiguracja domyślna (ekrany 769‑1023 px)
   ========================================================= */
.cube-container{
  position: fixed;
  bottom: 80px;
  right: 80px;
  width: 200px; height: 200px;
  perspective: 800px;             /* punkt widoku */
  z-index: 1;
}

.cube{
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;   /* zachowaj „objetosc” przy z‑rotacjach */
  animation: rotate 20s linear infinite;
}

@keyframes rotate{
  from{ transform: rotateX(0) rotateY(0) rotateZ(0); }
  to  { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* =========================================================
   ŚCIANY  – delikatnie wypełnione, widać wnętrze
   ========================================================= */
.cube-face{
  position: absolute;
  width: 130px; height: 130px;
  background: rgba(0,200,255,0.04);     /* 4 % – daje „szklany” efekt  */
  border: 1px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--primary);
  backface-visibility: visible;         /* dzięki temu ikony są widoczne „od tyłu” */
  overflow: hidden;
}

/* miękkie podświetlenie centrum ścianki – wrażenie głębi */
.cube-face::after{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%,
               rgba(0,200,255,0.10) 0%,
               rgba(0,200,255,0.02) 60%,
               rgba(0,200,255,0.00) 100%);
  pointer-events:none;
}

/* rozmieszczenie ścian */
.face-front  { transform: translateZ(65px); }
.face-back   { transform: rotateY(180deg) translateZ(65px); }
.face-right  { transform: rotateY( 90deg) translateZ(65px); }
.face-left   { transform: rotateY(-90deg) translateZ(65px); }
.face-top    { transform: rotateX( 90deg) translateZ(65px); }
.face-bottom { transform: rotateX(-90deg) translateZ(65px); }

/* =========================================================
   WERSJA MOBILNA ≤ 768 px
   ========================================================= */
@media (max-width: 768px){
  .cube-container{
    bottom: 80px; right: 30px;
    width: 100px; height: 100px;
    perspective: 800px;
    animation: cubeEntrance 3s ease-in-out;
  }
  @keyframes cubeEntrance{
    0%  { bottom:45%; right:45%; transform:translate(50%,50%) scale(.3) rotateY(0);  opacity:0; }
    30% { opacity:.7; transform:translate(50%,50%) scale(.8) rotateY(180deg); }
    70% { transform:translate(50%,50%) scale(1.1) rotateY(270deg); }
    100%{ bottom:80px; right:30px; transform:translate(0,0) scale(1) rotateY(360deg); opacity:1; }
  }
  .cube-face{ width: 70px; height: 70px; font-size: 24px; }
  .face-front  { transform: translateZ(35px); }
  .face-back   { transform: rotateY(180deg) translateZ(35px); }
  .face-right  { transform: rotateY( 90deg) translateZ(35px); }
  .face-left   { transform: rotateY(-90deg) translateZ(35px); }
  .face-top    { transform: rotateX( 90deg) translateZ(35px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(35px); }
}

/* =========================================================
   WERSJA DESKTOP‑XL ≥ 1024 px
   ========================================================= */
@media (min-width: 1024px){
  .cube-container{
    width: 260px; height: 260px;
    bottom: 100px;
    right: calc(15% - 130px);
  }
  .cube-face{ width: 170px; height: 170px; font-size: 52px; }
  .face-front  { transform: translateZ(85px); }
  .face-back   { transform: rotateY(180deg) translateZ(85px); }
  .face-right  { transform: rotateY( 90deg) translateZ(85px); }
  .face-left   { transform: rotateY(-90deg) translateZ(85px); }
  .face-top    { transform: rotateX( 90deg) translateZ(85px); }
  .face-bottom { transform: rotateX(-90deg) translateZ(85px); }
}

/* =========================================================
   AUTO‑SCALE ≥ 769 px
   ========================================================= */
@media (min-width: 769px){
  .cube-container{
    --cube: clamp(100px, 18vw, 260px);
    width: var(--cube); height: var(--cube);
    right: 4vw; bottom: 90px;
  }
  .cube-face{
    width: calc(var(--cube)*0.65);
    height: calc(var(--cube)*0.65);
    font-size: calc(var(--cube)*0.20);
  }
  .face-front  { transform: translateZ(calc(var(--cube)*0.325)); }
  .face-back   { transform: rotateY(180deg) translateZ(calc(var(--cube)*0.325)); }
  .face-right  { transform: rotateY( 90deg) translateZ(calc(var(--cube)*0.325)); }
  .face-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube)*0.325)); }
  .face-top    { transform: rotateX( 90deg) translateZ(calc(var(--cube)*0.325)); }
  .face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube)*0.325)); }
}

/* =========================================================
   ✨ PARTICLE BURST + GLOW PO STARCIU
   ========================================================= */
.cube-particle{
  position:absolute; top:50%; left:50%;
  width:6px; height:6px;
  background: radial-gradient(circle, var(--primary) 0%, rgba(0,200,255,0) 60%);
  border-radius:50%;
  transform: translate(-50%,-50%) scale(.3);
  opacity:1;
  pointer-events:none;
  animation: particleMove .9s ease-out forwards;
}
@keyframes particleMove{
  70%{
    transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
    opacity:1;
  }
  100%{
    transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
    opacity:0; filter:blur(3px);
  }
}

/* neonowa poświata – drop‑shadow tylko przez 0.8 s */
.cube.glow .cube-face{
  filter: drop-shadow(0 0 10px rgba(0,200,255,.9));
  animation: faceGlowFade .8s ease-out forwards;
}
@keyframes faceGlowFade{
  to { filter: drop-shadow(0 0 0 rgba(0,200,255,0)); }
}

/* stan początkowy (ukryty) */
.cube-container.startup{
  transform: scale(0) rotate3d(1,1,0,45deg);
  opacity: 0;
}

/* animacja pojawienia */
@keyframes cubeReveal{
  0%   { transform: scale(0) rotate3d(1,1,0,45deg); opacity:0; }
  50%  { opacity:1; }
  100% { transform: scale(1) rotate3d(1,1,0,0deg);  opacity:1; }
}