/* Custom utility classes & animations not easily handled via standard Tailwind classes */

/* Remove UA default margin that can show as a strip above fixed headers */
html,
body {
  margin: 0;
}

/* --- Theme tokens (light default on :root; dark via [data-theme="dark"]) --- */
:root {
  color-scheme: light;
  /* Page & surfaces — white / soft gray */
  --brand-navy: 255 255 255;
  --brand-blue: 248 250 252;
  --brand-deep: 255 255 255;
  --brand-saffron: 255 153 51;
  --brand-gold: 255 215 0;
  /* Navy ink for text/icons on saffron & gold (fixed across themes) */
  --brand-ink: 10 25 47;
  /* Body / muted copy — strong contrast on white */
  --brand-light: 30 41 59;
  /* Headings & elements that used text-white */
  --brand-fg: 15 23 42;

  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.98);
  --card-bg: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(15, 23, 42, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.06);
  --pattern-line: rgba(15, 23, 42, 0.06);
  --surface-hover: rgb(15 23 42 / 0.06);
  /* Fixed navbar height — hero slider clears this */
  --nav-offset: 4.5rem;
}

[data-theme='dark'] {
  color-scheme: dark;
  --brand-navy: 10 25 47;
  --brand-blue: 17 34 64;
  --brand-light: 230 241 255;
  --brand-saffron: 255 153 51;
  --brand-gold: 255 215 0;
  --brand-ink: 10 25 47;
  --brand-deep: 5 12 23;
  --brand-fg: 255 255 255;

  --nav-bg: rgba(10, 25, 47, 0.7);
  --nav-bg-scrolled: rgba(10, 25, 47, 0.95);
  --card-bg: rgba(17, 34, 64, 0.6);
  --glass-border: rgba(230, 241, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  --pattern-line: rgba(255, 255, 255, 0.05);
  --surface-hover: rgb(255 255 255 / 0.05);
}

/* Map Tailwind `text-white` to theme foreground (dark text in light, white in dark) */
html .text-white {
  color: rgb(var(--brand-fg) / 1);
}

html .hover\:text-white:hover {
  color: rgb(var(--brand-fg) / 1);
}

/* Ghost outline buttons that used hover:bg-white/5 */
.hover-surface:hover {
  background-color: var(--surface-hover);
}

/* Slider controls on hero images */
.slider-chrome {
  border-color: rgb(15 23 42 / 0.2);
}

[data-theme='dark'] .slider-chrome {
  border-color: rgb(255 255 255 / 0.25);
}

/* Glassmorphism Classes */
.glass-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
}

.glass-nav.scrolled {
  background: var(--nav-bg-scrolled);
  box-shadow: 0 4px 30px rgba(15, 23, 42, 0.08);
}

[data-theme='dark'] .glass-nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Subtle pattern for sections */
.pattern-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, var(--pattern-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pattern-line) 1px, transparent 1px);
}

/* Theme toggle: moon in light mode → dark; sun in dark mode → light */
html:not([data-theme]) .theme-toggle .icon-theme-sun,
[data-theme='light'] .theme-toggle .icon-theme-sun {
  display: none;
}

html:not([data-theme]) .theme-toggle .icon-theme-moon,
[data-theme='light'] .theme-toggle .icon-theme-moon {
  display: block;
}

[data-theme='dark'] .theme-toggle .icon-theme-sun {
  display: block;
}

[data-theme='dark'] .theme-toggle .icon-theme-moon {
  display: none;
}

/* Custom Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.animate-fade-in-up {
  opacity: 0;
  /* Important for initial state */
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Scroll Reveal Classes (Hooked in app.js) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

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

/* Fix for three.js canvas pointer interactions if it sits behind stuff */
#canvas-container {
  pointer-events: none;
  /* Text on top should be clickable */
}

#canvas-container canvas {
  pointer-events: auto;
  /* Re-enable for the canvas element itself if needed */
}

/* Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 25s linear infinite;
  display: inline-block;
}

/* Full-viewport hero banner (single image, no chrome) */
.hero-banner-full {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 88dvh;
}

.hero-banner-full img {
  object-fit: cover;
  object-position: center;
}

/* Home slider: start below fixed nav so images/controls aren’t covered */
#home-image-slider.hero-banner-full {
  margin-top: var(--nav-offset);
  min-height: calc(88dvh - var(--nav-offset));
  min-height: calc(88svh - var(--nav-offset));
  height: calc(88dvh - var(--nav-offset));
}

/* Full-viewport image slider — layout also uses Tailwind on #home-slider-track for reliability */
.home-image-slider .home-image-slider__viewport {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #home-slider-track {
    transition: none !important;
  }
}

/* Vertical rhythm for main content sections */
.section-breathe {
  padding-top: clamp(3.5rem, 8vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.section-breathe-tight {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}