/* ════════════════════════════════════════
   BRAND LOGO SCENE — replaces Three.js canvas
   Premium floating logo with 3D parallax,
   orbiting rings, glow, and particles.
════════════════════════════════════════ */

/* Per-brand accent colors — matched to actual logo colors */
.brand-card--rabea    { --brand-color: #CC2229; --brand-glow: rgba(204,34,41,0.22); }
.brand-card--abujabal { --brand-color: #2A6B3A; --brand-glow: rgba(42,107,58,0.25); }
.brand-card--alnahla  { --brand-color: #F5C800; --brand-glow: rgba(245,200,0,0.22); }

/* Scene container */
.brand-card__logo-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
  overflow: hidden;
  /* subtle radial gradient background tint */
  background: radial-gradient(ellipse 70% 60% at 50% 52%,
    var(--brand-glow) 0%,
    transparent 70%
  );
}

/* ── Glow pulse ── */
.logo-scene__glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
  animation: glow-pulse 3.6s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes glow-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%       { transform: scale(1.18); opacity: 1;   }
}

/* ── Orbiting rings ── */
.logo-scene__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--brand-color);
  pointer-events: none;
  will-change: transform;
}

.logo-scene__ring--1 {
  width: 200px; height: 200px;
  opacity: 0.18;
  animation: ring-spin-1 12s linear infinite;
  transform-style: preserve-3d;
  /* tilt in 3D so it reads as orbital plane */
  transform: rotateX(70deg);
}

.logo-scene__ring--2 {
  width: 280px; height: 280px;
  opacity: 0.10;
  animation: ring-spin-2 20s linear infinite reverse;
  transform: rotateX(70deg) rotateZ(30deg);
}

.logo-scene__ring--3 {
  width: 340px; height: 340px;
  opacity: 0.06;
  border-style: dashed;
  animation: ring-spin-3 28s linear infinite;
  transform: rotateX(65deg) rotateZ(-20deg);
}

@keyframes ring-spin-1 {
  from { transform: rotateX(70deg) rotateZ(0deg);   }
  to   { transform: rotateX(70deg) rotateZ(360deg); }
}
@keyframes ring-spin-2 {
  from { transform: rotateX(70deg) rotateZ(30deg);   }
  to   { transform: rotateX(70deg) rotateZ(-330deg); }
}
@keyframes ring-spin-3 {
  from { transform: rotateX(65deg) rotateZ(-20deg);  }
  to   { transform: rotateX(65deg) rotateZ(340deg);  }
}

/* ── Logo wrap — this is what floats and tilts ── */
.logo-scene__logo-wrap {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  transform-style: preserve-3d;
  will-change: transform;
  /* JS controls the tilt; CSS handles the float */
  animation: logo-float 4.5s ease-in-out infinite;
}

@keyframes logo-float {
  0%, 100% { transform: translateY(0px) translateZ(0px); }
  50%       { transform: translateY(-18px) translateZ(12px); }
}

.logo-scene__img {
  width: clamp(160px, 20vw, 260px);
  height: auto;
  object-fit: contain;
  /* Neutral shadow — preserve true logo colors, add soft halo */
  filter: drop-shadow(0 0 20px var(--brand-glow))
          drop-shadow(0 10px 36px rgba(0,0,0,0.65));
  user-select: none;
  pointer-events: none;
  transition: filter 0.5s ease, transform 0.5s ease;
}

.brand-card:hover .logo-scene__img {
  filter: drop-shadow(0 0 36px var(--brand-color))
          drop-shadow(0 14px 50px rgba(0,0,0,0.75));
  transform: scale(1.04);
}

/* ── Blob shadow beneath logo ── */
.logo-scene__shadow {
  width: 120px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  filter: blur(10px);
  transform: scaleX(1);
  animation: shadow-sync 4.5s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes shadow-sync {
  0%, 100% { transform: scaleX(1);    opacity: 0.5; }
  50%       { transform: scaleX(0.7); opacity: 0.25; }
}

/* ── CSS Particles ── */
.logo-scene__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Generated by JS — each particle is a small div */
.logo-scene__particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brand-color);
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Mouse-parallax tilt — JS overrides transform so we
   pause the CSS animation on hover to let JS take over ── */
.brand-card:hover .logo-scene__logo-wrap {
  animation-play-state: paused;
}
.brand-card:hover .logo-scene__shadow {
  animation-play-state: paused;
}
.brand-card:hover .logo-scene__glow {
  animation-play-state: paused;
}