/* ============================================================
   STYLE.CSS — All the visuals for your portfolio
   ============================================================
   CSS (Cascading Style Sheets) controls EVERYTHING visual:
     - Colors & backgrounds
     - Fonts & text sizes
     - Layout (where things go on the page)
     - Animations & transitions
     - How it looks on mobile vs desktop

   💡 HOW CSS WORKS:
     selector { property: value; }

     selector = WHICH element to style (e.g. nav, h1, .classname)
     property = WHAT to change (e.g. color, font-size, margin)
     value    = HOW to change it (e.g. red, 16px, 10px)

     Example:
       h1 {
         color: blue;    ← all <h1> text turns blue
         font-size: 3rem; ← all <h1> text becomes 3rem tall
       }

   ========================================================== */


/* ----- GLOBAL RESET -----
   Browsers have built-in default styles. This "reset" removes
   the most annoying ones (like default margins and padding)
   so we start from a clean slate.
   ----- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* box-sizing: border-box means:
     If you set width: 100px + padding: 10px, the element
     is still 100px (not 120px). Much easier to work with. */
}


/* ----- ROOT VARIABLES -----
   Think of these as "design tokens" — we define colors once
   and reuse them everywhere. This makes it easy to change
   your entire site's color scheme by editing just these 5 lines.
   ----- */
:root {
  --bg-primary: #0a0a0f;        /* Near-black background */
  --bg-secondary: #12121a;      /* Slightly lighter black for sections */
  --text-primary: #e8e8f0;      /* Near-white text */
  --text-secondary: #8888a0;    /* Muted gray-purple for less important text */
  --accent: #6699ff;            /* Blue accent color (links, highlights) */
  --accent-glow: rgba(102, 153, 255, 0.15);  /* Subtle glow behind accent elements */
  --card-bg: rgba(18, 18, 26, 0.6);          /* Semi-transparent card backgrounds */
  --border: rgba(255, 255, 255, 0.06);       /* Very subtle white border */
}


/* ----- BASE HTML/BODY -----
   These apply to the entire page.
   ----- */
html {
  /* Smooth scrolling: when you click a nav link (#about),
     the page scrolls smoothly instead of jumping instantly. */
  scroll-behavior: smooth;
}

body {
  font-family: 'Press Start 2P', monospace;
  /* ^^ Font stack: try Inter first, then system fonts as fallback */

  background-color: var(--bg-primary);
  color: var(--text-primary);

  /* Line height: 1.7 = 70% more space between lines than default.
     This makes paragraphs much more readable. */
  line-height: 1.7;

  /* Remove any default body margin */
  margin: 0;

  /* Lock page scroll — scroll events drive 3D effects instead */
  overflow: hidden;
}


/* ----- THREE.JS CANVAS -----
   The 3D scene sits behind everything.
   - position: fixed → stays in place while you scroll
   - z-index: 0 → behind all other content
   - pointer-events: none → clicks pass through to content underneath
     (otherwise you couldn't click buttons because the invisible
      canvas would block them!)
   ----- */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

#three-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}


/* ----- NAVIGATION -----
   The bar at the top of the page.
   - position: fixed → stays at the top even when scrolling
   - z-index: 100 → always on top of everything (including 3D scene)
   ----- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* backdrop-filter: blur → the frosted-glass look behind the nav */
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 1100px;   /* Don't stretch the nav too wide on big screens */
  margin: 0 auto;       /* Center it horizontally */
  padding: 0.8rem 2rem;
  display: flex;
  justify-content: space-between;  /* Logo on left, links on right */
  align-items: center;
}

/* Logo / brand name */
.logo {
  font-size: 0.65rem;
  color: var(--text-primary);
  text-decoration: none;   /* Remove the underline from links */
  letter-spacing: -0.02em;
}

/* Navigation links list */
.nav-links {
  list-style: none;                    /* Remove the bullet points */
  display: flex;
  gap: 2rem;                           /* Space between each link */
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.55rem;
  transition: color 0.2s ease;        /* Smooth color change on hover */
}

.nav-links a:hover {
  color: var(--text-primary);          /* Brighten on hover */
}


/* ----- HAMBURGER MENU BUTTON (mobile only) -----
   Hidden on desktop, shows as ☰ button on phones/tablets.
   ----- */
.menu-toggle {
  display: none;         /* Hidden by default */
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
}


/* ----- HERO SECTION -----
   The big full-screen intro with the 3D scene behind it.
   - min-height: 100vh → at least as tall as the screen
   - position: relative + z-index: 1 → sits above the 3D canvas
   - pointer-events: none → clicks pass through to the canvas below
     BUT buttons/links inside have pointer-events: auto
   ----- */
.hero-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;       /* Vertically center content */
  justify-content: center;   /* Horizontally center content */
  pointer-events: none;      /* Pass clicks through to canvas */
}

.hero-content {
  text-align: center;
  padding: 2rem;
  pointer-events: auto;      /* Let text be selectable */
}

.hero-content .btn-primary {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.6rem 1.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  pointer-events: auto;
}

.hero-content .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(102, 153, 255, 0.3);
}

/* Your name — big, bold, with a subtle glow effect */
.hero-title {
  display: none;
}

.nav-inner .logo span {
  display: inline-block;
}

.hero-subtitle {
  font-size: clamp(0.4rem, 1.2vw, 0.6rem);
  color: var(--text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The little "↓ scroll" hint at the bottom of the hero */
.scroll-indicator {
  margin-top: 4rem;
  animation: bounce 2s infinite;   /* Bobs up and down */
}

.scroll-indicator span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* The bounce animation for the scroll indicator */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}


/* ----- CONTENT SECTIONS (About, Gallery, Social, Contact) -----
   Shared styles for every section below the hero.
   ----- */
.page-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 2rem;
}

.page-section .section-inner {
  width: 100%;
}

.content-section {
  position: relative;
  z-index: 1;                    /* Above the 3D canvas */
  min-height: 50vh;              /* At least half-screen tall */
  padding: 6rem 2rem;
  pointer-events: none;          /* Pass clicks through by default */
}

/* Inner container — max width keeps text readable on big screens */
.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  pointer-events: auto;          /* Allow clicking on content */
}

/* Section headings (About, Gallery, Follow Me, Contact) */
.content-section h2 {
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

/* Subtitle under each heading */
.section-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 3rem;
}


/* ----- ABOUT SECTION ----- */
.about-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;  /* Two columns: text wider, stats narrower */
  gap: 4rem;
  align-items: start;
}

.about-text p {
  color: var(--text-secondary);
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  max-width: 600px;
}

/* Stats cards — quick facts about you */
.about-stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;           /* Rounded corners */
  padding: 1.2rem 1.5rem;
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat:hover {
  transform: translateY(-2px);           /* Lift on hover */
  border-color: var(--accent-glow);      /* Subtle blue border */
}

.stat-number {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
}


/* ----- GALLERY SECTION ----- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /* ^^ Responsive grid:
       - Each card minimum 300px wide
       - If there's room for more, add another column
       - On mobile, it collapses to 1 column automatically */
  gap: 1.5rem;
}

.gallery-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;              /* Clips content to rounded corners */
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.gallery-card:hover {
  transform: translateY(-4px);
  border-color: rgba(102, 153, 255, 0.3);
}

/* The thumbnail area of each card */
.card-thumb {
  aspect-ratio: 16 / 9;          /* Always 16:9 rectangle */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Placeholder gradients — different colors for each card
   💡 REPLACE THESE WITH YOUR ACTUAL IMAGES LATER!
   When you add images, change the card-thumb to:
     background-image: url('/images/your-file.webp');
     background-size: cover;
     background-position: center;
*/
.placeholder-grad-1 {
  background: linear-gradient(135deg, #1a1a3e, #0f3460);
}
.placeholder-grad-2 {
  background: linear-gradient(135deg, #2d1a3e, #500f60);
}
.placeholder-grad-3 {
  background: linear-gradient(135deg, #1a2e1a, #0f500f);
}

.card-placeholder-text {
  color: rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Info below the thumbnail */
.card-info {
  padding: 1.2rem;
}

.card-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.card-info p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.8rem;
}

/* Tag badges (e.g. "Blender", "Geo Nodes") */
.card-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;               /* Wrap to next line if too many tags */
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  border-radius: 20px;           /* Pill-shaped */
  background: rgba(102, 153, 255, 0.1);
  color: var(--accent);
  border: 1px solid rgba(102, 153, 255, 0.15);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ----- SOCIAL SECTION ----- */
.social-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.social-card {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-decoration: none;         /* Remove link underline */
  color: var(--text-primary);
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.social-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}

.social-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.social-handle {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.social-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.social-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.2rem;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.social-card:hover .social-arrow {
  transform: translateX(4px);    /* Arrow slides right on hover */
}

/* Instagram embed feed area */
.insta-feed {
  margin-top: 2rem;
}

.insta-feed iframe {
  width: 100%;
  max-width: 540px;              /* Instagram's max embed width */
  height: 480px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}


/* ----- CONTACT SECTION ----- */
.contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.contact-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(102, 153, 255, 0.3);
}

.contact-socials {
  display: flex;
  gap: 1.5rem;
}

.contact-socials a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.contact-socials a:hover {
  color: var(--accent);
}


/* ----- FOOTER ----- */
footer {
  position: relative;
  z-index: 1;
  padding: 2rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

footer p {
  color: var(--text-secondary);
  font-size: 0.8rem;
}


/* ----- MOBILE RESPONSIVE -----
   These styles ONLY apply when the screen is 640px or narrower
   (phones, small tablets in portrait mode).
   The @media rule is how CSS does "if the screen is this small..."
   ----- */
@media (max-width: 640px) {

  /* Show the hamburger button */
  .menu-toggle {
    display: block;
  }

  /* Navigation links become a slide-in overlay from the right */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;                /* Off-screen to the right */
    width: 75%;
    height: 100dvh;              /* Use dynamic viewport height (accounts for browser chrome) */
    flex-direction: column;      /* Stack vertically */
    justify-content: center;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 5rem 2rem;
    transition: right 0.3s ease; /* Animate the slide-in */
    border-left: 1px solid var(--border);
    align-items: center;
    gap: 2.5rem;
    z-index: 200;
  }

  /* Navigation links bigger on mobile for fat fingers */
  .nav-links a {
    font-size: 1.2rem;
  }

  /* When the "open" class is added, slide the menu in */
  .nav-links.open {
    right: 0;
  }

  /* About section: stack columns on mobile */
  .about-grid {
    grid-template-columns: 1fr;  /* Single column */
    gap: 2rem;
  }

  /* About text: full width */
  .about-text p {
    max-width: 100%;
  }

  /* Gallery: cards are full width */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Social cards: stack */
  .social-row {
    flex-direction: column;
  }

  .social-card {
    min-width: 100%;
  }

  /* Section padding: tighter on mobile */
  .content-section {
    padding: 4rem 1.2rem;
  }

  .page-section {
    padding: 5rem 1.2rem;
    min-height: auto;
  }

  /* Scroll indicator hidden on mobile */
  .scroll-indicator {
    display: none;
  }

  /* Instagram embed: full height on mobile */
  .insta-feed iframe {
    height: 360px;
  }

  /* Contact button: full width on mobile */
  .contact-btn {
    width: 100%;
    text-align: center;
  }
}

/* Extra-small phones (under 400px) */
@media (max-width: 400px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 0.85rem;
  }
  .content-section {
    padding: 3rem 1rem;
  }
}