/* ================================================================
   STYLE.CSS — Personal Homepage
   ----------------------------------------------------------------
   HOW THIS FILE IS ORGANIZED:
     1. VARIABLES  — all colors, fonts, spacing, breakpoints
     2. RESET & BASE
     3. HEADER / NAVIGATION
     4. SECTIONS & TYPOGRAPHY
     5. IMAGE / VIDEO GRID
     6. PLAY ICON (the only animated element)
     7. FOOTER
     8. RESPONSIVE BREAKPOINTS
   To change the whole palette or fonts, edit ONLY section 1.
   ================================================================ */


/* ================================================================
   1. VARIABLES — edit here to retheme the entire site
   ================================================================ */
:root {
  /* ---- Colors ---- */
  --bg-dark:      #161616;   /* page background */
  --bg-panel:     #1e1e1e;   /* slightly lighter panels (header, grid items) */
  --accent-green: #3dff8b;   /* primary accent (titles, links) */
  --accent-blue:  #4da6ff;   /* secondary accent (numbers, details) */
  --text-main:    #e8e8e8;   /* body text */
  --text-dim:     #9a9a9a;   /* captions, secondary text */
  --line-color:   #2e2e2e;   /* thin separator lines */

  /* ---- Fonts (must match the Google Fonts <link> in index.html) ---- */
  --font-sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Layout ---- */
  --container-max: 1700px;                    /* max content width on wide screens */
  --container-pad: clamp(1.25rem, 4vw, 4rem); /* horizontal page padding */
  --section-gap:   clamp(4rem, 9vh, 8rem);    /* vertical space between sections */
  --grid-gap:      clamp(1rem, 2vw, 2rem);    /* gap between grid items */

  /* ---- Type scale (fluid: min, preferred, max) ---- */
  --fs-title:  clamp(2.8rem, 7vw, 6.5rem);    /* big section titles */
  --fs-name:   clamp(3.2rem, 9vw, 8rem);      /* home name */
  --fs-body:   clamp(1rem, 1.1vw, 1.2rem);    /* paragraphs */
  --fs-small:  clamp(0.8rem, 0.9vw, 0.95rem); /* captions, mono labels */

  /* ---- Breakpoints (reference only — CSS vars can't be used in
          @media queries; the actual values are repeated in section 8):
          tablet: 900px, mobile: 600px ---- */
}


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

html {
  /* Pure-CSS smooth scrolling for the anchor navigation — no JS needed. */
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Central container: keeps content readable on ultra-wide monitors. */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Small monospace label used for decorative "terminal" lines. */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-green);
  letter-spacing: 0.05em;
}


/* ================================================================
   3. HEADER / NAVIGATION (sticky)
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--container-pad);
  background-color: rgba(22, 22, 22, 0.92); /* slightly transparent bg-dark */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-color);
}

.site-logo {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-green);
  text-decoration: none;
  white-space: nowrap;
}

/* Blinking cursor after the logo — subtle terminal cue.
   (This is a static element, not a scroll animation.) */
.site-logo .cursor {
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 2rem);
}

.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-main);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:hover {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
}


/* ================================================================
   4. SECTIONS & TYPOGRAPHY
   ================================================================ */
.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  border-bottom: 1px solid var(--line-color); /* thin separator line */
  /* Keeps section titles from hiding under the sticky header
     when jumping via the navigation. */
  scroll-margin-top: 5rem;
}

/* Decorative section number (01, 02, ...) in blue monospace. */
.section-number {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-blue);
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}
.section-number::before {
  content: "/ ";
  color: var(--accent-green);
}

/* Big bold section title — the main visual element of each chapter. */
.section-title {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent-green);
  margin-bottom: clamp(1rem, 3vh, 2rem);
}

/* Editable descriptive paragraph under each title. */
.section-text {
  max-width: 70ch; /* keeps line length readable on wide screens */
  color: var(--text-main);
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

/* ---- Home section ---- */
.section-home {
  min-height: 88vh;              /* fills most of the first screen */
  display: flex;
  align-items: center;
}

.home-name {
  font-size: var(--fs-name);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  /* Green→blue gradient text: the two accents in one title. */
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0.4rem 0 1rem;
}

.home-role {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  color: var(--accent-blue);
  margin-bottom: 1.2rem;
}

.home-intro {
  max-width: 60ch;
  color: var(--text-dim);
}

/* ---- About section extras ---- */
.about-contact {
  color: var(--accent-blue);
}

/* ---- Social links (Home section) ---- */
.social-links {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.social-link {
  color: var(--accent-green);
  transition: color 0.25s ease, transform 0.25s ease;
}

/* HOVER: icon scales up and shifts green → blue,
 *  same language as the play icon. */
.social-link:hover {
  color: var(--accent-blue);
  transform: scale(1.2);
}

/* ================================================================
   5. IMAGE / VIDEO GRID
   ----------------------------------------------------------------
   auto-fill + minmax means the grid automatically adapts to however
   many .grid-item blocks exist in the HTML — duplicate/remove blocks
   freely, never touch this CSS.
   ================================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--grid-gap);
}

.grid-item {
  position: relative; /* required so the play icon/link can overlay the image */
  background-color: var(--bg-panel);
  border: 1px solid var(--line-color);
}

.grid-item img {
  width: 100%;
  aspect-ratio: 3 / 2;   /* uniform tiles; images are cropped, not distorted */
  object-fit: cover;
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--text-dim);
  padding: 0.6rem 0.8rem;
}


/* ================================================================
   6. PLAY ICON — the ONLY animated interaction on the site
   ----------------------------------------------------------------
   Structure of a video block (see index.html):
     .video-item  > img (thumbnail)
                  > .play-icon (this element)
                  > .video-link (invisible link covering the block)
   ================================================================ */

/* Invisible link stretched over the whole video block (except caption). */
.video-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* The circular play button, centered on the thumbnail. */
.play-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: clamp(56px, 6vw, 80px);
  height: clamp(56px, 6vw, 80px);
  transform: translate(-50%, -50%);
  border: 2px solid var(--accent-green);
  border-radius: 50%;
  background-color: rgba(22, 22, 22, 0.55);
  transition: transform 0.25s ease, background-color 0.25s ease,
              border-color 0.25s ease;
  pointer-events: none; /* clicks pass through to .video-link */
}

/* The triangle inside the circle (pure CSS, no icon file needed). */
.play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%; /* slightly right of center for optical balance */
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--accent-green);
}

/* HOVER: icon scales up and glows blue. */
.video-item:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.15);
  border-color: var(--accent-blue);
  background-color: rgba(22, 22, 22, 0.8);
}
.video-item:hover .play-icon::after {
  border-left-color: var(--accent-blue);
}

/* CLICK: short pulse animation, triggered by the tiny script in
   index.html which adds the "clicked" class. */
.play-icon.clicked {
  animation: play-pulse 0.35s ease;
}
@keyframes play-pulse {
  0%   { transform: translate(-50%, -50%) scale(1.15); }
  50%  { transform: translate(-50%, -50%) scale(0.9);  }
  100% { transform: translate(-50%, -50%) scale(1.15); }
}


/* ================================================================
   7. FOOTER
   ================================================================ */
.site-footer {
  padding: 2rem 0 3rem;
}
.site-footer .mono-label {
  color: var(--text-dim);
}


/* ================================================================
   8. RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------
   Most sizing is already fluid via clamp(); these queries only
   adjust the grid column count and the header layout.
   ================================================================ */

/* ---- Tablet (≤ 900px): grid drops to 2 columns ---- */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Mobile (≤ 600px): single column, stacked header ---- */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .section {
    scroll-margin-top: 7rem; /* taller stacked header needs more offset */
  }
}