/* Shared Stylesheet - Aetheric Minimalist Design System */

:root {
  /* RGB Colors for Tailwind Opacity Support */
  --color-background-rgb: 252, 248, 251; /* #fcf8fb */
  --color-on-background-rgb: 27, 27, 29; /* #1b1b1d */
  
  --color-surface-rgb: 252, 248, 251; /* #fcf8fb */
  --color-surface-dim-rgb: 220, 217, 220; /* #dcd9dc */
  --color-surface-bright-rgb: 252, 248, 251; /* #fcf8fb */
  
  --color-surface-container-lowest-rgb: 255, 255, 255; /* #ffffff */
  --color-surface-container-low-rgb: 246, 243, 245; /* #f6f3f5 */
  --color-surface-container-rgb: 240, 237, 239; /* #f0edef */
  --color-surface-container-high-rgb: 234, 231, 234; /* #eae7ea */
  --color-surface-container-highest-rgb: 228, 226, 228; /* #e4e2e4 */
  
  --color-on-surface-rgb: 27, 27, 29; /* #1b1b1d */
  --color-on-surface-variant-rgb: 65, 71, 85; /* #414755 */
  
  --color-primary-rgb: 0, 88, 188; /* #0058bc */
  --color-on-primary-rgb: 255, 255, 255; /* #ffffff */
  --color-primary-container-rgb: 0, 112, 235; /* #0070eb */
  --color-on-primary-container-rgb: 254, 252, 255; /* #fefcff */
  
  --color-secondary-rgb: 144, 38, 195; /* #9026c3 */
  --color-on-secondary-rgb: 255, 255, 255; /* #ffffff */
  --color-secondary-container-rgb: 203, 102, 254; /* #cb66fe */
  --color-on-secondary-container-rgb: 74, 0, 107; /* #4a006b */
  
  --color-tertiary-rgb: 158, 61, 0; /* #9e3d00 */
  --color-on-tertiary-rgb: 255, 255, 255; /* #ffffff */
  
  --color-outline-rgb: 113, 119, 134; /* #717786 */
  --color-outline-variant-rgb: 193, 198, 215; /* #c1c6d7 */

  /* Fallback HEX mappings */
  --color-background: rgb(var(--color-background-rgb));
  --color-on-background: rgb(var(--color-on-background-rgb));
  --color-surface: rgb(var(--color-surface-rgb));
  --color-surface-dim: rgb(var(--color-surface-dim-rgb));
  --color-surface-bright: rgb(var(--color-surface-bright-rgb));
  --color-on-surface: rgb(var(--color-on-surface-rgb));
  --color-on-surface-variant: rgb(var(--color-on-surface-variant-rgb));
  --color-primary: rgb(var(--color-primary-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));

  /* Glassmorphism Specs */
  --glass-bg: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: rgba(0, 0, 0, 0.04);
}

.dark {
  /* RGB Colors - Dark Theme Override */
  --color-background-rgb: 18, 18, 20; /* #121214 */
  --color-on-background-rgb: 243, 240, 242; /* #f3f0f2 */
  
  --color-surface-rgb: 18, 18, 20; /* #121214 */
  --color-surface-dim-rgb: 10, 10, 11; /* #0a0a0b */
  --color-surface-bright-rgb: 27, 27, 29; /* #1b1b1d */
  
  --color-surface-container-lowest-rgb: 7, 7, 8; /* #070708 */
  --color-surface-container-low-rgb: 15, 15, 17; /* #0f0f11 */
  --color-surface-container-rgb: 27, 27, 29; /* #1b1b1d */
  --color-surface-container-high-rgb: 36, 36, 38; /* #242426 */
  --color-surface-container-highest-rgb: 43, 43, 46; /* #2b2b2e */
  
  --color-on-surface-rgb: 243, 240, 242; /* #f3f0f2 */
  --color-on-surface-variant-rgb: 161, 166, 181; /* #a1a6b5 */
  
  --color-primary-rgb: 173, 198, 255; /* #adc6ff */
  --color-on-primary-rgb: 0, 45, 107; /* #002d6b */
  --color-primary-container-rgb: 0, 68, 147; /* #004493 */
  --color-on-primary-container-rgb: 216, 226, 255; /* #d8e2ff */
  
  --color-secondary-rgb: 233, 179, 255; /* #e9b3ff */
  --color-on-secondary-rgb: 83, 0, 123; /* #53007b */
  --color-secondary-container-rgb: 114, 0, 163; /* #7200a3 */
  --color-on-secondary-container-rgb: 246, 217, 255; /* #f6d9ff */
  
  --color-tertiary-rgb: 255, 181, 149; /* #ffb595 */
  --color-on-tertiary-rgb: 91, 32, 0; /* #5b2000 */
  
  --color-outline-rgb: 140, 146, 161; /* #8c92a1 */
  --color-outline-variant-rgb: 73, 78, 93; /* #494e5d */

  /* Glassmorphism Specs - Dark Mode */
  --glass-bg: rgba(18, 18, 20, 0.5);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.2);
}

/* Global Reset */
html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  transition: background-color 0.5s ease, color 0.3s ease;
  overflow-x: clip;
  max-width: 100vw;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-surface-container-highest);
  border-radius: 9999px;
  border: 2px solid var(--color-background);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}

/* Glassmorphic Utilities */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 40px var(--glass-shadow);
  transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Optical Crystal Liquid Glass Navigation Bar (Three.js 4-Sided Lens Refraction) */
.navbar,
nav.fixed {
  /* Dynamic optical clarity: 100% sharp transmission with boosted optical vibrancy */
  backdrop-filter: blur(0px) saturate(180%) contrast(104%);
  -webkit-backdrop-filter: blur(0px) saturate(180%) contrast(104%);

  /* Crystalline refractive beveled border with ultra-sheer transparent core */
  border: 1px solid transparent !important;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0.55) 100%) border-box !important;

  /* Multi-angle internal rim caustics & 4-sided prismatic edge refraction */
  box-shadow: 
    0 16px 40px -10px rgba(0, 0, 0, 0.1),
    inset 0 2px 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 3.5px 0 4px -1px rgba(0, 215, 255, 0.55),
    inset -3.5px 0 4px -1px rgba(255, 35, 145, 0.5),
    inset 0 4px 14px -3px rgba(255, 255, 255, 0.35),
    inset 0 -4px 14px -3px rgba(255, 255, 255, 0.25) !important;

  border-radius: 50px !important;
  z-index: 1000 !important;
  position: fixed !important;
  overflow: hidden;
  will-change: transform, backdrop-filter;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Children sit cleanly above the optical refractive layer */
.navbar > *,
nav.fixed > * {
  position: relative;
  z-index: 2;
}

/* Layer 1: Dynamic Optical Caustic Glare & Moving Light Refraction */
.navbar::before,
nav.fixed::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    130% 120% at var(--glass-light-x, 50%) var(--glass-light-y, 10%),
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.06) 40%,
    transparent 75%
  );
  mix-blend-mode: overlay;
  transition: opacity 0.3s ease;
}

/* Layer 2: Curved Bevel Lens Refraction (4-Sided Perimeter Distortion) */
.navbar::after,
nav.fixed::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: 
    /* 4-sided curved lens rim */
    radial-gradient(100% 100% at 50% 50%, transparent 82%, rgba(255, 255, 255, 0.45) 96%, rgba(255, 255, 255, 0.7) 100%),
    /* Top & bottom refractive caustic lens strips */
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 8px, transparent 16px, transparent calc(100% - 16px), rgba(255, 255, 255, 0.08) calc(100% - 8px), rgba(255, 255, 255, 0.35) 100%),
    /* Left & right chromatic aberration prism dispersion */
    linear-gradient(90deg, rgba(0, 225, 255, 0.28) 0%, rgba(0, 225, 255, 0.05) 12px, transparent 20px, transparent calc(100% - 20px), rgba(255, 45, 160, 0.05) calc(100% - 12px), rgba(255, 45, 160, 0.28) 100%);
  box-shadow: 
    inset 0 0 16px rgba(255, 255, 255, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    inset 0 -1px 2px rgba(255, 255, 255, 0.4);
  mix-blend-mode: hard-light;
}

/* Dark mode liquid glass refraction */
.dark .navbar,
.dark nav.fixed {
  backdrop-filter: blur(0px) saturate(180%) contrast(108%);
  -webkit-backdrop-filter: blur(0px) saturate(180%) contrast(108%);

  border: 1px solid transparent !important;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.005) 100%) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0.45) 100%) border-box !important;

  box-shadow: 
    0 22px 50px -10px rgba(0, 0, 0, 0.6),
    inset 0 2px 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 1.5px 0 rgba(255, 255, 255, 0.25),
    inset 3.5px 0 4px -1px rgba(0, 200, 255, 0.45),
    inset -3.5px 0 4px -1px rgba(255, 45, 155, 0.4),
    inset 0 4px 14px -3px rgba(255, 255, 255, 0.2),
    inset 0 -4px 14px -3px rgba(255, 255, 255, 0.12) !important;
}

.dark .navbar::before,
.dark nav.fixed::before {
  background: radial-gradient(
    130% 120% at var(--glass-light-x, 50%) var(--glass-light-y, 10%),
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 40%,
    transparent 75%
  );
}

.dark .navbar::after,
.dark nav.fixed::after {
  background: 
    radial-gradient(100% 100% at 50% 50%, transparent 82%, rgba(255, 255, 255, 0.3) 96%, rgba(255, 255, 255, 0.5) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 8px, transparent 16px, transparent calc(100% - 16px), rgba(255, 255, 255, 0.05) calc(100% - 8px), rgba(255, 255, 255, 0.2) 100%),
    linear-gradient(90deg, rgba(0, 220, 255, 0.18) 0%, rgba(0, 220, 255, 0.03) 12px, transparent 20px, transparent calc(100% - 20px), rgba(255, 50, 150, 0.03) calc(100% - 12px), rgba(255, 50, 150, 0.18) 100%);
  box-shadow: 
    inset 0 0 16px rgba(255, 255, 255, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(255, 255, 255, 0.2);
}

/* Clean bottom outline input styling */
.glass-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-outline-variant);
  color: var(--color-on-background);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.glass-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 1px 0 var(--color-primary);
}

/* Hover scales */
.interactive-hover {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}
.interactive-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px var(--glass-shadow);
}
.interactive-hover:active {
  transform: translateY(-1px);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll Animation Classes */
.reveal {
  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);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Theme Toggle Button rotation */
.theme-toggle-icon {
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.theme-toggle-btn:hover .theme-toggle-icon {
  transform: rotate(30deg);
}

/* Custom organic bg */
.organic-bg {
  background: radial-gradient(circle at 10% 20%, rgba(0, 88, 188, 0.05) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(144, 38, 195, 0.06) 0%, transparent 40%),
              radial-gradient(circle at 50% 50%, rgba(158, 61, 0, 0.03) 0%, transparent 50%);
  background-color: var(--color-background);
}

/* ==========================================
   Image Loading: Skeleton shimmer + fade-in
   ========================================== */

/* Skeleton shimmer on the image container while img hasn't loaded */
.img-wrap {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-container);
}
.img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.12) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity 0.4s ease;
}
.img-wrap.loaded::before {
  opacity: 0;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Fade-in once image is loaded */
.img-wrap img {
  opacity: 0;
  transition: opacity 0.5s ease;
  position: relative;
  z-index: 2;
}
.img-wrap.loaded img {
  opacity: 1;
}

/* Graceful error fallback - show a subtle icon instead of broken image */
.img-wrap.error img {
  opacity: 0;
}
.img-wrap.error::after {
  content: '\e3f4'; /* Material Symbols: image_not_supported */
  font-family: 'Material Symbols Outlined';
  font-size: 2rem;
  color: var(--color-outline);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: var(--color-surface-container-low);
}

/* Continuous Auto-Scrolling Marquee - Mobile & Desktop Optimized */
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
  contain: paint;
  isolation: isolate;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15px, black calc(100% - 15px), transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.marquee-group {
  display: flex;
  gap: 0.75rem;
  padding-right: 0.75rem;
  flex-shrink: 0;
  animation: marquee-scroll 24s linear infinite;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  touch-action: pan-y;
}

@media (min-width: 768px) {
  .marquee-group {
    gap: 1rem;
    padding-right: 1rem;
    animation-duration: 28s;
  }
}

.marquee-container:hover .marquee-group,
.marquee-container.is-paused .marquee-group {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-group {
    animation: none;
    overflow-x: auto;
  }
}