/* ============================================================
   Campus Dude — Claude Design Polish Layer
   Load this AFTER theme.css. Non-destructive refinements only.
   Remove the one <link> to fully revert.
   Focus: crisper type, filmic image motion, editorial restraint,
   consistent framing, and smoother reveals (pairs with Lenis).
   ============================================================ */

:root { --ease: cubic-bezier(.16, 1, .3, 1); }

/* --- Lenis smooth-scroll override --- */
html { scroll-behavior: auto; }

/* --- Crisper text rendering --- */
html, body { -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.brand { letter-spacing: -0.02em; }

/* --- Hero: more cinematic depth + tighter headline --- */
.hero-editorial { padding-top: clamp(88px, 12vw, 160px); }
.hero-editorial h1 { letter-spacing: -0.05em; }
.hero-visual {
  box-shadow: 0 30px 80px -22px rgba(22,21,15,.34), 0 8px 24px rgba(22,21,15,.07);
}
.hero-visual::after {                 /* subtle top-light sheen on the screenshot */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 32%);
}

/* --- Filmic image hover: scale the IMAGE inside the frame, not the whole box --- */
/* (fixes the 3x-defined, conflicting .feature-media rules with one clean spec) */
.hero-visual, .feature-media { transform: none; aspect-ratio: 16 / 10; }
.hero-visual:hover, .feature-media:hover { transform: translateY(-2px); border-color: var(--rule); }
.hero-visual img, .feature-media img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
  transition: transform .8s var(--ease);
  will-change: transform; backface-visibility: hidden;
}
.hero-visual:hover img, .feature-media:hover img { transform: scale(1.045); }

/* --- Reveals: longer, filmic travel + staggered grid children --- */
.reveal { transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { transform: none; }
.ethos-grid.is-visible .ethos-card,
.grid.is-visible .game-card { animation: cd-rise .7s var(--ease) both; }
.ethos-grid.is-visible .ethos-card:nth-child(2) { animation-delay: .07s; }
.ethos-grid.is-visible .ethos-card:nth-child(3) { animation-delay: .14s; }
.ethos-grid.is-visible .ethos-card:nth-child(4) { animation-delay: .21s; }
@keyframes cd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* --- Ethos: quieter, typographic (borderless top-rule instead of boxes) --- */
.ethos-card {
  background: transparent; border: none; border-top: 1px solid var(--rule);
  border-radius: 0; padding: 24px 0 0;
}
.ethos-num { color: var(--ink-soft); font-size: 0.95rem; }
.ethos-card h3, .ethos-card h4 { letter-spacing: -0.02em; }

/* --- Buttons: premium restraint — stay dark, lift + shadow (accent lives in the arrow) --- */
.btn.primary:hover {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
  transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(22,21,15,.45);
}
.nav a.btn-nav:hover { transform: translateY(-1px); }

/* --- Section heads: a hair tighter --- */
.section-head h2 { letter-spacing: -0.04em; }
.feature-title { letter-spacing: -0.035em; }

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero-visual:hover img, .feature-media:hover img { transform: none; }
  .ethos-grid.is-visible .ethos-card,
  .grid.is-visible .game-card { animation: none; }
}