/* =====================================================================
 * BLUECODE — CYBER-BRUTALIST STYLING & KINETIC MOTION SYSTEM
 * Palette: Electric Blue (#0255F5), Neon Cyan (#00E5FF), Broken Dark (#07090E)
 * ===================================================================== */

:root {
  /* Brand Colors */
  --blue-primary: #0255F5;
  --blue-primary-hover: #0143C2;
  --blue-deep: #002B82;
  --cyan-neon: #00E5FF;
  --cyan-glow: rgba(0, 229, 255, 0.45);
  --blue-glow: rgba(2, 85, 245, 0.4);

  /* Broken Organics (Elite Design) */
  --bg-obsidian: #07090E;
  --bg-surface: #0E121C;
  --bg-surface-elevated: #141A29;
  --bg-surface-card: #0F1422;
  --border-blue: #0255F5;
  --border-cyan: #00E5FF;
  --border-subtle: rgba(2, 85, 245, 0.28);
  --border-hairline: rgba(255, 255, 255, 0.08);

  /* Typography Colors */
  --text-pure: #F4F7FC;
  --text-muted: #8E9DB7;
  --text-dim: #54627A;

  /* Spacing & Stroke */
  --stroke-weight: 3px;
  --stroke-weight-heavy: 6px;
  --margin-page: 20px;

  /* Kinetic Easing (Elite Design) */
  --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snappy: cubic-bezier(0.19, 1, 0.22, 1);
}

@media (min-width: 768px) {
  :root {
    --margin-page: 48px;
  }
}

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

html {
  background-color: var(--bg-obsidian);
  color: var(--text-pure);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-obsidian);
  color: var(--text-pure);
  font-family: 'Space Mono', monospace;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Custom Selection */
::selection {
  background: var(--cyan-neon);
  color: var(--bg-obsidian);
}

/* Hide Default Cursor on devices with hover */
@media (any-hover: hover) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button {
    cursor: none !important;
  }
}

/* =====================================================================
 * AMBIENT FX: SCANLINES, NOISE & BLUE MATRIX GRID
 * ===================================================================== */

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9990;
  background: linear-gradient(
    rgba(7, 9, 14, 0) 50%, 
    rgba(2, 85, 245, 0.04) 50%
  );
  background-size: 100% 4px;
  opacity: 0.7;
}

.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9991;
  opacity: 0.12;
  transition: backdrop-filter 0.3s var(--ease-glide);
}

/* Blueprint Cyber Grid */
.blueprint-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(2, 85, 245, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2, 85, 245, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, black 40%, transparent 85%);
}

/* Load Flicker Animation */
.flicker-overlay {
  position: fixed;
  inset: 0;
  background: var(--blue-primary);
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
}

@keyframes loadFlicker {
  0% { opacity: 0.9; }
  10% { opacity: 0; }
  20% { opacity: 0.7; }
  35% { opacity: 0; }
  50% { opacity: 0.4; }
  100% { opacity: 0; }
}

.flicker-active {
  animation: loadFlicker 0.6s steps(2) forwards;
}

/* =====================================================================
 * CUSTOM CURSOR (Cyber Crosshair)
 * ===================================================================== */

.cursor-crosshair {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  display: none;
  transition: width 0.25s var(--ease-elastic), height 0.25s var(--ease-elastic), transform 0.08s ease-out;
}

@media (any-hover: hover) {
  .cursor-crosshair {
    display: block;
  }
}

.cursor-crosshair::before,
.cursor-crosshair::after {
  content: '';
  position: absolute;
  background: var(--cyan-neon);
  box-shadow: 0 0 8px var(--cyan-neon);
  transition: background-color 0.2s, box-shadow 0.2s, width 0.2s, height 0.2s;
}

.cursor-crosshair::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.cursor-crosshair::after {
  height: 100%;
  width: 2px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.cursor-coords {
  position: absolute;
  left: 20px;
  top: 20px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: var(--cyan-neon);
  background: rgba(7, 9, 14, 0.85);
  padding: 2px 5px;
  border: 1px solid var(--blue-primary);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* Hover States for Cursor */
body.cursor-hover .cursor-crosshair {
  width: 48px;
  height: 48px;
}

body.cursor-hover .cursor-crosshair::before,
body.cursor-hover .cursor-crosshair::after {
  background: #FFFFFF;
  box-shadow: 0 0 12px #FFFFFF, 0 0 20px var(--cyan-neon);
}

body.cursor-hover .cursor-coords {
  color: #FFFFFF;
  border-color: var(--cyan-neon);
}

/* =====================================================================
 * SCROLL PROGRESS BAR
 * ===================================================================== */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-primary) 0%, var(--cyan-neon) 100%);
  box-shadow: 0 0 10px var(--cyan-glow), 0 0 20px var(--blue-glow);
  z-index: 100;
  transition: width 0.08s linear;
  width: 0%;
}

/* =====================================================================
 * BRUTALIST KINETIC CARDS & EFFECTS
 * ===================================================================== */

.work-card {
  position: relative;
  background: var(--bg-surface);
  border: var(--stroke-weight) solid var(--blue-primary);
  transition: transform 0.35s var(--ease-glide), 
              box-shadow 0.35s var(--ease-glide), 
              background-color 0.25s ease,
              border-color 0.25s ease;
}

.work-card:hover {
  transform: translate(-6px, -6px);
  background: var(--bg-surface-elevated);
  border-color: var(--cyan-neon);
  box-shadow: 8px 8px 0px var(--blue-primary), 12px 12px 0px rgba(0, 229, 255, 0.4);
  z-index: 20;
}

/* Card Glow Accent */
.work-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 229, 255, 0.06), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.work-card:hover::before {
  opacity: 1;
}

/* Kinetic Dimensional Scroll Reveal */
.hard-wipe {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  clip-path: inset(15% 0 0 0);
  transition: 
    opacity 0.75s var(--ease-glide),
    transform 0.8s var(--ease-glide),
    clip-path 0.85s var(--ease-snappy),
    box-shadow 0.5s ease;
  will-change: transform, opacity, clip-path;
}

.hard-wipe.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: inset(0 0 0 0);
}

/* Stagger Delays for Cascade Scroll */
.stagger-1 { transition-delay: 0.08s; }
.stagger-2 { transition-delay: 0.16s; }
.stagger-3 { transition-delay: 0.24s; }
.stagger-4 { transition-delay: 0.32s; }
.stagger-5 { transition-delay: 0.40s; }
.stagger-6 { transition-delay: 0.48s; }

/* 3D Kinetic Card Perspective & Parallax Mockup */
.work-card {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-glide), border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.work-card.tilt-active {
  transition: transform 0.08s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
}

.work-card:hover {
  border-color: var(--cyan-neon);
  box-shadow: 0 16px 40px rgba(2, 85, 245, 0.25), 0 0 30px rgba(0, 229, 255, 0.18);
}

/* Scroll Parallax Image Wrap */
.parallax-mockup-img {
  will-change: transform;
  transform: scale(1.08) translateY(0);
  transition: transform 0.2s ease-out, filter 0.5s ease;
}

/* Reveal Up */
.reveal-up {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.85s var(--ease-glide), opacity 0.85s var(--ease-glide);
}

.reveal-up.active {
  transform: translateY(0);
  opacity: 1;
}

/* Line Draw Animation */
.line-draw {
  width: 0;
  transition: width 1.4s var(--ease-snappy);
}

.line-draw.active {
  width: 100%;
}

/* =====================================================================
 * GLITCH TEXT ANIMATION
 * ===================================================================== */

.glitch-hover:hover {
  animation: glitch-vibrate 0.18s linear infinite;
  color: var(--cyan-neon) !important;
  text-shadow: 2px -2px 0 var(--blue-primary), -2px 2px 0 #FFFFFF;
}

@keyframes glitch-vibrate {
  0% { transform: translate(0) skew(0deg); }
  20% { transform: translate(-2px, 2px) skew(-1deg); }
  40% { transform: translate(-2px, -2px) skew(1.5deg); }
  60% { transform: translate(2px, 2px) skew(0deg); }
  80% { transform: translate(2px, -2px) skew(-1deg); }
  100% { transform: translate(0) skew(0deg); }
}

.glitch-load {
  animation: glitch-vibrate 0.35s steps(2) 2;
}

/* Marquee infinite scroll */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 24s linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Parallax Background Typography */
.hero-title-back {
  opacity: 0.05;
  transform: rotate(-8deg) translateX(-5%);
  white-space: nowrap;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  transition: transform 0.1s ease-out;
}

/* Cyber Striped Pattern */
.cyber-stripes {
  background: repeating-linear-gradient(
    -45deg,
    var(--blue-primary),
    var(--blue-primary) 2px,
    var(--bg-obsidian) 2px,
    var(--bg-obsidian) 8px
  );
}

/* Corner Accents */
.cyber-box {
  position: relative;
}

.cyber-box::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-bottom: 3px solid var(--cyan-neon);
  border-right: 3px solid var(--cyan-neon);
  pointer-events: none;
}

/* =====================================================================
 * INTERACTIVE PREVIEW MODAL & DRAWER
 * ===================================================================== */

.preview-modal {
  position: fixed;
  inset: 0;
  z-index: 10005;
  background: rgba(7, 9, 14, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-glide), visibility 0.3s;
}

.preview-modal.active {
  opacity: 1;
  visibility: visible;
}

.preview-window {
  width: 100%;
  max-width: 1200px;
  height: 90vh;
  height: 90dvh;
  max-height: calc(100dvh - 32px);
  background: var(--bg-surface);
  border: var(--stroke-weight) solid var(--blue-primary);
  box-shadow: 0 0 50px rgba(2, 85, 245, 0.35), 0 0 100px rgba(0, 229, 255, 0.15);
  display: flex;
  flex-direction: column;
  transform: translateY(30px) scale(0.98);
  transition: transform 0.4s var(--ease-elastic);
  overflow: hidden;
}

/* Navigation Scroll-Spy Glow */
.nav-link.active-nav {
  color: var(--cyan-neon) !important;
  border-bottom: 2px solid var(--cyan-neon);
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* Mobile Nav Drawer Open State */
#mobile-nav-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.preview-modal.active .preview-window {
  transform: translateY(0) scale(1);
}

.preview-header {
  background: #0B0E17;
  border-bottom: 2px solid var(--blue-primary);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preview-frame-container {
  flex: 1;
  background: #000000;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s var(--ease-glide);
}

.preview-frame-container.mobile-mode {
  padding: 20px;
  background: #080A10;
}

.preview-frame-container.mobile-mode iframe {
  width: 390px;
  height: 844px;
  max-height: 100%;
  border-radius: 36px;
  border: 8px solid #1E263D;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 229, 255, 0.2);
}

.preview-frame-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #FFFFFF;
}

/* Live Simulation Terminal */
.sga-terminal {
  background: #080B12;
  border: 1px solid var(--blue-primary);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--cyan-neon);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-neon);
  box-shadow: 0 0 10px var(--cyan-neon);
  animation: pulseNeon 1.8s ease-in-out infinite;
}

@keyframes pulseNeon {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* =====================================================================
 * SOCIAL MEDIA MAGNETIC CARDS
 * ===================================================================== */

.social-card {
  position: relative;
  background: var(--bg-surface);
  border: 2px solid var(--blue-primary);
  padding: 24px;
  transition: all 0.3s var(--ease-glide);
  overflow: hidden;
}

.social-card:hover {
  border-color: var(--cyan-neon);
  background: var(--bg-surface-elevated);
  transform: translateY(-4px);
  box-shadow: 6px 6px 0px var(--blue-primary);
}

.social-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.15), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s var(--ease-glide);
}

.social-card:hover::before {
  left: 150%;
}

/* Audio EQ Visualizer */
.audio-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.audio-eq span {
  width: 2.5px;
  height: 100%;
  background: var(--cyan-neon);
  transform-origin: bottom;
  animation: eqBounce 1.2s ease-in-out infinite alternate;
}

.audio-eq span:nth-child(2) { animation-delay: 0.2s; height: 60%; }
.audio-eq span:nth-child(3) { animation-delay: 0.5s; height: 90%; }
.audio-eq span:nth-child(4) { animation-delay: 0.3s; height: 40%; }

@keyframes eqBounce {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

/* Toast Notification */
.toast-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-surface-elevated);
  border: 2px solid var(--cyan-neon);
  color: var(--text-pure);
  padding: 12px 20px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px var(--cyan-glow);
  z-index: 10009;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.35s var(--ease-elastic);
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-notice.show {
  transform: translateY(0);
  opacity: 1;
}

/* Font-Cycling Animation Utility */
.font-cycle-code {
  display: inline-block;
  will-change: font-family;
}