:root { --p: #6d64ff; --y: #fcc339; --void: #0a0c12; }
body { background-color: var(--void); color: #fff; overscroll-behavior: none; }

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* ─── CINEMATIC BACKGROUND SYSTEM (From index9) ─── */
.master-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--void);
}
.master-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(40px) saturate(1.3); transition: opacity 2s ease, filter 2s ease;
}
.master-bg img.active { opacity: 0.45; filter: blur(15px) saturate(1.3); z-index: 10; }

.ambient-mesh {
  position: fixed; top: -50%; left: -50%; width: 200vw; height: 200vh;
  background: 
    radial-gradient(circle at 30% 50%, rgba(109,100,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(252,195,57,0.2) 0%, transparent 50%);
  filter: blur(100px); z-index: -1; animation: meshFlow 20s infinite alternate ease-in-out; pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes meshFlow { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(30deg) scale(1.1); } }

/* ─── GLASSMORPHIC PANELS (From index9) ─── */
.glass-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 40px rgba(0,0,0,0.4);
  border-radius: 24px; transition: transform 0.5s ease, border-color 0.5s ease;
  position: relative; overflow: hidden;
}
.glass-panel:hover { border-color: rgba(255,255,255,0.25); box-shadow: 0 30px 60px rgba(0,0,0,0.6); }

.glass-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(60px); opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; mix-blend-mode: screen; z-index: 0;
}
.glass-panel:hover .glass-glow { opacity: 0.8; transform: scale(1.2); }
.glass-content { position: relative; z-index: 10; }

/* ─── THE FLAWLESS SKEW BUTTON ─── */
.btn-skew {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 40px; background: transparent; color: #fff; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
  border: 1px solid rgba(109,100,255,0.4); overflow: hidden; transition: all 0.4s; cursor: pointer;
  border-radius: 999px; backdrop-filter: blur(10px);
}
.btn-skew .bg-skew {
  position: absolute; top: -10%; left: -20%; width: 140%; height: 120%; 
  background: linear-gradient(90deg, var(--p), var(--y));
  transform: translateX(-100%) skewX(-15deg); 
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); z-index: -1;
}
.btn-skew:hover .bg-skew { transform: translateX(0) skewX(-15deg); }
.btn-skew:hover { border-color: transparent; box-shadow: 0 0 40px rgba(109,100,255,0.4); transform: translateY(-2px); }

.btn-skew-ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.2); transition: all 0.4s; cursor: pointer; overflow: hidden;
  border-radius: 999px; color: rgba(255,255,255,0.7); backdrop-filter: blur(10px); background: rgba(255,255,255,0.03);
}
.btn-skew-ghost::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 100%;
  background: rgba(255,255,255,0.1); transition: width 0.4s cubic-bezier(0.16,1,0.3,1); z-index: -1;
}
.btn-skew-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.4); box-shadow: 0 10px 30px rgba(255,255,255,0.1); transform: translateY(-2px); }
.btn-skew-ghost:hover::after { width: 100%; }

/* ─── REVEALS ─── */
.reveal-host { opacity: 0; transition: opacity 0.1s; } 
.reveal-host.in { opacity: 1; }

.reveal-mask { overflow: hidden; display: inline-block; vertical-align: bottom; }
.reveal-mask-inner { 
  display: inline-block; transform: translateY(110%); 
  filter: blur(10px) brightness(2); opacity: 0;
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1), filter 1.4s cubic-bezier(0.16,1,0.3,1), opacity 1.4s cubic-bezier(0.16,1,0.3,1); 
  will-change: transform, filter, opacity; 
}
.in .reveal-mask-inner { transform: translateY(0); filter: blur(0) brightness(1); opacity: 1; text-shadow: none; }

.reveal-fade { 
  opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(15px);
  transition: all 1.4s cubic-bezier(0.16,1,0.3,1); will-change: transform,opacity,filter; 
}
.reveal-fade.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.d-1 { transition-delay: 200ms; } .d-2 { transition-delay: 400ms; } .d-3 { transition-delay: 600ms; }

/* ─── GRADIENT SHIMMER ─── */
.gradient-shimmer {
  background-size: 200% auto;
  animation: colorSweep 8s ease-in-out infinite;
  animation-delay: 2s; /* Wait for initial reveal to finish */
}
@keyframes colorSweep {
  0%, 80% { 
    background-position: 0% 50%; 
  }
  90% { 
    background-position: 100% 50%;
  }
  100% { 
    background-position: 0% 50%; 
  }
}

/* ─── MASSIVE EDITORIAL NUMBERS (From index6) ─── */
.massive-number {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  font-size: clamp(8rem, 15vw, 16rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em;
  color: rgba(255,255,255,0.03); pointer-events: none; z-index: 0; transition: color 0.5s; mix-blend-mode: overlay;
}
.glass-panel:hover .massive-number { color: rgba(255,255,255,0.1); }

/* ─── FRAMEWORK ABSTRACT GRIDS ─── */
.bg-grid-p {
  background-image: 
    linear-gradient(to right, rgba(109, 100, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(109, 100, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-grid-y {
  background-image: 
    linear-gradient(to right, rgba(252, 195, 57, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252, 195, 57, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

.kicker { font-family:'Space Mono', monospace; font-size:0.75rem; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--p); }