/* --- ROOT VARIABLES --- */
:root {
  --sight-fresh-bg: #f5f8f7;          /* Gentle, relaxing light minty white base */
  --sight-fresh-surface: #ffffff;     /* Crisp pure white for cards and layout blocks */
  --sight-fresh-accent: #10b981;      /* Vivid healthy green representing ocular care/nature */
  --sight-fresh-accent-hover: #059669;/* Darker green for hover actions */
  --sight-fresh-ink: #1e293b;         /* Deep slate gray for optimal text contrast and readability */
  --sight-fresh-ink-muted: #4b5563;   /* Lighter gray for secondary content */
  --sight-fresh-border: #e5e7eb;      /* Subtle border dividers */
  --sight-fresh-gradient: linear-gradient(135deg, #10b981 0%, #06b6d4 100%); /* Fresh energy transition */
  
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --sight-fresh-radius: 16px;         /* Soft borders as configured */
  --sight-fresh-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --sight-fresh-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- BASICS --- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--sight-fresh-bg);
  color: var(--sight-fresh-ink);
  -webkit-font-smoothing: antialiased;
}

/* --- HEADINGS CASE OPTION --- */
.vitreous-main-heading, 
.vitreous-sub-heading,
h1, h2, h3, h4 {
  text-transform: uppercase; /* Styled as UPPERCASE per configuration */
}

/* --- SCROLL-DRIVEN ANIMATIONS (CSS Only) --- */
@keyframes progress-grow {
  to {
    width: 100%;
  }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--sight-fresh-accent);
  animation: progress-grow linear;
  animation-timeline: scroll();
  z-index: 9999;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reveal element when entering viewport. Fallback behaves instantly if not supported. */
.reveal {
  animation: slide-up 0.6s ease-out both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}

/* --- BENTO GRID LAYOUT --- */
.sight-bento-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.eye-cell-block {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eye-cell-block:hover {
  transform: scale(1.02);
  box-shadow: var(--sight-fresh-shadow-hover);
}

/* Responsive adjustment for Bento */
@media (max-width: 1024px) {
  .sight-bento-layout {
    grid-template-columns: 1fr;
  }
  .eye-cell-block {
    grid-column: span 1 !important;
  }
}

/* --- CSS-ONLY HAMBURGER MENU (FOOTPRINT AVOIDANCE) --- */
#retina-menu-checkbox:checked ~ .retina-nav-items {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sight-fresh-surface);
  border-bottom: 2px solid var(--sight-fresh-border);
  padding: 1.5rem;
  z-index: 50;
  box-shadow: var(--sight-fresh-shadow-hover);
}

#retina-menu-checkbox:checked ~ .sclera-toggle-label span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
#retina-menu-checkbox:checked ~ .sclera-toggle-label span:nth-child(2) {
  opacity: 0;
}
#retina-menu-checkbox:checked ~ .sclera-toggle-label span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.sclera-toggle-label {
  display: none;
  width: 25px;
  height: 20px;
}

.sclera-toggle-label span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--sight-fresh-ink);
  transition: all 0.3s ease-in-out;
}

@media (max-width: 1023px) {
  .sclera-toggle-label {
    display: flex;
  }
  .retina-nav-items {
    display: none;
    width: 100%;
  }
  .retina-nav-items ul {
    width: 100%;
  }
  .retina-nav-items li {
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
  }
  .retina-nav-items a {
    display: block;
    padding: 0.75rem 0;
  }
}

/* Navigation Links decoration */
.hover-link {
  position: relative;
  font-weight: 500;
  color: var(--sight-fresh-ink);
  transition: color 0.2s;
}

.hover-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--sight-fresh-accent);
  transition: width 0.3s ease;
}

.hover-link:hover {
  color: var(--sight-fresh-accent);
}

.hover-link:hover::after {
  width: 100%;
}