/* THEMATIC CSS VARIABLES - Dark Theme Visual Palette */
:root {
  --sight-bg: #0c101d;              /* Deep Midnight obsidian dark blue */
  --sight-surface: #141c30;         /* Slate shadow surface */
  --sight-accent: #6366f1;          /* Vibrant indigo */
  --sight-accent-soft: rgba(99, 102, 241, 0.15);
  --sight-highlight: #10b981;       /* Bright emerald eye healthy glow */
  --sight-ink: #f8fafc;             /* High contrast bright text */
  --sight-ink-muted: #94a3b8;       /* Muted neutral text */
  --sight-gradient: linear-gradient(135deg, #1e1b4b 0%, #0c101d 100%);
  --sight-hero-grad: linear-gradient(135deg, #2e1065 0%, #0c101d 100%);
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

/* Base custom styles to enforce typography and WCAG compliance */
body {
  font-family: var(--font-body);
  background-color: var(--sight-bg);
  color: var(--sight-ink);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header customization */
.focus-nav-bar {
  background-color: rgba(12, 16, 29, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Scroll tracker animation (Scroll-driven animation only) */
@keyframes progress-grow {
  to { width: 100%; }
}
.focus-scroll-indicator {
  height: 3px;
  background-color: var(--sight-highlight);
  width: 0;
  animation: progress-grow linear;
  animation-timeline: scroll();
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Page entrance trigger animation (View viewport transition) */
@keyframes fade-on-scroll {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.reveal-element {
  animation: fade-on-scroll linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

/* Styling links & custom design components */
.focus-nav-link {
  color: var(--sight-ink-muted);
  transition: color 0.2s ease-in-out;
}
.focus-nav-link:hover {
  color: var(--sight-ink);
}

/* Interactive elements hover effect */
.optic-action-trigger {
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.optic-action-trigger:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

/* Hover lift on list elements */
.gaze-row-item {
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.gaze-row-item:hover {
  transform: translateX(4px);
}

/* Testimonial masonry items styling */
.gaze-review-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gaze-review-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.1);
}

/* Custom Image Offset setup as layout preset requirement */
@media (min-width: 1024px) {
  .optic-image-offset-wrapper {
    margin-left: -2rem;
  }
}

/* CSS-Only Mobile Navigation Toggle */
@media (max-width: 767px) {
  .focus-main-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--sight-bg);
    padding: 6rem 2rem 2rem 2rem;
    z-index: 40;
  }
  
  .focus-menu-trigger:checked ~ .focus-main-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .focus-hamburger {
    position: relative;
    z-index: 50;
  }
}