/*
Theme Name: Cyberspace Design v5.1
Theme URI: https://www.cyberspacedesign.co.uk
Author: Cyberspace Design
Description: Minimal base theme. Header and footer handled by Elementor Theme Builder. Provides dark background, grain texture, cursor glow, scroll reveal, and card tilt only.
Version: 5.0
*/

/* =============================================
   ROOT VARIABLES
   ============================================= */
:root {
  --bg:      #08080f;
  --accent:  #6b4eff;
  --accent2: #00A2E2;
  --text:    #ffffff;
  --muted:   rgba(255,255,255,0.5);
  --bg-card: #0f0f1a;
}

/* =============================================
   BASE RESET
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
}

/* =============================================
   GRAIN TEXTURE OVERLAY
   ============================================= */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* =============================================
   CUSTOM CURSOR GLOW
   ============================================= */
#cs-cursor {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(107,78,255,0.12) 0%, transparent 70%);
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* =============================================
   SCROLL REVEAL
   Use class cs-reveal on any Elementor widget/section.
   Optional delay classes: cs-d1, cs-d2, cs-d3
   ============================================= */
.cs-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.cs-reveal.cs-d1 { transition-delay: 0.1s; }
.cs-reveal.cs-d2 { transition-delay: 0.2s; }
.cs-reveal.cs-d3 { transition-delay: 0.35s; }

.cs-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   CARD TILT
   Use class cs-tilt on any Elementor widget/section.
   ============================================= */
.cs-tilt {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
  will-change: transform;
}

/* =============================================
   TYPOGRAPHY HELPERS
   (Elementor handles actual page typography - 
    these are just fallback utility classes)
   ============================================= */
.cs-heading {
  font-family: 'Syne', sans-serif;
}

/* =============================================
   ELEMENTOR COMPATIBILITY
   Ensure Elementor sections/containers are 
   never clipped or hidden by base theme.
   ============================================= */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner,
.elementor-widget-wrap,
.elementor-widget {
  opacity: 1 !important; /* never let base theme hide Elementor elements */
  visibility: visible !important;
}

/* Only apply opacity:0 if the cs-reveal class is explicitly added */
.elementor-section.cs-reveal,
.elementor-container.cs-reveal,
.e-con.cs-reveal,
.elementor-widget.cs-reveal {
  opacity: 0 !important;
}

.elementor-section.cs-reveal.is-visible,
.elementor-container.cs-reveal.is-visible,
.e-con.cs-reveal.is-visible,
.elementor-widget.cs-reveal.is-visible {
  opacity: 1 !important;
}