/* ════════════════════════════════════════════════════════════════════ */
/* GLOBAL STYLES & RESET */
/* ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* CSS Variables - Design System Colors */
:root {
  --bg: #0a0a0a; --surface: #111; --surface2: #1a1a1a;
  --border: rgba(255,255,255,0.08);
  --text: #f5f5f5; --text-muted: #888; --text-dim: #555;
  --accent: #e8d5b0; --accent2: #c9a96e;
  --red: #d4504a; --green: #4aad7c; --blue: #4a7ad4;
}

html { scroll-behavior: smooth; }

/* Body - Dark theme with custom cursor */
body {
  background: var(--bg); color: var(--text);
  font-family: 'Outfit', sans-serif; font-weight: 300;
  line-height: 1.6; overflow-x: hidden; cursor: none;
}

/* ════════════════════════════════════════════════════════════════════ */
/* CUSTOM CURSOR */
/* ════════════════════════════════════════════════════════════════════ */
/* Main cursor dot - follows immediately with no lag */
.cursor {
  position: fixed; width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width .2s, height .2s, background .2s;
  will-change: left,top; left: 0; top: 0;
}

/* Outer ring - lags slightly behind for smooth effect */
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid rgba(232,213,176,.4); border-radius: 50%;
  pointer-events: none; z-index: 9998; transform: translate(-50%,-50%);
  transition: width .25s, height .25s, border-color .25s;
  will-change: left,top; left: 0; top: 0;
}

/* Film grain texture overlay */
body::before {
  content:''; position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:1000; opacity:.4;
}

/* ════════════════════════════════════════════════════════════════════ */
/* NAVIGATION */
/* ════════════════════════════════════════════════════════════════════ */
/* Fixed header with smooth scroll transition */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 3rem;
  transition: padding .5s cubic-bezier(.4,0,.2,1),
              background .5s cubic-bezier(.4,0,.2,1),
              border-color .5s cubic-bezier(.4,0,.2,1),
              box-shadow .5s cubic-bezier(.4,0,.2,1);
  border-bottom:1px solid transparent;
}

/* Nav shrinks and adds blur on scroll */
nav.scrolled {
  padding:.9rem 3rem;
  background:rgba(10,10,10,.92);
  border-bottom-color:var(--border);
  box-shadow:0 8px 40px rgba(0,0,0,.45);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}

/* Logo styling - italic accent color */
.nav-logo {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:1.1rem; color:var(--accent); text-decoration:none;
  letter-spacing:.02em; transition:opacity .3s;
}
.nav-logo:hover { opacity:.7; }

/* Flex nav links container */
.nav-links { display:flex; gap:2.5rem; list-style:none; position:relative; }

/* Animated underline that slides between links */
.nav-indicator {
  position:absolute; bottom:-5px; height:1px; background:var(--accent);
  transition: left .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), opacity .3s;
  opacity:0; pointer-events:none;
}

/* Nav link states */
.nav-links a {
  color:var(--text-muted); text-decoration:none;
  font-size:.78rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  transition:color .3s; padding-bottom:5px;
}
.nav-links a:hover { color:var(--text); }
.nav-links a.active { color:var(--accent); }


/* ════════════════════════════════════════════════════════════════════ */
/* HERO SECTION */
/* ════════════════════════════════════════════════════════════════════ */
/* Full-height hero with two-column grid layout */
.hero {
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  align-items:center; padding:8rem 8vw 4rem; position:relative; overflow:hidden;
}

/* Animated gradient blobs in background */
.hero-blobs { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.hero-blobs span {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.6;
  animation:blobDrift var(--d,12s) ease-in-out infinite alternate;
}
.hero-blobs span:nth-child(1) {
  width:500px; height:500px; background:radial-gradient(circle,rgba(201,169,110,.09),transparent 70%);
  top:5%; right:8%; --d:13s;
}
.hero-blobs span:nth-child(2) {
  width:350px; height:350px; background:radial-gradient(circle,rgba(74,122,212,.06),transparent 70%);
  bottom:10%; left:3%; --d:16s;
}
.hero-blobs span:nth-child(3) {
  width:250px; height:250px; background:radial-gradient(circle,rgba(212,80,74,.05),transparent 70%);
  top:60%; right:30%; --d:11s;
}

/* Large background text "Dev" - subtle and static */
.hero-bg-text {
  position:absolute; top:50%; right:-2rem;
  transform:translateY(-50%);
  font-family:'Playfair Display',serif;
  font-size:clamp(120px,18vw,260px); font-weight:900;
  color:rgba(255,255,255,.013); pointer-events:none;
  white-space:nowrap; user-select:none; line-height:1; z-index:1;
}

/* Staggered entrance animations for hero content */
.hero-left { position:relative; z-index:2; }
.hero-eyebrow { opacity:0; animation:fadeUp .8s ease .2s forwards; }
.hero-name    { opacity:0; animation:fadeUp .8s ease .4s forwards; }
.hero-tagline { opacity:0; animation:fadeUp .8s ease .6s forwards; }
.hero-cta     { opacity:0; animation:fadeUp .8s ease .8s forwards; }
.hero-right   { position:relative; z-index:2; display:flex; justify-content:center; align-items:center; opacity:0; animation:fadeUp .9s ease 1s forwards; }

/* Hero eyebrow label with line */
.hero-eyebrow {
  font-family:'DM Mono',monospace; font-size:.72rem; color:var(--accent2);
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:1.5rem;
  display:flex; align-items:center; gap:.75rem;
}
.hero-eyebrow::before { content:''; display:inline-block; width:2rem; height:1px; background:var(--accent2); }

/* Main hero heading with italic accent on last word */
.hero-name {
  font-family:'Playfair Display',serif;
  font-size:clamp(3rem,7vw,6.5rem); font-weight:700;
  line-height:1.05; letter-spacing:-.02em; margin-bottom:.5rem;
}
.hero-name span { display:block; font-style:italic; color:var(--accent); }

/* Subtitle underneath hero name */
.hero-tagline {
  font-size:clamp(.95rem,1.5vw,1.1rem); color:var(--text-muted);
  max-width:420px; margin:1.8rem 0 3rem; font-weight:300; line-height:1.8;
}

/* Primary CTA buttons container */
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; }

/* ════════════════════════════════════════════════════════════════════ */
/* BUTTONS */
/* ════════════════════════════════════════════════════════════════════ */
/* Main action button - accent background */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 2rem;
  background:var(--accent); color:#0a0a0a; text-decoration:none;
  font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  border-radius:2px; transition:background .3s, transform .3s; cursor:none;
}
.btn-primary:hover { background:var(--accent2); transform:translateY(-2px); }

/* Secondary button - outline style */
.btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 2rem;
  border:1px solid var(--border); color:var(--text-muted); text-decoration:none;
  font-size:.8rem; font-weight:400; letter-spacing:.08em; text-transform:uppercase;
  border-radius:2px; transition:all .3s; cursor:none;
}
.btn-ghost:hover { border-color:rgba(255,255,255,.25); color:var(--text); }

/* ════════════════════════════════════════════════════════════════════ */
/* HERO CARD - RIGHT SIDE */
/* ════════════════════════════════════════════════════════════════════ */
/* Featured card showing availability and skills */
.hero-card {
  width:320px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:2rem; position:relative; overflow:hidden;
  transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s;
}
.hero-card:hover { transform:translateY(-6px) rotate(-.5deg); box-shadow:0 30px 60px rgba(0,0,0,.5); }
.hero-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent2),transparent); }

/* Status indicator - green dot + text */
.card-status { display:flex; align-items:center; gap:.5rem; font-size:.72rem; color:var(--text-muted); font-family:'DM Mono',monospace; margin-bottom:1.5rem; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }

/* Card metadata */
.card-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:600; margin-bottom:.5rem; }
.card-sub { font-size:.8rem; color:var(--text-muted); margin-bottom:1.8rem; line-height:1.6; }

/* Skill chips grid */
.card-skills { display:flex; flex-wrap:wrap; gap:.5rem; }
.skill-chip { padding:.3rem .75rem; background:var(--surface2); border:1px solid var(--border); border-radius:20px; font-family:'DM Mono',monospace; font-size:.65rem; color:var(--text-muted); letter-spacing:.05em; }


/* ════════════════════════════════════════════════════════════════════ */
/* SECTION STYLES */
/* ════════════════════════════════════════════════════════════════════ */
/* Base section container - centered with max-width */
section { padding:7rem 3rem; max-width:1400px; margin:0 auto; }

/* Section label - small monospace eyebrow text with decorative line */
.section-label { font-family:'DM Mono',monospace; font-size:.7rem; color:var(--accent2); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.75rem; display:flex; align-items:center; gap:.75rem; }
.section-label::before { content:''; display:inline-block; width:1.5rem; height:1px; background:var(--accent2); }

/* Section heading - large serif with italic accent color on em tags */
.section-title { font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3.5rem); font-weight:700; line-height:1.1; letter-spacing:-.02em; margin-bottom:1rem; }
.section-title em { font-style:italic; color:var(--accent); }

/* Horizontal divider between sections */
.divider { width:100%; height:1px; background:var(--border); max-width:1400px; margin:0 auto; }

/* ════════════════════════════════════════════════════════════════════ */
/* ABOUT SECTION */
/* ════════════════════════════════════════════════════════════════════ */
/* Two-column layout: text on left, stats grid on right */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; margin-top:4rem; align-items:start; }

/* About text paragraphs with emphasis on bolded sections */
.about-text p { color:var(--text-muted); line-height:1.9; font-size:1rem; margin-bottom:1.2rem; }
.about-text p strong { color:var(--text); font-weight:500; }

/* Stats grid - 2x2 layout showing key metrics */
.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

/* Individual stat card with hover effect */
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.5rem;
  transition:border-color .3s, transform .3s, box-shadow .3s; cursor:none;
}
.stat-card:hover { border-color:rgba(232,213,176,.25); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.4); }

/* Large number stat display */
.stat-number { font-family:'Playfair Display',serif; font-size:2.5rem; font-weight:700; color:var(--accent); line-height:1; margin-bottom:.4rem; }

/* Stat label - small text below number */
.stat-label { font-size:.75rem; color:var(--text-muted); letter-spacing:.05em; }

/* ════════════════════════════════════════════════════════════════════ */
/* PROJECTS SECTION */
/* ════════════════════════════════════════════════════════════════════ */
/* Two-column grid: featured project spans full width above two smaller cards */
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:4rem; }
.project-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:2rem;
  position:relative; overflow:hidden;
  transition:border-color .35s, transform .35s, box-shadow .35s; cursor:none;
}

/* Gradient overlay that appears on hover */
.project-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at top left,rgba(232,213,176,.04) 0%,transparent 60%);
  opacity:0; transition:opacity .35s;
}

/* Project card hover state - lift and glow */
.project-card:hover { border-color:rgba(232,213,176,.2); transform:translateY(-4px); box-shadow:0 24px 48px rgba(0,0,0,.4); }
.project-card:hover::after { opacity:1; }

/* Featured project - spans 2 columns with side-by-side layout */
.project-card.featured { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:3rem; text-decoration:none; color:inherit; }

/* Project metadata badge */
.project-tag { display:inline-block; padding:.25rem .7rem; background:rgba(232,213,176,.1); border:1px solid rgba(232,213,176,.2); border-radius:20px; font-family:'DM Mono',monospace; font-size:.62rem; color:var(--accent2); letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.2rem; }

/* Project emoji icon */
.project-icon { font-size:2.5rem; margin-bottom:1rem; display:block; }

/* Project heading */
.project-title { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:600; margin-bottom:.75rem; line-height:1.2; }

/* Project description text */
.project-desc { font-size:.88rem; color:var(--text-muted); line-height:1.8; margin-bottom:1.5rem; }

/* Tech stack tags grid */
.project-tech { display:flex; flex-wrap:wrap; gap:.4rem; }
.tech-tag { padding:.2rem .65rem; background:var(--surface2); border-radius:4px; font-family:'DM Mono',monospace; font-size:.62rem; color:var(--text-dim); letter-spacing:.05em; }

/* Featured project visual - card display with playing cards animation */
.featured-visual { aspect-ratio:1; background:var(--surface2); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; overflow:hidden; transition:all .3s ease; pointer-events:auto; }
.featured-visual:hover { border-color:var(--accent); background:var(--surface2); box-shadow:0 0 30px rgba(232,213,176,.1); }
.card-display { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; font-family:'DM Mono',monospace; pointer-events:auto; }
.bj-suit { font-size:4rem; animation:floatY 3s ease-in-out infinite; }
.bj-cards { display:flex; margin-top:.5rem; }
.mini-card { width:50px; height:70px; background:white; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:bold; color:#222; margin-left:-8px; box-shadow:0 4px 12px rgba(0,0,0,.4); border:1px solid #ddd; }
.mini-card:first-child { margin-left:0; }
.mini-card.red { color:var(--red); }
.bj-score { font-size:.7rem; color:var(--green); letter-spacing:.1em; margin-top:.5rem; }

/* ════════════════════════════════════════════════════════════════════ */
/* GAMES SECTION */
/* ════════════════════════════════════════════════════════════════════ */
/* Games section - dark background section */
.games-section { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.games-inner { max-width:1400px; margin:0 auto; padding:7rem 3rem; }

/* 3-column game card grid */
.games-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:4rem; }

/* ════════════════════════════════════════════════════════════════════ */
/* GAME CARD STYLES */
/* ════════════════════════════════════════════════════════════════════ */
/* Game card with 3D transform capability and color-coded top bar */
.game-card {
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--bg); position:relative;
  transition:border-color .4s, box-shadow .4s;
  cursor:none; transform-style:preserve-3d; will-change:transform;
}

/* Color accents per game using CSS custom property --gc */
.game-card.wukong { --gc:#d4824a; }
.game-card.rdr2   { --gc:#a04040; }
.game-card.gow    { --gc:#4a7ad4; }

/* Top accent bar that matches game color */
.game-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gc); z-index:2; }

/* Game card hover - glow and border color change */
.game-card:hover { border-color:var(--gc); box-shadow:0 32px 64px rgba(0,0,0,.55); }

/* Game cover image container */
.game-cover-wrap { overflow:hidden; width:100%; aspect-ratio:3/4; }

/* Game cover image - scales up on hover with brightness boost */
.game-cover { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .6s cubic-bezier(.4,0,.2,1), filter .4s; filter:brightness(.82) saturate(.9); }
.game-card:hover .game-cover { transform:scale(1.06); filter:brightness(1) saturate(1.1); }

/* Fallback emoji display if image fails to load */
.game-cover-fallback { width:100%; aspect-ratio:3/4; background:var(--surface2); display:flex; align-items:center; justify-content:center; font-size:4rem; }

/* Game info section below image */
.game-info { padding:1.5rem; position:relative; }

/* Large rank number (01, 02, 03) positioned absolutely */
.game-rank { font-family:'Playfair Display',serif; font-size:3.5rem; font-weight:900; color:rgba(255,255,255,.04); position:absolute; top:-.5rem; right:1rem; line-height:1; user-select:none; pointer-events:none; }

/* Game category + year label */
.game-sub { font-size:.72rem; color:var(--text-dim); font-family:'DM Mono',monospace; margin-bottom:.4rem; letter-spacing:.05em; text-transform:uppercase; }

/* Game title */
.game-title { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:600; margin-bottom:.6rem; }

/* Game description summary */
.game-desc { font-size:.8rem; color:var(--text-muted); line-height:1.7; }

/* ════════════════════════════════════════════════════════════════════ */
/* JOURNEY SECTION */
/* ════════════════════════════════════════════════════════════════════ */
/* Timeline container with vertical line */
.journey { display:flex; flex-direction:column; margin-top:4rem; position:relative; }

/* Vertical timeline line on left */
.journey::before { content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--border); margin-left:1rem; }

/* Individual timeline item - 2 column grid */
.journey-item { display:grid; grid-template-columns:2rem 1fr; gap:2rem; padding-bottom:3.5rem; }

/* Timeline dot marker */
.journey-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); border:2px solid var(--bg); position:relative; top:.35rem; left:7px; box-shadow:0 0 0 4px rgba(232,213,176,.1); flex-shrink:0; }

/* Journey date label */
.journey-date { font-family:'DM Mono',monospace; font-size:.65rem; color:var(--accent2); letter-spacing:.15em; text-transform:uppercase; margin-bottom:.4rem; }

/* Timeline milestone title */
.journey-title { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:600; margin-bottom:.4rem; }

/* Timeline event description */
.journey-desc { font-size:.85rem; color:var(--text-muted); line-height:1.7; }

/* ════════════════════════════════════════════════════════════════════ */
/* CONTACT SECTION */
/* ════════════════════════════════════════════════════════════════════ */
/* Contact info card */
.contact-box {
  background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:4rem;
  text-align:center; position:relative; overflow:hidden; margin-top:4rem; transition:border-color .4s;
}
.contact-box:hover { border-color:rgba(232,213,176,.15); }

/* Top accent line on contact box */
.contact-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent2),transparent); }

/* Email display - large italic link */
.contact-email {
  font-family:'Playfair Display',serif; font-size:clamp(1.2rem,2.5vw,2rem); font-style:italic;
  color:var(--accent); text-decoration:none; display:block; margin:1.5rem 0 2.5rem;
  transition:color .3s, letter-spacing .4s;
}
.contact-email:hover { color:var(--text); letter-spacing:.03em; }

/* Social links grid */
.contact-links { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; }

/* Individual contact link button */
.contact-link {
  display:flex; align-items:center; gap:.5rem; padding:.7rem 1.5rem;
  border:1px solid var(--border); border-radius:6px; color:var(--text-muted);
  text-decoration:none; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  font-family:'DM Mono',monospace; transition:all .3s; cursor:none;
}
.contact-link:hover { border-color:rgba(255,255,255,.2); color:var(--text); transform:translateY(-2px); }

/* ════════════════════════════════════════════════════════════════════ */
/* FOOTER */
/* ════════════════════════════════════════════════════════════════════ */
/* Footer with copyright and name - flexbox layout */
footer { border-top:1px solid var(--border); padding:2rem 3rem; display:flex; justify-content:space-between; align-items:center; max-width:1400px; margin:0 auto; }

/* Copyright text */
.footer-copy { font-size:.72rem; color:var(--text-dim); font-family:'DM Mono',monospace; }

/* Footer name - italic accent */
.footer-name { font-family:'Playfair Display',serif; font-style:italic; color:var(--accent2); font-size:.9rem; }


/* ════════════════════════════════════════════════════════════════════ */
/* ANIMATIONS & KEYFRAMES */
/* ════════════════════════════════════════════════════════════════════ */
/**
 * fadeUp: Transforms elements from below with fade in
 * Used for initial page load animations, entrance effects
 * Duration: 0.75s-0.9s with staggered delays
 */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/**
 * pulse: Expanding ring pulse effect
 * Used on status dots to show "active/available" state
 * Creates smooth outward wave that fades
 */
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,173,124,.4)} 50%{opacity:.8;box-shadow:0 0 0 6px rgba(74,173,124,0)} }

/**
 * floatY: Gentle vertical bobbing motion
 * Used on game card symbols and hero elements
 * Creates subtle breathing/floating effect
 */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/**
 * blobDrift: Animated background blobs
 * Each blob has unique duration via CSS variable --d
 * Creates organic moving gradient background
 */
@keyframes blobDrift {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(30px,25px) scale(1.15); }
}

/* ════════════════════════════════════════════════════════════════════ */
/* SCROLL REVEAL - INTERSECTION OBSERVER */
/* ════════════════════════════════════════════════════════════════════ */
/**
 * .reveal class: Initial state - invisible and below viewport
 * .visible class: Applied by JS when element scrolls into view
 * Triggers fadeUp animation - fade in + slide up
 */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ════════════════════════════════════════════════════════════════════ */
/* MEDIA QUERIES - RESPONSIVE BREAKPOINTS */
/* ════════════════════════════════════════════════════════════════════ */

/* Touch device detection - hide custom cursor on mobile/tablet */
@media(pointer:coarse), (hover:none) {
  .cursor, .cursor-ring { display:none; }
  body { cursor:auto; }
}

/* Tablet breakpoint (1024px and below) */
@media(max-width:1024px){
  .projects-grid{grid-template-columns:1fr 1fr;}
  section{padding:5rem 2rem;}
  .games-inner{padding:5rem 2rem;}
}

/* Mobile breakpoint (768px and below) */
@media(max-width:768px){
  /* Navigation - hide links on mobile, reduce padding when scrolled */
  nav{padding:1.2rem 1.5rem;} nav.scrolled{padding:.8rem 1.5rem;}
  .nav-links{display:none;}
  
  /* Hero - stack vertically, hide right card, adjust padding and font sizes */
  .hero{grid-template-columns:1fr;padding:6rem 1.5rem 3rem;}
  .hero-right{display:none;}
  
  /* General section padding reduction for mobile */
  section{padding:4rem 1.5rem;}
  
  /* About grid - single column layout */
  .about-grid{grid-template-columns:1fr;gap:3rem;}
  
  /* Games section - reduce padding, single column grid */
  .games-inner{padding:4rem 1.5rem;}
  .games-grid{grid-template-columns:1fr;}
  
  /* Projects - single column, featured project simplified */
  .projects-grid{grid-template-columns:1fr;}
  .project-card.featured{grid-column:1;grid-template-columns:1fr;}
  .featured-visual{display:none;}
  
  /* Contact - reduce padding */
  .contact-box{padding:2.5rem 1.5rem;}
  
  /* Footer - reduce padding, stack vertically */
  footer{padding:2rem 1.5rem;}
  .footer-wrap{flex-direction:column;align-items:flex-start;}
}