/* ==========================================================================
   Camera Settings — Homepage Styles
   Field guide hub design
   ========================================================================== */

/* --------------------------------------------------------------------------
   Homepage Hero
   -------------------------------------------------------------------------- */
.home-page {
  background-color: var(--color-gray-50);
}

/* Home hero extends .page-hero with minimal additions */
.home-hero {
  /* Uses base .page-hero styles, just override border */
  border-bottom: none;
}

/* Quick Links — functional navigation within hero */
.quick-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.quick-links .hero-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.quick-link-icon {
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Section Badges & Headers
   -------------------------------------------------------------------------- */
.section-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-gray-500);
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.section-header--inline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.section-link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  transition: color var(--transition-fast);
}

.section-link:hover {
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   Tools Section
   -------------------------------------------------------------------------- */
.tools-section {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-100);
}

.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

.tool-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.tool-card--featured {
  grid-row: span 2;
  background: linear-gradient(145deg, var(--color-gray-900), var(--color-black));
  border: none;
  color: var(--color-white);
  text-decoration: none;
}

.tool-card--featured:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.tool-card--coming {
  opacity: 0.7;
  pointer-events: none;
}

.tool-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.tool-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-gray-400);
}

.status-dot--live {
  background-color: var(--color-aurora-quiet);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-text {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-aurora-quiet);
}

.tool-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  background-color: rgba(255, 255, 255, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-gray-300);
}

.tool-badge--soon {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
}

.tool-icon {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-5);
  color: var(--color-gray-400);
}

.tool-icon--dof svg,
.tool-icon--timelapse svg {
  width: 100%;
  height: 100%;
}

.webgl-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.tool-card--featured .tool-icon {
  color: var(--color-gray-300);
}

.tool-title {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}

.tool-description {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  flex-grow: 1;
}

.tool-card--featured .tool-description {
  color: var(--color-gray-400);
}

/* Kp Forecast Chart */
.kp-forecast-chart {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
  min-height: 100px;
}

.kp-chart-header {
  margin-bottom: var(--space-3);
}

.kp-chart-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
}

.kp-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-1);
  height: 60px;
  flex-grow: 1;
}

.kp-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  height: 100%;
  animation: fadeInBar 0.4s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInBar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kp-bar {
  width: 6px;
  border-radius: 3px;
  background-color: var(--color-aurora-quiet);
  transition: height 0.3s ease-out;
  min-height: 4px;
  margin-top: auto;
}

.kp-bar--placeholder {
  background-color: rgba(255, 255, 255, 0.1);
}

.kp-bar-time {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--color-gray-500);
  text-transform: lowercase;
}

/* Hide some time labels on smaller screens for cleaner look */
.kp-bar-group:nth-child(even) .kp-bar-time {
  opacity: 0.5;
}

.tool-data {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-5);
}

.data-point {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.data-label {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.data-value {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  font-family: 'JetBrains Mono', monospace;
}

.data-value--status {
  font-size: var(--text-sm);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
}

.data-value--badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background-color: var(--color-aurora-quiet);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  line-height: 1;
}

.tool-cta {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.tool-cta--disabled {
  color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   References Section
   -------------------------------------------------------------------------- */
.references-section {
  background-color: var(--color-gray-50);
}

.references-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .references-grid {
    grid-template-columns: 1fr;
  }
}

.reference-card {
  display: block;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.reference-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-gray-300);
}


.reference-card--coming {
  opacity: 0.6;
  pointer-events: none;
}

.reference-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-4);
}

.reference-icon .webgl-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.reference-category {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
}

.reference-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.reference-description {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

.reference-topics {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.reference-topics li {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  padding-left: var(--space-4);
  position: relative;
}

.reference-topics li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-gray-400);
}

.reference-cta {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.reference-cta--disabled {
  color: var(--color-gray-400);
}


/* --------------------------------------------------------------------------
   Quick Reference Section
   -------------------------------------------------------------------------- */
.quick-ref-section {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-100);
}

.quick-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.quick-ref-card {
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.quick-ref-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-200);
}

.quick-ref-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.quick-ref-settings .setting {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.quick-ref-settings .setting strong {
  color: var(--color-gray-500);
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Downloads Section
   -------------------------------------------------------------------------- */
.downloads-section {
  background-color: var(--color-gray-50);
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.download-card {
  display: flex;
  gap: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.download-card--coming {
  opacity: 0.6;
}

.download-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-100);
  border-radius: var(--radius-lg);
  color: var(--color-gray-500);
}

.download-icon svg {
  width: 24px;
  height: 24px;
}

.download-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.download-description {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-2);
}

.download-status {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   CTA Section
   -------------------------------------------------------------------------- */
.cta-section {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-100);
}

.cta-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
  background: linear-gradient(135deg, var(--color-gray-900), var(--color-black));
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
  color: var(--color-white);
}

@media (max-width: 768px) {
  .cta-card {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
    text-align: center;
  }
}

.cta-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.cta-description {
  font-size: var(--text-base);
  color: var(--color-gray-400);
  line-height: var(--leading-relaxed);
  max-width: 480px;
  margin-bottom: var(--space-6);
}

.cta-shortcut {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  font-family: 'JetBrains Mono', monospace;
}

.shortcut-label {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-left: var(--space-2);
}

.bookmark-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.bookmark-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  color: var(--color-white);
}

.bookmark-icon svg {
  width: 32px;
  height: 32px;
}

.bookmark-url {
  font-size: var(--text-sm);
  font-family: 'JetBrains Mono', monospace;
  color: var(--color-gray-400);
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
.home-hero .hero-eyebrow,
.home-hero .hero-title,
.home-hero .hero-description,
.home-hero .quick-links,
.tool-card,
.reference-card,
.quick-ref-card,
.download-card {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-hero .hero-eyebrow { animation-delay: 0ms; }
.home-hero .hero-title { animation-delay: 50ms; }
.home-hero .hero-description { animation-delay: 100ms; }
.home-hero .quick-links { animation-delay: 150ms; }
.tool-card:nth-child(1) { animation-delay: 150ms; }
.tool-card:nth-child(2) { animation-delay: 200ms; }
.tool-card:nth-child(3) { animation-delay: 250ms; }
.tool-card:nth-child(4) { animation-delay: 300ms; }
.tool-card:nth-child(5) { animation-delay: 350ms; }

.reference-card:nth-child(1) { animation-delay: 0ms; }
.reference-card:nth-child(2) { animation-delay: 50ms; }
.reference-card:nth-child(3) { animation-delay: 100ms; }
.reference-card:nth-child(4) { animation-delay: 150ms; }

.quick-ref-card { animation-delay: 0ms; }
.quick-ref-card:nth-child(1) { animation-delay: 0ms; }
.quick-ref-card:nth-child(2) { animation-delay: 30ms; }
.quick-ref-card:nth-child(3) { animation-delay: 60ms; }
.quick-ref-card:nth-child(4) { animation-delay: 90ms; }
.quick-ref-card:nth-child(5) { animation-delay: 120ms; }
.quick-ref-card:nth-child(6) { animation-delay: 150ms; }

/* Restore opacity for coming soon items */
.tool-card--coming,
.reference-card--coming,
.download-card--coming {
  animation: fadeInUpMuted 0.6s ease-out forwards;
}

@keyframes fadeInUpMuted {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.6;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Night Vision Mode — Homepage Specific
   -------------------------------------------------------------------------- */
body.night-vision.home-page {
  background-color: var(--nv-bg);
}

/* Home hero inherits .page-hero night vision styles from styles.css */

/* Sections in Night Vision */
body.night-vision .tools-section,
body.night-vision .quick-ref-section,
body.night-vision .cta-section {
  background-color: var(--nv-bg);
  border-top-color: var(--nv-border);
}

body.night-vision .references-section,
body.night-vision .downloads-section {
  background-color: var(--nv-bg-elevated);
}

/* Tool Cards in Night Vision */
body.night-vision .tool-card {
  background-color: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .tool-card:hover {
  box-shadow: 0 8px 32px rgba(100, 30, 30, 0.2);
}

body.night-vision .tool-card--featured {
  background: linear-gradient(145deg, var(--nv-bg-card), #200000);
  border: 1px solid var(--nv-border);
}

body.night-vision .tool-card--featured:hover {
  box-shadow: 
    0 20px 40px rgba(100, 30, 30, 0.3),
    0 0 0 1px rgba(204, 51, 51, 0.2);
}

body.night-vision .tool-title {
  color: var(--nv-text);
}

body.night-vision .tool-description {
  color: var(--nv-text-muted);
}

body.night-vision .tool-card--featured .tool-description {
  color: var(--nv-text-dim);
}

body.night-vision .status-dot--live {
  background-color: var(--nv-text);
}

body.night-vision .status-text {
  color: var(--nv-text);
}

body.night-vision .tool-badge {
  background-color: rgba(204, 51, 51, 0.2);
  color: var(--nv-text-muted);
}

body.night-vision .tool-data {
  border-top-color: var(--nv-border);
  border-bottom-color: var(--nv-border);
}

body.night-vision .data-label {
  color: var(--nv-text-dim);
}

body.night-vision .data-value {
  color: var(--nv-text);
}

body.night-vision .tool-cta {
  color: var(--nv-text-muted);
}

body.night-vision .tool-icon {
  color: var(--nv-text-dim);
}

body.night-vision .tool-card--featured .tool-icon {
  color: var(--nv-text-muted);
}

/* Reference Cards in Night Vision */
body.night-vision .reference-card {
  background-color: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .reference-card:hover {
  border-color: var(--nv-text-dim);
  box-shadow: 0 8px 32px rgba(100, 30, 30, 0.2);
}

body.night-vision .reference-category {
  color: var(--nv-text-dim);
}

body.night-vision .reference-title {
  color: var(--nv-text);
}

body.night-vision .reference-description {
  color: var(--nv-text-muted);
}

body.night-vision .reference-topics li {
  color: var(--nv-text-dim);
}

body.night-vision .reference-topics li::before {
  color: var(--nv-text-dim);
}

body.night-vision .reference-cta {
  color: var(--nv-text);
}

/* Quick Reference Cards in Night Vision */
body.night-vision .quick-ref-card {
  background-color: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .quick-ref-title {
  color: var(--nv-text);
  border-bottom-color: var(--nv-border);
}

body.night-vision .quick-ref-settings .setting {
  color: var(--nv-text-muted);
}

body.night-vision .quick-ref-settings .setting strong {
  color: var(--nv-text-dim);
}

/* Download Cards in Night Vision */
body.night-vision .download-card {
  background-color: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .download-icon {
  background-color: var(--nv-bg-elevated);
  color: var(--nv-text-dim);
}

body.night-vision .download-title {
  color: var(--nv-text);
}

body.night-vision .download-description {
  color: var(--nv-text-muted);
}

body.night-vision .download-status {
  color: var(--nv-text-dim);
}

/* CTA Section in Night Vision */
body.night-vision .cta-card {
  background: linear-gradient(135deg, var(--nv-bg-card), #200000);
  border: 1px solid var(--nv-border);
}

body.night-vision .cta-title {
  color: var(--nv-text);
}

body.night-vision .cta-description {
  color: var(--nv-text-muted);
}

body.night-vision .shortcut-key {
  background-color: rgba(204, 51, 51, 0.2);
  border-color: var(--nv-border);
  color: var(--nv-text);
}

body.night-vision .shortcut-label {
  color: var(--nv-text-dim);
}

body.night-vision .bookmark-icon {
  background-color: rgba(204, 51, 51, 0.2);
  color: var(--nv-text);
}

body.night-vision .bookmark-url {
  color: var(--nv-text-muted);
}

/* Kp Forecast Chart in Night Vision */
body.night-vision .kp-chart-label {
  color: var(--nv-text-dim);
}

body.night-vision .kp-bar {
  background-color: var(--nv-text);
}

body.night-vision .kp-bar--placeholder {
  background-color: rgba(204, 51, 51, 0.2);
}

body.night-vision .kp-bar-value {
  color: var(--nv-text-muted);
}

body.night-vision .kp-bar-time {
  color: var(--nv-text-dim);
}

body.night-vision .data-value--badge {
  background-color: var(--nv-text);
  color: var(--nv-bg);
}