/* =========================================================
   NF v3 — light redesign layer (Nov 2026)
   Keeps the current site exactly as is, and adds only:
   1) intro loader with % counter
   2) yellow flash (wipe) revealing each Work video
   3) mask animation on headline letters as they enter
   4) Work titles moved OUT of the video, under each tile
   Roll back: remove the nf-v3 lines in <head><meta charset="utf-8"> of index.html.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --nf-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --nf-ease-io: cubic-bezier(0.87, 0, 0.13, 1);
  --nf-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --nf-y: #e8b13a;
}

/* 1) LOADER (replaces the old dot intro) */
html.nf-js #cine-intro { display: none !important; }
.nf-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #0a0a0a; color: #e8e8e3;
  font-family: var(--nf-mono); font-size: 11px; letter-spacing: 0.04em;
  transition: transform 1.1s var(--nf-ease-io);
}
.nf-loader.out { transform: translateY(-100%); }
.nf-loader .c { position: absolute; }
.nf-loader .tl { top: 28px; left: 40px; }
.nf-loader .tr { top: 28px; right: 40px; }
.nf-loader .bl { bottom: 28px; left: 40px; }
.nf-loader .br { bottom: 28px; right: 40px; }
.nf-loader .bar { position: absolute; left: 0; top: 50%; height: 1px; width: 0; background: var(--nf-y); }
.nf-loader .pct { position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); color: var(--nf-y); }

/* 3) MASK REVEAL ON HEADLINES */
.nf-masked.reveal-hidden { opacity: 1 !important; transform: none !important; }
.nf-line { display: block; overflow: hidden; padding: 0.08em 0 0.06em; margin: -0.08em 0 -0.06em; }
.nf-line > .nf-in-t { display: inline-block; transition: transform 1.4s var(--nf-ease); }
html.nf-js .nf-line > .nf-in-t { transform: translateY(115%); }
html.nf-js .nf-shown .nf-line > .nf-in-t,
html.nf-js .nf-line.nf-shown > .nf-in-t { transform: none; }
.nf-shown .nf-line:nth-child(2) > .nf-in-t { transition-delay: 0.08s; }
.nf-shown .nf-line:nth-child(3) > .nf-in-t { transition-delay: 0.16s; }

/* 2) YELLOW FLASH ON WORK VIDEOS */
.works-grid .work-tile .frame::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: var(--nf-y); transform-origin: 50% 0%;
  transform: scaleY(0);
  transition: transform 1.3s var(--nf-ease-io);
}
html.nf-js .works-grid .work-tile:not(.nf-shown) .frame::before { transform: scaleY(1); }

/* 4) WORK TITLES OUTSIDE THE VIDEO */
.works-grid .work-tile { overflow: visible; }
.works-grid .work-tile::after { display: none; }
.works-grid .work-tile .frame > .title { display: none; }
.nf-cap {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: start; padding: 16px 2px 8px;
}
.nf-cap .nf-name {
  font-family: 'Unbounded', sans-serif; font-weight: 800;
  font-size: clamp(18px, 1.7vw, 26px); line-height: 1.05;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--ink, #e8e8e3); transition: color 0.35s ease;
}
.works-grid .work-tile:hover .nf-name { color: var(--accent, var(--nf-y)); }
.nf-cap .nf-credit {
  margin-top: 8px; font-family: var(--nf-mono); font-size: 11px;
  color: var(--muted, #7a7a75); letter-spacing: 0.02em;
}
.nf-cap .nf-credit b { color: var(--ink, #e8e8e3); font-weight: 400; }
.nf-cap .nf-idx {
  font-family: var(--nf-mono); font-size: 11px; color: var(--accent, var(--nf-y));
  white-space: nowrap; padding-top: 4px;
}
.works-grid { row-gap: 34px !important; }

@media (max-width: 640px) {
  .nf-loader .tl, .nf-loader .bl { left: 20px; }
  .nf-loader .tr, .nf-loader .br { right: 20px; }
  .works-grid { row-gap: 26px !important; }
  .nf-cap .nf-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-line > .nf-in-t, .works-grid .work-tile .frame::before { transition: none !important; }
}

/* mobile fixes (2026-11-09): one-line header, all menu items on screen, shorter hero */
@media (max-width: 640px) {
  header.site { padding: 18px 16px !important; gap: 10px; }
  header.site .logo { font-size: 14px !important; white-space: nowrap; }
  header.site .logo .dot { width: 7px; height: 7px; margin-right: 7px; transform: translateY(-2px); }
  header.site nav ul { gap: 7px !important; font-size: 8px !important; letter-spacing: 0.03em !important; }
  .hero { min-height: 0 !important; padding-top: 110px !important; padding-bottom: 44px !important; }
  .hero-bg { top: 58px !important; }
  .hero .eyebrow { margin-bottom: 28px !important; }
  .hero .meta { margin-top: 28px !important; justify-content: flex-start !important; }
}

/* mobile: tighter vertical rhythm between sections (2026-11-09) */
@media (max-width: 640px) {
  section:not(.hero) { padding-top: 56px !important; padding-bottom: 56px !important; }
  .section-head { margin-bottom: 28px !important; }
  .contact h2 { margin-bottom: 28px !important; }
  .contact .socials { margin-top: 36px !important; }
  .view-all { margin-top: 32px !important; }
}

/* mobile: all four social links on one line (2026-11-09) */
@media (max-width: 640px) {
  .contact .socials { gap: 18px !important; font-size: 11px !important; letter-spacing: 0.1em !important; flex-wrap: nowrap !important; }
}

/* mobile: e-mail on a single line (2026-11-09) */
@media (max-width: 640px) {
  .contact a.email { white-space: nowrap !important; word-break: normal !important; font-size: clamp(14px, 4.5vw, 22px) !important; }
}

/* mobile: footer on a single line (2026-11-09) */
@media (max-width: 640px) {
  footer { flex-direction: row !important; justify-content: space-between !important; gap: 12px !important; font-size: 9px !important; letter-spacing: 0.12em !important; white-space: nowrap; }
}
/* MORE! title: always yellow, red when clicked (2026-11-09) */
.works-grid a.work-tile[href="work-018.html"] .nf-name{color:#e8b13a;transition:color .15s ease}
.works-grid a.work-tile[href="work-018.html"]:active .nf-name,.works-grid a.work-tile[href="work-018.html"]:focus-visible .nf-name{color:#e0483a}