/* ══════════════════════════════════════════════════════
   styles.css — Orest Zogju Portfolio
   Sections:
     1.  Reset & CSS Variables
     2.  Base / Body
     3.  Custom Cursor
     4.  Background Canvas & Noise Overlay
     5.  Layout Helpers
     6.  Navigation
     7.  Hero Section
     8.  Avatar / Orbit
     9.  Section Headers (shared)
     10. About Section
     11. Skills Section
     12. Projects Section
     13. Contact Section
     14. Footer
     15. Scroll Reveal Utility
     16. Glitch Effect
     17. Keyframe Animations
     18. Responsive / Media Queries
══════════════════════════════════════════════════════ */


/* ── 1. RESET & CSS VARIABLES ───────────────────── */

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

:root {
  --bg:       #050a14;   /* deepest background */
  --bg2:      #090f1e;   /* slightly lighter background layer */
  --surface:  #0d1627;   /* card/panel surfaces */
  --border:   rgba(0, 200, 255, 0.12);

  --accent:   #00c8ff;   /* primary cyan glow */
  --accent2:  #0057ff;   /* secondary deep blue */
  --accent3:  #7b2fff;   /* tertiary purple */

  --text:     #ccd6f6;   /* body text */
  --muted:    #5c7a9e;   /* de-emphasised text */
  --white:    #e8f0fe;   /* headings / highlights */
}

html {
  scroll-behavior: smooth;
}


/* ── 2. BASE / BODY ─────────────────────────────── */

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  overflow-x: hidden;
  cursor: none; /* hide the native cursor; we use a custom one */
}


/* ── 3. CUSTOM CURSOR ───────────────────────────── */

/* The cursor wrapper is fixed and has pointer-events: none so it
   never blocks clicks. It contains two children:
   - cursor-dot  : a small snappy dot that follows the mouse exactly
   - cursor-ring : a larger ring that lags behind (smoothed in JS)    */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform .1s;
  box-shadow: 0 0 12px var(--accent), 0 0 30px rgba(0, 200, 255, .4);
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(0, 200, 255, .5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, width .2s, height .2s, border-color .2s;
  position: absolute;
  top: 0;
  left: 0;
}

/* Expand the ring when hovering over any interactive element */
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: var(--accent);
}


/* ── 4. BACKGROUND CANVAS & NOISE OVERLAY ───────── */

/* The canvas is behind everything; JS draws the particle grid on it */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Subtle SVG noise texture layered on top of the canvas */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: .5;
  pointer-events: none;
}


/* ── 5. LAYOUT HELPERS ──────────────────────────── */

main {
  position: relative;
  z-index: 2; /* sit above the canvas (z-index: 0) and noise (z-index: 1) */
}

section {
  min-height: 100vh;
  padding: 120px 8vw;
  position: relative;
}

.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  position: relative;
  z-index: 2;
}


/* ── 6. NAVIGATION ──────────────────────────────── */

nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  padding: 20px 8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .4s, backdrop-filter .4s;
}

/* JS adds .scrolled after the user scrolls 60px */
nav.scrolled {
  background: rgba(5, 10, 20, .85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: 'Space Mono', monospace;
  font-size: 1.1rem;
  color: var(--accent);
  letter-spacing: .08em;
  text-decoration: none;
}
.nav-logo span { color: var(--white); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-family: 'Space Mono', monospace;
  font-size: .78rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .2s;
  position: relative;
}

/* Animated underline slides in on hover */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .3s;
}
.nav-links a:hover           { color: var(--accent); }
.nav-links a:hover::after    { width: 100%; }


/* ── 7. HERO SECTION ────────────────────────────── */

#hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  min-height: 100vh;
  padding-top: 140px;
}

.hero-left { position: relative; }

/* Hero text elements each fade-up on load (staggered by animation-delay) */
.hero-label {
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: fadeUp .6s .2s forwards;
}

.hero-name {
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 800;
  line-height: .95;
  color: var(--white);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp .6s .4s forwards;
}
.hero-name .accent { color: var(--accent); }

.hero-role {
  font-family: 'Space Mono', monospace;
  font-size: clamp(.9rem, 1.6vw, 1.15rem);
  color: var(--muted);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp .6s .6s forwards;
}
.hero-role .typed-text { color: var(--accent2); }

/* Blinking cursor shown next to the typed text */
.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink .8s step-end infinite;
}

.hero-bio {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp .6s .8s forwards;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .6s 1s forwards;
}

/* Shared button base */
.btn {
  padding: 13px 28px;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: none; /* keep custom cursor active */
  transition: all .25s;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 24px rgba(0, 200, 255, .3);
}
.btn-primary:hover {
  background: transparent;
  color: var(--accent);
  box-shadow: 0 0 40px rgba(0, 200, 255, .5);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 20px rgba(0, 200, 255, .15);
}


/* ── 8. AVATAR & ORBIT ──────────────────────────── */

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  animation: fadeIn .8s 1s forwards;
}

.avatar-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
}

/* Gradient border ring that spins continuously */
.avatar-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent3)) border-box;
  /* mask trick: only show the border, not the fill */
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: spin 8s linear infinite;
}

.avatar-ring-outer {
  position: absolute;
  inset: -32px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 200, 255, .2);
  animation: spin 20s linear infinite reverse;
}

.avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d2047, #0a1530);
  border: 2px solid rgba(0, 200, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Orbit dots that travel around the avatar */
.orbit-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.orbit-dot--cyan {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 30px rgba(0, 200, 255, .4);
  animation: orbitDot 5s linear infinite, pulse 2s infinite;
}
.orbit-dot--purple {
  background: var(--accent3);
  box-shadow: 0 0 12px var(--accent3);
  animation: orbitDot2 5s linear infinite;
}


/* ── 9. SECTION HEADERS (shared) ────────────────── */

.section-header { margin-bottom: 4rem; }

.section-label {
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--white);
  position: relative;
  display: inline-block;
}

/* Short gradient underline accent beneath section titles */
.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}


/* ── 10. ABOUT SECTION ──────────────────────────── */

#about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-text p {
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 1.2rem;
  font-size: .98rem;
}
.about-text p strong { color: var(--text); }

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}

/* Top glow bar that appears on hover */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent3));
  opacity: 0;
  transition: opacity .3s;
}
.stat-card:hover              { border-color: rgba(0, 200, 255, .3); transform: translateY(-4px); }
.stat-card:hover::before      { opacity: 1; }

.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: .4rem;
}
.stat-label {
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ── 11. SKILLS SECTION ─────────────────────────── */

#skills { padding: 120px 8vw; }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.skill-category {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.skill-category:hover {
  border-color: rgba(0, 200, 255, .35);
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 30px rgba(0, 200, 255, .06);
}

.skill-cat-icon  { font-size: 1.8rem; margin-bottom: 1rem; }
.skill-cat-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 1.2rem; }

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

.skill-tag {
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 3px;
  background: rgba(0, 200, 255, .08);
  border: 1px solid rgba(0, 200, 255, .18);
  color: var(--accent);
  transition: background .2s;
}
.skill-tag:hover { background: rgba(0, 200, 255, .15); }

/* ── Skill-level progress bars ── */
.skill-bars     { margin-top: 4rem; }
.skill-bar-item { margin-bottom: 1.4rem; }

.skill-bar-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.skill-bar-name {
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  color: var(--text);
  letter-spacing: .08em;
}

.skill-bar-pct {
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  color: var(--accent);
}

.skill-bar-track {
  height: 3px;
  background: rgba(255, 255, 255, .06);
  border-radius: 2px;
  overflow: hidden;
}

/* Width starts at 0; JS sets it to data-width% when the element enters view */
.skill-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  border-radius: 2px;
  width: 0;
  transition: width 1.4s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 0 8px rgba(0, 200, 255, .5);
}


/* ── 12. PROJECTS SECTION ───────────────────────── */

#projects { padding: 120px 8vw; }

/* ── Project card header row (number + status badge) ── */
.project-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
}

/* Coloured status pills (LIVE / JAVA / ML AI) */
.project-status-badge {
  font-family: 'Space Mono', monospace;
  font-size: .55rem;
  letter-spacing: .15em;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(0, 200, 255, .12);
  border: 1px solid rgba(0, 200, 255, .3);
  color: var(--accent);
  text-transform: uppercase;
}
.badge--java { background: rgba(123, 47, 255, .12); border-color: rgba(123, 47, 255, .35); color: var(--accent3); }
.badge--ml   { background: rgba(0, 200, 100, .10); border-color: rgba(0, 200, 100, .30); color: #00e87a; }

/* ── "Full Details →" highlighted link ── */
.details-cta {
  color: var(--white) !important;
  background: rgba(0, 200, 255, .08);
  border: 1px solid rgba(0, 200, 255, .25);
  padding: 5px 14px;
  border-radius: 3px;
  transition: background .2s, border-color .2s, color .2s !important;
}
.details-cta:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
}

/* ══════════════════════════════════════════════════
   BROWSER / WINDOW FRAME  —  wraps every project GIF
   Gives the GIF a realistic browser or desktop-app
   chrome so it feels like a live product demo.
══════════════════════════════════════════════════ */

.browser-frame {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 200, 255, .18);
  background: #080e1c;
  margin: 0 0 1.6rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255,255,255,.04);
  transition: border-color .3s, box-shadow .35s, transform .35s;
}
/* Lift + glow when hovering the parent link */
.project-media-link:hover .browser-frame {
  border-color: rgba(0, 200, 255, .5);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .65), 0 0 30px rgba(0, 200, 255, .12);
  transform: translateY(-3px);
}

/* Desktop-app flavour (darker, purple-tinted) */
.browser-frame--desktop {
  border-color: rgba(123, 47, 255, .25);
  background: #0b0718;
}
.project-media-link:hover .browser-frame--desktop {
  border-color: rgba(123, 47, 255, .55);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .65), 0 0 30px rgba(123, 47, 255, .15);
}

/* ── Browser chrome bar ── */
.browser-bar {
  height: 32px;
  background: #0f1624;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  flex-shrink: 0;
}

/* Traffic-light dots */
.browser-dots { display: flex; gap: 5px; flex-shrink: 0; }
.bdot { width: 10px; height: 10px; border-radius: 50%; }
.bdot--red    { background: #ff5f57; }
.bdot--yellow { background: #febc2e; }
.bdot--green  { background: #28c840; }

/* URL pill */
.browser-url {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 4px;
  padding: 3px 10px;
  font-family: 'Space Mono', monospace;
  font-size: .58rem;
  color: var(--muted);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.url-lock { font-size: .6rem; }

/* Desktop-app bar variant */
.desktop-bar {
  background: #120d22;
  border-bottom-color: rgba(123, 47, 255, .15);
  justify-content: space-between;
}
.desktop-title-icon { font-size: 1rem; }
.desktop-title-text {
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  color: var(--muted);
  letter-spacing: .08em;
  flex: 1;
  text-align: center;
}
.desktop-dots { flex-shrink: 0; }

/* ── Viewport area (holds the GIF + overlay) ── */
.browser-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050a14;
}

/* GIF fills the viewport, cropped to fit */
.browser-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .3s;
}
.project-media-link:hover .browser-gif { filter: brightness(1.05); }

/* ── "View Full Details" hover overlay ── */
.browser-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(5, 10, 20, .82) 0%,
    rgba(0, 30, 50, .75) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
  /* Subtle scanline texture layered on top */
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px,
      rgba(0, 200, 255, .015) 2px, rgba(0, 200, 255, .015) 4px),
    linear-gradient(135deg, rgba(5, 10, 20, .82), rgba(0, 30, 50, .75));
}
.project-media-link:hover .browser-overlay { opacity: 1; }

.browser-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  transform: scale(.9);
  transition: transform .3s;
}
.project-media-link:hover .browser-overlay-inner { transform: scale(1); }

.browser-overlay-icon { font-size: 1.6rem; }

.browser-overlay-text {
  font-family: 'Space Mono', monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
}

.browser-overlay-arrow {
  font-size: 1.2rem;
  color: var(--accent);
  animation: bounceRight .9s ease-in-out infinite alternate;
}

@keyframes bounceRight {
  from { transform: translateX(-4px); opacity: .6; }
  to   { transform: translateX(4px);  opacity: 1; }
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.project-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .35s, box-shadow .35s;
  display: flex;
  flex-direction: column;
}

/* Top gradient rule on every card */
.project-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--accent3));
}

/* Subtle corner glow inside the card */
.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(0, 200, 255, .04), transparent 60%);
  pointer-events: none;
}

.project-card:hover {
  border-color: rgba(0, 200, 255, .4);
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 200, 255, .08);
}

.project-number {
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  color: var(--accent);
  letter-spacing: .2em;
  margin-bottom: 1.5rem;
  opacity: .7;
}

.project-icon {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
}

.project-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: .8rem;
  line-height: 1.2;
}

.project-desc {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.8rem;
  flex: 1; /* push tech tags & links to the bottom of the card */
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.project-tech span {
  font-family: 'Space Mono', monospace;
  font-size: .62rem;
  padding: 4px 10px;
  border-radius: 2px;
  background: rgba(0, 87, 255, .1);
  border: 1px solid rgba(0, 87, 255, .25);
  color: #6fa3ff;
  letter-spacing: .06em;
}

.project-links {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.project-link {
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s, gap .2s;
  text-transform: uppercase;
}
.project-link:hover    { color: var(--white); gap: .7rem; }
.project-link svg      { width: 14px; height: 14px; }

/* ── Project media / GIF area ── */

/* Wraps the clickable preview image / GIF / mockup */
.project-media-link {
  display: block;
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}

.project-media {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg2);
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .3s;
}
.project-media-link:hover .project-media {
  border-color: var(--accent);
}

/* GIF fills the entire media area when provided */
.project-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* "View Project →" overlay that appears on hover */
.media-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 20, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.project-media-link:hover .media-overlay { opacity: 1; }

.media-overlay span {
  font-family: 'Space Mono', monospace;
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--accent);
  text-transform: uppercase;
}

/* ── Mockup colour themes ── */
.mockup-web    { background: linear-gradient(135deg, #0a1e40, #061228); }
.mockup-java   { background: linear-gradient(135deg, #1a0a2e, #0d061e); }
.mockup-python { background: linear-gradient(135deg, #0a1e15, #061510); }

/* Browser-chrome bar inside mockups */
.mockup-bar {
  height: 28px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--border);
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.mockup-filename {
  font-family: 'Space Mono', monospace;
  font-size: .55rem;
  color: rgba(123, 47, 255, .7);
  margin-left: 8px;
}

.mock-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Generic line placeholders inside mockups */
.mockup-content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 80%;
}
.mock-line {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
}
.mock-line.accent { background: rgba(0, 200, 255, .2); width: 40%; }
.mock-line.short  { width: 60%; }

/* Java-style window inside the mockup */
.mock-window {
  width: 80%;
  border: 1px solid rgba(123, 47, 255, .3);
  border-radius: 4px;
  padding: 12px;
  margin-top: 16px;
}
.mock-field {
  height: 6px;
  border-radius: 3px;
  background: rgba(123, 47, 255, .15);
  margin-bottom: 6px;
}

/* Python ML output mockup — probability bars */
.mock-ml-output {
  margin-top: 36px;
  width: 85%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mock-ml-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-label {
  font-family: 'Space Mono', monospace;
  font-size: .5rem;
  color: var(--muted);
  width: 52px;
  flex-shrink: 0;
  letter-spacing: .05em;
}
.mock-prob-bar {
  height: 12px;
  background: rgba(0, 200, 100, .3);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  transition: width .8s ease;
  min-width: 24px;
}
.mock-prob-bar.draw { background: rgba(0, 200, 255, .25); }
.mock-prob-bar.away { background: rgba(255, 80, 80, .25); }
.mock-prob-bar span {
  font-family: 'Space Mono', monospace;
  font-size: .45rem;
  color: var(--white);
}


/* ── 13. CONTACT SECTION ────────────────────────── */

#contact {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contact-left p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

.contact-links { display: flex; flex-direction: column; gap: 1rem; }

.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: .8rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color .3s, transform .2s, box-shadow .3s;
}
.contact-link:hover {
  border-color: var(--accent);
  transform: translateX(6px);
  box-shadow: 0 0 20px rgba(0, 200, 255, .1);
  color: var(--accent);
}

.contact-link-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(0, 200, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Contact form ── */
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }

.form-group { position: relative; }

.form-group label {
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
  color: var(--white);
  font-family: 'Syne', sans-serif;
  font-size: .9rem;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
  resize: none;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 200, 255, .08);
}
.form-group textarea { height: 120px; }

.form-submit { align-self: flex-start; }


/* ── 14. FOOTER ─────────────────────────────────── */

footer {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2.5rem 8vw;
  border-top: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}
footer span { color: var(--accent); }


/* ── 15. SCROLL REVEAL UTILITY ──────────────────── */

/* Elements with .reveal start invisible and slide up.
   JS (IntersectionObserver) adds .visible when they enter the viewport. */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
              transform .7s cubic-bezier(.4, 0, .2, 1);
}
.reveal.visible       { opacity: 1; transform: none; }
.reveal-delay-1       { transition-delay: .1s; }
.reveal-delay-2       { transition-delay: .2s; }
.reveal-delay-3       { transition-delay: .3s; }
.reveal-delay-4       { transition-delay: .4s; }


/* ── 16. GLITCH EFFECT ──────────────────────────── */

/* The element needs data-text="<same text>" to work.
   Two pseudo-elements are offset by a couple of pixels
   and clipped to different horizontal slices,
   then flicker in/out via keyframes.                   */
.glitch { position: relative; }

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}
.glitch::before {
  left: 2px;
  color: var(--accent);
  animation: glitch1 4s infinite steps(1);
}
.glitch::after {
  left: -2px;
  color: var(--accent3);
  animation: glitch2 4s infinite steps(1);
}


/* ── 17. KEYFRAME ANIMATIONS ────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Glitch channel A — cuts through horizontal slices at random times */
@keyframes glitch1 {
  0%, 90%, 100% { clip-path: none; opacity: 0; }
  91%  { clip-path: polygon(0 20%, 100% 20%, 100% 35%, 0 35%); opacity: .8; }
  93%  { clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%); }
  95%  { clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%); }
}

@keyframes glitch2 {
  0%, 92%, 100% { clip-path: none; opacity: 0; }
  93% { clip-path: polygon(0 50%, 100% 50%, 100% 65%, 0 65%); opacity: .8; }
  96% { clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
}

/* Orbit dot A: starts at 0°, travels clockwise around the avatar */
@keyframes orbitDot {
  from { transform: rotate(0deg)   translateX(184px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(184px) rotate(-360deg); }
}

/* Orbit dot B: starts at 180° (opposite side), same speed */
@keyframes orbitDot2 {
  from { transform: rotate(180deg) translateX(184px) rotate(-180deg); }
  to   { transform: rotate(540deg) translateX(184px) rotate(-540deg); }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 10px var(--accent); }
  50%       { box-shadow: 0 0 24px var(--accent), 0 0 50px rgba(0, 200, 255, .4); }
}


/* ── 18. RESPONSIVE / MEDIA QUERIES ─────────────── */

@media (max-width: 900px) {
  /* Stack hero, about, and contact to single column on tablets/mobile */
  #hero, #about, .contact-inner { grid-template-columns: 1fr; }
  .hero-right  { order: -1; }             /* avatar above the text on mobile */
  .avatar-wrapper { width: 220px; height: 220px; }
  .projects-grid  { grid-template-columns: 1fr; }
  .about-stats    { grid-template-columns: repeat(2, 1fr); }
  nav     { padding: 16px 6vw; }
  section { padding: 100px 6vw; }
}

@media (max-width: 540px) {
  .nav-links   { gap: 1.2rem; }
  .about-stats { grid-template-columns: 1fr; }
}