/* ========================================
   ILLUUGRAPHY — Kinetic Brutalism
   Awwwards Style Overhaul
   ======================================== */

/* ── Variables ── */
:root {
  --bg-color: #000000; /* Dark Background */
  --text-color: #F8FAFC; /* Text on Dark */
  --accent-color: #16A34A; /* Primary Green */
  --accent-light: #22C55E; /* Secondary Emerald */
  --accent-blue: #00A3FF; /* Sky Blue */
  
  --font-sans: 'Outfit', sans-serif;
  --font-serif: 'Instrument Serif', serif;
  --font-body: 'Outfit', sans-serif;
  
  --padding-x: clamp(20px, 5vw, 60px);
}

/* ── Reset & Base ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

#webgl-canvas {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -10; pointer-events: none;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-body);
  cursor: none; /* Hide default cursor */
}

/* ── Ultra-Advanced WebGL & DOM Cursor ── */
.custom-cursor {
  width: 10px; height: 10px; background-color: var(--accent-color);
  border-radius: 50%; position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 10000; mix-blend-mode: difference;
  transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.cursor-follower {
  width: 50px; height: 50px; 
  border-radius: 50%; position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%); 
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  transition-timing-function: ease-out; opacity: 1;
  /* Chromatic Aberration RGB Split Effect */
  box-shadow: 
    -3px 0 10px rgba(255, 0, 0, 0.5), 
    3px 0 10px rgba(0, 255, 255, 0.5),
    0 0 20px var(--accent-color);
  border: 1px solid rgba(255, 255, 255, 0.2);
  mix-blend-mode: screen;
}
.custom-cursor.hover { width: 80px; height: 80px; background-color: var(--text-color); mix-blend-mode: exclusion; }
.cursor-follower.hover { opacity: 0; width: 0; height: 0; }

/* ── WebGL Cursor Overlay ── */
#cursor-webgl {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9998;
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}

/* ── Ambient Noise Overlay ── */
.noise-overlay {
  position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 9997; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  animation: noise-anim 0.2s infinite;
}
@keyframes noise-anim {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-10%, 5%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 10%); }
  80% { transform: translate(-15%, 0); }
  90% { transform: translate(10%, 5%); }
  100% { transform: translate(5%, 0); }
}

/* ── Interactive Image Trail ── */
#image-trail-container {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 100;
  overflow: hidden;
}
.trail-img {
  position: absolute;
  width: clamp(100px, 15vw, 200px);
  height: clamp(150px, 22vw, 300px);
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
}

/* ── Falling Tools Background ── */
#falling-tools-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.falling-tool-icon {
  position: absolute;
  width: clamp(30px, 4vw, 70px); /* Clean, professional scale */
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  /* Ultra-subtle Premium Tech Watermark */
  filter: invert(100%) opacity(0.12);
}

#smooth-wrapper { overflow: hidden; width: 100vw; }

/* Lenis smooth scrolling base */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── Massive Digit Preloader ── */
.preloader {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  background-color: var(--bg-color); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-color); font-family: var(--font-sans);
}
.preloader-counter { font-size: 20vw; font-weight: 700; line-height: 1; letter-spacing: -0.05em; }

/* ── WebGL Canvas ── */
#webgl-canvas {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -5; pointer-events: none;
}

/* ── WebGL Canvas, Backgrounds & Noise ── */
.himalayas-bg {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  object-fit: cover;
  opacity: 0.15; filter: grayscale(100%);
  z-index: -4;
}

.bg-halftone {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  background-image: url("file:///Users/panthaashim/.gemini/antigravity-ide/brain/tempmediaStorage/media__1780895435231.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  opacity: 0.15;
  mix-blend-mode: screen;
  z-index: -4;
  pointer-events: none;
}

#gl-canvas {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: -2; pointer-events: none;
  opacity: 0.9;
  background: radial-gradient(circle at 15% 50%, rgba(204, 255, 0, 0.15), transparent 50%),
              radial-gradient(circle at 85% 30%, rgba(204, 255, 0, 0.1), transparent 50%),
              radial-gradient(circle at 50% 80%, rgba(204, 255, 0, 0.05), transparent 50%);
  background-size: 200% 200%;
  animation: meshFlow 20s ease-in-out infinite alternate;
}

@keyframes meshFlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 100%; }
}
.noise-overlay {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* ── Architectural Hairline Grid with + Crosshairs ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L50 100M0 50L100 50' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1'/%3E%3Cpath d='M46 50h9M50 46v9' stroke='rgba(255,255,255,0.2)' stroke-width='1'/%3E%3C/svg%3E");
  background-position: -50px -50px;
}

/* ── Custom Cursor ── */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 20px; height: 20px;
  background-color: var(--accent-color);
  border-radius: 50%;
  pointer-events: none; z-index: 10000;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  display: flex; justify-content: center; align-items: center;
  transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1), height 0.4s cubic-bezier(0.76, 0, 0.24, 1), background-color 0.4s cubic-bezier(0.76, 0, 0.24, 1), border-radius 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.cursor.active {
  width: 120px; height: 120px;
  background-color: #fff;
  mix-blend-mode: normal;
}
.cursor.magnet {
  background-color: transparent;
  border: 2px solid rgba(255,255,255,0.5);
  mix-blend-mode: normal;
}
.cursor-text {
  font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  color: #000; opacity: 0; transition: opacity 0.3s;
  transform: translate(-50%, -50%) scale(4);
  mix-blend-mode: difference;
}

/* ── Navigation (Brutalist) ── */
.nav-brutalist {
  position: fixed; top: 0; left: 0; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 30px var(--padding-x);
  z-index: 10000;
  background: rgba(17, 17, 18, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-logo { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; cursor: pointer; color: var(--text-color); }
.nav-right { display: flex; gap: 40px; }
.nav-right a { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; text-transform: uppercase; opacity: 0.8; transition: opacity 0.3s; cursor: pointer; color: var(--text-color); text-decoration: none; }
.nav-right a:hover { opacity: 1; }

/* Rolling Nav Links */
.nav-rolling-link {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.1;
  vertical-align: bottom;
}
.nav-rolling-text {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.nav-rolling-text::after {
  content: attr(data-text);
  position: absolute;
  top: 100%; left: 0;
  transform-origin: top;
  color: var(--accent-color);
}
.nav-rolling-link:hover .nav-rolling-text { transform: translateY(-100%); }

/* ── Typography Utilities ── */
.text-gradient-green {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-color) 50%, #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradientText 6s linear infinite;
}

@keyframes gradientText {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.creative-slide-bg {
  background: radial-gradient(circle at top left, rgba(0, 163, 255, 0.15) 0%, transparent 50%),
              radial-gradient(circle at bottom right, rgba(210, 255, 0, 0.15) 0%, var(--bg-color) 70%);
}

.creative-slide-gradient {
  background: linear-gradient(135deg, var(--bg-color) 0%, rgba(0, 163, 255, 0.1) 50%, var(--bg-color) 100%);
}

.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent-color); }
.highlight { color: var(--accent-color); }
.hollow-text { 
  -webkit-text-stroke: 4px var(--accent-color); 
  color: transparent; 
  opacity: 0.8;
  mix-blend-mode: normal; 
}
.hollow-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 3px var(--accent-color);
  opacity: 1;
  letter-spacing: -0.02em;
  mix-blend-mode: normal;
  text-shadow: 0 0 1px rgba(204, 255, 0, 0.5); /* Failsafe visibility */
}

/* ── Hero Section ── */
.hero-brutalist {
  min-height: 100vh; padding: 150px var(--padding-x) 80px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  position: relative;
  overflow: hidden;
}
.hero-objects {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.floating-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: floatOrb 12s ease-in-out infinite alternate;
}
.orb-1 {
  width: 50vw; height: 50vw;
  background: var(--accent-blue);
  top: -10%; right: -10%;
}
.orb-2 {
  width: 40vw; height: 40vw;
  background: var(--accent-color);
  bottom: -20%; left: -10%;
  animation-delay: -6s;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-80px, 80px) scale(1.1); }
}

.wireframe-shape {
  position: absolute;
  right: 15%;
  top: 30%;
  width: 40vw;
  height: 40vw;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation: morphShape 20s linear infinite;
}
@keyframes morphShape {
  0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg); }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg); }
}

.hero-top-bar {
  display: flex; justify-content: space-between; align-items: flex-start; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 20px;
}

.hero-subtext {
  font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.1em;
  text-transform: uppercase; max-width: 400px; opacity: 0.7;
}
.hero-subtext.right { text-align: right; }

.hero-title-wrap { margin-top: 10px; z-index: 2; position: relative; pointer-events: none; }
.hero-title {
  font-family: var(--font-sans);
  font-weight: 800; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px;
}
.hero-title .line-1 { font-size: clamp(4rem, 8vw, 8rem); display: block; line-height: 1; pointer-events: auto; letter-spacing: 0.05em; }
.hero-title .line-2 { font-family: var(--font-sans); font-size: clamp(7rem, 18vw, 22rem); font-weight: 900; line-height: 0.85; z-index: 2; position: relative; display: block; pointer-events: auto; word-break: break-word; color: var(--accent-color); letter-spacing: -0.02em; } 
.hero-title .line-3 { font-size: clamp(4rem, 8vw, 8rem); display: block; line-height: 1; pointer-events: auto; letter-spacing: 0.05em; }

@keyframes slideUpFade {
  to { opacity: 1; transform: translateY(0); }
}

.interactive-text:hover {
  -webkit-text-stroke: 4px var(--text-color);
  transform: scale(1.02) skewX(-2deg);
}

.hero-bottom { max-width: 600px; margin-top: 20px; z-index: 2; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; margin-left: auto; margin-right: auto; }
.hero-desc { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.5rem); line-height: 1.5; font-weight: 400; opacity: 0.9; }

/* ── Massive Swipe / Scroll Indicator ── */
.swipe-indicator {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; cursor: pointer; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto;
}
.swipe-indicator-text {
  font-family: var(--font-sans); font-size: clamp(2rem, 5vw, 4rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-color); opacity: 0.9;
}
.swipe-indicator-line {
  width: 0; height: 6px; background: var(--accent-blue); animation: swipeLine 2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
@keyframes swipeLine {
  0% { width: 0; opacity: 1; }
  50% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}

/* ── Infinite Marquee ── */
.marquee-section { padding: 50px 0; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); background: var(--accent-color); color: var(--bg-color); overflow: hidden; }
.marquee { display: flex; white-space: nowrap; }
.marquee-track { display: flex; gap: 50px; font-family: var(--font-sans); font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; text-transform: uppercase; }
.marquee-track .dot { color: var(--bg-color); font-size: 0.5em; vertical-align: middle; }

/* ── Utility Themes ── */
.bg-dark { background-color: var(--bg-color); }
.bg-dark-alt { background-color: #111; }
.bg-light { background-color: #f0f0f0; }
.bg-accent { background-color: var(--accent-color); }
.text-light { color: #f0f0f0; }
.text-dark { color: #050505; }
.text-center { text-align: center; }

.bg-light .serif-italic { color: var(--accent-color) !important; }
.bg-light .highlight { color: var(--accent-color) !important; }

/* ── Editorial Storytelling (Vision - Horizontal Scroll) ── */
.horizontal-scroll-wrapper { width: 100%; height: 100vh; overflow: hidden; position: relative; z-index: 2; }
.vision-story-container { display: flex; flex-direction: row; width: max-content; height: 100vh; will-change: transform; }
.story-block { 
  width: 100vw; height: 100vh; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 100px var(--padding-x); 
  position: relative; overflow: hidden;
}
.story-content { 
  position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; 
}


.story-content.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story-content.centered { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

/* Massive Clean Typography */
.editorial-text { 
  font-family: var(--font-sans); font-size: clamp(3rem, 10vw, 12rem); font-weight: 900; line-height: 0.95; 
  text-transform: uppercase; margin: 0; white-space: normal; overflow-wrap: break-word; word-break: break-word; 
  position: relative; z-index: 2; letter-spacing: -0.03em; color: var(--text-color);
}
.bg-light .editorial-text { 
  color: var(--bg-color);
}

/* Hollow Text Effect */
.outline-text {
  color: transparent !important;
  -webkit-text-stroke: 2px var(--text-color);
}
.bg-light .outline-text {
  -webkit-text-stroke: 2px var(--bg-color);
}
.bg-accent .outline-text {
  -webkit-text-stroke: 2px #000000;
}

/* Scroll Fill Text Effect */
.scroll-fill-text {
  background: linear-gradient(to right, var(--text-color) 50%, rgba(255,255,255,0.1) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bg-light .scroll-fill-text {
  background: linear-gradient(to right, var(--bg-color) 50%, rgba(0,0,0,0.1) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glassmorphism Slide Card */
.slide-glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 4vw;
  transform: translateY(100px) rotateX(10deg);
  opacity: 0;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.editorial-text .huge { font-size: clamp(3.5rem, 12vw, 15rem); line-height: 0.8; }
.editorial-p { font-family: var(--font-body); font-size: clamp(1.2rem, 2vw, 2.5rem); line-height: 1.3; font-weight: 400; color: rgba(255,255,255,0.8); }
.bg-light .editorial-p { color: rgba(0,0,0,0.8); }

/* Branding Cards Hover Effect (Slide 10) */
.branding-cards-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; 
  width: 100%; max-width: 1400px; padding: 0 40px;
}
@media (max-width: 1024px) {
  .branding-cards-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .branding-cards-container { grid-template-columns: 1fr; }
}
.branding-card {
  background: var(--text-color); color: var(--bg-color);
  padding: 40px; border-radius: 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease;
  display: flex; flex-direction: column; justify-content: flex-end;
  height: 350px;
}
.branding-card h3 { font-family: var(--font-sans); font-size: 2rem; margin-bottom: 20px; font-weight: 900; }
.branding-card p { font-size: 1.2rem; line-height: 1.4; opacity: 0.8; }
.branding-card:hover { transform: translateY(-20px) scale(1.02); background: var(--accent-color); color: var(--dark-color); }

@keyframes grid-move {
  0% { transform: rotateX(60deg) translateY(0px) translateZ(-200px); }
  100% { transform: rotateX(60deg) translateY(50px) translateZ(-200px); }
}

/* ── Block 11 & 12 Effects ── */
.rotating-text-circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 90vh; height: 90vh;
  animation: rotate-circle 20s linear infinite;
  opacity: 0.15;
}
@keyframes rotate-circle { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.ticker-tape {
  width: 100%; height: auto; padding: 30px 0;
  display: flex; white-space: nowrap; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.ticker-content {
  display: inline-flex; animation: ticker-scroll 20s linear infinite;
}
.ticker-content.reverse { animation-direction: reverse; }
.ticker-content span {
  font-family: var(--font-sans); font-size: clamp(3rem, 5vw, 6rem); font-weight: 900;
  padding-right: 50px; text-transform: uppercase; line-height: 1;
}
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }

/* Masking Utilities for Text Reveal */
.mask-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mask-text { display: inline-block; transform: translateY(0%); }

/* ── Block 14: 3D Tunnel ── */
.tunnel-container {
  position: relative; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
}
.tunnel-ring {
  position: absolute;
  font-family: var(--font-sans); font-size: 20vw; font-weight: 900;
  color: transparent; -webkit-text-stroke: 4px var(--accent-color);
  opacity: 0;
  animation: tunnel-fly 5s infinite linear;
}
.tunnel-ring.r1 { animation-delay: 0s; }
.tunnel-ring.r2 { animation-delay: -1s; }
.tunnel-ring.r3 { animation-delay: -2s; }
.tunnel-ring.r4 { animation-delay: -3s; }
.tunnel-ring.r5 { animation-delay: -4s; }

@keyframes tunnel-fly {
  0% { transform: translateZ(-2000px) rotate(15deg); opacity: 0; }
  10% { opacity: 0.1; }
  50% { opacity: 1; }
  100% { transform: translateZ(800px) rotate(-15deg); opacity: 0; }
}

/* ── Block 15: Glitch Text ── */
.glitch-container {
  position: relative;
  font-family: var(--font-sans); font-size: 18vw; font-weight: 900;
  color: var(--text-color);
  line-height: 1; letter-spacing: -0.05em;
}
.glitch-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-layer:nth-child(1) { color: #ff003c; z-index: -1; animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.glitch-layer:nth-child(2) { color: #00ffff; z-index: -2; animation: glitch-anim-2 3s infinite linear alternate-reverse; }

@keyframes glitch-anim-1 {
  0% { clip-path: inset(20% 0 80% 0); transform: translate(-2px, 1px); }
  20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
  40% { clip-path: inset(40% 0 50% 0); transform: translate(-2px, 2px); }
  60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
  80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 1px); }
  100% { clip-path: inset(30% 0 50% 0); transform: translate(1px, -1px); }
}
@keyframes glitch-anim-2 {
  0% { clip-path: inset(10% 0 60% 0); transform: translate(2px, -1px); }
  20% { clip-path: inset(30% 0 20% 0); transform: translate(-2px, 2px); }
  40% { clip-path: inset(70% 0 10% 0); transform: translate(1px, -2px); }
  60% { clip-path: inset(20% 0 50% 0); transform: translate(-1px, 1px); }
  80% { clip-path: inset(50% 0 30% 0); transform: translate(2px, -1px); }
  100% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 1px); }
}

/* ── Block 16: CSS 3D Cube ── */
.cube-container { width: 30vw; height: 30vw; perspective: 1200px; }
.cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin-cube 15s infinite linear; }
.cube-face {
  position: absolute; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 5vw; font-weight: 900;
  border: 4px solid var(--text-color); background: rgba(220,255,10,0.1);
  color: var(--text-color);
}
.cube-face.front  { transform: translateZ(15vw); }
.cube-face.back   { transform: rotateY(180deg) translateZ(15vw); }
.cube-face.right  { transform: rotateY(90deg) translateZ(15vw); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(15vw); }
.cube-face.top    { transform: rotateX(90deg) translateZ(15vw); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(15vw); }
@keyframes spin-cube {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ── Block 17: Scale Abyss ── */
.abyss-container { width: 100vw; height: 100vh; position: relative; perspective: 1000px; }
.abyss-layer {
  position: absolute; top: 50%; left: 50%; width: 60vw; height: 40vw;
  margin-top: -20vw; margin-left: -30vw;
  border: 4px solid var(--text-color);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 15vw; font-weight: 900;
  animation: abyss-fall 4s infinite linear; opacity: 0;
}
.abyss-layer.a1 { animation-delay: 0s; }
.abyss-layer.a2 { animation-delay: -0.66s; }
.abyss-layer.a3 { animation-delay: -1.33s; }
.abyss-layer.a4 { animation-delay: -2s; }
.abyss-layer.a5 { animation-delay: -2.66s; }
.abyss-layer.a6 { animation-delay: -3.33s; }
@keyframes abyss-fall {
  0% { transform: translateZ(800px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateZ(-2000px); opacity: 0; }
}

/* ── Block 18: Flip Card ── */
.flip-card-container { width: 40vw; height: 60vh; perspective: 1500px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; }
.flip-card-front, .flip-card-back {
  position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 8vw; border-radius: 30px;
}
.flip-card-back { transform: rotateY(180deg); }

/* ── Block 19: Velocity Grid ── */
.velocity-grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; padding: 5vw; width: 100vw; height: 100vh; }
.velocity-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* ── Block 21: Liquid Displacement ── */
.liquid-img-container { width: 80vw; height: 80vh; position: relative; }
.liquid-img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.5s ease; filter: grayscale(1); }
.liquid-img:hover { filter: url(#liquidFilter) grayscale(0); }

/* ── Block 22: Exclusion Text ── */
.exclusion-text { position: absolute; z-index: 10; left: -10vw; top: 40%; }

/* ── Block 23: The Circular Dial ── */
.dial-container { width: 60vh; height: 60vh; position: relative; }

/* ── Block 24: Hover Accordion ── */
.accordion-strip {
  flex: 1; position: relative; border-right: 2px solid #000;
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden; filter: grayscale(1);
}
.accordion-strip img { width: 100vw; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.accordion-strip h3 {
  position: absolute; bottom: 40px; left: 40px;
  font-family: var(--font-sans); font-size: 10vw; font-weight: 900;
  color: white; mix-blend-mode: difference; z-index: 2;
}
.accordion-strip:hover { flex: 3; filter: grayscale(0); }

/* ── Block 25: The Infinity Loop ── */
.infinity-container { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
.infinity-text {
  position: absolute; font-family: var(--font-sans); font-size: 25vw; font-weight: 900;
  white-space: nowrap; line-height: 0.8; letter-spacing: -0.05em;
  animation: infinity-scale 4s infinite cubic-bezier(0.5, 0, 0.5, 1);
  opacity: 0;
}
.infinity-text:nth-child(1) { animation-delay: 0s; }
.infinity-text:nth-child(2) { animation-delay: -1s; }
.infinity-text:nth-child(3) { animation-delay: -2s; }
.infinity-text:nth-child(4) { animation-delay: -3s; }

@keyframes infinity-scale {
  0% { transform: scale(5); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* Floating Orbs */
@keyframes orb-pulse {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.6; filter: blur(80px); }
  50% { transform: translate(-50%, -50%) scale(1.2) rotate(180deg); opacity: 0.8; filter: blur(100px); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 0.6; filter: blur(80px); }
}
.story-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; z-index: 0; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: orb-pulse 8s ease-in-out infinite; }
.orb-1 { width: 40vw; height: 40vw; background: var(--accent-color); animation-duration: 10s; }
.orb-2 { width: 50vw; height: 50vw; background: var(--accent-blue); animation-duration: 12s; animation-direction: reverse; }

/* ── 12 Core Pillars (Accordion) ── */
.pillars-section { padding: 50px var(--padding-x) 150px; background: var(--bg-color); }
.pillars-list { display: flex; flex-direction: column; border-top: 2px solid var(--text-color); }
.accordion-item { border-bottom: 1px solid rgba(255,255,255,0.2); transition: background 0.3s; }
.accordion-item:hover { background: rgba(255,255,255,0.02); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; cursor: pointer; }
.pillar-title h2 { font-family: var(--font-sans); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; transition: color 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.2, 1); display: flex; align-items: center; margin: 0;}
.accordion-item:hover .pillar-title h2 { color: var(--accent-color); transform: translateX(20px); }
.accordion-icon { font-size: 2rem; color: var(--text-color); transition: transform 0.4s cubic-bezier(0.2, 1, 0.2, 1), color 0.3s; }
.accordion-item:hover .accordion-icon { color: var(--accent-color); }
.accordion-item.active .accordion-icon { transform: rotate(45deg); color: var(--accent-color); }
.accordion-item.active .pillar-title h2 { color: var(--accent-color); transform: translateX(20px); }
.accordion-content { height: 0; overflow: hidden; }
.accordion-inner { padding-bottom: 40px; padding-left: clamp(2rem, 4vw + 50px, 5rem); max-width: 800px; }
.pillar-details p { font-family: var(--font-body); font-size: 1.2rem; margin-bottom: 15px; line-height: 1.5; color: rgba(255,255,255,0.8); }
.pillar-details .outputs { display: block; font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.05em; color: var(--accent-color); text-transform: uppercase; font-weight: 600; }

/* ── Infinite Mask Zoom ── */
.zoom-mask-container { height: 400vh; position: relative; background-color: #000; z-index: 5; }
.zoom-mask-sticky { position: sticky; top: 0; width: 100vw; height: 100vh; overflow: hidden; }
.zoom-mask-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoom-mask-bg img { width: 100%; height: 100%; object-fit: cover; }
.zoom-bg-overlay { position: absolute; inset: 0; background-color: #000; opacity: 0.2; }
.zoom-svg-mask {
  position: absolute; inset: 0; width: 100%; height: 100%;
  will-change: transform;
  transform-origin: 50% 50%; /* Center the scale on the text hole */
}

/* ── Work / Ecosystem Section ── */
.work-section { padding: 50px 0 100px; position: relative; z-index: 6; }
.sticky-header { padding: 0 var(--padding-x); margin-bottom: 80px; }
.section-header-huge { font-family: var(--font-sans); font-size: clamp(3rem, 8vw, 8rem); font-weight: 700; line-height: 1; text-transform: uppercase; border-bottom: 2px solid var(--text-color); padding-bottom: 20px; }

/* Bento Grid Enhancements */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  perspective: 2000px;
  padding: 0 var(--padding-x);
}
.bento-magnetic { transform-style: preserve-3d; will-change: transform; transition: transform 0.1s ease-out; }
.bento-card {
  position: relative;
  height: 60vh;
  min-height: 500px;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px;
  cursor: pointer;
  background-color: var(--bg-color);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.bento-card.span-2 { grid-column: span 2; height: 85vh; }
.bento-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform 1.2s cubic-bezier(0.2, 1, 0.2, 1);
  transform: translateZ(-30px) scale(1.05);
}
.bento-card:hover .bento-bg { transform: translateZ(-30px) scale(1.15); }
.bento-content { position: relative; z-index: 2; transform: translateZ(50px); }
.bento-content.centered { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.bento-content h3 { font-family: var(--font-sans); font-size: clamp(3rem, 6vw, 6rem); font-weight: 700; margin-bottom: 15px; line-height: 1; text-shadow: 0 10px 25px rgba(0,0,0,0.8); letter-spacing: -0.02em; }
.bento-content p { font-family: var(--font-body); font-size: 1.4rem; color: var(--accent-color); font-weight: 500; text-shadow: 0 4px 15px rgba(0,0,0,0.8); }
.bento-card.bg-accent .bento-content p, .bento-card.bg-light .bento-content p, .bento-card.bg-accent .bento-content h3, .bento-card.bg-light .bento-content h3 { text-shadow: none; color: #111; }
.bento-overlay-img { position: absolute; right: -5%; bottom: -20%; height: 130%; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)); pointer-events: none; transition: transform 1s cubic-bezier(0.2, 1, 0.2, 1); transform: translateZ(80px); }
.bento-card:hover .bento-overlay-img { transform: translateZ(100px) translateY(-8%) scale(1.05); }

/* Pro Metadata Tags & Bezel */
.bento-tags { display: flex; gap: 8px; margin-bottom: 20px; opacity: 0; transform: translateY(15px); transition: opacity 0.4s ease, transform 0.4s ease; }
.bento-card:hover .bento-tags { opacity: 1; transform: translateY(0); }
.bento-tag { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 30px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); color: #fff; letter-spacing: 0.05em; text-shadow: none;}
.bento-tag.dark { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.2); color: #000; }
.bento-bezel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 20px 40px rgba(255,255,255,0.05); pointer-events: none; z-index: 5; transition: box-shadow 0.4s ease; transform: translateZ(10px); }
.bento-card:hover .bento-bezel { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), inset 0 30px 60px rgba(255,255,255,0.1); }
.bento-circle-icon { width: 80px; height: 80px; border-radius: 50%; background: #000; color: var(--accent-color); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 30px; transition: transform 0.4s cubic-bezier(0.2, 1, 0.2, 1); }
.bento-card:hover .bento-circle-icon { transform: scale(1.1) rotate(45deg); }

/* ── Ecosystem Backgrounds ── */
.q-nepal-bg { background: url('assets/portfolio-4.png') center/cover; display: flex; align-items: center; justify-content: center; }
.chill-bg { background: url('assets/portfolio-5.png') center/cover; display: flex; align-items: center; justify-content: center; }
.idea-bg { background: url('assets/portfolio-6.png') center/cover; display: flex; align-items: center; justify-content: center; }
.tech-bg { display: flex; align-items: center; justify-content: center; background: transparent; }

.eco-title { font-family: var(--font-sans); color: var(--bg-color); opacity: 0.9; mix-blend-mode: difference; font-size: clamp(3rem, 8vw, 8rem); margin: 0; }
.tech-phone-img { width: auto !important; height: 120% !important; object-fit: contain !important; transform: scale(1.1); filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5)); }

/* ── Trust Metrics (Massive Counters) ── */
.trust-section { padding: 150px var(--padding-x); position: relative; z-index: 2; }
.trust-massive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.trust-massive-item { display: flex; flex-direction: column; align-items: flex-start; }
.counter-wrap { display: flex; align-items: baseline; }
.counter-num { font-family: var(--font-sans); font-size: clamp(4rem, 10vw, 12rem); font-weight: 700; color: var(--text-color); line-height: 0.9; margin: 0; }
.trust-section.bg-light .counter-num, .trust-section.bg-light .suffix { color: var(--bg-color); }
.suffix { font-family: var(--font-sans); font-size: clamp(3rem, 6rem, 6rem); font-weight: 700; color: var(--accent-color); }
.trust-massive-item p { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.5rem); line-height: 1.3; margin-top: 20px; font-weight: 500; text-transform: uppercase; }

/* ── Bespoke Animation Starting States ── */
.hero-brutalist { transform-origin: center top; will-change: transform, opacity; }
.trust-section { clip-path: inset(0 40% 0 40%); will-change: clip-path; }
.footer-massive-text { transform: scale(0.5); transform-origin: center center; will-change: transform; }
.velocity-distort { will-change: transform, filter; transform-origin: center center; }

/* ── Footer ── */
.footer-brutalist { 
  min-height: 100vh;
  padding: 150px var(--padding-x) 50px; 
  background: var(--bg-color); 
  color: var(--text-color); 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer-massive-text { font-family: var(--font-sans); font-size: clamp(4rem, 12vw, 12rem); font-weight: 700; line-height: 0.8; text-transform: uppercase; margin-top: auto; margin-bottom: auto; text-align: center; }
.footer-bottom-flex { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.footer-cta-group { display: flex; gap: 40px; align-items: flex-end; flex-wrap: wrap; }

/* ── LIQUID BUTTONS ── */
.btn-brutalist {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 2.5rem);
  font-weight: 700;
  text-decoration: none;
  color: var(--text-color);
  border: 2px solid var(--text-color);
  padding: 1.5vh 3vw;
  border-radius: 50px;
  overflow: hidden;
  transition: color 0.4s ease;
  z-index: 1;
}

.btn-brutalist::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--text-color);
  z-index: -1;
  transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50% 50% 0 0;
}

.btn-brutalist:hover {
  color: var(--bg-color);
}

.btn-brutalist:hover::before {
  top: 0;
  border-radius: 0;
}

.btn-brutalist.outline {
  border: 2px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7);
}

.btn-brutalist.outline::before {
  background: #fff;
}

.btn-brutalist.outline:hover {
  color: #000;
  border-color: #fff;
}

/* Ensure buttons in light theme adapt properly */
.bg-light .btn-brutalist {
  color: var(--bg-color);
  border-color: var(--bg-color);
}
.bg-light .btn-brutalist::before {
  background: var(--bg-color);
}
.bg-light .btn-brutalist:hover {
  color: var(--text-color);
}

.footer-links { text-align: right; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; display: flex; flex-direction: column; gap: 10px; }

/* ── Icon Styles ── */
.mission-icon {
  color: var(--accent-color);
  margin-right: 8px;
  font-size: 1.2em;
  vertical-align: middle;
}

.pillar-icon {
  color: var(--text-color);
  margin-right: 15px;
  opacity: 0.8;
  transition: color 0.3s, opacity 0.3s;
}
.pillar-item:hover .pillar-icon {
  color: var(--accent-color);
  opacity: 1;
}

.trust-icon {
  font-size: 3rem;
  color: var(--text-color);
  margin-bottom: 15px;
  opacity: 0.8;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .trust-massive-grid { grid-template-columns: repeat(2, 1fr); gap: 60px; }
}
@media (max-width: 768px) {
  /* Hide custom cursor on mobile */
  .cursor, .custom-cursor, .cursor-follower { display: none !important; }

  /* Navigation */
  .nav-brutalist { flex-direction: row; justify-content: space-between; align-items: center; padding: 20px var(--padding-x); }
  .nav-right a[href="#vision"], 
  .nav-right a[href="#pillars"], 
  .nav-right a[href="#ecosystem"] { display: none; }
  
  /* Hero Text & Subtext Fixes */
  .hero-brutalist { padding-top: 120px; justify-content: flex-start; gap: 30px; min-height: auto; padding-bottom: 80px; }
  
  .hero-top-bar { flex-direction: column; gap: 10px; }
  .hero-subtext, .hero-subtext.right { text-align: left; opacity: 0.6; font-size: 0.75rem; }
  
  .hero-title-wrap { margin: 0; }
  .hero-title .line-1 { font-size: clamp(2rem, 8vw, 4rem); margin-bottom: -5px; }
  .hero-title .line-2 { font-size: clamp(4rem, 18vw, 7rem); white-space: nowrap; line-height: 0.9; }
  .hero-title .line-3 { font-size: clamp(2rem, 8vw, 4rem); margin-top: -5px; }
  
  .hollow-italic { -webkit-text-stroke: 2px var(--accent-color); }
  .interactive-text:hover { transform: none; } /* Disable heavy hover effect on mobile */
  
  /* Preloader */
  .preloader-counter { font-size: clamp(5rem, 20vw, 25rem); }
  
  /* Grids */
  .matrix-grid { grid-template-columns: 1fr; gap: 40px; }
  .bento-grid { grid-template-columns: 1fr; gap: 30px; }
  .bento-card { height: 40vh; min-height: 350px; padding: 30px; }
  .bento-card.span-2 { grid-column: span 1; height: 50vh; }
  .bento-content h3 { font-size: clamp(2.5rem, 8vw, 4rem); }
  
  /* Horizontal Storytelling Mobile Fixes */
  .story-content.split-layout { flex-direction: column; text-align: left; justify-content: center; gap: 20px; }
  .story-content.split-layout .left, .story-content.split-layout .right { width: 100%; text-align: center; }
  .editorial-text { font-size: clamp(2.5rem, 10vw, 8rem); }
  .editorial-p { font-size: 1.2rem; text-align: center; }
  
  /* Pillars & Mission */
  .pillar-item { grid-template-columns: 1fr; gap: 15px; padding: 30px 0; }
  .pillar-item:hover .pillar-title h2 { padding-left: 0; transform: none; }
  .accordion-item.active .pillar-title h2 { transform: none; }
  .accordion-item:hover .pillar-title h2 { transform: none; }
  .mission-row { grid-template-columns: 1fr; gap: 10px; }
  
  /* Footer */
  .footer-bottom-flex { flex-direction: column; align-items: flex-start; gap: 40px; }
  .footer-cta-group { flex-direction: column; gap: 20px; align-items: flex-start; }
  .footer-links { text-align: left; }
  .btn-brutalist { border-bottom: 2px solid var(--bg-color); font-size: clamp(1.5rem, 6vw, 2.5rem); }
  .btn-brutalist.outline { border-bottom: 2px solid transparent; }
  
  /* Trust Grid */
  .trust-grid { grid-template-columns: 1fr; gap: 30px; }
  .trust-massive-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Selected Works (Hover List) ── */
.hover-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.2); padding: 0 var(--padding-x); }
.hover-item { 
  display: flex; justify-content: space-between; align-items: center; 
  padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,0.2); 
  cursor: pointer; position: relative; z-index: 2; transition: padding-left 0.4s ease;
}
.hover-item:hover { padding-left: 40px; }
.hover-item-title { font-family: var(--font-sans); font-size: clamp(3rem, 6vw, 6rem); font-weight: 800; text-transform: uppercase; line-height: 1; pointer-events: none; transition: color 0.4s; }
.hover-item:hover .hover-item-title { color: var(--accent-color); }
.hover-item-category { font-family: var(--font-body); font-size: 1rem; opacity: 0.5; pointer-events: none; }

.hover-reveal-img-container {
  position: fixed; top: 0; left: 0; width: 400px; height: 500px;
  pointer-events: none; z-index: 10; opacity: 0; transform: scale(0.8);
  overflow: hidden; border-radius: 20px;
}
.hover-reveal-img { width: 100%; height: 100%; object-fit: cover; }

/* ── Infrastructure Matrix ── */
.infrastructure-section { padding: 150px 0; }
.matrix-grid { 
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; 
  padding: 0 var(--padding-x); position: relative; z-index: 2;
}
.matrix-column { display: flex; flex-direction: column; }
.matrix-title { font-family: var(--font-sans); font-size: 1.5rem; color: var(--accent-color); margin-bottom: 30px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 15px; }
.matrix-list { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.matrix-list li { font-family: var(--font-body); font-size: 1.2rem; opacity: 0.8; }
.vertical-marquee {
  position: absolute; top: 0; font-family: var(--font-sans); font-size: 15vw; 
  font-weight: 900; white-space: nowrap; opacity: 0.05; writing-mode: vertical-rl;
  z-index: 1; pointer-events: none;
}
.vertical-marquee.left-marquee { left: 0; transform: rotate(180deg); }
.vertical-marquee.right-marquee { right: 0; }

/* ── Pre-Footer Marquee ── */
.pre-footer-marquee-section { 
  padding: 30px 0; 
  background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-blue) 50%, var(--accent-color) 100%);
  background-size: 200% 100%;
  animation: gradient-shift 8s ease infinite;
  color: var(--bg-color); 
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 -20px 50px rgba(0, 163, 255, 0.1);
}
.pre-footer-marquee { 
  font-family: var(--font-sans); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; 
  white-space: nowrap;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Page Wipe Transition ── */
.page-wipe {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 9998; pointer-events: none;
  display: flex;
}
.wipe-column {
  flex: 1; height: 100%;
  background-color: var(--accent-color);
  transform: translateY(100%);
}

/* ── Scroll Progress HUD ── */
.scroll-hud {
  position: fixed; right: var(--padding-x); bottom: 40px;
  font-family: var(--font-sans); font-size: 1.2rem; font-weight: 700;
  color: var(--text-color); z-index: 1000; mix-blend-mode: difference;
}
.scroll-hud .dim { opacity: 0.4; }

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .skew-element, .velocity-distort, .interactive-text { transform: none !important; filter: none !important; }
}

/* ── COMPREHENSIVE RESPONSIVE UPGRADES ── */
@media (max-width: 768px) {
  .story-block {
    padding: 60px 20px;
  }
  .story-content.split-layout {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }
  .editorial-text {
    font-size: clamp(2rem, 10vw, 4rem) !important;
  }
  .story-block h1 {
    font-size: clamp(3rem, 15vw, 6rem) !important;
  }
  .interactive-text {
    font-size: clamp(2.5rem, 12vw, 5rem) !important;
  }
  .vertical-marquee-col {
    display: none !important; /* Hide massive vertical marquees on mobile */
  }
  .footer-massive-text {
    font-size: 15vw !important;
  }
}

/* ── MOBILE NAV FIX ── */
@media (max-width: 768px) {
  .nav-right { display: none !important; }
  .mobile-menu-btn { display: block !important; }
  
  .hero-brutalist {
    padding-top: 140px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-title .line-2 {
    font-size: clamp(3rem, 15vw, 4.5rem) !important;
  }
}

/* ── REMOVAL OF TEXTURES AND GRID OVERLAYS ── */
body::before {
  display: none !important;
}
.noise-overlay {
  display: none !important;
}

/* ── FIX WORD CUTTING ── */
.editorial-text, h1, h2, h3, .interactive-text {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 768px) {
  /* Prevent massive words from breaking the viewport or getting cut off */
  .story-block h1, .story-block h2, .editorial-text, .interactive-text {
    font-size: clamp(2rem, 10vw, 4rem) !important;
    white-space: normal !important;
    hyphens: none !important;
  }
  .hero-title .line-2 {
    white-space: normal !important;
    font-size: clamp(3rem, 12vw, 4.5rem) !important;
  }
}


/* ── PRO SPLIT LAYOUT (RESPONSIVE) ── */
.pro-split-layout {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.pro-split-left {
  flex: 1;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pro-split-right {
  flex: 1;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pro-split-left.border-dark { border-right: 1px solid rgba(255,255,255,0.1); }
.pro-split-left.border-light { border-right: 1px solid rgba(0,0,0,0.1); }

@media (max-width: 1024px) {
  .pro-split-layout {
    flex-direction: column;
  }
  .pro-split-left {
    flex: 0 0 auto;
    padding: 10vw 5vw 2vw 5vw;
    border-right: none !important;
  }
  .pro-split-left.border-dark { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .pro-split-left.border-light { border-bottom: 1px solid rgba(0,0,0,0.1); }
  
  .pro-split-right {
    padding: 2vw 5vw 10vw 5vw;
    justify-content: flex-start;
    overflow-y: auto;
  }
  
  /* Make typography responsive */
  .pro-split-left h2 { font-size: 10vw !important; line-height: 1 !important; margin-top: 2vh !important; }
  .pro-split-left p { font-size: 2.5vw !important; }
  
  .pro-split-right h3 { font-size: 3.5vw !important; }
  .pro-split-right span { font-size: 2.5vw !important; width: 6vw !important; }
  .pro-split-right i { font-size: 3vw !important; }
}

@media (max-width: 768px) {
  .pro-split-left h2 { font-size: 12vw !important; }
  .pro-split-left p { font-size: 3vw !important; }
  .pro-split-right h3 { font-size: 4vw !important; }
  .pro-split-right span { font-size: 3vw !important; width: 8vw !important; }
}


/* ── ADVANCED ANIMATIONS UTILITIES ── */
.float-slow {
  animation: float-y 6s ease-in-out infinite alternate;
}
.float-fast {
  animation: float-y 3s ease-in-out infinite alternate;
}
@keyframes float-y {
  0% { transform: translateY(0); }
  100% { transform: translateY(-30px); }
}

/* SVG Line Drawing */
.svg-draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1s ease-out;
}

/* 3D Exploded View Container */
.exploded-container {
  perspective: 2000px;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-color);
}

.exploded-layer {
  position: absolute;
  width: 40vw;
  height: 40vw;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.exploded-core {
  background: radial-gradient(circle, rgba(200,255,0,0.2) 0%, transparent 70%);
  border: 1px solid var(--accent-color);
  border-radius: 50%;
  box-shadow: 0 0 50px rgba(200,255,0,0.1);
}

.exploded-grid {
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), 
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 2vw 2vw;
  border: 1px solid rgba(255,255,255,0.1);
}

.exploded-text {
  font-family: var(--font-sans);
  font-size: 8vw;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.5);
  text-align: center;
  line-height: 0.9;
}

/* GSAP Reveal Utilities */
.reveal-text-line {
  overflow: hidden;
  display: inline-block;
}
.reveal-text-line .word {
  transform: translateY(110%);
  display: inline-block;
  will-change: transform;
}

/* AWWWARDS PRO 3D PORTAL ANIMATIONS */
@keyframes spin-cw { 100% { transform: rotate(360deg); } }
@keyframes spin-ccw { 100% { transform: rotate(-360deg); } }
@keyframes spin-cw-slow { 100% { transform: rotate(360deg); } }
@keyframes spin-ccw-slow { 100% { transform: rotate(-360deg); } }
@keyframes pulse-slow { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.02); } }
@keyframes pulse-fast { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.98); } }
@keyframes flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } 52% { opacity: 0.2; } 54% { opacity: 1; } 80% { opacity: 0.9; } }

.spin-cw { animation: spin-cw 20s linear infinite; }
.spin-ccw { animation: spin-ccw 20s linear infinite; }
.spin-cw-slow { animation: spin-cw-slow 60s linear infinite; }
.spin-ccw-slow { animation: spin-ccw-slow 60s linear infinite; }
.pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }
.pulse-fast { animation: pulse-fast 1.5s ease-in-out infinite; }
.flicker { animation: flicker 5s infinite; }

/* Global Slide Counter */
.global-slide-counter {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  color: var(--light-color);
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(20px);
}

.global-slide-counter.visible {
  opacity: 1;
  transform: translateY(0);
}

.global-slide-counter .divider {
  opacity: 0.5;
}

/* Hover Reveal Portfolio Slide */
.hover-reveal-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hover-reveal-item {
  font-size: clamp(3rem, 6vw, 8rem);
  line-height: 1;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 2vh 0;
  cursor: pointer;
  transition: color 0.3s ease, padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.hover-reveal-item:hover {
  color: var(--accent-color);
  padding-left: 2rem;
}

/* Following Image Container */
.following-image-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 35vw;
  height: 45vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(0.8);
  overflow: hidden;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

/* Stats Counting Slide */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4vw;
  width: 100%;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: clamp(5rem, 10vw, 15rem);
  line-height: 0.8;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--accent-color);
}

.stat-label {
  font-size: clamp(1rem, 1.5vw, 2rem);
  font-family: var(--font-mono);
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 1rem;
}