/* BuildCrew — shared bold/modern theme
   Brand accents: copper #e0a06a / #c77f4d  ·  cyan #3fe0d0  ·  base #0a0a0b */

:root {
  --bc-copper: #e0a06a;
  --bc-copper-deep: #c77f4d;
  --bc-cyan: #3fe0d0;
  --bc-base: #0a0a0b;
}

html, body { background-color: var(--bc-base); }
body { overflow-x: hidden; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---- Accents ---- */
.text-gradient {
  background: linear-gradient(100deg, #e0a06a 0%, #f0c9a0 30%, #9fe9df 70%, #3fe0d0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.text-copper { color: var(--bc-copper) !important; }
.text-cyan-accent { color: var(--bc-cyan) !important; }
.bg-copper { background-color: var(--bc-copper); }
.bg-cyan-accent { background-color: var(--bc-cyan); }

.glass {
  background: rgba(22, 22, 24, 0.55);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.glass-strong {
  background: rgba(18, 18, 20, 0.78);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.hairline { border: 1px solid rgba(255,255,255,0.07); }
.accent-line { height: 1px; background: linear-gradient(90deg, transparent, #e0a06a 35%, #3fe0d0 65%, transparent); }

/* ---- Glows ---- */
.glow-copper {
  position: absolute; border-radius: 9999px; pointer-events: none;
  background: radial-gradient(circle, rgba(224,160,106,0.35) 0%, rgba(224,160,106,0) 70%);
  filter: blur(40px);
}
.glow-cyan {
  position: absolute; border-radius: 9999px; pointer-events: none;
  background: radial-gradient(circle, rgba(63,224,208,0.28) 0%, rgba(63,224,208,0) 70%);
  filter: blur(40px);
}

/* ---- Cards ---- */
.card-accent-hover { transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s, background .5s; }
.card-accent-hover:hover { transform: translateY(-6px); border-color: rgba(224,160,106,0.35); }

/* ---- Buttons ---- */
.btn-gradient {
  background: linear-gradient(90deg, #e0a06a, #c77f4d);
  color: #1a1209; position: relative; overflow: hidden;
  transition: box-shadow .5s ease;
}
.btn-gradient:hover { box-shadow: 0 0 40px -6px rgba(224,160,106,0.6); }

/* ---- Animations ---- */
@keyframes bcFloatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes bcDriftGlow { 0%,100% { transform: translate(0,0) scale(1); opacity:.8;} 50% { transform: translate(20px,-15px) scale(1.08); opacity:1;} }
@keyframes bcPulseSoft { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes bcScrollHint { 0% { transform: translateY(0); opacity:.9;} 60% { transform: translateY(8px); opacity:.2;} 100% { transform: translateY(0); opacity:.9;} }
.anim-float { animation: bcFloatY 7s ease-in-out infinite; }
.anim-drift { animation: bcDriftGlow 12s ease-in-out infinite; }
.anim-pulse { animation: bcPulseSoft 3.5s ease-in-out infinite; }

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Marquee ---- */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: bcMarquee 38s linear infinite; }
@keyframes bcMarquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ---- Video frames ---- */
.video-frame { position: relative; overflow: hidden; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-scrim { position:absolute; inset:0; background: radial-gradient(ellipse at center, rgba(10,10,11,0) 30%, rgba(10,10,11,0.85) 100%); pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  .anim-float,.anim-drift,.anim-pulse,.marquee-track { animation: none; }
  .reveal { opacity:1; transform:none; }
}