/* ─── work.css — inner page styles shared by /work/ ──────────────────────── */

/* ── PAGE HERO ───────────────────────────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: 14rem 5vw 7rem;
  background: var(--ink);
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#page-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.92) 100%);
  z-index: 1;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.page-hero-content .label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: 1.5rem;
}

.page-hero-content h1 {
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin-bottom: 1.75rem;
  opacity: 0;
  transform: translateY(60px);
  animation: pageUp 1s 0.3s var(--ease) forwards;
}

.page-hero-content p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.52);
  max-width: 540px;
  opacity: 0;
  transform: translateY(20px);
  animation: pageUp 0.9s 0.55s var(--ease) forwards;
}

@keyframes pageUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── PROJECT GRID ────────────────────────────────────────────────────────── */
.projects-section {
  background: var(--ink);
  padding: 6rem 5vw 10rem;
}

.projects-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

/* First card spans full width — featured */
.project-card:first-child {
  grid-column: 1 / -1;
}

.project-card {
  background: #111;
  padding: 4rem 3.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: var(--white);
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   0.7s var(--ease),
    transform 0.7s var(--ease),
    background 0.35s;
}

/* Stagger reveal */
.projects-section[data-in-view] .project-card:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0.05s; }
.projects-section[data-in-view] .project-card:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:0.15s; }
.projects-section[data-in-view] .project-card:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:0.25s; }
.projects-section[data-in-view] .project-card:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:0.35s; }
.projects-section[data-in-view] .project-card:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:0.45s; }
.projects-section[data-in-view] .project-card:nth-child(6) { opacity:1; transform:translateY(0); transition-delay:0.55s; }

/* Gradient glow on hover */
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.project-card:hover { background: #161616; }
.project-card:hover::before { opacity: 1; }

/* Per-card accent colors */
.project-card[data-accent="teal"]::before   { background: radial-gradient(ellipse at 0% 100%, rgba(0,210,180,0.12), transparent 65%); }
.project-card[data-accent="blue"]::before   { background: radial-gradient(ellipse at 0% 100%, rgba(67,97,238,0.14), transparent 65%); }
.project-card[data-accent="green"]::before  { background: radial-gradient(ellipse at 0% 100%, rgba(56,201,106,0.12), transparent 65%); }
.project-card[data-accent="purple"]::before { background: radial-gradient(ellipse at 0% 100%, rgba(114,9,183,0.14), transparent 65%); }
.project-card[data-accent="orange"]::before { background: radial-gradient(ellipse at 0% 100%, rgba(251,133,0,0.12), transparent 65%); }
.project-card[data-accent="red"]::before    { background: radial-gradient(ellipse at 0% 100%, rgba(230,57,70,0.14), transparent 65%); }

.project-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.45);
  margin-bottom: 2.5rem;
  width: fit-content;
  position: relative;
}

.project-name {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.625rem;
  position: relative;
  transition: color 0.2s;
}

/* Featured card gets bigger name */
.project-card:first-child .project-name {
  font-size: clamp(2.5rem, 5vw, 5rem);
}

.project-card:hover .project-name { color: var(--white); }

.project-tagline {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-bottom: 1.5rem;
  position: relative;
  letter-spacing: -0.01em;
}

.project-card:first-child .project-tagline {
  font-size: 1.2rem;
}

.project-desc {
  font-size: 0.92rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.4);
  max-width: 520px;
  position: relative;
  flex: 1;
  margin-bottom: 2.5rem;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  position: relative;
  transition: color 0.2s, gap 0.3s var(--ease);
}

.project-card:hover .project-link { color: var(--white); gap: 0.875rem; }

.project-link svg { flex-shrink: 0; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-hero { padding: 11rem 1.5rem 5rem; }

  .projects-section { padding: 4rem 0 6rem; }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .project-card:first-child { grid-column: 1; }

  .project-card { padding: 3rem 1.875rem; }
}

@media (max-width: 520px) {
  .page-hero-content h1 { font-size: clamp(3rem, 16vw, 4.5rem); }
}