/* =====================================================================
   Patshi — Hero Cube
   ---------------------------------------------------------------------
   A free-floating, continuously rotating 3D cube in the hero (right side).
   Six glassy faces, one per product category, each with a soft gradient,
   a clean centred icon, and a label. Soft ambient glow, a floating shadow
   below, and 2–3 low-opacity orbiting spheres for life.

   Everything is transform/opacity only (GPU-friendly). A tiny script adds
   micro-parallax on mouse move and a small speed-up on hover; both are
   disabled under prefers-reduced-motion / body.no-motion, where the cube
   holds a clean static pose.

   Brand tokens (--ease, --maxw, gradient stops) come from styles.css.
   ===================================================================== */

:root {
  /* Per-face gradient pairs — brand-anchored (option 2). Every face lives
     inside the Patshi blue → cyan → violet family so the cube reads as one
     cohesive, premium object, yet the six hues stay distinct enough to tell
     categories apart. Warm/loud colours are gone; teal + violet are the
     accents that give the set variety without clashing with the navy hero. */
  --face-electronics-a:  #3d7bff;  --face-electronics-b:  #1e3a8a;  /* deep brand blue */
  --face-apparel-a:      #8f7bff;  --face-apparel-b:      #5b3fd0;  /* indigo / violet */
  --face-accessories-a:  #58c8ff;  --face-accessories-b:  #2f7fd8;  /* sky blue        */
  --face-nutrition-a:    #45e0c4;  --face-nutrition-b:    #17a8a0;  /* aqua            */
  --face-personalcare-a: #6a7bff;  --face-personalcare-b: #3a4fc8;  /* periwinkle      */
  --face-footwear-a:     #34d9d0;  --face-footwear-b:     #1592a8;  /* cyan / teal     */

  /* Cube geometry — --cube-size drives face translateZ (size / 2). */
  --cube-size: 280px;
  --cube-half: 140px;
}

/* ---------------------------------------------------------------------
   WRAPPER + STAGE
   A transparent scene with 3D perspective. No box, no card — the cube
   floats over the hero background.
   --------------------------------------------------------------------- */
.cube-wrap { position: relative; }

.cube-stage {
  position: relative;
  width: 100%;
  min-height: 560px;
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  overflow: visible;
}

/* Parallax layer — script writes --tilt-x / --tilt-y (degrees) here so the
   whole scene leans very slightly toward the cursor. */
.cube-scene {
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--cube-scale, 1));
  /* only the hover scale transitions; the tilt is driven per-frame by JS so
     it tracks the pointer live without a laggy transition fighting it */
  transition: transform .18s linear;
  will-change: transform;
}

/* Hover: a gentle, smooth scale lift — no timeline change, so no jump. */
.cube-stage:hover .cube-scene { --cube-scale: 1.05; }

/* ---------------------------------------------------------------------
   AMBIENT GLOW — a soft radial light behind the cube. Not neon; it reads
   as the cube gently emitting light. Slow breathing keeps it alive.
   --------------------------------------------------------------------- */
.cube-glow {
  position: absolute;
  left: 50%; top: 46%;
  width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 40%, rgba(77,140,255,.34), transparent 60%),
    radial-gradient(circle at 62% 58%, rgba(160,107,255,.28), transparent 62%),
    radial-gradient(circle at 50% 62%, rgba(34,211,238,.20), transparent 66%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
  animation: cubeGlow 9s var(--ease) infinite;
  transition: opacity .5s var(--ease);
}
@keyframes cubeGlow {
  0%, 100% { opacity: .8;  transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
/* Hover: lift the ambient glow a touch for a subtle "wake up" feel. */
.cube-stage:hover .cube-glow { opacity: 1; filter: blur(30px); }

/* ---------------------------------------------------------------------
   FLOATING SHADOW — a soft blurred ellipse below the cube, gently
   pulsing in sympathy with the float.
   --------------------------------------------------------------------- */
.cube-shadow {
  position: absolute;
  left: 50%; bottom: 6%;
  width: 62%; height: 46px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(6,10,24,.5), transparent 70%);
  filter: blur(16px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: cubeShadow 6s ease-in-out infinite;
}
@keyframes cubeShadow {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: .38; transform: translateX(-50%) scale(.9); }
}

/* ---------------------------------------------------------------------
   THE CUBE — rotates continuously in 3D. A gentle vertical float rides on
   top via the wrapping .cube-float element so the two motions compose
   cleanly (float on the outside, spin on the inside).
   --------------------------------------------------------------------- */
.cube-float {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  z-index: 1;
  animation: cubeFloat 7s ease-in-out infinite;
}
@keyframes cubeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

.cube {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: cubeSpin var(--spin-dur, 20s) linear infinite;
  will-change: transform;
}
/* Tumble on BOTH axes so every one of the 6 faces (including top + bottom)
   rotates into view across a single loop — not just the four side faces.
   Y does a full 360° while X sweeps through steps that lift the top and
   bottom faces forward at different points. */
@keyframes cubeSpin {
  0%   { transform: rotateX(-18deg) rotateY(0deg); }
  20%  { transform: rotateX(-70deg) rotateY(72deg); }   /* tips toward top face */
  40%  { transform: rotateX(-18deg) rotateY(144deg); }
  60%  { transform: rotateX(60deg)  rotateY(216deg); }  /* tips toward bottom face */
  80%  { transform: rotateX(-18deg) rotateY(288deg); }
  100% { transform: rotateX(-18deg) rotateY(360deg); }
}

/* Hover response lives on .cube-scene (scale) and .cube-glow (brightness) —
   both are smooth, continuous changes that never touch the spin timeline.
   Speed is intentionally left constant: changing animation-duration mid-spin
   makes the browser jump to a new keyframe position, which looked glitchy. */

/* ---------------------------------------------------------------------
   FACES — glassy, softly rounded, soft inner glow, centred icon + label.
   Corners rounded so the cube edges read soft, not razor-sharp.
   --------------------------------------------------------------------- */
.cube-face {
  position: absolute;
  left: 0; top: 0;
  width: var(--cube-size);
  height: var(--cube-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 26px;
  color: #fff;
  /* glowing edge: a bright translucent border rim around each face */
  border: 1.5px solid rgba(255,255,255,.45);
  background: linear-gradient(150deg, var(--f-a), var(--f-b));
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 0 46px rgba(255,255,255,.2),
    inset 0 -22px 46px rgba(0,0,0,.22),
    /* soft outward edge glow tinted to the face colour */
    0 0 26px -2px var(--f-a),
    0 0 10px -1px rgba(255,255,255,.5);
  /* glassy sheen + a whisper of translucency so light seems to pass through */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: .96;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* soft top-left specular highlight overlay */
.cube-face::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 44%);
  pointer-events: none;
}

/* bright rim line just inside the edge — reads as a lit glass border */
.cube-face::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.28);
  pointer-events: none;
}

/* icon puck + label */
.cube-ico {
  position: relative;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.2), inset 0 -3px 6px rgba(0,0,0,.06);
}
.cube-ico::before {
  content: "";
  width: 44px; height: 44px;
  background: var(--f-b);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
          mask: var(--icon-url) center / contain no-repeat;
}
.cube-label {
  position: relative;
  font-size: 20px; font-weight: 800; letter-spacing: .01em;
  text-shadow: 0 2px 6px rgba(0,0,0,.28);
}

/* Face placement — a cube of edge --cube-size, faces pushed out by half. */
.cube-face.face-front  { transform: rotateY(  0deg) translateZ(var(--cube-half)); }
.cube-face.face-right  { transform: rotateY( 90deg) translateZ(var(--cube-half)); }
.cube-face.face-back   { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.cube-face.face-left   { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.cube-face.face-top    { transform: rotateX( 90deg) translateZ(var(--cube-half)); }
.cube-face.face-bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

/* Face colours */
.cube-face[data-cat="electronics"]  { --f-a: var(--face-electronics-a);  --f-b: var(--face-electronics-b); }
.cube-face[data-cat="apparel"]      { --f-a: var(--face-apparel-a);      --f-b: var(--face-apparel-b); }
.cube-face[data-cat="accessories"]  { --f-a: var(--face-accessories-a);  --f-b: var(--face-accessories-b); }
.cube-face[data-cat="nutrition"]    { --f-a: var(--face-nutrition-a);    --f-b: var(--face-nutrition-b); }
.cube-face[data-cat="personalcare"] { --f-a: var(--face-personalcare-a); --f-b: var(--face-personalcare-b); }
.cube-face[data-cat="footwear"]     { --f-a: var(--face-footwear-a);     --f-b: var(--face-footwear-b); }

/* inline SVG glyphs as data-URI masks (single colour, scale cleanly) */
.cube-face[data-icon="laptop"]   { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 5h16a1 1 0 0 1 1 1v10h-18V6a1 1 0 0 1 1-1zm-3 12h22v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1z"/></svg>'); }
.cube-face[data-icon="shirt"]    { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M8 3l4 2 4-2 5 4-3 3-1-1v11H7V9L6 10 3 7l5-4z"/></svg>'); }
.cube-face[data-icon="jar"]      { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 8h10a2 2 0 0 1 2 2v7a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-7a2 2 0 0 1 2-2zm1-4h8v2H8z"/></svg>'); }
.cube-face[data-icon="dumbbell"] { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M2 9h2v6H2zm3-2h2v10H5zm12 0h2v10h-2zm3 2h2v6h-2zM8 11h8v2H8z"/></svg>'); }
.cube-face[data-icon="home"]     { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 3l9 8h-2v9h-5v-6H10v6H5v-9H3z"/></svg>'); }
.cube-face[data-icon="leaf"]     { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M17 8C8 10 5.9 16.2 5 21c3.8-.7 9.5-2.3 12-8 1.5-3.4 2-8 2-11-2 1-4.5 1.5-7 2C9.5 4.5 8 6 8 8c0 1.2.5 2 1.5 2.5C11 8.5 14 8 17 8z"/></svg>'); }
.cube-face[data-icon="watch"]    { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 2h6l-1 4.2A6 6 0 0 1 14 17.8L15 22H9l1-4.2A6 6 0 0 1 10 6.2zm3 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm-.8 2h1.5v3l2 1.2-.8 1.3L11.2 13z"/></svg>'); }
.cube-face[data-icon="pump"]     { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M11 2h3v2l2 1v2l-3 1-2 2h5a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2V6l-2-1V3h3z"/></svg>'); }
.cube-face[data-icon="shoe"]     { --icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M2 16c0-1 .5-2 1-3l4-2 3 2 5 1c2 .3 5 1 6 2.5.6.5 1 1.2 1 2v1H2v-3.5zM7 9l2 2"/></svg>'); }

/* ---------------------------------------------------------------------
   ORBITING SPHERES — small glowing spheres tracing slow circular paths
   around the cube. Low opacity, purely decorative.
   --------------------------------------------------------------------- */
.cube-orbits {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 2;
}
.orbit {
  position: absolute;
  width: var(--orbit-size); height: var(--orbit-size);
  transform-style: preserve-3d;
}
.orbit-1 { --orbit-size: 420px; animation: orbitSpin 16s linear infinite; }
.orbit-2 { --orbit-size: 500px; animation: orbitSpin 22s linear infinite reverse; }
.orbit-3 { --orbit-size: 360px; animation: orbitSpin 13s linear infinite; }
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.orbit .sphere {
  position: absolute;
  top: 50%; left: 0;
  width: var(--sph, 16px); height: var(--sph, 16px);
  margin-top: calc(var(--sph, 16px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--sph-col, #6cc4ff) 62%, transparent 100%);
  box-shadow: 0 0 16px 2px var(--sph-glow, rgba(108,196,255,.6));
  opacity: .55;
}
.orbit-1 .sphere { --sph: 18px; --sph-col: #6cc4ff; --sph-glow: rgba(108,196,255,.6); }
.orbit-2 .sphere { --sph: 14px; --sph-col: #b98cff; --sph-glow: rgba(185,140,255,.6); }
.orbit-3 .sphere { --sph: 12px; --sph-col: #2fd6c0; --sph-glow: rgba(47,214,192,.6); }

/* ---------------------------------------------------------------------
   MASCOT — the Patshi "P" mark beside the "One score." headline.
   Decorative only; gentle bob + tilt. (Preserved from prior hero.)
   --------------------------------------------------------------------- */
.hero-mascot {
  display: inline-block; vertical-align: -0.22em;
  width: 88px; height: 88px; margin-left: 14px;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 8px 20px rgba(20,80,220,.28));
  transform-origin: 50% 80%;
  animation: mascotFloat 6s ease-in-out infinite;
}
@keyframes mascotFloat {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-8px) rotate(3deg); }
}

/* ---------------------------------------------------------------------
   WAITLIST SECTION (below the hero) — unchanged layout home.
   --------------------------------------------------------------------- */
.waitlist-section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(8px, 3vh, 32px) clamp(16px, 4vw, 40px) clamp(24px, 5vh, 56px);
}
.waitlist-section .card-wrap { max-width: 560px; margin-inline: auto; }

/* ---------------------------------------------------------------------
   RESPONSIVE — desktop priority. Stack under the headline on tablet/phone
   and shrink the cube; the animation itself stays light everywhere.
   --------------------------------------------------------------------- */
@media (max-width: 880px) {
  .cube-wrap { order: 2; width: 100%; }
  .cube-stage { min-height: 460px; }
  :root { --cube-size: 240px; --cube-half: 120px; }
}
@media (max-width: 600px) {
  .cube-stage { min-height: 380px; }
  :root { --cube-size: 190px; --cube-half: 95px; }
  .cube-ico { width: 60px; height: 60px; }
  .cube-ico::before { width: 34px; height: 34px; }
  .cube-label { font-size: 16px; }
  .orbit-1 { --orbit-size: 300px; }
  .orbit-2 { --orbit-size: 350px; }
  .orbit-3 { --orbit-size: 260px; }
  /* mobile fallback: slower spin, lighter effects */
  .cube { --spin-dur: 22s; }
  .hero-mascot { width: 60px; height: 60px; margin-left: 10px; vertical-align: -0.18em; }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION — stop all motion; hold a clean static, readable pose.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; transform: rotateX(-22deg) rotateY(-32deg); }
  .cube-float { animation: none; }
  .cube-glow, .cube-shadow { animation: none; }
  .orbit-1, .orbit-2, .orbit-3 { animation: none; }
  .cube-scene { transition: none; transform: none; }
  .hero-mascot { animation: none; }
}
body.no-motion .cube { animation: none; transform: rotateX(-22deg) rotateY(-32deg); }
body.no-motion .cube-float { animation: none; }
body.no-motion .cube-glow,
body.no-motion .cube-shadow { animation: none; }
body.no-motion .orbit-1,
body.no-motion .orbit-2,
body.no-motion .orbit-3 { animation: none; }
body.no-motion .cube-scene { transition: none; transform: none; }
body.no-motion .hero-mascot { animation: none; }