/* ============================================================
   LaRa — Premium 3D layer
   Loaded on top of style.css. Adds depth, tilt, shine & motion.
   ============================================================ */

/* ---------- 1. Hero 3D stage (rotating cube + floating cards) ---------- */
.hero-stage {
  position: relative;
  height: clamp(340px, 38vw, 480px);
  perspective: 1200px;
}
.stage-glow {
  position: absolute; inset: 6% 2%;
  background: radial-gradient(circle at 50% 45%, rgba(200, 154, 61, 0.4), rgba(200, 154, 61, 0.05) 65%);
  border-radius: 50%;
  filter: blur(6px);
}

.cube-wrap {
  position: absolute;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: var(--cube, 220px);
  height: var(--cube, 220px);
  perspective: 1000px;
}
.cube {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: cube-spin 26s linear infinite;
}
.cube-wrap:hover .cube { animation-play-state: paused; }
@keyframes cube-spin {
  from { transform: rotateX(-12deg) rotateY(0deg); }
  to   { transform: rotateX(-12deg) rotateY(360deg); }
}
.cube-face {
  position: absolute; inset: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid rgba(200, 154, 61, 0.85);
  box-shadow: inset 0 0 30px rgba(74, 49, 38, 0.25);
  backface-visibility: hidden;
}
.cube-face img { width: 100%; height: 100%; object-fit: cover; }
.cube-face::after {
  /* glass sheen on every face */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 65%, rgba(255,255,255,0.18) 100%);
}
.cf-front  { transform: translateZ(calc(var(--cube, 220px) / 2)); }
.cf-back   { transform: rotateY(180deg) translateZ(calc(var(--cube, 220px) / 2)); }
.cf-right  { transform: rotateY(90deg) translateZ(calc(var(--cube, 220px) / 2)); }
.cf-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube, 220px) / 2)); }
.cf-top    { transform: rotateX(90deg) translateZ(calc(var(--cube, 220px) / 2)); }
.cf-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube, 220px) / 2)); }

.cube-shadow {
  position: absolute;
  left: 50%; bottom: -18%;
  width: 80%; height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4), transparent 70%);
  filter: blur(6px);
  animation: shadow-breathe 5s ease-in-out infinite;
}
@keyframes shadow-breathe { 50% { transform: translateX(-50%) scaleX(0.86); opacity: 0.75; } }

/* floating mini product cards orbiting the cube */
.orbit-card {
  position: absolute;
  width: clamp(84px, 10vw, 120px);
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid var(--cream);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  animation: floaty 6s ease-in-out infinite;
}
.orbit-card img { width: 100%; height: 100%; object-fit: cover; }
.o1 { top: 4%; left: 4%; animation-delay: 0s; }
.o2 { top: 12%; right: 2%; animation-delay: -2s; }
.o3 { bottom: 6%; left: 10%; animation-delay: -4s; }
.o4 { bottom: 0; right: 8%; animation-delay: -1s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, -4deg)); }
  50%      { transform: translateY(-14px) rotate(calc(var(--r, -4deg) + 3deg)); }
}

/* gold sparkles drifting in the hero */
.sparkle {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 0.95; transform: scale(1.15) rotate(90deg); }
}

/* ---------- 2. Product-card 3D tilt & glare ---------- */
.grid { perspective: 1400px; }
.card {
  will-change: transform;
  transition: box-shadow 0.3s ease;
  /* JS drives rotation through these variables */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
}
.card:hover {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px);
  box-shadow: 0 26px 60px rgba(74, 49, 38, 0.25);
}
.card .card-media::after {
  /* moving glare that follows the cursor */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.35), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.card:hover .card-media::after { opacity: 1; }

/* Soft mode (body[data-soft-fx]): no pointer tilt or glare — cards keep
   only a clean lift + deepened shadow on hover. */
body[data-soft-fx] .card .card-media::after { display: none; }
body[data-soft-fx] .card,
body[data-soft-fx] .card:hover { --rx: 0deg; --ry: 0deg; }
body[data-soft-fx] .card:hover { transform: translateY(-7px); }

/* ---------- 3. Gold shimmer on premium elements ---------- */
.btn-primary { position: relative; }
/* .badge keeps its position:absolute from style.css — only add the
   clipping/stacking needed for the sheen sweep. */
.btn-primary, .badge {
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after, .badge::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%;
  left: -30%;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg) translateX(-140%);
  animation: sheen 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 55% { transform: skewX(-20deg) translateX(-160%); }
  75%, 100% { transform: skewX(-20deg) translateX(460%); }
}
.section-head h2 {
  background: linear-gradient(100deg, var(--terracotta) 20%, var(--gold-deep) 50%, var(--terracotta) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-flow 7s linear infinite;
}
.section-head.light h2 {
  background: linear-gradient(100deg, var(--cream) 25%, var(--gold) 50%, var(--cream) 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gold-flow { to { background-position: 200% center; } }

/* ---------- 4. Scroll-reveal depth animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px) rotateX(7deg) scale(0.985);
  transform-origin: center 80%;
}
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
/* cards keep their tilt vars once revealed */
.card.reveal.in {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* ---------- 5. Elevated header & drawer glass ---------- */
.header { transition: box-shadow 0.3s ease, background 0.3s ease; }
.header.scrolled {
  box-shadow: 0 10px 30px rgba(74, 49, 38, 0.12);
  background: rgba(255, 249, 244, 0.82);
}
.drawer { backdrop-filter: blur(4px); }

/* video cards get depth too */
.video-card { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.video-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}

/* about logo slow 3D sway */
.about-logo { animation: logo-sway 7s ease-in-out infinite; }
@keyframes logo-sway {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-8px); }
}

/* ---------- 6. Accessibility: honour reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cube, .orbit-card, .sparkle, .cube-shadow, .about-logo,
  .btn-primary::after, .badge::after, .section-head h2 { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .card { transform: none !important; }
}

@media (max-width: 860px) {
  .hero-stage { height: 320px; --cube: 170px; }
}