@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* Central Branding Custom Variables for easy exchangeability */
  --brand-name: 'BERTZ Studios';
  --brand-name-part1: 'BERTZ';
  --brand-name-part2: 'STUDIOS';
  
  /* Color Palette - Warm Premium Studio */
  --color-bg-base: #0E0D0B;
  --color-bg-surface: #1A1815;
  --color-accent-primary: #D6B46A;
  --color-accent-secondary: #F4E7CF;
  --color-accent-glow: rgba(214, 180, 106, 0.12);
  --color-text-primary: #F7F2EA;
  --color-text-muted: #A8A096;
  --color-border: rgba(255, 244, 220, 0.10);
  --color-border-active: rgba(214, 180, 106, 0.36);
  
  /* Font Families */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Glassmorphism panel style with enhanced filter sat & border */
.glass-panel {
  background: rgba(26, 24, 21, 0.72);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 45px -24px rgba(0, 0, 0, 0.85);
}

/* Custom interactive glowing card hover effect */
.glow-card {
  position: relative;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.glow-card:hover {
  border-color: var(--color-border-active);
  box-shadow: 0 18px 45px -24px rgba(214, 180, 106, 0.28);
  transform: translateY(-6px);
}

.glow-bg {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(350px circle at var(--x, 0px) var(--y, 0px), rgba(214, 180, 106, 0.10), transparent 80%);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* Infinity scroll logos */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-ticker {
  display: flex;
  width: max-content;
  animation: ticker 28s linear infinite;
}

.animate-ticker:hover {
  animation-play-state: paused;
}

/* Floating labels pattern */
.floating-group {
  position: relative;
}

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: -8px;
  left: 12px;
  font-size: 0.75rem;
  color: var(--color-accent-primary);
  background-color: var(--color-bg-surface);
  padding: 0 8px;
}

.floating-label {
  position: absolute;
  left: 16px;
  top: 16px;
  pointer-events: none;
  transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1) all;
  color: var(--color-text-muted);
}

/* Glowing dot logo animation */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 4px #D6B46A, 0 0 12px rgba(214, 180, 106, 0.24); }
  50% { box-shadow: 0 0 8px #D6B46A, 0 0 18px rgba(214, 180, 106, 0.34); }
}

.logo-dot {
  animation: pulse-glow 2.5s infinite ease-in-out;
}

/* High fidelity gradient text */
.gradient-text {
  background: linear-gradient(135deg, #F7F2EA 35%, #D6B46A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-accent-text {
  background: linear-gradient(135deg, #D6B46A 0%, #F4E7CF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Grid pattern */
.tech-grid-pattern {
  background-size: 50px 50px;
  background-image: linear-gradient(to right, rgba(255, 244, 220, 0.018) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 244, 220, 0.018) 1px, transparent 1px);
}

/* Reveal on scroll styling */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* Smooth custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-base);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 244, 220, 0.12);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-primary);
}