/* ==========================================================================
   Portfolio Styles
   Phase 1: Foundation - Design Tokens and Base Reset
   ========================================================================== */

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Colors - Navy-Tinted Dark Theme
     Not pure black (#000) - uses deep navy for sophistication
     ------------------------------------------------------------------------- */
  --bg-base: #0a0f1a;          /* Deep navy background */
  --bg-elevated: #111827;      /* Slightly lighter for sections */
  --bg-card: #1a2332;          /* Card backgrounds */
  --border-subtle: rgba(255, 255, 255, 0.08);  /* Subtle borders */

  --text-primary: #f9fafb;     /* Main text - off-white */
  --text-secondary: #9ca3af;   /* Supporting text */
  --text-muted: #6b7280;       /* De-emphasized text */

  --accent: #22d3ee;           /* Accent color - cyan */
  --accent-hover: #06b6d4;     /* Darker accent for hover states */

  /* -------------------------------------------------------------------------
     Spacing Scale
     ------------------------------------------------------------------------- */
  --space-xs: 0.25rem;         /* 4px */
  --space-sm: 0.5rem;          /* 8px */
  --space-md: 1rem;            /* 16px */
  --space-lg: 1.5rem;          /* 24px */
  --space-xl: 2rem;            /* 32px */
  --space-2xl: 3rem;           /* 48px */
  --space-3xl: 4rem;           /* 64px */
  --space-section: 6rem;       /* 96px - section vertical padding */

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease-out;

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 2rem;       /* 32px */
  --font-size-4xl: 2.5rem;     /* 40px */
  --font-size-5xl: 3rem;       /* 48px - hero name */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;

  /* Letter spacing */
  --letter-spacing-tight: -0.02em;  /* For large headings */
}

/* ==========================================================================
   BASE RESET
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Base heading styles */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-md) 0;
  color: var(--text-primary);
}

h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

p {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-secondary);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text color utilities */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

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

/* Font utilities */
.font-mono {
  font-family: var(--font-mono);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* Container - centered with responsive padding */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* -------------------------------------------------------------------------
   Button Component
   Variants: primary (default), ghost, outline
   States: hover, focus-visible, active, disabled
   ------------------------------------------------------------------------- */
.btn {
  /* Reset */
  appearance: none;
  border: none;
  cursor: pointer;

  /* Display */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);

  /* Sizing */
  padding: var(--space-sm) var(--space-lg);

  /* Typography */
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;

  /* Colors */
  background-color: var(--accent);
  color: var(--bg-base);

  /* Shape */
  border-radius: 0.375rem;

  /* Transitions */
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
  background-color: var(--accent-hover);
  color: var(--bg-base); /* Keep dark text visible on hover */
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button variant: Ghost - transparent background */
.btn-ghost {
  background-color: transparent;
  color: var(--text-primary);
}

.btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Button variant: Outline - bordered, transparent fill */
.btn-outline {
  background-color: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-outline:hover {
  background-color: var(--accent);
  color: var(--bg-base);
}

/* -------------------------------------------------------------------------
   Link Component
   Variants: base (underline), nav (no underline)
   States: hover, focus-visible, active
   ------------------------------------------------------------------------- */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

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

a:focus {
  outline: none;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

a:active {
  opacity: 0.8;
}

/* Link variant: Navigation - no underline */
.link-nav {
  text-decoration: none;
  color: var(--text-secondary);
}

.link-nav:hover {
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   Card Component
   Variants: base, clickable (card-link wrapper)
   States: hover, focus-visible
   ------------------------------------------------------------------------- */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  padding: var(--space-lg);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Clickable card link wrapper */
.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-link:focus {
  outline: none;
}

.card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

/* -------------------------------------------------------------------------
   Hero Curtain Layers - "Data Breach" Reveal
   Circuit-board aesthetic with jagged fracture edge and grid texture
   ------------------------------------------------------------------------- */
.hero-top-layer,
.hero-bottom-layer {
  position: absolute;
  z-index: 99999999;
  width: 200vw;
  height: 50vh;
  height: 50svh; /* iOS Safari: use small viewport height */
  will-change: transform;
  pointer-events: none; /* Never block interactions */
  animation:
    curtainSlideIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) 200ms forwards,
    curtainZIndexDrop 0.1s linear 1.5s forwards; /* Drop z-index after slide */

  /* Base: deep navy matching bg-base */
  background-color: var(--bg-base);

  /* Circuit grid texture overlay */
  background-image:
    /* Horizontal traces */
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 39px,
      rgba(34, 211, 238, 0.08) 39px,
      rgba(34, 211, 238, 0.08) 40px
    ),
    /* Vertical traces */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 39px,
      rgba(34, 211, 238, 0.2) 39px,
      rgba(34, 211, 238, 0.2) 40px
    ),
    /* Subtle diagonal data flow */
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 80px,
      rgba(34, 211, 238, 0.04) 80px,
      rgba(34, 211, 238, 0.04) 81px
    );
}

.hero-top-layer {
  top: 0;
  /* Jagged circuit-edge: angular teeth descending toward center */
  clip-path: polygon(
    0 0, 200vw 0,
    /* Start descent with angular cuts */
    200vw 8vh,
    195vw 8vh, 195vw 12vh,
    188vw 12vh, 188vw 18vh,
    182vw 18vh, 182vw 14vh,
    175vw 14vh, 175vw 22vh,
    168vw 22vh, 168vw 16vh,
    160vw 16vh, 160vw 26vh,
    154vw 26vh, 154vw 20vh,
    146vw 20vh, 146vw 30vh,
    140vw 30vh, 140vw 24vh,
    132vw 24vh, 132vw 34vh,
    126vw 34vh, 126vw 28vh,
    118vw 28vh, 118vw 38vh,
    112vw 38vh, 112vw 32vh,
    104vw 32vh, 104vw 42vh,
    98vw 42vh, 98vw 36vh,
    90vw 36vh, 90vw 46vh,
    84vw 46vh, 84vw 40vh,
    76vw 40vh, 76vw 48vh,
    68vw 48vh, 68vw 44vh,
    60vw 44vh, 60vw 50vh,
    0 50vh
  );
}

.hero-top-layer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(34, 211, 238, 0.06) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.hero-bottom-layer {
  bottom: 0;
  left: 0;
  /* Jagged circuit-edge: angular teeth ascending toward center (mirrored) */
  clip-path: polygon(
    0 50vh, 200vw 50vh,
    200vw 42vh,
    195vw 42vh, 195vw 38vh,
    188vw 38vh, 188vw 32vh,
    182vw 32vh, 182vw 36vh,
    175vw 36vh, 175vw 28vh,
    168vw 28vh, 168vw 34vh,
    160vw 34vh, 160vw 24vh,
    154vw 24vh, 154vw 30vh,
    146vw 30vh, 146vw 20vh,
    140vw 20vh, 140vw 26vh,
    132vw 26vh, 132vw 16vh,
    126vw 16vh, 126vw 22vh,
    118vw 22vh, 118vw 12vh,
    112vw 12vh, 112vw 18vh,
    104vw 18vh, 104vw 8vh,
    98vw 8vh, 98vw 14vh,
    90vw 14vh, 90vw 4vh,
    84vw 4vh, 84vw 10vh,
    76vw 10vh, 76vw 2vh,
    68vw 2vh, 68vw 6vh,
    60vw 6vh, 60vw 0,
    0 0
  );
}

.hero-bottom-layer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
    to bottom,
    rgba(34, 211, 238, 0.06) 0%,
    transparent 100%
  );
  pointer-events: none;
}

/* Animated pulse nodes along the fracture edge */
.hero-top-layer::after,
.hero-bottom-layer::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 175vw 22vh, rgba(34, 211, 238, 0.4) 0%, transparent 8px),
    radial-gradient(circle at 146vw 30vh, rgba(34, 211, 238, 0.5) 0%, transparent 6px),
    radial-gradient(circle at 118vw 38vh, rgba(34, 211, 238, 0.4) 0%, transparent 8px),
    radial-gradient(circle at 90vw 46vh, rgba(34, 211, 238, 0.5) 0%, transparent 6px);
  animation: nodeFlicker 0.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-bottom-layer::after {
  background-image:
    radial-gradient(circle at 175vw 28vh, rgba(34, 211, 238, 0.4) 0%, transparent 8px),
    radial-gradient(circle at 146vw 20vh, rgba(34, 211, 238, 0.5) 0%, transparent 6px),
    radial-gradient(circle at 118vw 12vh, rgba(34, 211, 238, 0.4) 0%, transparent 8px),
    radial-gradient(circle at 90vw 4vh, rgba(34, 211, 238, 0.5) 0%, transparent 6px);
}

@keyframes nodeFlicker {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------
   Tech Orb Component
   Floating technology showcase with rotating icons and glow effects
   ------------------------------------------------------------------------- */
.tech-orb {
  --orb-size: 70px;
  --orb-glow-color: rgba(34, 211, 238, 0.4);
  --orb-ring-color: rgba(34, 211, 238, 0.6);

  position: absolute;
  z-index: 100000000;
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;

  /* Mobile: top-right corner, safe from address bar */
  right: var(--space-lg);
  top: calc(var(--space-xl) + env(safe-area-inset-top, 0px));
  left: 10%;
  transform: none;

  /* Glass-morphism base */
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.9) 0%, rgba(10, 15, 26, 0.95) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* Entrance + floating animation */
  opacity: 0;
  animation:
    techOrbEntranceMobile 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards,
    techOrbFloatMobile 6s ease-in-out 2s infinite;
}

/* Rotating ring accent */
.tech-orb__ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-base), var(--bg-base)) padding-box,
    conic-gradient(
      from 0deg,
      transparent 0deg,
      var(--orb-ring-color) 60deg,
      transparent 120deg,
      transparent 240deg,
      var(--orb-ring-color) 300deg,
      transparent 360deg
    ) border-box;
  animation: techOrbRingSpin 8s linear infinite;
}

/* Soft outer glow */
.tech-orb__glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--orb-glow-color) 0%,
    rgba(34, 211, 238, 0.1) 40%,
    transparent 70%
  );
  opacity: 0.6;
  filter: blur(12px);
  animation: techOrbGlowPulse 4s ease-in-out infinite;
}

/* Icon container - stacks icons for crossfade */
.tech-orb__icons {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual icon styling */
.tech-orb__icon {
  position: absolute;
  font-size: 2.5rem;
  color: var(--text-primary);
  opacity: 0;
  transform: scale(0.8);
  filter: blur(4px);
  animation: techOrbIconCycle 18s ease-in-out infinite;
}

/* Staggered animation delays for 12 icons (1.5s each = 18s total) */
.tech-orb__icon:nth-child(1) { animation-delay: 0s; }
.tech-orb__icon:nth-child(2) { animation-delay: 1.5s; }
.tech-orb__icon:nth-child(3) { animation-delay: 3s; }
.tech-orb__icon:nth-child(4) { animation-delay: 4.5s; }
.tech-orb__icon:nth-child(5) { animation-delay: 6s; }
.tech-orb__icon:nth-child(6) { animation-delay: 7.5s; }
.tech-orb__icon:nth-child(7) { animation-delay: 9s; }
.tech-orb__icon:nth-child(8) { animation-delay: 10.5s; }
.tech-orb__icon:nth-child(9) { animation-delay: 12s; }
.tech-orb__icon:nth-child(10) { animation-delay: 13.5s; }
.tech-orb__icon:nth-child(11) { animation-delay: 15s; }
.tech-orb__icon:nth-child(12) { animation-delay: 16.5s; }

/* -------------------------------------------------------------------------
   Tech Orb Keyframe Animations
   ------------------------------------------------------------------------- */

/* Entrance: fade in and settle */
@keyframes techOrbEntrance {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Gentle floating motion */
@keyframes techOrbFloat {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(calc(-50% - 8px)) translateX(3px);
  }
}

/* Ring rotation */
@keyframes techOrbRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Glow pulse */
@keyframes techOrbGlowPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Icon crossfade cycle: each icon visible for ~1.5s out of 18s total
   8.33% = 1.5s / 18s - time each icon is fully visible
   Fade in: 0% -> 2% (0.36s)
   Hold: 2% -> 6.25% (0.76s)
   Fade out: 6.25% -> 8.33% (0.38s)
   Hidden: 8.33% -> 100%
*/
@keyframes techOrbIconCycle {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(4px);
  }
  2% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  6.25% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  8.33% {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(4px);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(4px);
  }
}

/* Mobile-specific entrance (top-right corner) */
@keyframes techOrbEntranceMobile {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile-specific float (top-right corner) */
@keyframes techOrbFloatMobile {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* -------------------------------------------------------------------------
   Tech Orb Responsive Adjustments
   Mobile: centered above hero text
   Tablet+: left side, vertically centered
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .tech-orb {
    --orb-size: 140px;
    left: var(--space-3xl);
    top: 50%;
    transform: translateY(-50%);
    animation:
      techOrbEntrance 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards,
      techOrbFloat 6s ease-in-out 2s infinite;
  }

  .tech-orb__icon {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .tech-orb {
    --orb-size: 160px;
    left: calc(var(--space-3xl) + var(--space-xl));
  }

  .tech-orb__icon {
    font-size: 3.5rem;
  }
}


.hero {
  min-height: 100vh;
  min-height: 100dvh; /* iOS Safari: use dynamic viewport height for full screen */
  display: grid;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at top left, var(--bg-elevated) 0%, var(--bg-base) 70%);
  /* iOS safe areas for notch/home indicator */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* -------------------------------------------------------------------------
   Hero Grid Layout
   Mobile-first: single column, centered
   ------------------------------------------------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: 0 var(--space-lg);
}

/* Hide the empty spacer div on mobile */
.hero-grid > div:first-child:empty {
  display: none;
}

/* -------------------------------------------------------------------------
   Hero Text Column
   Mobile: centered
   Desktop: right-aligned
   ------------------------------------------------------------------------- */
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) 0;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 10; /* Above curtain layers after animation */
}

.hero-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  letter-spacing: 0;
}

/* -------------------------------------------------------------------------
   Hero Avatar - Tech-styled circular portrait
   ------------------------------------------------------------------------- */
.hero-avatar {
  --avatar-size: 100px;
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  margin-bottom: var(--space-lg);
  border-radius: 50%;
}

.hero-avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(34, 211, 238, 0.6) 60deg,
    transparent 120deg,
    transparent 240deg,
    rgba(34, 211, 238, 0.6) 300deg,
    transparent 360deg
  );
  animation: techOrbRingSpin 10s linear infinite;
}

.hero-avatar::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.25) 0%,
    rgba(34, 211, 238, 0.08) 40%,
    transparent 70%
  );
  filter: blur(8px);
  z-index: -1;
}

.hero-avatar__img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 2px solid var(--bg-base);
  background-color: var(--bg-card);
}

@media (min-width: 768px) {
  .hero-avatar {
    --avatar-size: 120px;
  }
}

@media (min-width: 1024px) {
  .hero-avatar {
    --avatar-size: 140px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-avatar::before {
    animation: none;
  }
}

.hero-statement {
  font-size: clamp(1.125rem, 5vw, 1.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-xl);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Tablet+ Hero Layout (768px+)
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    margin-left: auto;
    margin-right: 0;
    padding: 0 var(--space-xl);
  }

  .hero-grid > div:first-child:empty {
    display: block;
  }

  .hero-text {
    align-items: flex-end;
    text-align: right;
  }

  .hero-name {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-lg);
  }

  .hero-statement {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    text-align: end;
  }
}

.hero-line {
  display: block;
}

.hero-code {
  font-family: var(--font-mono);
  color: var(--accent);
  transition: text-shadow var(--transition-base);
}

.hero-cta {
  position: relative;
}

/* -------------------------------------------------------------------------
   Hero Photo Column
   ------------------------------------------------------------------------- */
.hero-photo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 50vh;
  overflow: hidden;
}

.hero-photo {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  transition: transform var(--transition-base);
}

/* -------------------------------------------------------------------------
   Tablet Breakpoint (768px+)
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .hero-photo-wrapper {
    max-height: none;
    justify-content: flex-end;
  }

  .hero-photo {
    max-width: 100%;
    max-height: 80vh;
    -webkit-mask-image:
      linear-gradient(to left, black 70%, transparent 100%),
      linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to left, black 70%, transparent 100%),
      linear-gradient(to bottom, black 70%, transparent 100%);
    mask-composite: intersect;
  }
}

/* -------------------------------------------------------------------------
   Desktop Breakpoint (1024px+)
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 var(--space-2xl);
  }

  .hero-statement {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
  }

  .hero-photo {
    margin-right: calc(-1 * var(--space-xl));
  }
}

@media (min-width: 1440px) {
  .hero-grid {
    padding: 0 var(--space-3xl);
  }

  .hero-statement {
    font-size: clamp(2rem, 2.5vw, 3rem);
  }
}

/* -------------------------------------------------------------------------
   Hero Entrance Animations
   ------------------------------------------------------------------------- */
@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes clipRevealLeft {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -------------------------------------------------------------------------
   Curtain Slide Animation - reveals content like a curtain
   Uses transform for GPU acceleration (no layout thrashing)
   cubic-bezier(0.4, 0, 0.2, 1) = Material Design standard easing
   ------------------------------------------------------------------------- */
@keyframes curtainSlideIn {
  from {
    transform: translateX(0); /* Start fully covering content */
  }
  to {
    transform: translateX(-130vw);
  }
}

/* Drop z-index after curtain slides away so content is on top */
@keyframes curtainZIndexDrop {
  to {
    z-index: 1;
  }
}

/* Variant that preserves vertical centering for the button */
@keyframes curtainSlideInCentered {
  from {
    transform: translate(130vw, -50%);
  }
  to {
    transform: translate(0, -50%);
  }
}

/* Name: clip reveal from left */
.hero-name {
  opacity: 0;
  animation: clipRevealLeft 0.5s ease-out forwards;
  animation-delay: 0ms;
}

/* Avatar: clip reveal from left */
.hero-avatar {
  opacity: 0;
  animation: clipRevealLeft 0.5s ease-out forwards;
  animation-delay: 75ms;
}

/* Statement lines: clip-path wipe, staggered */
.hero-line {
  opacity: 0;
  animation: clipRevealLeft 0.5s ease-out forwards;
}

.hero-line:nth-child(1) { animation-delay: 150ms; }
.hero-line:nth-child(2) { animation-delay: 300ms; }
.hero-line:nth-child(3) { animation-delay: 450ms; }
.hero-line:nth-child(4) { animation-delay: 600ms; }
.hero-line:nth-child(5) { animation-delay: 750ms; }

/* CTA: fade up */
.hero-cta {
  opacity: 0;
  animation: fadeSlideUp 0.5s ease-out forwards;
  animation-delay: 900ms;
}

/* Photo: slide from right */
.hero-photo-wrapper {
  opacity: 0;
  animation: fadeSlideRight 0.8s ease-out forwards;
  animation-delay: 200ms;
}

/* ==========================================================================
   PROJECTS SECTION
   ========================================================================== */

.projects {
  padding: var(--space-section) 0;
  background-color: var(--bg-elevated);
}

.section-title {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

/* Projects grid - single column, full-width stacked cards */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

/* -------------------------------------------------------------------------
   Project Card Component
   Full-width horizontal layout: text left, image right
   Gradient border with luminous edge effect
   ------------------------------------------------------------------------- */
.project-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.1) 0%,
    rgba(17, 24, 39, 0.95) 30%,
    rgba(17, 24, 39, 0.98) 70%,
    rgba(34, 211, 238, 0.06) 100%
  );
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 1rem;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.project-card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, 0.06),
    0 8px 30px rgba(0, 0, 0, 0.35),
    0 0 50px -15px rgba(34, 211, 238, 0.12);
}

/* -------------------------------------------------------------------------
   Project Content (Left Column)
   ------------------------------------------------------------------------- */
.project-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl);
}

.project-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
  line-height: var(--line-height-tight);
}

.project-link {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.project-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-link:hover {
  color: var(--accent);
}

.project-link:focus-visible {
  outline: none;
}

.project-card:has(.project-link:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.project-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.7;
  max-width: 520px;
}

/* -------------------------------------------------------------------------
   Tech Stack Badges
   ------------------------------------------------------------------------- */
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--accent);
  background-color: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.12);
  border-radius: 4px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.project-card:hover .badge {
  background-color: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.25);
}

/* -------------------------------------------------------------------------
   Project Links (secondary actions)
   ------------------------------------------------------------------------- */
.project-links {
  display: flex;
  gap: var(--space-sm);
  position: relative;
  z-index: 2;
}

.btn-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
}

.icon {
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Carousel Component
   Horizontal scroll-snap carousel for project images
   Phase 7: Foundation - CSS-only scrolling behavior
   ------------------------------------------------------------------------- */
.carousel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  max-height: 240px;
}

.carousel__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel__viewport::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 3 / 2;
}

.carousel__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--border-subtle);
}

/* -------------------------------------------------------------------------
   Tablet+ : Horizontal card layout (768px+)
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .project-card {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto; /* Carousel fills, filmstrip sizes to content */
    row-gap: var(--space-sm); /* Space between carousel and filmstrip */
  }

  .project-content {
    padding: var(--space-2xl);
    grid-column: 1;
    grid-row: 1 / -1; /* Span all rows in left column */
  }

  .carousel {
    max-height: none;
    height: 100%;
    grid-column: 2;
    grid-row: 1;
  }

  .filmstrip {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0; /* Remove margin, grid handles spacing */
  }

  .carousel__viewport {
    height: 100%;
  }

  .carousel__slide {
    aspect-ratio: auto;
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .project-card {
    grid-template-columns: 3fr 2fr;
  }

  .project-content {
    padding: var(--space-2xl) var(--space-xl) var(--space-2xl) var(--space-3xl);
  }
}

/* ==================================
   Filmstrip Thumbnail Navigation
   ================================== */

.filmstrip {
  position: relative;
  z-index: 2; /* Above card link overlay, matches carousel */
  margin-top: var(--space-md);
}

.filmstrip__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  scroll-behavior: smooth;
  gap: var(--space-sm); /* 8px between thumbnails */
  padding: var(--space-sm);

  /* Hide scrollbar - FILM-06 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.filmstrip__viewport::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.filmstrip__thumb {
  /* Reset button styles */
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;

  /* Sizing - FILM-05: 48px minimum touch target */
  flex: 0 0 auto; /* Don't shrink */
  width: 56px;
  height: 56px;
  min-width: 48px;
  min-height: 48px;
  padding: 4px;

  /* Layout */
  aspect-ratio: 1 / 1; /* Enforce square */
  scroll-snap-align: start;

  /* Visual - FILM-03 active border space */
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color var(--transition-fast);
}

.filmstrip__thumb:hover .filmstrip__image {
  filter: brightness(1.2); /* FILM-04: 20% brighter on hover */
}

.filmstrip__thumb--active {
  border-color: var(--accent); /* FILM-03: cyan accent border */
}

.filmstrip__thumb--active .filmstrip__image {
  filter: brightness(1.3); /* FILM-03: 30% brighter when active */
}

.filmstrip__thumb--active:hover .filmstrip__image {
  filter: brightness(1.4); /* Active + hover: even brighter */
}

.filmstrip__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* FILM-01: crop to square */
  object-position: center top; /* Match carousel cropping */
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  transition: filter var(--transition-fast);
}

/* Keyboard accessibility */
.filmstrip__thumb:focus {
  outline: none;
}

.filmstrip__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .filmstrip__viewport {
    scroll-behavior: auto;
  }

  .filmstrip__thumb,
  .filmstrip__image {
    transition: none;
  }
}

/* Tablet breakpoint */
@media (min-width: 768px) {
  .filmstrip__thumb {
    width: 64px;
    height: 64px;
  }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .filmstrip__thumb {
    width: 80px;
    height: 80px;
  }
}

/* -------------------------------------------------------------------------
   Card entrance animation - staggered reveal
   ------------------------------------------------------------------------- */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-card {
  opacity: 0;
  animation: cardReveal 0.6s ease-out forwards;
}

.project-card:nth-child(1) { animation-delay: 0ms; }
.project-card:nth-child(2) { animation-delay: 150ms; }
.project-card:nth-child(3) { animation-delay: 300ms; }

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.contact {
  padding: var(--space-section) 0;
  text-align: center;
}

.contact-intro {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

/* -------------------------------------------------------------------------
   Social Links
   ------------------------------------------------------------------------- */
.social-links {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 0.5rem;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-fast);
}

.social-link:hover {
  border-color: var(--accent);
  background-color: rgba(34, 211, 238, 0.1);
  transform: translateY(-2px);
}

.social-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.social-link:active {
  transform: translateY(0);
}

.social-link .icon {
  color: var(--accent);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Carousel focus indicator (A11Y-05) */
.carousel:focus {
  outline: none;
}

.carousel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Hide filmstrip when only one slide exists (DEGR-01) */
.filmstrip:has(.filmstrip__thumb:only-child) {
  display: none;
}

/* Also hide when carousel has single slide */
.carousel:has(.carousel__slide:only-child) + .filmstrip {
  display: none;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  a {
    transition: none;
  }

  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }

  .hero-name,
  .hero-title,
  .hero-tagline,
  .hero .btn {
    animation: none;
    opacity: 1;
  }

  .project-card {
    animation: none;
    opacity: 1;
    transition: none;
  }

  .project-card:hover {
    transform: none;
  }

  .badge {
    transition: none;
  }

  .social-link {
    transition: none;
  }

  .social-link:hover {
    transform: none;
  }

  /* Tech Orb - reduce all animations */
  .tech-orb {
    animation: none;
    opacity: 1;
    transform: none; /* Mobile: top-right corner */
  }

  @media (min-width: 768px) {
    .tech-orb {
      transform: translateY(-50%); /* Desktop: left-aligned */
    }
  }

  .tech-orb__ring {
    animation: none;
  }

  .tech-orb__glow {
    animation: none;
  }

  /* Show first icon statically instead of cycling */
  .tech-orb__icon {
    animation: none;
    opacity: 0;
    transform: scale(1);
    filter: none;
  }

  .tech-orb__icon:first-child {
    opacity: 1;
  }

  /* Hero Curtain - instant reveal, no animation */
  .hero-top-layer,
  .hero-bottom-layer {
    animation: none;
    transform: translateX(-130vw);
  }

  .hero-top-layer::after,
  .hero-bottom-layer::after {
    animation: none;
    opacity: 0;
  }

  /* Carousel scroll behavior (A11Y-04) */
  .carousel__viewport {
    scroll-behavior: auto;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */

/* Skip link for keyboard/screen reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  text-decoration: none;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  width: auto;
  height: auto;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  color: var(--text-primary);
  z-index: 1000;
  border-radius: 0.25rem;
}