/* ============================================================
   CHARTED — 3D LOGO SYSTEM
   Floating 3D mark with mouse-tracked tilt + glow shadow
   ============================================================ */

/* ─── BRAND WRAPPER ─── */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

/* ─── 3D LOGO MARK CONTAINER ─── */
.logo-3d-mark {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  /* perspective for children */
  perspective: 260px;
  perspective-origin: center center;
}

/* ─── INNER SPINNING FACE ─── */
.logo-3d-inner {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transform-style: preserve-3d;
  position: relative;
  /* Default floating animation */
  animation: logo3d-float 5s ease-in-out infinite;
  will-change: transform;
  /* Subtle border glow */
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.25),
    0 4px 20px rgba(37,99,235,0.25),
    0 0 40px rgba(37,99,235,0.08);
  transition: box-shadow 0.4s ease;
}

.logo-3d-mark:hover .logo-3d-inner {
  animation-play-state: paused;
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.5),
    0 8px 32px rgba(37,99,235,0.45),
    0 0 60px rgba(37,99,235,0.2);
}

/* ─── LOGO IMAGE ─── */
.logo-3d-inner img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  object-position: center;
  /* Slight brightness boost */
  filter: brightness(1.05) saturate(1.1);
  /* front face */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ─── SHINE OVERLAY ─── */
.logo-3d-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.03) 50%,
    rgba(255,255,255,0) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s;
}

.logo-3d-mark:hover .logo-3d-inner::before {
  opacity: 0.6;
}

/* ─── GROUND SHADOW ─── */
.logo-3d-mark::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) scaleX(1);
  width: 70%;
  height: 10px;
  background: radial-gradient(ellipse at center, rgba(37,99,235,0.5) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(4px);
  z-index: -1;
  animation: logo3d-shadow 5s ease-in-out infinite;
  pointer-events: none;
}

/* ─── BRAND TEXT ─── */
.brand > span:last-child,
.brand-wordmark {
  font-family: 'Outfit', 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  /* Gradient text */
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: background 0.3s;
}

.brand:hover > span:last-child,
.brand:hover .brand-wordmark {
  background: linear-gradient(135deg, #ffffff 0%, #93c5fd 80%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.brand > span:last-child small,
.brand-wordmark small {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 7px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 2px !important;
  line-height: 1 !important;
  opacity: 0.85;
}

/* ─── FLOATING ANIMATION ─── */
@keyframes logo3d-float {
  0%   { transform: translateY(0px) rotateX(0deg)  rotateY(0deg)  rotateZ(0deg); }
  20%  { transform: translateY(-3px) rotateX(8deg)  rotateY(5deg)  rotateZ(1deg); }
  40%  { transform: translateY(-5px) rotateX(4deg)  rotateY(-5deg) rotateZ(-1deg); }
  60%  { transform: translateY(-3px) rotateX(-5deg) rotateY(8deg)  rotateZ(0.5deg); }
  80%  { transform: translateY(-2px) rotateX(6deg)  rotateY(-3deg) rotateZ(-0.5deg); }
  100% { transform: translateY(0px)  rotateX(0deg)  rotateY(0deg)  rotateZ(0deg); }
}

/* ─── SHADOW ANIMATION ─── */
@keyframes logo3d-shadow {
  0%   { opacity: 0.7; transform: translateX(-50%) scaleX(1)   scaleY(1); }
  20%  { opacity: 0.3; transform: translateX(-50%) scaleX(0.75) scaleY(0.8); }
  40%  { opacity: 0.2; transform: translateX(-50%) scaleX(0.65) scaleY(0.7); }
  60%  { opacity: 0.3; transform: translateX(-50%) scaleX(0.7)  scaleY(0.75); }
  80%  { opacity: 0.4; transform: translateX(-50%) scaleX(0.8)  scaleY(0.85); }
  100% { opacity: 0.7; transform: translateX(-50%) scaleX(1)    scaleY(1); }
}

/* ─── PREFERS REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .logo-3d-inner {
    animation: none !important;
  }
  .logo-3d-mark::after {
    animation: none !important;
  }
}

/* ─── HIDE OLD MARK SPAN (replaced by 3d) ─── */
.brand-original-mark {
  display: none !important;
}

/* ─── FOOTER LOGO (smaller) ─── */
.site-footer .brand .logo-3d-mark {
  width: 32px;
  height: 32px;
}

.site-footer .brand > span:last-child,
.site-footer .brand .brand-wordmark {
  font-size: 14px !important;
}