/*
 * WE360 Elite Core CSS
 * Foundation for the cinematic experience.
 */

/* Reset & Global */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg-deep);
  /* Lenis handles smooth scrolling, hide native scrollbar for cinematic feel */
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  font-family: var(--font-body);
  color: var(--text-pure);
  background: transparent;
  overflow-x: hidden;
  cursor: none; /* Hide default cursor for bespoke cursor */
  -webkit-font-smoothing: antialiased;
}

/* Subtle Animated Noise Texture overlay */
.noise-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: var(--z-noise);
  opacity: 0.03;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* WebGL Background Canvas */
.webgl-canvas-container {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: var(--z-webgl);
  pointer-events: none;
}

/* Elite Navigation */
.elite-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 2.5rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: var(--z-nav);
  mix-blend-mode: difference; /* Highly premium technique */
}

.nav-brand {
  display: flex;
  align-items: center;
}
.brand-logo {
  height: 120px;
  width: auto;
  object-fit: contain;
}
.brand-accent {
  color: var(--text-muted);
}

.nav-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 32px;
}
.menu-line {
  width: 100%;
  height: 2px;
  background: var(--text-pure);
  transition: transform var(--dur-fast) var(--ease-cinematic);
}
.nav-menu-btn:hover .menu-line:first-child { transform: scaleX(0.7) origin-right; }
.nav-menu-btn:hover .menu-line:last-child { transform: scaleX(0.9) origin-left; }

/* Custom Bespoke Cursor */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--text-pure);
  border-radius: 50%;
}

.cursor-ring {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  transition: width 0.3s var(--ease-cinematic), height 0.3s var(--ease-cinematic), background 0.3s var(--ease-cinematic);
}

.cursor-text {
  font-family: var(--font-display);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bg-deep);
  opacity: 0;
  transition: opacity 0.2s;
  font-weight: 600;
}

/* Cursor Expansion State */
.cursor-ring.expanded {
  width: 80px;
  height: 80px;
  background: var(--text-pure);
  border-color: transparent;
}
.cursor-ring.expanded .cursor-text {
  opacity: 1;
}

/* Narrative Container */
.narrative-wrapper {
  position: relative;
  z-index: var(--z-content);
}