@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --bg: #050505;
  --fg: #EAEAEA;
  --accent: #E6FF00; /* Acid Yellow */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.86, 0, 0.07, 1);
}

/* RESET & BASE */
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; /* Hide native cursor */ }

html { background: var(--bg); color: var(--fg); font-size: 16px; scroll-behavior: auto; }
body { font-family: 'Space Mono', monospace; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }

/* NOISE OVERLAY */
.noise {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9999; opacity: 0.04;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* CUSTOM CURSOR */
/* =========================================
   CUSTOM HUD TARGETING CURSOR
   ========================================= */
* { cursor: none !important; /* Hide native cursor everywhere */ }

.cursor-dot { 
  position: fixed; top: 0; left: 0; width: 4px; height: 4px; 
  background-color: var(--accent); transform: translate(-50%, -50%); 
  border-radius: 50%; pointer-events: none; z-index: 10001; 
}

.cursor-reticle { 
  position: fixed; top: 0; left: 0; width: 50px; height: 50px; 
  transform: translate(-50%, -50%); pointer-events: none; z-index: 10000; 
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out); 
}

.reticle-bracket {
  position: absolute; width: 12px; height: 12px; 
  border: 1.5px solid rgba(234, 234, 234, 0.5); /* Faded white */
  transition: all 0.4s var(--ease-out);
}

/* Position the 4 corners */
.bracket-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket-br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* HOVER STATE: Target Lock */
body.cursor-hover .cursor-reticle { 
  width: 30px; 
  height: 30px; 
}

body.cursor-hover .reticle-bracket { 
  border-color: var(--accent); /* Snaps to Acid Yellow */
  border-width: 2px;
}
/* ========================================= */

/* TYPOGRAPHY */
h1, h2, h3, .massive-text { font-family: 'Oswald', sans-serif; text-transform: uppercase; line-height: 0.85; margin: 0; }
.massive-text { font-size: clamp(4rem, 15vw, 20rem); letter-spacing: -0.05em; }
.outline-text { color: transparent; -webkit-text-stroke: 1px var(--fg); transition: color 0.5s var(--ease-out); }
.outline-text:hover { color: var(--accent); -webkit-text-stroke: 1px var(--accent); }
p { font-size: clamp(1rem, 1.5vw, 1.25rem); font-family: 'Space Mono', monospace; line-height: 1.6; max-width: 600px; color: #A0A0A0; }
.mono-tag { display: inline-block; font-size: 0.75rem; border: 1px solid var(--fg); padding: 0.3em 0.8em; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }

/* SPATIAL NAVIGATION (HUD) */
.hud-element { position: fixed; z-index: 900; mix-blend-mode: difference; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.hud-top-left { top: 2rem; left: 2rem; display: flex; align-items: center; gap: 1rem; }
.hud-top-left svg { width: 24px; animation: spin 10s linear infinite; fill: var(--fg); }
.hud-top-right { top: 2rem; right: 2rem; }
.hud-bottom-left { bottom: 2rem; left: 2rem; writing-mode: vertical-rl; transform: rotate(180deg); }
.hud-bottom-right { bottom: 2rem; right: 2rem; }

/* MENU OVERLAY */
.menu-btn { background: none; border: none; color: var(--fg); font-family: 'Space Mono'; font-size: 1rem; text-transform: uppercase; position: relative; overflow: hidden; padding: 0.5rem 1rem; }
.menu-btn::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-in-out); }
.menu-btn:hover::before { transform: scaleX(1); transform-origin: left; }
.menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg); z-index: 999; display: flex; flex-direction: column; justify-content: center; padding: 5vw; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: clip-path 1s var(--ease-in-out); }
.menu-overlay.active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.menu-link { font-family: 'Oswald', sans-serif; font-size: clamp(3rem, 8vw, 8rem); line-height: 1; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.2); transition: 0.4s var(--ease-out); text-decoration: none; transform: translateY(50px); opacity: 0; }
.menu-overlay.active .menu-link { transform: translateY(0); opacity: 1; }
.menu-link:hover { color: var(--fg); -webkit-text-stroke: 1px var(--fg); padding-left: 2vw; }

/* LAYOUT & SECTIONS */
.section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 10vh 5vw; position: relative; }
.flex-split { display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; flex-wrap: wrap; margin-top: auto; }
.img-container { overflow: hidden; position: relative; }
.img-container img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 2s var(--ease-out); filter: grayscale(100%); }
.img-container:hover img { transform: scale(1); filter: grayscale(0%); }

/* REVEAL ANIMATIONS */
.reveal-text { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateY(100px); opacity: 0; transition: transform 1.2s var(--ease-out), opacity 1.2s var(--ease-out); }
.reveal-text.is-visible { transform: translateY(0); opacity: 1; }

/* PAGE TRANSITION LAYER */
.page-transition { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--fg); z-index: 99999; transform-origin: top; animation: swipeUp 1.2s var(--ease-in-out) forwards; pointer-events: none; }

/* ARCHIVE LIST (Lifeforms) */
.archive-list { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 10vh; }
.archive-row { display: flex; justify-content: space-between; align-items: center; padding: 3rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); position: relative; text-decoration: none; color: var(--fg); }
.archive-row h2 { font-size: clamp(2rem, 5vw, 4rem); transition: 0.4s var(--ease-out); }
.archive-row:hover h2 { color: var(--accent); transform: translateX(2vw); }
.hover-image-reveal { position: fixed; width: 400px; height: 500px; pointer-events: none; z-index: 100; opacity: 0; transform: scale(0.8) translate(-50%, -50%); transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out); overflow: hidden; }
.hover-image-reveal img { width: 100%; height: 100%; object-fit: cover; }

/* HORIZONTAL SCROLL SIMULATION (Civilisations) */
.horizontal-scroll-wrapper { display: flex; overflow-x: auto; overflow-y: hidden; height: 100vh; scroll-snap-type: x mandatory; scrollbar-width: none; }
.horizontal-scroll-wrapper::-webkit-scrollbar { display: none; }
.h-panel { flex: 0 0 100vw; height: 100vh; scroll-snap-align: start; display: flex; align-items: center; padding: 5vw; position: relative; }
.h-panel img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.3; filter: grayscale(100%); transition: 1s; }
.h-panel:hover img { opacity: 0.6; filter: grayscale(0%); }
.h-panel h2 { font-size: clamp(3rem, 8vw, 8rem); color: var(--fg); mix-blend-mode: difference; }

/* BUTTONS */
.glitch-btn { display: inline-block; padding: 1rem 2rem; border: 1px solid var(--accent); color: var(--accent); text-transform: uppercase; text-decoration: none; position: relative; overflow: hidden; margin-top: 2rem; }
.glitch-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent); transition: transform 0.5s var(--ease-out); }
.glitch-btn span { position: relative; z-index: 1; transition: color 0.5s var(--ease-out); }
.glitch-btn:hover::before { transform: translateX(100%); }
.glitch-btn:hover span { color: var(--bg); font-weight: 700; }

@keyframes swipeUp { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* =========================================
   MOBILE & TOUCH DEVICE OPTIMIZATIONS
   ========================================= */
@media (pointer: coarse), (max-width: 768px) {
  
  /* 1. Kill Custom Cursor & Restore Native Touch */
  * { cursor: auto !important; }
  .cursor-dot, .cursor-reticle, .hover-image-reveal { display: none !important; }
  
  /* 2. Fix HUD Overlap */
  .hud-top-left { top: 1.5rem; left: 5vw; }
  .hud-top-right { top: 1.5rem; right: 5vw; }
  .hud-bottom-left, .hud-bottom-right { display: none; }
  
  /* 3. Stack Layouts (Images on top, Text below) */
  .flex-split { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .flex-split > div, .img-container { width: 100% !important; height: auto !important; aspect-ratio: 4/3; margin: 0 !important; }
  
  /* 4. Fix Typography Scaling & Overflow */
  .massive-text { font-size: clamp(3.5rem, 15vw, 5rem) !important; word-break: break-word; line-height: 0.9; }
  
  /* 5. Fix Timeline Spacing */
  .timeline section div { margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; width: 100%; }
  .timeline .massive-text.outline-text { top: 5%; font-size: 35vw !important; opacity: 0.15; }
  
  /* 6. Lifeforms Archive Mobile Layout */
  .archive-row { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 2rem 0; }
  .archive-row h2 { font-size: 2.5rem; }
  .mobile-archive-img { 
    display: block; width: 100%; height: 250px; 
    object-fit: cover; margin-top: 1rem; 
    filter: grayscale(100%); transition: filter 0.4s var(--ease-out); 
  }
  .archive-row:active .mobile-archive-img { filter: grayscale(0%); }
}

/* Ensure mobile injected images are hidden on Desktop */
@media (min-width: 769px) {
  .mobile-archive-img { display: none !important; }
}