/* ============================================
   SASHAN SYSTEMS — Portfolio
   style.css | Global Styles & Layout
   © 2025 Sashan Systems. MIT License.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600&display=swap');

/* ── Variables ── */
:root {
  --dark:       #0d1b2a;
  --darker:     #080f18;
  --blue:       #1a9bdc;
  --blue-light: #3bbfff;
  --green:      #4caf50;
  --white:      #e8f4fd;
  --gray:       #8faabe;
  --card-bg:    rgba(26, 155, 220, 0.05);
  --border:     rgba(26, 155, 220, 0.2);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background:    var(--darker);
  color:         var(--white);
  font-family:   'Rajdhani', sans-serif;
  overflow-x:    hidden;
  cursor:        none;
}

/* ── Background grid ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(26,155,220,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,155,220,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── Glow orbs ── */
.orb {
  position:      fixed;
  border-radius: 50%;
  filter:        blur(120px);
  pointer-events:none;
  z-index:       0;
  opacity:       0.15;
}
.orb-1 { width:600px; height:600px; background:var(--blue);  top:-200px; right:-100px; animation: drift 15s ease-in-out infinite alternate; }
.orb-2 { width:400px; height:400px; background:var(--green); bottom:100px; left:-100px; animation: drift 20s ease-in-out infinite alternate-reverse; }

/* ── Shared animations ── */
@keyframes drift    { from { transform:translate(0,0); }       to { transform:translate(40px,40px); } }
@keyframes fadeUp   { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse    { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
@keyframes blink    { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ── Section shared ── */
section { padding: 6rem 5%; position: relative; z-index: 1; }

.section-label {
  display:     flex;
  align-items: center;
  gap:         12px;
  color:       var(--green);
  font-size:   0.75rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 30px; height: 1px;
  background: var(--green);
}

h2 {
  font-family:   'Orbitron', monospace;
  font-size:     clamp(1.8rem, 4vw, 3rem);
  font-weight:   700;
  color:         var(--white);
  margin-bottom: 3rem;
}
h2 span { color: var(--blue); }

/* ── Buttons ── */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      var(--blue);
  color:           var(--white);
  padding:         0.85rem 2rem;
  font-family:     'Rajdhani', sans-serif;
  font-size:       0.9rem;
  font-weight:     600;
  letter-spacing:  2px;
  text-transform:  uppercase;
  text-decoration: none;
  border:          none;
  cursor:          none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background 0.3s, transform 0.2s;
}
.btn-primary:hover { background: var(--blue-light); transform: translateY(-2px); }

.btn-outline {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      transparent;
  color:           var(--blue);
  padding:         0.85rem 2rem;
  font-family:     'Rajdhani', sans-serif;
  font-size:       0.9rem;
  font-weight:     600;
  letter-spacing:  2px;
  text-transform:  uppercase;
  text-decoration: none;
  border:          1px solid var(--blue);
  cursor:          none;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: all 0.3s;
}
.btn-outline:hover { background: rgba(26,155,220,0.1); color: var(--blue-light); border-color: var(--blue-light); }

/* ── Scroll reveal ── */
.reveal {
  opacity:    0;
  transform:  translateY(40px);
  transition: opacity 0.7s, transform 0.7s;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Toast ── */
.toast {
  position:   fixed;
  bottom:     2rem;
  right:      2rem;
  background: var(--blue);
  color:      white;
  padding:    1rem 1.5rem;
  font-size:  0.9rem;
  z-index:    999;
  opacity:    0;
  transform:  translateY(20px);
  transition: all 0.3s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.toast.show { opacity: 1; transform: translateY(0); }