/* ============================================================
   Will Charley — Portfolio
   Shared styles (fonts, base, nav, footer, utilities)
   Linked by index.html and every work/*.html case study.
   Paths in this file are relative to /style/.
   ============================================================ */

/* Fonts */
@font-face {
  font-family: 'NimbusSanL';
  src: url('nimbus-sans-l/NimbusSanL-Regu.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'NimbusSanL';
  src: url('nimbus-sans-l/NimbusSanL-ReguItal.ttf') format('truetype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'NimbusSanL';
  src: url('nimbus-sans-l/NimbusSanL-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}
@font-face {
  font-family: 'NimbusSanL';
  src: url('nimbus-sans-l/NimbusSanL-BoldItal.ttf') format('truetype');
  font-weight: 700; font-style: italic;
}
@font-face {
  font-family: 'OfficeCodePro';
  src: url('office-code-pro/officecodepro-regular.otf') format('opentype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'OfficeCodePro';
  src: url('office-code-pro/officecodepro-regularitalic.otf') format('opentype');
  font-weight: 400; font-style: italic;
}
@font-face {
  font-family: 'OfficeCodePro';
  src: url('office-code-pro/officecodepro-medium.otf') format('opentype');
  font-weight: 500; font-style: normal;
}
@font-face {
  font-family: 'OfficeCodePro';
  src: url('office-code-pro/officecodepro-bold.otf') format('opentype');
  font-weight: 700; font-style: normal;
}
/* Condensed cut — used for headings */
@font-face {
  font-family: 'NimbusSanLCond';
  src: url('nimbus-sans-l/NimbusSanL-ReguCond.ttf') format('truetype');
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: 'NimbusSanLCond';
  src: url('nimbus-sans-l/NimbusSanL-BoldCond.ttf') format('truetype');
  font-weight: 700; font-style: normal;
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #FFFFFF;
  --fg:           #000;
  --muted:        #7a7a76;
  --border:       #E0E0DC;
  --accent:       #ff5314;
  --accent2:      #eeff41;
  --font-body:    'OfficeCodePro', monospace;   /* labels, meta, eyebrows, nav */
  --font-read:    'NimbusSanL', sans-serif;     /* long-form reading copy */
  --font-display: 'NimbusSanLCond', 'NimbusSanL', sans-serif; /* condensed headings */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:     cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  cursor: default;
}

::selection { background: var(--accent); color: var(--bg); }

/* Nav */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2.5rem;
  transition: padding 0.5s var(--ease);
}

nav::before {
  content: '';
  position: absolute;
  inset: 0;
  bottom: -2rem;
  z-index: -1;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  pointer-events: none;
}

nav.scrolled { padding: 0.75rem 2.5rem; }

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s var(--ease);
}

.nav-logo:hover { transform: scale(1.04); filter: invert(100%); }

.nav-logo img {
  height: 5.25rem;
  width: auto;
  display: block;
  transition: height 0.5s var(--ease);
}

nav.scrolled .nav-logo img { height: 5rem; }

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

.nav-links a {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.25s var(--ease), color 0.3s var(--ease);
  position: relative;
}

/* Flipped to light text when a dark hero sits behind the nav */
.nav-over-dark .nav-links a { color: #fff; opacity: 0.7; }

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}

.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }

/* Utility */
.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal-stagger > *.visible { opacity: 1; transform: none; }

.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.4s; }

/* Footer */
footer {
  padding: 2.5rem 2.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Generic loaded-image behaviour (used on case study pages) */
.img-frame { position: relative; overflow: hidden; background: var(--border); }
.img-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.8s var(--ease), transform 1.2s var(--ease);
}
.img-frame img.loaded { opacity: 1; transform: scale(1); }

.img-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  nav { padding: 1rem 1.5rem; }
  nav.scrolled { padding: 0.75rem 1.5rem; }
}

@media (max-width: 768px) {
  nav { padding: 0.75rem 1.25rem; }
  nav.scrolled { padding: 0.75rem 1.25rem; }
  .nav-logo img { height: 3rem; }
  footer { padding: 1.5rem 1.25rem; flex-direction: column; gap: 0.5rem; }
}

@media (max-width: 480px) {
  nav { padding: 0.75rem 1rem; }
  .nav-logo img { height: 2.5rem; }
  .nav-links { gap: 1.25rem; }
  .nav-links a { font-size: 0.6rem; }
  footer { padding: 1.25rem 1rem; }
}