:root {
      --accent-h: 255;
      --grid-line: rgba(11, 10, 16, 0.05);
      --grid-line-dark: rgba(255, 255, 255, 0.04);
}

html, body {
height: 100%;
margin: 0;
overflow: hidden;
background-color: #0B0A10;
color: #F4F2F0;
font-family: 'IBM Plex Sans Arabic', sans-serif;
transition: background-color 0.3s ease, color 0.3s ease;
}

body {
background-color: #EDF1F4;
color: #0B0A10;
}

.dark body {
background-color: #0B0A10;
color: #F4F2F0;
}

.font-display {
font-family: 'Cairo', sans-serif;
}

.font-mono {
font-family: 'JetBrains Mono', monospace;
direction: ltr;
}

/* Dynamic Accent Colors */
.accent {
color: hsl(var(--accent-h) 85% 60%);
}

.accent-bg {
background-color: hsl(var(--accent-h) 85% 58%);
}

.accent-border {
border-color: hsl(var(--accent-h) 70% 55% / 0.4);
}

/* Blueprint Grid Background */
.blueprint-grid {
background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 36px 36px;
}

.dark .blueprint-grid {
background-image:
      linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
}

/* Full Page Snap Scroll Setup */
.snap-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}

.snap-section {
scroll-snap-align: start;
scroll-snap-stop: always;
height: 100vh;
position: relative;
background-size: cover;
background-position: center;
}

/* Vignette Gradient Background for Scene Contrast */
.vignette-right {
background: linear-gradient(to left, rgba(11, 10, 16, 0.95) 0%, rgba(11, 10, 16, 0.75) 50%, rgba(11, 10, 16, 0.35) 100%);
}

/* Technical frame corner marks */
.frame-marks {
position: relative;
}

.frame-marks::before,
.frame-marks::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
border-color: hsl(var(--accent-h) 85% 60%);
opacity: 0.85;
z-index: 20;
}

.frame-marks::before {
top: -1px;
right: -1px;
border-top: 2px solid;
border-right: 2px solid;
}

.frame-marks::after {
bottom: -1px;
left: -1px;
border-bottom: 2px solid;
border-left: 2px solid;
}

/* Scroll Animations */
.anim-box {
opacity: 0;
transform: translateY(30px);
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.snap-section.active .anim-box {
opacity: 1;
transform: translateY(0);
}

.snap-section.active .anim-delay-1 { transition-delay: 0.15s; }
.snap-section.active .anim-delay-2 { transition-delay: 0.30s; }
.snap-section.active .anim-delay-3 { transition-delay: 0.45s; }

/* Theme Card Styling */
.tech-card {
background: rgba(21, 19, 32, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.light .tech-card {
background: rgba(237, 241, 244, 0.9);
border: 1px solid rgba(11, 10, 16, 0.1);
}

/* Pulse Ring Indicator */
.pulse-ring::after {
content: "";
position: absolute;
inset: 0;
border-radius: 9999px;
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
background: currentColor;
}

@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(2.4); opacity: 0; }
}