/* ==========================================================================
   CBproject — Next-Gen Premium Layer (Awwwards SOTD grade)
   Loaded AFTER brand.css. Adds: liquid glass, cursor light, variable-font
   scroll dynamics, spring physics, context-aware HUD, sound system, magnetic
   buttons, seamless transitions.
   ========================================================================== */

/* ---- Variable Fonts ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
}

/* ---- Global: hide default cursor, lock smooth scroll ---- */
html.cb-nextgen {
  cursor: none !important;
  scroll-behavior: smooth;
}
html.cb-nextgen a,
html.cb-nextgen button,
html.cb-nextgen input,
html.cb-nextgen textarea,
html.cb-nextgen select,
html.cb-nextgen [role="button"],
html.cb-nextgen .cb-magnetic {
  cursor: none !important;
}

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cb-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--cb-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100000;
  mix-blend-mode: difference;
  transition: width .15s cubic-bezier(.25,.46,.45,.94),
              height .15s cubic-bezier(.25,.46,.45,.94),
              background .15s ease;
  will-change: transform;
}
.cb-cursor-dot.cb-cursor--hover {
  width: 48px; height: 48px;
  background: rgba(var(--cb-accent-rgb), .18);
  mix-blend-mode: normal;
}
.cb-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(var(--cb-accent-rgb), .45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: width .25s cubic-bezier(.25,.46,.45,.94),
              height .25s cubic-bezier(.25,.46,.45,.94),
              border-color .25s ease,
              opacity .25s ease;
  will-change: transform;
  opacity: .7;
}
.cb-cursor-ring.cb-cursor--hover {
  width: 64px; height: 64px;
  border-color: rgba(var(--cb-accent-rgb), .2);
  opacity: .4;
}

/* Touch devices: revert to default cursor */
@media (hover: none) and (pointer: coarse) {
  html.cb-nextgen { cursor: auto !important; }
  html.cb-nextgen a,
  html.cb-nextgen button,
  html.cb-nextgen input,
  html.cb-nextgen textarea { cursor: auto !important; }
  .cb-cursor-dot, .cb-cursor-ring { display: none !important; }
}

/* ==========================================================================
   CURSOR LIGHT — "Flashlight" mask on glass panels
   ========================================================================== */
.cb-glass-panel {
  position: relative;
  overflow: hidden;
}
.cb-glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--cb-light-x, 50%) var(--cb-light-y, 50%),
    rgba(var(--cb-accent-rgb), .06) 0%,
    transparent 60%
  );
  transition: opacity .3s ease;
  opacity: 0;
}
.cb-glass-panel.cb-light-active::before {
  opacity: 1;
}

/* ==========================================================================
   LIQUID GLASS — Frosted acrylic panels with organic animated gradients
   ========================================================================== */
.cb-glass {
  background: rgba(15, 15, 17, .55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  position: relative;
  overflow: hidden;
}
.cb-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, .03) 0%,
    transparent 50%,
    rgba(255, 255, 255, .01) 100%
  );
}

/* ==========================================================================
   ORGANIC GRADIENT BACKGROUND — Animated blobs via CSS
   ========================================================================== */
.cb-gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #0f0f11;
}
.cb-gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .15;
  will-change: transform;
}
.cb-gradient-blob:nth-child(1) {
  width: 600px; height: 600px;
  background: var(--cb-accent);
  top: -200px; left: -100px;
  animation: cb-blob-drift-1 20s ease-in-out infinite alternate;
}
.cb-gradient-blob:nth-child(2) {
  width: 500px; height: 500px;
  background: var(--cb-accent-2);
  bottom: -150px; right: -100px;
  animation: cb-blob-drift-2 25s ease-in-out infinite alternate;
}
.cb-gradient-blob:nth-child(3) {
  width: 400px; height: 400px;
  background: var(--cb-accent-dp);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: cb-blob-drift-3 22s ease-in-out infinite alternate;
}
@keyframes cb-blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(120px, 80px) scale(1.15); }
  100% { transform: translate(-60px, 160px) scale(.9); }
}
@keyframes cb-blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-100px, -60px) scale(1.1); }
  100% { transform: translate(80px, -120px) scale(.95); }
}
@keyframes cb-blob-drift-3 {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-40%, -60%) scale(1.2); }
  100% { transform: translate(-60%, -40%) scale(.85); }
}

/* Context-aware neon override (set by JS via data attribute) */
.cb-gradient-bg[data-time="day"] .cb-gradient-blob:nth-child(1) { background: #38BDF8; }
.cb-gradient-bg[data-time="day"] .cb-gradient-blob:nth-child(2) { background: #22D3EE; }
.cb-gradient-bg[data-time="day"] .cb-gradient-blob:nth-child(3) { background: #0EA5E9; }

.cb-gradient-bg[data-time="night"] .cb-gradient-blob:nth-child(1) { background: #A855F7; }
.cb-gradient-bg[data-time="night"] .cb-gradient-blob:nth-child(2) { background: #EC4899; }
.cb-gradient-bg[data-time="night"] .cb-gradient-blob:nth-child(3) { background: #6366F1; }

/* ==========================================================================
   ONYX BLACK BASE — Override body background
   ========================================================================== */
html.cb-nextgen body {
  background-color: #0f0f11 !important;
  color: var(--cb-text);
  overflow-x: hidden;
}
/* ---- Force all sections to transparent/dark — let gradient bg show through ---- */
html.cb-nextgen section {
  background-color: transparent !important;
  background-image: none !important;
}
html.cb-nextgen .cid-v9VoHT8oCM {
  background-image: none !important;
  background-color: transparent !important;
}
html.cb-nextgen .cid-v9VvzhybAR {
  background-color: transparent !important;
}

/* ==========================================================================
   MAGNETIC BUTTONS — 3D tilt on hover
   ========================================================================== */
.cb-magnetic {
  position: relative;
  transition: transform .2s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.cb-magnetic .cb-magnetic-inner {
  display: inline-block;
  transition: transform .2s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* ==========================================================================
   SPRING PHYSICS — Override button hover for elastic easing
   GSAP will handle actual spring, but CSS fallback for no-JS:
   ========================================================================== */
html.cb-nextgen .btn {
  transition:
    transform .5s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .3s ease,
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease;
}
html.cb-nextgen .btn:active {
  transform: scale(.96) !important;
}

/* ==========================================================================
   SEAMLESS PAGE TRANSITIONS
   ========================================================================== */
.cb-page-transition {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: #0f0f11;
  pointer-events: none;
  opacity: 0;
}
.cb-page-transition.cb-transitioning-out {
  animation: cb-fade-out .45s cubic-bezier(.4, 0, .2, 1) forwards;
}
.cb-page-transition.cb-transitioning-in {
  animation: cb-fade-in .45s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes cb-fade-out {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes cb-fade-in {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   HUD ENTRANCE SEQUENCE — Staggered reveal on load
   ========================================================================== */
html.cb-nextgen body {
  opacity: 0;
}
html.cb-nextgen body.cb-hud-ready {
  animation: cb-hud-boot .6s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes cb-hud-boot {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.cb-hud-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.4, 0, .2, 1),
              transform .5s cubic-bezier(.4, 0, .2, 1);
}
.cb-hud-element.cb-hud-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   SOUND TOGGLE — Mute button in corner
   ========================================================================== */
.cb-sound-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(15, 15, 17, .7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
              background .2s ease,
              border-color .2s ease;
}
.cb-sound-toggle:hover {
  transform: scale(1.1);
  border-color: rgba(var(--cb-accent-rgb), .4);
}
.cb-sound-toggle:active {
  transform: scale(.95);
}
.cb-sound-toggle svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--cb-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.cb-sound-toggle:hover svg {
  stroke: var(--cb-accent);
}
.cb-sound-toggle.cb-muted .cb-sound-on { display: none; }
.cb-sound-toggle:not(.cb-muted) .cb-sound-off { display: none; }

/* ==========================================================================
   SECTION ENHANCEMENTS — Existing sections get glass + stagger
   ========================================================================== */

/* Glass-up the existing panels */
html.cb-nextgen .cb-hero-glass,
html.cb-nextgen .cb-thu-card,
html.cb-nextgen .cid-v9VoLplP5u .card-wrapper,
html.cb-nextgen .cid-v9VvzhybAR .card-box,
html.cb-nextgen .cid-v9VIMYUQIr .card-wrapper,
html.cb-nextgen .cid-v9VoHT8oCM .card-wrapper,
html.cb-nextgen .list07 .card {
  background: rgba(15, 15, 17, .45) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* Glass up the form sections */
html.cb-nextgen .cid-v9Vj3GRZ3e {
  background: rgba(15, 15, 17, .35) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
}

/* Glass up navbar */
html.cb-nextgen .menu .navbar {
  background: rgba(15, 15, 17, .72) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  border-bottom-color: rgba(255, 255, 255, .06) !important;
}

/* Glass up footer */
html.cb-nextgen .footer3 {
  border-top-color: rgba(255, 255, 255, .06) !important;
}

/* Glass up countdown section */
html.cb-nextgen .cid-v9Vh3bdebg {
  background: rgba(15, 15, 17, .3) !important;
}

/* Glass up project cards */
html.cb-nextgen .features38 .text-wrapper {
  background: rgba(15, 15, 17, .35);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  padding: 2rem;
}

/* ==========================================================================
   EDGE GLOW — Buttons and interactive elements get reactive edge highlights
   ========================================================================== */
html.cb-nextgen .btn.cb-magnetic {
  position: relative;
  overflow: hidden;
}
html.cb-nextgen .btn.cb-magnetic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    var(--cb-edge-angle, 135deg),
    rgba(var(--cb-accent-rgb), .4),
    transparent 50%,
    rgba(var(--cb-accent-rgb), .2)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
html.cb-nextgen .btn.cb-magnetic:hover::before {
  opacity: 1;
}

/* ==========================================================================
   SCROLL REVEAL — Elements fade in as they enter viewport
   ========================================================================== */
.cb-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
              transform .7s cubic-bezier(.4, 0, .2, 1);
}
.cb-reveal.cb-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* ==========================================================================
   GREETING WIDGET — Time-based hello on homepage hero
   ========================================================================== */
.cb-greeting {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--cb-muted);
  opacity: 0;
  transform: translateY(-6px);
  animation: cb-greeting-in .6s .4s cubic-bezier(.4, 0, .2, 1) forwards;
}
.cb-greeting-icon {
  font-size: 1.15rem;
  line-height: 1;
  filter: grayscale(.2);
}
.cb-greeting-text {
  display: inline;
}
@keyframes cb-greeting-in {
  to { opacity: .85; transform: translateY(0); }
}
@media (max-width: 767px) {
  .cb-greeting { font-size: .72rem; gap: .45rem; }
  .cb-greeting-icon { font-size: 1rem; }
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
  .cb-gradient-blob:nth-child(1) { width: 300px; height: 300px; }
  .cb-gradient-blob:nth-child(2) { width: 250px; height: 250px; }
  .cb-gradient-blob:nth-child(3) { width: 200px; height: 200px; }
  .cb-sound-toggle { bottom: 1rem; right: 1rem; width: 38px; height: 38px; }
  .cb-sound-toggle svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cb-gradient-blob { animation: none !important; }
  .cb-hud-element { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cb-page-transition { display: none !important; }
  html.cb-nextgen body { opacity: 1 !important; animation: none !important; }
  html.cb-nextgen .btn { transition-duration: .001ms !important; }
}