/* 3D hero scene (pure CSS 3D — no WebGL, no libraries) */
.scene {
  width: 100%;
  height: clamp(280px, 52vh, 520px);
  perspective: 1100px;
  perspective-origin: 50% 45%;
  display: grid; place-items: center;
  touch-action: pan-y;
}
@media (min-width: 900px) { .scene { height: clamp(380px, 70vh, 640px); } }
@media (max-height: 520px) and (orientation: landscape) { .scene { height: 60vh; } }

.world {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
  will-change: transform;
}

/* Logo cube (a box: front/back carry the logo) */
.cube {
  position: absolute; top: 50%; left: 50%;
  width: var(--cube); height: calc(var(--cube) * .62);
  margin: calc(var(--cube) * -.31) 0 0 calc(var(--cube) * -.5);
  transform-style: preserve-3d;
  animation: spin 16s linear infinite;
}
@keyframes spin {
  from { transform: rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateX(-14deg) rotateY(360deg); }
}
.face {
  position: absolute; inset: 0; display: grid; place-items: center;
  backface-visibility: hidden;
  background: linear-gradient(145deg, #0a5ff0, #0140b0);
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: calc(var(--cube) * .06);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, .12);
}
.face img { width: 86%; height: auto; user-select: none; -webkit-user-drag: none; }
.f-front  { transform: translateZ(calc(var(--cube) * .31)); }
.f-back   { transform: rotateY(180deg) translateZ(calc(var(--cube) * .31)); }
.f-right  { width: calc(var(--cube) * .62); left: calc(var(--cube) * .19); transform: rotateY(90deg)  translateZ(calc(var(--cube) * .5)); }
.f-left   { width: calc(var(--cube) * .62); left: calc(var(--cube) * .19); transform: rotateY(-90deg) translateZ(calc(var(--cube) * .5)); }
.f-top    { width: var(--cube); height: calc(var(--cube) * .62); top: calc(var(--cube) * -.31); background: var(--blue-soft); transform: rotateX(90deg)  translateZ(calc(var(--cube) * .31)); }
.f-bottom { width: var(--cube); height: calc(var(--cube) * .62); top: calc(var(--cube) *  .31); background: var(--blue-night); transform: rotateX(-90deg) translateZ(calc(var(--cube) * .31)); }

/* Floating products */
.item {
  position: absolute; height: auto;
  filter: drop-shadow(0 14px 18px rgba(0, 20, 80, .35));
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}
.i-cup   { width: 120px; top: 6%;  inset-inline-start: 8%;  --z: 90px;  --rot: -12deg; }
.i-cup2  { width: 96px;  bottom: 8%; inset-inline-start: 18%; --z: 140px; --rot: 10deg;  animation-delay: -1.5s; }
.i-box   { width: 140px; top: 10%; inset-inline-end: 10%;  --z: 60px;  --rot: 8deg;   animation-delay: -3s; }
.i-plate { width: 130px; bottom: 6%; inset-inline-end: 14%; --z: 20px;  --rot: 0deg;   animation-delay: -2s; }
.i-fork  { width: 52px;  top: 2%; inset-inline-end: 42%;   --z: 110px; --rot: 18deg;  animation-delay: -4s; }
.i-lid   { width: 110px; top: 40%; inset-inline-start: 2%; --z: 160px; --rot: -8deg;  animation-delay: -5s; }
@keyframes float {
  0%, 100% { transform: translateZ(var(--z)) rotate(var(--rot)) translateY(0); }
  50%      { transform: translateZ(var(--z)) rotate(calc(var(--rot) * -.6)) translateY(-16px); }
}

@media (max-width: 520px) {
  .i-fork { display: none; }
  .i-cup { width: 84px; } .i-cup2 { width: 70px; } .i-box { width: 100px; } .i-plate { width: 90px; } .i-lid { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .cube { transform: rotateX(-14deg) rotateY(-20deg); }
}