@import "tailwindcss";

/* -------------------------------------------------------------------------- */
/* Dynamic Theme CSS Custom Property System                                   */
/* -------------------------------------------------------------------------- */
:root {
  --color-primary: #0b192c;
  --color-secondary: #0284c7;
  --color-accent: #06b6d4;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-heading: #0b192c;
  --color-text: #334155;
  --color-button: #0284c7;
  --color-button-text: #ffffff;
  --border-radius: 0.75rem;
  --font-family: 'Inter', sans-serif;
  --header-height: 80px;
}

/* Dynamic Helper Utilities */
.bg-theme-primary { background-color: var(--color-primary) !important; }
.bg-theme-secondary { background-color: var(--color-secondary) !important; }
.bg-theme-accent { background-color: var(--color-accent) !important; }
.bg-theme-surface { background-color: var(--color-surface) !important; }
.bg-theme-background { background-color: var(--color-background) !important; }

.text-theme-primary { color: var(--color-primary) !important; }
.text-theme-secondary { color: var(--color-secondary) !important; }
.text-theme-accent { color: var(--color-accent) !important; }
.text-theme-heading { color: var(--color-heading) !important; }
.text-theme-body { color: var(--color-text) !important; }

.border-theme-primary { border-color: var(--color-primary) !important; }
.border-theme-secondary { border-color: var(--color-secondary) !important; }
.border-theme-accent { border-color: var(--color-accent) !important; }

.badge-theme-accent {
  background-color: color-mix(in srgb, var(--color-accent, #06b6d4) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-accent, #06b6d4) 35%, transparent) !important;
  color: var(--color-accent, #06b6d4) !important;
}

.badge-theme-primary {
  background-color: color-mix(in srgb, var(--color-secondary, #0284c7) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-secondary, #0284c7) 25%, transparent) !important;
  color: var(--color-secondary, #0284c7) !important;
}

.water-gradient-banner {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary, #0b192c) 92%, var(--color-secondary, #0284c7)) 0%,
    color-mix(in srgb, var(--color-secondary, #0284c7) 85%, var(--color-primary, #0b192c)) 100%
  ) !important;
}

/* Lightweight Water Bubble Animation */
.hero-bubble {
  position: absolute;
  bottom: -40px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.7), rgba(6, 182, 212, 0.35) 60%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(6, 182, 212, 0.25);
  animation: floatBubble 12s infinite ease-in-out;
  will-change: transform, opacity;
}

@keyframes floatBubble {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.65;
  }
  50% {
    transform: translateY(-45vh) translateX(15px) scale(1.05);
    opacity: 0.8;
  }
  85% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(-90vh) translateX(-12px) scale(1.1);
    opacity: 0;
  }
}

body {
  font-family: var(--font-family);
  background-color: var(--color-background);
  color: var(--color-text);
  overflow-x: hidden;
}

/* Dynamic Responsive Section Anchor Offset */
section[id] {
  scroll-margin-top: calc(var(--header-height, 80px) + 16px);
}

/* Dynamic Solid Opaque Theme Header */
.site-header {
  background-color: var(--color-secondary, #0f172a);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: padding 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
  background-color: var(--color-secondary, #0f172a);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

/* Theme Button Utilities */
.btn-theme-primary {
  background-color: var(--color-button);
  color: var(--color-button-text);
  border-radius: var(--border-radius);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-theme-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
}

/* -------------------------------------------------------------------------- */
/* Individual Theme-Aware Statistic Gradient Cards                            */
/* -------------------------------------------------------------------------- */
.about-stat-card {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary, #2563eb) 14%, var(--color-surface, #ffffff)) 0%,
    color-mix(in srgb, var(--color-accent, #f59e0b) 18%, var(--color-surface, #ffffff)) 100%
  );
  border: 1px solid color-mix(in srgb, var(--color-primary, #2563eb) 25%, #cbd5e1);
  border-radius: var(--border-radius, 1.25rem);
  box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--color-primary, #2563eb) 12%, rgba(0,0,0,0.05)), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  padding: 1.25rem 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-stat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--color-primary, #2563eb) 50%, #94a3b8);
  box-shadow: 0 15px 30px -5px color-mix(in srgb, var(--color-primary, #2563eb) 20%, rgba(0,0,0,0.1));
}

.about-stat-number {
  color: var(--color-primary, #2563eb);
}

.btn-theme-secondary {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-surface, #ffffff);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--border-radius, 1rem);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-theme-secondary:hover {
  background-color: var(--color-secondary, #0284c7);
  border-color: var(--color-secondary, #0284c7);
  color: var(--color-button-text, #ffffff);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.image-gallery-card-bar {
  background-color: var(--color-primary, #0b192c);
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.group\/card:hover .image-gallery-card-bar {
  background-color: var(--color-secondary, #0284c7);
}

/* -------------------------------------------------------------------------- */
/* Gallery 3-Position Physical Coverflow Carousel System                     */
/* -------------------------------------------------------------------------- */
.gallery-viewport {
  perspective: 1200px;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible !important;
}

.coverflow-stage {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.coverflow-card {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Mobile dimensions */
  width: clamp(230px, 60vw, 280px);
  height: clamp(340px, 75vw, 420px);
  margin-top: calc(-1 * clamp(340px, 75vw, 420px) / 2);
  margin-left: calc(-1 * clamp(230px, 60vw, 280px) / 2);
  transform-origin: center center;
  will-change: transform, opacity, filter;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease, filter 0.5s ease;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8);
}

@media (min-width: 640px) {
  .coverflow-card {
    /* Tablet dimensions */
    width: clamp(280px, 38vw, 350px);
    height: clamp(400px, 48vw, 480px);
    margin-top: calc(-1 * clamp(400px, 48vw, 480px) / 2);
    margin-left: calc(-1 * clamp(280px, 38vw, 350px) / 2);
  }
}

@media (min-width: 1024px) {
  .coverflow-card {
    /* Desktop dimensions - controlled width so side cards have plenty of room to peek in */
    width: clamp(340px, 30vw, 400px);
    height: clamp(460px, 38vw, 540px);
    margin-top: calc(-1 * clamp(460px, 38vw, 540px) / 2);
    margin-left: calc(-1 * clamp(340px, 30vw, 400px) / 2);
  }
}

/* Slot Attributes & Visual State */
.coverflow-card[data-slot="center"] {
  z-index: 30;
  cursor: pointer;
}

.coverflow-card[data-slot="left"],
.coverflow-card[data-slot="right"] {
  z-index: 20;
  cursor: pointer;
}

.coverflow-card[data-slot="hidden-left"],
.coverflow-card[data-slot="hidden-right"] {
  z-index: 10;
  pointer-events: none;
}

/* Card Overlay Content */
.coverflow-card[data-slot="center"] .coverflow-overlay {
  opacity: 1;
  transform: translateY(0);
}

.coverflow-overlay {
  opacity: 0.95;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* -------------------------------------------------------------------------- */
/* Scroll Reveal & Motion Utilities                                           */
/* -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.reveal-stagger-1 { transition-delay: 0.1s; }
.reveal-stagger-2 { transition-delay: 0.2s; }
.reveal-stagger-3 { transition-delay: 0.3s; }
.reveal-stagger-4 { transition-delay: 0.4s; }

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .coverflow-card,
  .btn-theme-primary,
  .btn-theme-secondary {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}