/* =========================================================
   YOGESH GARIYA — PORTFOLIO STYLES
   ---------------------------------------------------------
   This file is organized into sections:
   1. Design Tokens (colors, fonts, spacing) — edit here first
   2. Reset & Base Styles
   3. Layout Helpers
   4. Navigation Bar
   5. Hero Section
   6. About Section
   7. Skills Section
   8. Projects Section
   9. Resume Section
   10. Contact Section
   11. Footer
   12. Animations
   13. Responsive (Mobile) Styles
   ========================================================= */


/* ============================================
   1. DESIGN TOKENS
   Change colors/fonts here and the whole site
   updates automatically.
   ============================================ */
:root {
  /* Background colors */
  --bg: #0a0e17;            /* main page background */
  --bg-soft: #0d1320;       /* slightly lighter background for alt sections */
  --surface: #111827;       /* cards / panels */
  --surface-hover: #16203a; /* card hover state */

  /* Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text colors */
  --text: #e6e9f0;          /* primary text */
  --text-muted: #8b97ad;    /* secondary text */
  --text-dim: #5b6678;      /* faint / caption text */

  /* Accent colors (the "neon" highlights) */
  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, 0.12);
  --cyan-glow: rgba(34, 211, 238, 0.35);
  --purple: #a78bfa;
  --purple-soft: rgba(167, 139, 250, 0.12);
  --purple-glow: rgba(167, 139, 250, 0.35);

  /* Fonts */
  --font-display: "Space Grotesk", sans-serif; /* headings */
  --font-body: "Inter", sans-serif;            /* paragraphs */
  --font-mono: "JetBrains Mono", monospace;    /* labels, tags, data */

  /* Shape & spacing */
  --radius: 12px;
  --radius-sm: 8px;
  --max-width: 1140px;
  --section-pad: 110px;
}

/* ============================================
   2. RESET & BASE STYLES
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.project-media{
    position:relative;
    overflow:hidden;
}

.project-media img{
    width:100%;
    display:block;
}

.play-button{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:70px;
    height:70px;

    border-radius:50%;

    background:rgba(0,0,0,.7);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

    cursor:pointer;
}

.play-button i{

    color:white;

    font-size:28px;

    margin-left:4px;
}

.project-media:hover .play-button{

    transform:translate(-50%,-50%) scale(1.15);

    background:#14d9ff;
}

.project-media:hover img{

    transform:scale(1.05);
    transition:.4s;
}


@media (max-width: 768px) {
  .hero-mobile-hide {
    display: none !important;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* Subtle dashboard-style grid pattern across the whole page */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* Visible focus ring for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   3. LAYOUT HELPERS
   ============================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: var(--section-pad) 0;
  position: relative;
}

/* Eyebrow + heading combo used at the top of every section */
.section-head {
  margin-bottom: 56px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-sub {
  color: var(--text-muted);
  max-width: 620px;
  margin-top: 12px;
  font-size: 16px;
}

/* Gradient text used for highlighted words */
.gradient-text {
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Generic buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  color: var(--cyan);
}

.btn-primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #06222b;
  font-weight: 600;
}

.btn-primary:hover {
  box-shadow: 0 0 24px var(--cyan-glow);
  color: #06222b;
  border-color: var(--cyan);
  filter: brightness(1.08);
}

.btn-ghost {
  border-color: var(--border);
  color: var(--text-muted);
}

.btn-ghost:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.btn-small {
  padding: 9px 16px;
  font-size: 13px;
}

/* Reveal-on-scroll animation hook (class is toggled by script.js) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ============================================
   4. NAVIGATION BAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 14, 23, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
}

.nav-logo span {
  color: var(--cyan);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease;
  position: relative;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active-link {
  color: var(--cyan);
}

.nav-cta {
  display: inline-flex;
}

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ============================================
   5. HERO SECTION
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 72px; /* offset for fixed navbar */
  overflow: hidden;
}

/* Ambient glow blobs behind the hero content */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: 420px;
  height: 420px;
  background: var(--cyan-glow);
  opacity: 0.18;
  top: -120px;
  left: -120px;
}

.hero::after {
  width: 420px;
  height: 420px;
  background: var(--purple-glow);
  opacity: 0.18;
  bottom: -140px;
  right: -100px;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 28px;
}

.hero-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.hero-role {
  font-family: var(--font-mono);
  font-size: clamp(15px, 2vw, 20px);
  color: var(--text-muted);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}

.hero-role .pipe {
  color: var(--text-dim);
  margin: 0 6px;
}

.hero-role .highlight-cyan { color: var(--cyan); }
.hero-role .highlight-purple { color: var(--purple); }

.hero p.lead {
  max-width: 560px;
  color: var(--text-muted);
  font-size: 17px;
  margin-bottom: 40px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============================================
   6. ABOUT SECTION
   ============================================ */
.about {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}

.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.about-card .label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 16px;
}

/* Mini "stat" rows inside the about card, dashboard-style */
.about-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 14px;
}

.about-stat:last-child {
  border-bottom: none;
}

.about-stat span:first-child {
  color: var(--text-muted);
}

.about-stat span:last-child {
  color: var(--text);
  font-weight: 600;
}

.about-text p {
  color: var(--text-muted);
  margin-bottom: 18px;
  font-size: 16px;
}

.about-text p strong {
  color: var(--text);
  font-weight: 600;
}

/* ============================================
   7. SKILLS SECTION
   ============================================ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.skill-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.skill-pill:hover {
  transform: translateY(-3px);
  border-color: var(--cyan);
  box-shadow: 0 8px 24px -12px var(--cyan-glow);
  background: var(--surface-hover);
}

.skill-pill .skill-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Alternate accent colors for variety — applied via nth-child */
.skill-pill:nth-child(odd) .skill-dot {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}

.skill-pill:nth-child(even) .skill-dot {
  background: var(--purple);
  box-shadow: 0 0 8px var(--purple-glow);
}

/* ============================================
   8. PROJECTS SECTION
   ============================================ */
.projects {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Each project card looks like a dashboard "widget" */
.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow: 0 24px 48px -28px rgba(34, 211, 238, 0.25);
}

/* Window-style header bar above the screenshot, like a dashboard widget */
.project-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.project-window-dots {
  display: flex;
  gap: 7px;
}

.project-window-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
}

.project-window-dots span:nth-child(1) { background: var(--cyan); opacity: 0.7; }
.project-window-dots span:nth-child(2) { background: var(--purple); opacity: 0.7; }

.project-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Screenshot / media area */
.project-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.project-media img,
.project-media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  display: block;
  transition: transform 0.4s ease;
}

.project-card:hover .project-media img {
  transform: scale(1.035);
}

/* Body content of the card */
.project-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.project-desc {
  color: var(--text-muted);
  font-size: 14.5px;
  margin-bottom: 18px;
}

/* Technology tag list */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.project-tags span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--cyan-soft);
  color: var(--cyan);
  border: 1px solid rgba(34, 211, 238, 0.18);
}

.project-tags span:nth-child(even) {
  background: var(--purple-soft);
  color: var(--purple);
  border-color: rgba(167, 139, 250, 0.18);
}

/* Action links row (GitHub, LinkedIn, README, Demo) */
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.project-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 7px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.project-links a:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  background: var(--cyan-soft);
}

/* "More projects coming soon" placeholder card */
.project-card.coming-soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  color: var(--text-dim);
  min-height: 100%;
}

.project-card.coming-soon .project-body {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-card.coming-soon .project-title {
  color: var(--text-muted);
}

/* ============================================
   9. RESUME SECTION
   ============================================ */
.resume-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.resume-card .resume-text h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}

.resume-card .resume-text p {
  color: var(--text-muted);
  max-width: 520px;
  font-size: 15px;
}

/* ============================================
   10. CONTACT SECTION
   ============================================ */
.contact {
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.contact-link:hover {
  border-color: var(--cyan);
  transform: translateX(4px);
}

.contact-link .icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan-soft);
  color: var(--cyan);
  flex-shrink: 0;
}

.contact-link:nth-child(2) .icon {
  background: var(--purple-soft);
  color: var(--purple);
}

.contact-link .meta .title {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-link .meta .sub {
  color: var(--text-dim);
  font-size: 12.5px;
}

/* Contact form */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.form-field input,
.form-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-dim);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--cyan);
}

.form-note {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: -4px;
}

/* ============================================
   11. FOOTER
   ============================================ */
.footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-left {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
}

.footer-left span {
  color: var(--cyan);
}

.footer-socials {
  display: flex;
  gap: 18px;
}

.footer-socials a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.footer-socials a:hover {
  color: var(--cyan);
}

/* ============================================
   12. ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   13. RESPONSIVE STYLES
   ============================================ */
@media (max-width: 900px) {
  :root {
    --section-pad: 80px;
  }

  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-cta {
    width: 100%;
  }

  .nav-cta .btn {
    width: 100%;
  }

  .nav-toggle {
    display: flex;
  }

  .resume-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 540px) {
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .section-title {
    font-size: 30px;
  }
}