/*
Theme Name: Cloudberry Enterprise v9
Theme URI: https://cloudberryltd.com
Author: Cloudberry International Limited
Author URI: https://cloudberryltd.com
Description: v9.0 Direct Server-Rendered HTML + 3D WebGL WordPress Theme & MySQL Backend for Cloudberry International Limited (5th Floor, Maruti Heights, Langata Link Road, Nairobi). Eliminates the blank black screen by rendering all HTML directly inside front-page.php, index.php, and template-parts/portal-body.php while keeping 100% of 3D Neon Tubes, Spotlight Cards, Scroll Animations, Cloudberry AI Chat, and phpMyAdmin SQL Lead Tables working.
Version: 9.0.0
Requires at least: 5.6
Tested up to: 6.7
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: cloudberry-enterprise
*/

:root {
  --cb-obsidian: #060913;
  --cb-navy: #0B1120;
  --cb-orange: #F97316;
  --cb-amber: #FBBF24;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #060913 !important;
  color: #F8FAFC !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@keyframes cbFadeUpWord {
  0% { opacity: 0; transform: translateY(26px) scale(0.96); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.cb-word-reveal { display: inline-block; opacity: 0; animation: cbFadeUpWord 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes cbMarqueeLeft { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
@keyframes cbMarqueeRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }
.cb-marquee-left { display: flex; width: max-content; animation: cbMarqueeLeft 34s linear infinite; }
.cb-marquee-right { display: flex; width: max-content; animation: cbMarqueeRight 38s linear infinite; }
.cb-marquee-left:hover, .cb-marquee-right:hover { animation-play-state: paused; }

.cb-partner-card { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease; }
.cb-partner-card:hover { transform: translateY(-5px); border-color: rgba(249, 115, 22, 0.55); box-shadow: 0 12px 32px -10px rgba(249, 115, 22, 0.35); }
.cb-partner-icon { filter: grayscale(100%); opacity: 0.65; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
.cb-partner-card:hover .cb-partner-icon { filter: grayscale(0%); opacity: 1; transform: scale(1.08); }

.cb-spotlight-card {
  --mouse-x: -500px;
  --mouse-y: -500px;
  position: relative;
  border-radius: 1.5rem;
  padding: 1px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}
.cb-spotlight-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -15px rgba(249, 115, 22, 0.25); }
.cb-spotlight-border {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(420px circle at var(--mouse-x) var(--mouse-y), rgba(249, 115, 22, 0.9), rgba(251, 191, 36, 0.35) 40%, transparent 75%);
}
.cb-spotlight-card:hover .cb-spotlight-border { opacity: 1; }
.cb-spotlight-glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(520px circle at var(--mouse-x) var(--mouse-y), rgba(249, 115, 22, 0.11), transparent 70%);
}
.cb-spotlight-card:hover .cb-spotlight-glow { opacity: 1; }

.cb-magnetic-btn {
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.cb-magnetic-btn-glow {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(130px circle at var(--glow-x) var(--glow-y), rgba(251, 191, 36, 0.42), transparent 70%);
}
.cb-magnetic-btn:hover .cb-magnetic-btn-glow { opacity: 1; }

/* Ensure Scroll Reveal elements are ALWAYS visible even if IntersectionObserver is delayed */
.cb-scroll-reveal { opacity: 1; transform: translateY(0); transition: opacity 0.65s ease, transform 0.65s ease; }
.cb-sparkline-path { stroke-dasharray: 220; stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s ease; }