/* =========================================
   1. THEME DEFINITIONS
   ================================********* */

/* --- Default (Light) Theme --- */
:root {
  --color-primary: #191919;
  --color-secondary: #383838;
  --color-muted: #868686;
  --color-bg-main: #EFEFEF;
  --color-bg-secondary: #FCFCFC;
  --color-border: #CFCFCF;
  --color-overlay-text: #EFEFEF;
  --color-glass-text: #191919;
}

/* --- System Dark Theme (Automatic) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #ffffff;
    --color-secondary: #e0e0e0;
    --color-muted: #a0a0a0;
    --color-bg-main: #1D1D1D;
    --color-bg-secondary: #1e1e1e;
    --color-border: #333333;
  }
}

/* --- Manual Overrides (Added by JS) --- */
[data-theme="dark"] {
  --color-primary: #ffffff;
  --color-secondary: #e0e0e0;
  --color-muted: #a0a0a0;
  --color-bg-main: #1D1D1D;
  --color-bg-secondary: #262626;
  --color-border: #333333;
}

[data-theme="light"] {
  --color-primary: #191919;
  --color-secondary: #383838;
  --color-muted: #868686;
  --color-bg-main: #EFEFEF;
  --color-bg-secondary: #F4F4F4;
  --color-border: #CFCFCF;
}

/* =========================================
   2. GLOBAL STYLES
   ================================********* */
html, body {
  width: 100%;
  /* Fallback for ancient browsers */
  overflow-x: hidden;
  overflow-x: clip; 
}

html {
  scroll-behavior: smooth;
  height: 100%;
  scrollbar-gutter: stable;
  background-color: var(--color-bg-main);
  overscroll-behavior-y: none;

  /* UX FIX: Ensures anchor links don't get hidden behind the fixed header.
     120px is a safe bet (Header height + breathing room). */
  scroll-padding-top: 80px;
}

body {
  background-color: var(--color-bg-main);
  color: var(--color-secondary);
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: -0.02rem;
}

/* =========================================
   HYPERLINKS
   ========================================= */

a {
  /* 1. Unvisited: High Contrast */
  color: var(--color-primary); 
  font-weight: 500; /* Slightly heavier than body text */
  
  /* 2. The Line: Subtle & Architectural */
  text-decoration: underline;
  text-decoration-color: var(--color-border); 
  text-underline-offset: 5px; /* Gives the text breathing room */
  
  transition: all 0.2s ease;
}

/* Hover: The interaction reinforces the link */
a:hover {
  text-decoration-color: var(--color-primary); /* Line turns solid/dark */
  /* background-color: var(--color-bg-secondary); /* Subtle "highlight" effect behind text */
}

/* Visited: Recedes back into the content flow */
a:visited {
  color: var(--color-secondary); /* Drops back to body text color */
  text-decoration-color: var(--color-border); /* Line stays subtle */
}

/* =========================================
   THEME ADAPTIVE IMAGES (Universal Fix)
   ================================********* */

/* 1. BASE STATE: Default to Light Mode */
.theme-img-light { display: block; }
.theme-img-dark  { display: none; }


/* 2. SYSTEM DARK MODE (Automatic) */
/* Only runs if the user has NOT manually set "Light" */
@media (prefers-color-scheme: dark) {
  /* Hide Light / Show Dark */
  :root:not([data-theme="light"]) .theme-img-light { display: none; }
  :root:not([data-theme="light"]) .theme-img-dark  { display: block; }
}


/* 3. MANUAL DARK OVERRIDE (User Clicked Toggle) */
/* Force Dark image, ignoring system prefs */
[data-theme="dark"] .theme-img-light { display: none !important; }
[data-theme="dark"] .theme-img-dark  { display: block !important; }


/* 4. MANUAL LIGHT OVERRIDE (User Clicked Toggle) */
/* Force Light image, ignoring system prefs */
[data-theme="light"] .theme-img-light { display: block !important; }
[data-theme="light"] .theme-img-dark  { display: none !important; }

/* =========================================
   PREMIUM SELECTION (Branding)
   ================================********* */
::selection {
  background: var(--color-secondary); /* Dark Grey background */
  color: var(--color-bg-main);        /* Light text */
}

/* For WebKit browsers (Chrome/Safari) specifically if needed, 
   though standard ::selection covers most modern ones now. */
::-moz-selection {
  background: var(--color-secondary);
  color: var(--color-bg-main);
}

/* =========================================
   SUPER-WIDE MONITOR FIX (Global)
   ================================********* */
.content-wrapper,
.container {
  /* 1. The Cap: Stop growing at 1800px */
  max-width: 1800px;
  
  /* 2. Center the block */
  margin-left: auto;
  margin-right: auto;
  
  /* 3. Safety Padding: Keep your 1rem alignment */
  padding-left: 1rem;
  padding-right: 1rem;
  
  width: 100%;
  box-sizing: border-box;
}

main {
  flex-grow: 1;
  width: 100%;
}

/* =========================================
   3. TYPOGRAPHY
   ================================********* */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
}

h1 {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 3.8rem;
  letter-spacing: -0.1rem;
  line-height: 4.1rem;
}

h2 {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 3.2rem;
  letter-spacing: -0.1rem;
  line-height: 3.8rem;
}

h3 {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 2.5rem;
  letter-spacing: -0.08rem;
}

h4 {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.8rem;
  letter-spacing: -0.05rem;
}

h5 {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: -0.02rem;
}

p, ul, figcaption {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: -0.02rem;
}

b { font-weight: 600; }

ul {
  list-style-type: square;
  padding-left: 1.5rem;
}

ul li { padding: 0.5rem 0; }

figcaption { padding: 0.5rem 0 1rem 0; }

.lowlight-text { color: var(--color-muted); }

/* =========================================
   4. HERO SECTIONS
   ================================********* */
/* Base Hero Style (Used on About Page) */
.hero-header {
  max-width: 80vw;
  padding-top: 12vh;
}

.hero-header h1 {
  font-size: clamp(2.3rem, 1.5rem + 2vw, 4rem); /*used to be 5rem top value*/
  line-height: 1.2;
}

.hero-header h2 {
  font-size: clamp(2.1rem, 1.2rem + 2vw, 4rem); /*used to be 5rem top value*/
  line-height: 1.2;
}

/* Full Screen Modifier (For Index Page) */
.hero-full-screen {
  min-height: 100svh; 
  position: relative; 
  padding-bottom: 8rem; 
  box-sizing: border-box; 
}

/* =========================================
   5. PROJECT GRID & CARDS
   ================================********* */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(38rem, 100%), 1fr));
  gap: 1.5rem;
}

.project-link {
  text-decoration: none;
  color: inherit;
  display: block;

  /* MODERN UPGRADE: Enable Container Queries */
  /* This creates a "size context" on the link wrapper. */
  container-type: inline-size;
  container-name: project-card;
}

.project-card {
  overflow: visible; 
}

.project-card img,
.project-card iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  display: block;
}

.project-grid figure { margin: 0; }

#work_section {
  gap: 1rem;
  row-gap: 2rem;
}

/* =========================================
   6. VIDEO FACADE
   ================================********* */
.video-facade {
  position: relative;
  line-height: 0;
  overflow: hidden; 
}

.video-facade .video-poster {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-facade video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease-out,
              transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover Effects */
.project-link:hover .video-poster,
.project-link:hover .video-facade video {
  transform: scale(1.05);
}

.video-facade video.is-loaded {
  opacity: 1;
}

.project-card figcaption {
  position: static;
  z-index: auto;
  padding: 1rem 0;
}

/* =========================================
   7. TABLE STYLES
   ================================********* */

/* Default (Desktop): Hide the short letter, Show full text */
.th-short {
  display: none;
}
.th-full {
  display: inline;
}

table, th, td {
  border: 1px solid var(--color-secondary);
  border-collapse: collapse;
  width: 100%;
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1.1rem;
  letter-spacing: -0.02rem;
}

th, td {
  padding: 1rem;
  width: 20%;
  text-align: center;
}

.first-table-column { text-align: left; }
.first-table-row { font-weight: 500; }
tr:nth-child(even) { background-color: var(--color-bg-secondary); }

/* =========================================
   8. SCROLL INDICATOR (Layout & Interaction)
   ================================********* */
.scroll-line-wrapper {
  position: absolute;
  bottom: 2rem; 
  z-index: 20;
  width: 40px; 
  height: 80px; 
  display: flex;
  align-items: center;
  justify-content: center;

  left: max(0px, calc(50% - 900px));
  
  /* 1. START HIDDEN (Waiting for JS Delay) */
  opacity: 0; 
  transform: translateY(-20px);
  
  /* 2. Interaction: Smooth fade for entrance and scrolling */
  transition: opacity 0.6s ease, transform 0.6s ease;
  
  pointer-events: auto; 
  cursor: pointer;
}

/* --- VISIBLE STATE (Triggered by JS after delay) --- */
.scroll-line-wrapper.is-fully-loaded {
  opacity: 1;
  transform: translateY(0);
}

.scroll-line-wrapper a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* The Mask (Holds the shape) */
.scroll-mask {
  width: 4px; 
  height: 48px; 
  border-radius: 4px;
  overflow: hidden; 
  position: relative;
}

/* Layer 1: The Faint Track */
.scroll-line-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
  opacity: 0.2; 
}

/* Layer 2: The Pulse (Layout) */
.scroll-line-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom, 
    rgba(255, 255, 255, 0) 0%, 
    var(--color-primary) 75%
  );
  opacity: 1; 
  transform: translateY(-100%);
}

/* --- Ghost Behavior (Applied by JS on Scroll) --- */
/* Override .is-fully-loaded to hide it when scrolling */
.scroll-line-wrapper.is-hidden {
  opacity: 0;
  transform: translateY(15px); /* Gentle drift down */
  pointer-events: none;
}

/* Hover Effect */
.scroll-line-wrapper:hover .scroll-line-track {
  opacity: 0.4;
}

/* =========================================
   9. PERFORMANCE OPTIMIZATIONS (Lazy Rendering)
   ================================********* */

/* 1. Heavy Media Elements (Cards & Videos) 
   We skip rendering these until they approach the viewport. */
.project-card,
.ba-slider {
  content-visibility: auto;
  
  /* CRITICAL: We must give the browser a rough estimate of the height
     so the scrollbar doesn't "jump" or jitter as you scroll down.
     ~500px is a safe guess for your project cards. */
  contain-intrinsic-size: 500px; 
}

/* 2. The Footer 
   It's always off-screen on load. No need to paint it immediately. */
.site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 300px; /* Rough estimate of footer height */
}

/* 3. The Marquee (About Page)
   This is very computationally heavy (infinite animation).
   Pausing it when off-screen saves massive CPU/Battery. */
.marquee-container {
  content-visibility: auto;
  contain-intrinsic-size: 400px;
}


/* =========================================
   10. MEDIA QUERIES (Mobile Logic)
   ================================********* */

/* General Mobile Layout */
@media (max-width: 768px) {
  .hero-header {
    max-width: 100%;
    padding-top: 120px; 
  }
}

/* HIDE Logic: Short Screens (Landscape / iPhone SE) */
/* Hide if short (<720px) AND narrow (<768px) */
@media (max-height: 720px) and (max-width: 768px) {
  .scroll-line-wrapper {
    display: none !important; 
  }

  .hero-full-screen {
    min-height: auto; 
    padding-bottom: 4rem; 
    padding-top: 100px; 
  }
}

/* SAFE Logic: Tall Mobiles */
/* Show but protect if tall (>720px) AND narrow (<768px) */
@media (min-height: 721px) and (max-width: 768px) {
  .hero-full-screen {
    padding-bottom: 12rem; 
  }
}

/* Table row */
@media (max-width: 568px) {
  /* 1. The Switch: Hide full name, Show first letter */
  .th-full {
    display: none;
  }
  .th-short {
    display: inline;
  }
}

/* =========================================
   LARGE MONITOR FIX (The "Peek" Strategy)
   ================================********* */

/* Target screens that are TALL (e.g. 27" Monitors) and WIDE (Desktop) */
@media (min-height: 1000px) and (min-width: 1024px) {
  .hero-full-screen {
    /* 1. Stop forcing full height */
    min-height: auto; 
    
    /* 2. Cap the height comfortably so content pulls up.
       900px is generous enough to frame the text, but short 
       enough to reveal the work section below on a 1440p+ screen. */
    height: 900px; 
    
    /* Adjust padding if necessary to keep text centered visually */
    padding-bottom: 4rem; 
  }

  .scroll-line-wrapper {
    display: none !important;
  }
}