/* ============================================================
   GLOBAL STYLES — Photographer / Videographer Portfolio
   Fonts are self-hosted (assets/fonts/) — no Google Fonts CDN call.
   Avoids sending visitor IPs to Google and drops a DNS/TLS round trip.
   Latin subset only — swap in latin-ext files here if non-English
   characters are ever needed.
   ============================================================ */

@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/tenor-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/roboto-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/roboto-400.woff2') format('woff2');
}

/* --- Variables --- */
:root {
  --bg:          #f2ede4;
  --bg-mid:      #e9e3d8;
  --bg-card:     #e2dcd0;
  --text:        #1c1a17;
  --text-dim:    #5c5449;
  --accent-blue: #2f6584;
  --accent-gold: #8a6e28;
  --accent-red:  #7a1515;
  --border:      #d8d2c8;
  --border-mid:  #cbc5ba;

  --font-display: 'Tenor Sans', sans-serif;
  --font-body:    'Roboto', sans-serif;
  --font-mono:    'Roboto', sans-serif;   /* alias — keep for legacy refs */
  --font-meta:    'Roboto', sans-serif;

  --nav-h: 60px;
  --pad-x: clamp(1.5rem, 4vw, 3.5rem);
  --section-pad: clamp(5rem, 9vw, 11rem);
  --max-w: 1440px;
}

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

/* --- Accessibility: skip link + keyboard focus --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100000;
  background: var(--text);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-meta);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}

html {
  font-size: 16px;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: #0e0e0e; }
::-webkit-scrollbar-thumb { background: var(--accent-blue); }
*                         { scrollbar-width: thin; scrollbar-color: var(--accent-blue) #0e0e0e; }

/* --- Typography Base --- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Subtitle / meta — Roboto Regular */
.nav-center a,
.nav-logo,
.footer-copy {
  font-family: var(--font-meta);
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ============================================================
   PLACEHOLDER CONTENT SYSTEM
   ============================================================ */
.placeholder {
  color: var(--accent-blue);
  font-style: italic;
  opacity: 0.7;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-crosshair {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

/* Horizontal arm */
.cursor-crosshair::before,
.cursor-crosshair::after {
  content: '';
  position: absolute;
  background: var(--text);
  border-radius: 1px;
}

.cursor-crosshair::before {
  width: 1.5px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.cursor-crosshair::after {
  height: 1.5px;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.cursor-crosshair.hover {
  width: 5px;
  height: 5px;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(28, 26, 23, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.18s ease, height 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.cursor-ring.hover {
  width: 52px;
  height: 52px;
  border-color: rgba(61, 122, 158, 0.6);
  opacity: 0.7;
}

/* Cursor goes light when a dark modal/overlay is open */
body:has(.project-modal.open) .cursor-crosshair::before,
body:has(.project-modal.open) .cursor-crosshair::after {
  background: rgba(240, 235, 224, 0.9);
}

body:has(.project-modal.open) .cursor-ring {
  border-color: rgba(240, 235, 224, 0.45);
}

/* Cursor goes light over dark zones — the dark glass nav (home) and every
   page's video hero. JS (utils.js) toggles .invert based on actual pointer
   position, since these zones aren't DOM siblings of the cursor elements
   on every page (a pure CSS :hover ~ selector can't reach all of them). */
.cursor-crosshair.invert::before,
.cursor-crosshair.invert::after {
  background: rgba(240, 235, 224, 0.9);
}

.cursor-ring.invert {
  border-color: rgba(240, 235, 224, 0.45);
}

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99985;
  transform: translateX(100%);
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--border);
  background: rgba(242, 237, 228, 0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav--hidden {
  transform: translateY(-100%);
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  display: flex;
  align-items: center;
  /* Nav's shared --pad-x (24-56px) pushes the logo away from the true
     corner same as the nav links — pull just the logo back to a fixed
     1rem gap regardless of viewport, without touching nav link spacing. */
  margin-left: calc(-1 * var(--pad-x) + 1rem);
}

.nav-logo img {
  height: 100px;
  width: auto;
  display: block;
  /* nobg_logo.png has slightly more transparent padding on its left edge
     than its right (measured: 94px vs 83px in the 500x500 source) — this
     compensates so the mark itself sits flush in the corner, not its box */
  margin-left: -3px;
  object-fit: contain;
}

.nav-center {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
}

.nav-center a {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
  position: relative;
}

.nav-center a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-blue);
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-center a:hover,
.nav-center a.active {
  color: var(--text);
}

.nav-center a:hover::after,
.nav-center a.active::after {
  width: 100%;
}


/* --- Hamburger (mobile) --- */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px;
  z-index: 1010;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Mobile Full-screen Nav --- */
.nav-mobile {
  position: fixed;
  inset: 0;
  background: rgba(242, 237, 228, 0.97);
  z-index: 1005;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav-mobile.open {
  opacity: 1;
  pointer-events: all;
}

.nav-mobile a {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 7rem);
  color: var(--text-dim);
  transition: color 0.2s;
  letter-spacing: 0.04em;
}

.nav-mobile a:hover { color: var(--text); }

/* ============================================================
   SECTION UTILITIES
   ============================================================ */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.55rem;
  letter-spacing: 0.42em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 3rem;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--accent-blue);
  flex-shrink: 0;
}

/* ============================================================
   SCROLL REVEALS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MAGNETIC ELEMENTS
   ============================================================ */
.magnetic {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--border);
  padding: 2rem var(--pad-x);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-copy {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-align: center;
}

.footer-copy a {
  border-bottom: 1px solid var(--border-mid);
  transition: color 0.2s, border-color 0.2s;
}

.footer-copy a:hover {
  color: var(--text);
  border-color: var(--text);
}

/* ============================================================
   BLURRED BACKGROUND HOVER LAYER
   ============================================================ */
#bg-blur-thumb {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.55s ease;
  filter: blur(70px) saturate(1.2);
  transform: scale(1.15);
}

/* ============================================================
   HORIZONTAL RULE / DIVIDERS
   ============================================================ */
.hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .nav-center { display: none; }
  .nav-hamburger { display: flex; }

  .footer-copy { text-align: center; }
}

/* ============================================================
   SECTION PROGRESS DOTS — generated by scroll-film.js
   ============================================================ */
.sf-progress-dots {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: all;
}

.sf-progress-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(28, 26, 23, 0.2);
  border: none;
  padding: 0;
  cursor: none;
  transition: background 0.3s, transform 0.3s;
}

.sf-progress-dot.active {
  background: var(--accent-blue);
  transform: scale(1.9);
}

/* When dots sit over the dark video hero */
.sf-progress-dots[data-on-dark="1"] .sf-progress-dot {
  background: rgba(242, 237, 228, 0.3);
}

.sf-progress-dots[data-on-dark="1"] .sf-progress-dot.active {
  background: rgba(242, 237, 228, 0.9);
}

@media (max-width: 768px) {
  .sf-progress-dots { display: none; }
}