/* 
  Theme: Midnight Glass (Premium Portfolio)
  Author: Hosam G. Zewain
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors - Midnight Theme */
  --bg-dark: #020617;
  --bg-card: rgba(15, 23, 42, 0.6);
  --bg-card-hover: rgba(30, 41, 59, 0.7);
  --primary: #38bdf8;
  /* Sky 400 */
  --primary-glow: rgba(56, 189, 248, 0.5);
  --secondary: #818cf8;
  /* Indigo 400 */
  --secondary-glow: rgba(129, 140, 248, 0.5);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border: rgba(255, 255, 255, 0.08);
  --gradient-1: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.15), transparent 70%);
  --gradient-2: radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.15), transparent 60%);

  /* Dimensions */
  --max-width: 1200px;
  --grid-gap: 1.5rem;
  --card-radius: 24px;

  /* Fonts */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;

  /* Glass Variables */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-btn: rgba(255, 255, 255, 0.05);
  --glass-btn-hover: rgba(255, 255, 255, 0.1);
  --btn-text: #fff;
  --tag-text: #e2e8f0;
  /* Light text for Dark Mode */

  --text-gradient: linear-gradient(to right, #fff, #94a3b8);
}

[data-theme="light"] {
  /* Colorful Light Theme */
  --bg-dark: #f0f9ff;
  /* Light Sky Background */
  --bg-card: rgba(255, 255, 255, 0.65);
  --bg-card-hover: rgba(255, 255, 255, 0.9);
  --primary: #0284c7;
  /* Sky 600 - Stronger for contrast */
  --primary-glow: rgba(2, 132, 199, 0.3);
  --secondary: #7c3aed;
  /* Violet 600 */
  --secondary-glow: rgba(124, 58, 237, 0.3);
  --text-main: #0f172a;
  /* Slate 900 */
  --text-muted: #475569;
  /* Slate 600 */
  --border: rgba(56, 189, 248, 0.2);

  /* Light Mode Glass Overrides */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);
  --glass-btn: rgba(2, 132, 199, 0.1);
  --glass-btn-hover: rgba(2, 132, 199, 0.2);
  --btn-text: var(--primary);
  --tag-text: #0369a1;
  /* Darker Sky Blue for Light Mode (Sky 700) */

  /* Vibrant Gradients */
  --gradient-1: radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.25), transparent 60%);
  --gradient-2: radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.25), transparent 60%);

  --text-gradient: linear-gradient(to right, #0f172a, #475569);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Background Gradients */
.bg-gradient-1 {
  position: fixed;
  top: -20%;
  left: -10%;
  width: 80vw;
  height: 80vh;
  background: var(--gradient-1);
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  animation: pulse 10s infinite alternate;
}

.bg-gradient-2 {
  position: fixed;
  bottom: -10%;
  right: -10%;
  width: 60vw;
  height: 60vh;
  background: var(--gradient-2);
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  animation: pulse 12s infinite alternate-reverse;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

/* Typography */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  color: var(--text-main);
  line-height: 1.1;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

/* Floating Navigation */
.floating-nav {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  display: flex;
  gap: 1.5rem;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.floating-nav a {
  color: var(--text-muted);
  font-size: 1.25rem;
  position: relative;
  padding: 0.5rem;
}

.floating-nav a:hover,
.floating-nav a.active {
  color: var(--primary);
  transform: translateY(-3px);
}

.floating-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
}

.theme-btn {
  background: none;
  border: none;
  color: var(--secondary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem;
  transition: 0.3s;
  display: flex;
  align-items: center;
}

.theme-btn:hover {
  color: var(--primary);
  transform: rotate(15deg);
}

/* Bento Grid System */
.bento-container {
  max-width: var(--max-width);
  margin: 2rem auto 8rem;
  /* Bottom margin for floating nav */
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: var(--grid-gap);
}

/* Bento Item / Card */
.bento-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.bento-item:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Spans */
.span-2-col {
  grid-column: span 2;
}

.span-full {
  grid-column: 1 / -1;
}

/* Split Layout for Experience & Sidebar */
.split-wrapper {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--grid-gap);
}

.side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

/* Responsive Grid */
@media (max-width: 992px) {
  .bento-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .split-wrapper {
    grid-template-columns: 1fr;
  }

  .span-2-col {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .bento-container {
    grid-template-columns: 1fr;
  }

  .span-2-col,
  .span-full {
    grid-column: span 1;
  }

  .hero-block {
    flex-direction: column-reverse;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .profile-img {
    width: 150px;
    height: 150px;
    margin-bottom: 1.5rem;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .bento-item {
    padding: 1.5rem;
  }

  /* Force single column for grids on mobile to prevent overflow */
  .skill-groups,
  .achievement-list {
    grid-template-columns: 1fr;
  }

  .social-block {
    padding: 2rem 1rem;
  }

  .timeline-wrapper {
    padding-left: 1.5rem;
    margin-left: 0;
  }

  .timeline-dot {
    left: -2.05rem;
  }
}

@media (max-width: 480px) {
  .floating-nav {
    padding: 0.5rem 1rem;
    gap: 1rem;
    width: 90%;
    justify-content: space-between;
  }

  .floating-nav a {
    font-size: 1.1rem;
  }

  .hero-content h1 {
    font-size: 2rem;
  }
}

/* Block Styles */
.block-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.block-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
}

/* Hero */
.hero-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 400px;
}

.hero-content {
  flex: 1;
}

.badge-glow {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(56, 189, 248, 0.1);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 50px;
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  background: var(--text-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content h2 {
  font-size: 1.75rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  min-height: 42px;
  /* Prevent layout shift */
}

.typing-text {
  color: var(--secondary);
  font-weight: 600;
}

.cursor {
  color: var(--secondary);
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.hero-content p {
  color: var(--text-muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
  max-width: 500px;
}

.hero-visual {
  /* flex: 0 0 300px; */
  position: relative;
}

.profile-img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  border: 4px solid rgba(255, 255, 255, 0.1);
  animation: morph 8s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

/* Buttons */
.btn {
  padding: 0.8rem 1.8rem;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(56, 189, 248, 0.6);
}

.btn-glass {
  background: var(--glass-btn);
  border: 1px solid var(--border);
  color: var(--btn-text);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Stats Block */
.stats-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}

.stat-item .count {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-heading);
  text-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
}

.stat-item span {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-heading);
}

.stat-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Socials Block */
.social-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2rem;
  padding: 3rem 2rem;
}

.social-block .block-header {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.social-block .block-header h3 {
  font-size: 2rem;
  justify-content: center;
}

.social-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.social-btn {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--glass-bg);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  border: 1px solid var(--border);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-btn:hover {
  background: var(--text-main);
  color: var(--bg-dark);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* About Block */
.about-block p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.about-block strong {
  color: var(--text-main);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tag {
  background: rgba(129, 140, 248, 0.1);
  color: var(--secondary);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  border: 1px solid rgba(129, 140, 248, 0.2);
}

/* Timeline Customization */
.timeline-wrapper {
  position: relative;
  border-left: 2px solid rgba(56, 189, 248, 0.2);
  margin-left: 0.5rem;
  padding-left: 2rem;
  margin-top: 1.5rem;
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -2.55rem;
  /* -2rem padding + -0.55rem shift */
  top: 0;
  width: 16px;
  height: 16px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15);
  border: 2px solid var(--bg-dark);
  transition: 0.3s;
}

.timeline-item:hover .timeline-dot {
  background: #fff;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.3);
}

/* Reusing job-card for timeline content but overriding minimal styles */
.job-card {
  background: var(--glass-bg);
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  transition: 0.3s;
}

.job-card:hover {
  background: var(--glass-bg-hover);
  transform: translateX(5px);
  border-color: rgba(255, 255, 255, 0.15);
}

.job-card .year {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.25rem;
}

.job-card h4 {
  margin: 0.25rem 0;
  font-size: 1.1rem;
}

.job-card .company {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.job-card .desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.job-details {
  list-style: none;
  margin-top: 1rem;
  padding-left: 0;
}

.job-details li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.job-details li::before {
  content: "▹";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 1.2rem;
  line-height: 1.2;
}

/* Achievements Block */
.achievement-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.achievement-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: 0.3s;
}

.achievement-item:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-5px);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
}

.achievement-icon {
  min-width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(129, 140, 248, 0.1));
  border-radius: 12px;
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  border: 1px solid rgba(56, 189, 248, 0.2);
  flex-shrink: 0;
}

.achievement-content h4 {
  color: var(--text-main);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.achievement-content p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Certifications specific - keeping as grid or can share timeline if preferred, but usually certs grid is fine. 
   User said "Experience section" design, but if they want "Journey" as timeline, likely just jobs.
   Let's keep certs as grid for visual variety.
*/
/* Certifications Sidebar */
.cert-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cert-card-sidebar {
  padding: 1rem 1.25rem;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: 0.3s;
}

.cert-card-sidebar:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(56, 189, 248, 0.3);
}

.cert-card-sidebar h4 {
  font-size: 1rem;
  margin: 0.2rem 0;
  color: var(--text-main);
}

.cert-card .year {
  color: var(--secondary);
}

.cert-card h4 {
  font-size: 0.95rem;
}

/* Skills Block - Categorized */
.skill-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.skill-category {
  background: var(--glass-bg);
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  transition: 0.3s;
}

.skill-category:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(56, 189, 248, 0.3);
  transform: translateY(-5px);
}

.skill-category h5 {
  margin-bottom: 1.2rem;
  color: var(--text-main);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 0.8rem;
}

.skill-category h5 i {
  color: var(--secondary);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.skill-tag {
  background: rgba(56, 189, 248, 0.1);
  color: var(--tag-text);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.85rem;
  border: 1px solid rgba(56, 189, 248, 0.15);
  transition: 0.2s;
}

.skill-tag:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* Ventures */
.venture-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--glass-bg);
  border-radius: 12px;
  transition: 0.3s;
  border: 1px solid transparent;
}

.venture-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-glow);
}

.venture-icon {
  width: 40px;
  height: 40px;
  background: rgba(56, 189, 248, 0.1);
  border-radius: 8px;
  color: var(--primary);
  display: grid;
  place-items: center;
}

/* Footer / Contact */
.footer-block {
  text-align: center;
  padding: 4rem 2rem;
}

.footer-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.footer-content p {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.footer-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.copyright {
  color: var(--text-muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  display: inline-block;
  width: 100%;
  max-width: 400px;
}

/* Animation Utility Classes */
.fade-in {
  opacity: 1;
  transform: none;
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

.fade-in-down {
  /* Keep nav animation or remove? User said "section appear". Nav is fine usually. 
     Let's keep nav animation as it's not scrolling. */
  opacity: 0;
  transform: translateY(-50px) translateX(-50%);
  animation: fadeInDown 0.8s 0.5s forwards;
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}

.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

.delay-400 {
  transition-delay: 0.4s;
}

.delay-500 {
  transition-delay: 0.5s;
}

.delay-600 {
  transition-delay: 0.6s;
}

.delay-700 {
  transition-delay: 0.7s;
}