@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* Color variables for theme system */
:root {
  /* Default: Dark Theme */
  --color-bg: #0B0D10;
  --color-bg-secondary: #0F1318;
  --color-surface: #121820;
  --color-surface-elevated: #18222D;
  --color-text: #F4F0E8;
  --color-text-muted: #A7AFBA;
  --color-text-aux: #68717D;
  --color-border: rgba(244, 240, 232, 0.08);
  --color-gold: #C99A58;
  --color-gold-hover: #E3B473;
  --color-blue: #4D8ED8;
  --color-green: #31C48D;
}

/* Light Theme overrides */
html[data-theme="light"] {
  --color-bg: #F7F2E8;
  --color-bg-secondary: #EFE9DC;
  --color-surface: #FFFDF8;
  --color-surface-elevated: #F9F6F0;
  --color-text: #101820;
  --color-text-muted: #59616B;
  --color-text-aux: #8E959E;
  --color-border: rgba(16, 24, 32, 0.08);
  --color-gold: #B98236;
  --color-gold-hover: #9E6C2C;
  --color-blue: #2563A8;
  --color-green: #15865C;
}

/* Base custom styles */
html {
  scroll-behavior: smooth;
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--color-text);
  transition: color 0.4s ease;
}

/* Controlled Transitions for Theme Switching */
body,
header,
section,
footer,
.bg-bg,
.bg-surface,
.bg-bg-secondary,
.bg-surface-elevated,
.text-text,
.text-text-muted,
.border-border,
p, span, label, input, select, textarea, a, button {
  transition:
    background-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
    color 200ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 200ms cubic-bezier(0.23, 1, 0.32, 1),
    fill 200ms cubic-bezier(0.23, 1, 0.32, 1),
    stroke 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Custom Selection */
::selection {
  background-color: var(--color-gold);
  color: var(--color-bg);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--color-surface);
  border-radius: 4px;
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* Ambient glow details matching theme */
.glow-spot {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(216, 164, 91, 0.05) 0%, rgba(16, 26, 38, 0) 70%);
  pointer-events: none;
  z-index: 1;
}
html[data-theme="light"] .glow-spot {
  background: radial-gradient(circle, rgba(185, 130, 54, 0.04) 0%, rgba(239, 232, 220, 0) 70%);
}

/* Logo Theme Switching */
.dark-logo-img {
  display: block !important;
}
.light-logo-img {
  display: none !important;
}
html[data-theme="light"] .dark-logo-img {
  display: none !important;
}
html[data-theme="light"] .light-logo-img {
  display: block !important;
}

/* Golden line accent anims */
.border-gold-gradient {
  position: relative;
}
.border-gold-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 164, 91, 0) 0%, var(--color-gold) 50%, rgba(216, 164, 91, 0) 100%);
}

/* Hero Slideshow Transitions */
.hero-slide {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.5s ease-in-out, transform 8s ease-out;
}

.hero-slide.active {
  opacity: 0.6;
  transform: scale(1);
}

/* Reveal on scroll animations */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(42px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.965) translateY(24px);
  transition:
    opacity 950ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-scale.is-visible,
.reveal-scale.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.reveal-fade.is-visible,
.reveal-fade.active {
  opacity: 1;
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Active scale transition for button feedback */
.active-scale {
  transition:
    transform 240ms ease,
    border-color 240ms ease,
    background-color 240ms ease,
    color 240ms ease,
    box-shadow 240ms ease !important;
}

.active-scale:hover {
  transform: translateY(-1px);
}

.active-scale:active {
  transform: scale(0.98) !important;
}

/* Delay modifiers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Section Transitions & Dividers */
section {
  position: relative;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(88%, 1120px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border),
    rgba(201, 154, 88, 0.28),
    var(--color-border),
    transparent
  );
  opacity: 0.75;
  pointer-events: none;
}

.section-soft-gradient {
  position: relative;
  overflow: hidden;
}

.section-soft-gradient::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  background:
    radial-gradient(circle at 50% 100%, rgba(201, 154, 88, 0.07), transparent 52%),
    linear-gradient(to bottom, transparent, rgba(201, 154, 88, 0.035));
  pointer-events: none;
}

/* Project Image Wrap */
.project-image-wrap {
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition:
    border-color 400ms ease,
    box-shadow 400ms ease,
    transform 400ms ease;
}

.project-image-wrap:hover {
  border-color: rgba(201, 154, 88, 0.55);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.project-image-wrap img {
  transition:
    transform 900ms cubic-bezier(0.65, 0, 0.35, 1),
    filter 900ms cubic-bezier(0.65, 0, 0.35, 1) !important;
}

.project-image-wrap:hover img {
  transform: scale(1.035) !important;
}

/* Hero Content Reveal Entrance */
.hero-kicker,
.hero-title,
.hero-subtitle,
.hero-actions {
  opacity: 0;
  transform: translateY(24px);
  animation: heroReveal 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.hero-kicker { animation-delay: 120ms; }
.hero-title { animation-delay: 260ms; }
.hero-subtitle { animation-delay: 420ms; }
.hero-actions { animation-delay: 580ms; }

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Marquee */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  animation: marquee 35s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-fade,
  .reveal-scale,
  .hero-kicker,
  .hero-title,
  .hero-subtitle,
  .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .marquee-content {
    animation: none;
    flex-wrap: wrap;
    white-space: normal;
  }
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Premium mockups and dashboard accents */
.dashboard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

.dashboard-card:hover {
  border-color: var(--color-gold);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 20px rgba(216, 164, 91, 0.02);
}

/* Animated SVG chart */
.chart-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawChart 3s ease-out forwards;
}

@keyframes drawChart {
  to {
    stroke-dashoffset: 0;
  }
}

/* Floating controls alignment and safe area support */
.floating-control-left {
  position: fixed;
  left: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 100;
}

.floating-control-right {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 100;
}

@media (max-width: 640px) {
  .floating-control-left {
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .floating-control-right {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* FAQ transitions */
.faq-trigger {
  cursor: pointer;
  user-select: none;
}
.faq-icon {
  transition: transform 0.3s ease;
}

/* Mobile menu sheet transition */
#mobile-menu {
  transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}

/* Hero Video Styles */
.hero-media video,
.hero-media img {
  transition: opacity 0.6s ease, transform 1.2s ease;
}

.hero-video-overlay {
  background:
    radial-gradient(circle at 70% 45%, rgba(201, 154, 88, 0.08), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

[data-theme="light"] .hero-video-overlay {
  background:
    radial-gradient(circle at 70% 45%, rgba(185, 130, 54, 0.10), transparent 38%),
    linear-gradient(90deg, rgba(247, 242, 232, 0.88), rgba(247, 242, 232, 0.42) 48%, rgba(247, 242, 232, 0.22));
}

@media (max-width: 768px) {
  #hero-video {
    display: none;
  }

  #hero-fallback {
    opacity: 1 !important;
  }

  .hero-video-overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.72)),
      linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.25));
  }

  [data-theme="light"] .hero-video-overlay {
    background:
      linear-gradient(180deg, rgba(247, 242, 232, 0.55), rgba(247, 242, 232, 0.85)),
      linear-gradient(90deg, rgba(247, 242, 232, 0.85), rgba(247, 242, 232, 0.35));
  }
}

@media (prefers-reduced-motion: reduce) {
  #hero-video {
    display: none;
  }

  #hero-fallback {
    opacity: 1 !important;
  }

  .reveal-on-scroll,
  .reveal-fade,
  .reveal-scale,
  .hero-kicker,
  .hero-title,
  .hero-subtitle,
  .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}