/* Shared styles for all pages - Gforce Innovation */

:root {
  --brand-primary: #0d6efd;
  --brand-primary-light: #4a9eff;
  --brand-primary-dark: #0052cc;
  --brand-accent: #f57c00;
  --brand-accent-light: #ff9933;
  --bg-dark: #0a0e14;
  --bg-dark-alt: #131920;
  --bg-surface: #1a2332;
  --bg-surface-hover: #243142;
  --text-primary: #e8ecf1;
  --text-secondary: #8b99a8;
  --text-muted: #5c6d7f;
  --border-color: #2d3948;
  --border-accent: rgba(27, 150, 255, 0.3);
  --shadow-glow: 0 0 24px rgba(27, 150, 255, 0.35);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(
      1100px 700px at 85% -10%,
      rgba(13, 110, 253, 0.25),
      transparent 60%
    ),
    radial-gradient(
      900px 600px at 10% 10%,
      rgba(245, 124, 0, 0.18),
      transparent 55%
    ),
    var(--bg-dark);
  color: var(--text-primary);
}

/* Glass Effect */
.glass-effect {
  backdrop-filter: blur(18px);
  background: linear-gradient(
    135deg,
    rgba(26, 35, 50, 0.85),
    rgba(19, 25, 32, 0.95)
  );
  border: 1px solid rgba(45, 57, 72, 0.9);
}

/* Surface Cards */
.surface-card {
  background: linear-gradient(
    135deg,
    rgba(26, 35, 50, 0.9),
    rgba(19, 25, 32, 0.95)
  );
  border: 1px solid rgba(45, 57, 72, 0.9);
  box-shadow: 0 18px 40px rgba(5, 8, 12, 0.4);
  transition: all 0.3s ease;
}

.surface-card:hover {
  border-color: rgba(27, 150, 255, 0.35);
  box-shadow:
    0 24px 48px rgba(5, 8, 12, 0.45),
    0 0 22px rgba(27, 150, 255, 0.2);
  transform: translateY(-4px);
}

/* Blog Card Hover Effect */
.blog-card-hover {
  transition: all 0.3s ease;
}

.blog-card-hover:hover {
  transform: translateY(-8px);
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-light) 50%,
    var(--brand-accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero Orbs */
.hero-orb {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(13, 110, 253, 0.35),
    rgba(13, 110, 253, 0)
  );
  filter: blur(2px);
  pointer-events: none;
}

.hero-orb.secondary {
  inset: auto auto -35% -10%;
  width: 360px;
  height: 360px;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(245, 124, 0, 0.3),
    rgba(245, 124, 0, 0)
  );
}

/* Buttons */
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--brand-primary),
    var(--brand-primary-light) 55%,
    var(--brand-accent)
  );
  color: #ffffff;
  box-shadow: var(--shadow-glow);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 34px rgba(5, 8, 12, 0.45),
    0 0 24px rgba(13, 110, 253, 0.4);
}

.btn-outline {
  border: 1px solid rgba(13, 110, 253, 0.6);
  color: var(--brand-primary-light);
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: rgba(13, 110, 253, 0.12);
  color: #ffffff;
}

/* Pulse Animation */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(13, 110, 253, 0.25);
  }
  50% {
    box-shadow: 0 0 34px rgba(13, 110, 253, 0.45);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

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

.reveal-delay-1 {
  transition-delay: 0.12s;
}

.reveal-delay-2 {
  transition-delay: 0.24s;
}

.reveal-delay-3 {
  transition-delay: 0.36s;
}

/* Section Titles */
.section-title {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
}

/* Profile Image Component */
/* Enhanced professional profile image with subtle glow and responsive sizing */
.profile-image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  /* Ensure wrapper doesn't add extra space */
  width: fit-content;
}

/* Backdrop glow for depth and visual impact */
.profile-image-wrapper::before {
  content: '';
  position: absolute;
  inset: -12px;
  background: radial-gradient(
    circle,
    rgba(13, 110, 253, 0.25),
    transparent 70%
  );
  border-radius: 50%;
  z-index: -1;
  animation: profile-pulse 3s ease-in-out infinite;
}

@keyframes profile-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}

.profile-image {
  /* Base size - mobile first */
  width: 160px;
  height: 160px;
  /* Ensure perfect circle */
  border-radius: 50%;
  object-fit: cover;
  /* Shift image up to show top of head and center face - eyes in upper third */
  object-position: center 15%;
  
  /* Subtle zoom to increase visual presence and reduce empty space */
  transform: scale(1.15);
  
  /* Ensure image doesn't overflow circular border */
  display: block;
  
  /* Professional border treatment */
  border: 4px solid rgba(13, 110, 253, 0.4);
  box-shadow:
    0 8px 32px rgba(13, 110, 253, 0.35),
    0 0 0 8px rgba(26, 35, 50, 0.8),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
  
  /* Smooth transitions */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-image:hover {
  /* Slight additional zoom on hover for engagement */
  transform: scale(1.2);
  border-color: rgba(13, 110, 253, 0.6);
  box-shadow:
    0 12px 48px rgba(13, 110, 253, 0.45),
    0 0 0 8px rgba(26, 35, 50, 0.9),
    inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive sizing */
@media (min-width: 640px) {
  .profile-image {
    width: 192px;
    height: 192px;
  }
}

@media (min-width: 1024px) {
  .profile-image {
    width: 224px;
    height: 224px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .pulse-glow,
  .btn-primary:hover,
  .surface-card:hover {
    animation: none;
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .profile-image-wrapper::before {
    animation: none;
  }
  
  .profile-image:hover {
    transform: none;
  }
}

/* Print Styles */
@media print {
  .glass-effect,
  nav,
  footer,
  .btn-primary,
  .btn-outline {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
}