:root {
  --mint: #A0E8AF;
  --teal: #4CB5AE;
  --dark: #333333;
  --cream: #FFF5E1;
}

html { 
  background-color: var(--dark); 
  scroll-behavior: smooth;
}

body { 
  font-family: 'Roboto', sans-serif; 
  margin: 0; 
  padding: 0; 
  padding-top: 4rem; 
  background-color: var(--dark); 
  color: var(--cream);
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M1 1l14 7-14 7V1z' fill='#333333' stroke='#D4F2D4' stroke-width='1'/></svg>"), auto;
}

/* Custom Selection Color */
::selection {
  background: var(--mint);
  color: var(--dark);
}

/* Hover Cursor */
a, button, .cursor-pointer, .btn-shine {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M18 10.5V6a2 2 0 00-2-2h-3.5L10 2.5 8.5 4H5a2 2 0 00-2 2v4.5A2.5 2.5 0 005.5 13h13a2.5 2.5 0 00-2.5-2.5z' fill='#FFF5E1' stroke='#333333' stroke-width='1'/><path d='M18 10.5V6a2 2 0 00-2-2h-3.5L10 2.5 8.5 4H5a2 2 0 00-2 2v4.5A2.5 2.5 0 005.5 13h13a2.5 2.5 0 00-2.5-2.5z' fill='none' stroke='#333333' stroke-width='1' /></svg>"), pointer;
}

h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

/* --- GLOBAL HEADER STYLES --- */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
  transition: all 0.3s ease;
  background-color: var(--mint); 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#mobile-menu-button { color: var(--dark); }

.nav-link {
  color: var(--dark);
  font-weight: 600;
  transition: color 0.2s;
}
.nav-link:hover { color: #fff; }

header.glass {
  background-color: rgba(160, 232, 175, 0.90);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- EFFECT 1: ANIMATED FILM GRAIN --- */
#grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0.05; 
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(#n)" opacity="0.35"/></svg>');
  background-size: 500px 500px;
  animation: grain-fizz 8s steps(10) infinite;
}

@keyframes grain-fizz {
  0%, 100% { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: -5% 25%; }
  50% { background-position: -15% 10%; }
  60% { background-position: 15% 0%; }
  70% { background-position: 0% 15%; }
  80% { background-position: 3% 35%; }
  90% { background-position: -10% 10%; }
}

/* --- SCROLL PROGRESS --- */
#scroll-progress { 
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 3px; 
  width: 0; 
  background: linear-gradient(90deg, var(--mint), var(--teal)); 
  z-index: 60; 
}

/* --- VIDEO PLAYER CSS (Living Grid Updates) --- */
.video-container { 
  position: relative; 
  overflow: hidden; 
  border-radius: 0.75rem; 
  background: #000; 
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); 
  aspect-ratio: 16 / 9;
  transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
}

/* Hover Effect for Living Grid */
.video-container:hover {
  transform: scale(1.03);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  z-index: 10;
}

video { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

video::-webkit-media-controls { display: none !important; }

.controls {
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  padding: 15px; 
  display: flex; 
  align-items: center; 
  gap: 10px;
  opacity: 0; 
  transition: opacity 0.3s; 
  z-index: 20;
}

.video-container:hover .controls, .video-container.paused .controls { opacity: 1; }

.btn-icon { 
  background: none; 
  border: none; 
  color: var(--mint); 
  padding: 0; 
}
.btn-icon:hover { color: #fff; }
.btn-icon svg { width: 24px; height: 24px; fill: currentColor; }

.center-play {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  background: var(--mint); 
  color: var(--dark);
  width: 60px; 
  height: 60px; 
  border-radius: 50%;
  display: flex; 
  align-items: center; 
  justify-content: center;
  opacity: 0.9; 
  transition: all 0.3s; 
  box-shadow: 0 0 20px rgba(160, 232, 175, 0.4); 
  z-index: 10;
}

.center-play:hover { 
  transform: translate(-50%, -50%) scale(1.1); 
  opacity: 1; 
}

/* Hide center button when playing (or hovering in Living Grid) */
.video-container.playing .center-play { display: none; }

input[type=range] { 
  -webkit-appearance: none; 
  appearance: none;
  background: transparent; 
  flex-grow: 1; 
}

input[type=range]::-webkit-slider-runnable-track { 
  height: 4px; 
  background: rgba(255,255,255,0.3); 
  border-radius: 2px; 
}

input[type=range]::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  height: 12px; 
  width: 12px; 
  border-radius: 50%; 
  background: var(--mint); 
  margin-top: -4px; 
}

/* --- ANIMATIONS --- */
.fade-in-section { 
  opacity: 0; 
  transform: translateY(20px); 
  transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }

.accent-line { 
  width: 6rem; 
  height: .25rem; 
  border-radius: 9999px; 
  background-color: var(--teal); 
}

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: ""; 
  position: absolute; 
  top: -50%; 
  left: -30%; 
  width: 40%; 
  height: 200%;
  transform: rotate(25deg); 
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transition: transform .6s ease, opacity .6s ease; 
  opacity: 0;
}
.btn-shine:hover::before { transform: translateX(300%) rotate(25deg); opacity: 1; }

#to-top.show { opacity: 1; pointer-events: auto; }

/* --- STAGGERED GRID ANIMATION --- */
.fade-in-section.is-visible .project-card:nth-child(1) { transition-delay: 100ms; }
.fade-in-section.is-visible .project-card:nth-child(2) { transition-delay: 200ms; }
.fade-in-section.is-visible .project-card:nth-child(3) { transition-delay: 300ms; }
.fade-in-section.is-visible .project-card:nth-child(4) { transition-delay: 400ms; }
.fade-in-section.is-visible .project-card:nth-child(5) { transition-delay: 500ms; }
.fade-in-section.is-visible .project-card:nth-child(6) { transition-delay: 600ms; }

/* --- LOGO MARQUEE (Seamless) --- */
.logo-track {
  display: flex;
  width: max-content;
  animation: scroll-logos 40s linear infinite; 
}

.logo-set {
  display: flex;
  align-items: center;
  gap: 4rem; 
  padding-right: 4rem; 
}

.client-logo {
  height: 1.8rem; 
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(0); 
  opacity: 0.5; 
  transition: all 0.3s ease;
}

/* Hover Effect */
.logo-track:hover .client-logo {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

.logo-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}