/* ============================================
   ANIFOLIO v2 — Design System
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600;700&display=swap');

:root {
  --void: #050508;
  --void-light: #0c0c14;
  --void-mid: #14142a;
  --neon-red: #ff2d55;
  --neon-red-glow: rgba(255,45,85,0.5);
  --neon-blue: #00d4ff;
  --neon-blue-glow: rgba(0,212,255,0.4);
  --neon-purple: #9b59ff;
  --neon-purple-glow: rgba(155,89,255,0.4);
  --neon-gold: #ffd700;
  --neon-gold-glow: rgba(255,215,0,0.4);
  --neon-crimson: #dc143c;
  --neon-crimson-glow: rgba(220,20,60,0.4);
  --neon-green: #00ff88;
  --text-primary: #e8e8ee;
  --text-secondary: #8888a0;
  --text-dim: #a0a0b0;
  --glass-bg: rgba(255,255,255,0.04);
  --glass-bg-hover: rgba(255,255,255,0.08);
  --glass-border: rgba(255,255,255,0.08);
  --glass-border-hover: rgba(255,255,255,0.15);
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Cinzel', serif;
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-out-back: cubic-bezier(0.34,1.56,0.64,1);
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-portal: 200;
  --z-entry: 300;
  --z-cursor: 500;
  --z-overlay: 900;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--neon-purple) var(--void);
}
html::-webkit-scrollbar { width: 4px; }
html::-webkit-scrollbar-track { background: var(--void); }
html::-webkit-scrollbar-thumb { background: var(--neon-purple); border-radius: 2px; }

body {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--text-primary);
  overflow: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  width: 100vw;
  height: 100vh;
}

h1,h2,h3,h4 { font-family: var(--font-heading); font-weight:700; letter-spacing:0.05em; line-height:1.2; }
h1 { font-size: clamp(2.5rem,6vw,5rem); }
h2 { font-size: clamp(1.8rem,4vw,3rem); }
h3 { font-size: clamp(1.1rem,2vw,1.4rem); }
p { font-size: clamp(0.9rem,1.2vw,1.05rem); color: var(--text-secondary); }
a { color:inherit; text-decoration:none; }

::selection { background: var(--neon-purple); color: var(--void); }

/* Three.js renderer canvas */
#three-canvas {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
}

/* Page container */
#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-content);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}

/* Individual page */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(90px,14vh,160px) clamp(24px,5vw,80px) 40px;
  opacity: 0;
  visibility: hidden;
  transition: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.page.active {
  opacity: 1;
  visibility: visible;
}

.page-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-family: var(--font-accent);
  font-size: clamp(0.75rem,1vw,0.9rem);
  color: var(--text-dim);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s var(--ease-out-expo);
}
.glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
}

@media (max-width:768px) {
  .page { padding: 100px 20px 40px; }
}

/* ── Intro Video Overlay ── */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.intro-video {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background: #000;
}

#intro-overlay.fade-out {
  animation: introFadeOut 1s ease forwards;
}

@keyframes introFadeOut {
  to { opacity: 0; visibility: hidden; }
}