/* ============================================================
   MOMENT HUNTER — about.css
   Colors: #ede8e1 (cream) · #6B1020 (bordo) · #1a1a1a (dark)
   ============================================================ */

:root {
  --cream:      #ede8e1;
  --cream-dark: #ddd6cc;
  --bordo:      #6B1020;
  --bordo-h:    #8B2030;
  --bordo-dk:   #4a0b16;
  --dark:       #1a1a1a;
  --dark2:      #232323;
  --mid:        #585550;
  --muted:      #908c86;
  --white:      #f8f5f1;

  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-sans:  'DM Sans', system-ui, sans-serif;
  --ff-label: 'Space Grotesk', monospace;
  --ff-script:'Caveat', cursive;

  --nav-h: 76px;
  --ease:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--ff-sans);
  background: var(--cream);
  color: var(--dark);
  line-height: 1.65;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Custom cursor (desktop only) ── */
@media (pointer: fine) {
  body, body * { cursor: none !important; }
}
.cur-dot {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--bordo);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10002;
  transform: translate(-50%, -50%);
  transition: transform .1s;
  mix-blend-mode: multiply;
}
.cur-ring {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(107,16,32,.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease), border-color .35s;
}
.cur-ring.is-hover {
  width: 58px; height: 58px;
  border-color: var(--bordo);
}
.cur-ring.is-click {
  width: 28px; height: 28px;
  border-color: var(--bordo);
}
@media (pointer: coarse) {
  .cur-dot, .cur-ring { display: none; }
}

/* ── Film grain ── */
.grain {
  position: fixed; inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
}

/* ── Label ── */
.label {
  display: inline-block;
  font-family: var(--ff-label);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordo);
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════ */
#header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  transition: background .4s var(--ease), backdrop-filter .4s;
}
#header.scrolled {
  background: rgba(26,26,26,.93);
  backdrop-filter: blur(14px);
}
.nav-wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 2.5rem;
}
.nav-logo { width: 110px; flex-shrink: 0; }
.nav-logo img { width: 100%; filter: brightness(0) invert(1); }

.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-link {
  font-family: var(--ff-label);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(237,232,225,.65);
  transition: color .3s; position: relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--cream);
  transition: width .3s var(--ease);
}
.nav-link:hover { color: var(--cream); }
.nav-link:hover::after { width: 100%; }

.burger {
  display: none; flex-direction: column; gap: 5px;
  width: 26px; padding: 2px 0;
}
.burger span { display: block; height: 1px; background: var(--cream); transition: transform .35s, opacity .35s; }
.burger.open span:first-child { transform: translateY(6px) rotate(45deg); }
.burger.open span:last-child  { transform: translateY(-6px) rotate(-45deg); }

.mob-menu {
  position: fixed; inset: 0;
  background: var(--bordo-dk);
  z-index: 999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2rem;
  transform: translateX(100%);
  transition: transform .55s var(--ease);
}
.mob-menu.open { transform: translateX(0); }
.mob-link {
  font-family: var(--ff-serif); font-size: 2.4rem;
  color: var(--cream); opacity: 0; transform: translateY(16px);
  transition: opacity .45s, transform .45s;
}
.mob-menu.open .mob-link              { opacity: 1; transform: translateY(0); }
.mob-menu.open .mob-link:nth-child(1) { transition-delay: .08s; }
.mob-menu.open .mob-link:nth-child(2) { transition-delay: .14s; }
.mob-menu.open .mob-link:nth-child(3) { transition-delay: .20s; }

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */
.ab-hero {
  min-height: 100svh;
  background: var(--dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 4rem) 2rem 7rem;
  position: relative;
  overflow: hidden;
}

/* Animated gradient background */
.ab-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 30%, rgba(107,16,32,.5)  0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(74,11,22,.35)  0%, transparent 55%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(26,26,26,1)    0%, transparent 100%);
  animation: bgShift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes bgShift {
  0%   { opacity: 1; }
  50%  { background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(107,16,32,.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 75% 70%, rgba(74,11,22,.3)   0%, transparent 55%),
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(26,26,26,1)    0%, transparent 100%);
  }
  100% { opacity: 1; }
}

.ab-hero-inner { position: relative; z-index: 2; }

.ab-label { color: rgba(237,232,225,.42); margin-bottom: 1.8rem; }

/* Title — perspective for 3-D character animation */
.ab-title {
  font-family: var(--ff-serif);
  font-size: clamp(3.2rem, 10vw, 7rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.05;
  margin-bottom: 1.8rem;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.ab-title em { font-style: italic; font-weight: 400; color: rgba(237,232,225,.58); }

/* Splitting.js char */
.ab-title .char {
  display: inline-block;
  will-change: transform, opacity;
}
.ab-title .whitespace { display: inline; }

.ab-sub {
  font-family: var(--ff-label);
  font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(237,232,225,.35);
  position: relative; z-index: 2;
}

/* Scroll indicator */
.ab-hero-scroll {
  position: absolute; bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  z-index: 3;
}
.ab-hero-scroll span {
  font-family: var(--ff-label);
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(237,232,225,.38);
  writing-mode: vertical-rl;
}
.scroll-line {
  width: 1px; height: 52px;
  background: rgba(237,232,225,.18);
  position: relative; overflow: hidden;
}
.scroll-line::after {
  content: ''; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--cream);
  animation: lineDown 2.2s var(--ease) infinite;
}
@keyframes lineDown { to { top: 100%; } }

/* ── Ticker ── */
.ticker {
  position: absolute; bottom: 0; left: 0; right: 0;
  overflow: hidden;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(237,232,225,.08);
  z-index: 2;
}
.ticker-track {
  display: inline-flex;
  gap: 2.2rem;
  align-items: center;
  white-space: nowrap;
  animation: ticker 28s linear infinite;
}
.ticker-track span {
  font-family: var(--ff-label);
  font-size: .6rem; letter-spacing: .24em;
  color: rgba(237,232,225,.22);
}
.ticker-track .t-sep { color: var(--bordo); letter-spacing: 0; opacity: .7; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ═══════════════════════════════════════════
   PATH SECTION
   ═══════════════════════════════════════════ */
.path-section {
  background: var(--cream);
  padding: 8rem 0 11rem;
}

.path-wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 3rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  align-items: start;
}

/* Spine hidden — no longer needed with grid layout */
.path-line { display: none; }

/* ── Node ── */
.path-node {
  display: flex;
  flex-direction: column;
}

/* Odd (left column) — notch top-left */
.path-node:nth-child(odd) .path-card {
  clip-path: url(#sd-left);
}
.path-node:nth-child(odd) .path-card::before { left: 0; border-radius: 0 3px 3px 0; }

/* Even (right column) — notch top-right */
.path-node:nth-child(even) .path-card {
  clip-path: url(#sd-right);
}
.path-node:nth-child(even) .path-card::before { right: 0; left: auto; border-radius: 3px 0 0 3px; }

/* ── Card (portrait SD card shape) ── */
.path-card {
  background: var(--dark);
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  will-change: transform;
  filter: drop-shadow(0 12px 36px rgba(0,0,0,.45));
  transition: filter .55s var(--ease);
}
.path-card:hover {
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.65));
}

/* Write-protect tab */
.path-card::before {
  content: '';
  position: absolute;
  top: 38%; width: 6px; height: 9%;
  background: #f5c518;
  z-index: 4;
  box-shadow: inset -1px 0 2px rgba(0,0,0,.4);
}

/* ── Card media — top screen area ── */
.path-media {
  flex: 0 0 50%;
  position: relative;
  overflow: hidden;
  background: var(--dark2);
}
.path-media-link { display: block; width: 100%; height: 100%; }

.path-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.88);
  transition: transform .95s var(--ease), filter .95s;
  will-change: transform;
}
.path-card:hover .path-img { transform: scale(1.06); filter: brightness(.62); }

.path-video-thumb { width: 100%; height: 100%; position: relative; }
.path-video-thumb video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ── Card text — bottom panel ── */
.path-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.3rem 1.1rem;
  background: var(--dark2);
  border-top: 1px solid rgba(107,16,32,.4);
  transition: border-color .45s;
  overflow: hidden;
}
.path-card:hover .path-text { border-top-color: var(--bordo); }

.path-tag {
  display: inline-block;
  font-family: var(--ff-label);
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bordo-h);
  margin-bottom: .3rem;
}

.path-date {
  display: block;
  font-family: var(--ff-label);
  font-size: .55rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237,232,225,.32);
  margin-bottom: .4rem;
}

.path-title {
  font-family: var(--ff-serif);
  font-size: 1rem; font-weight: 600; line-height: 1.2;
  color: var(--cream); margin-bottom: .5rem;
}

.path-body {
  font-family: var(--ff-sans);
  font-size: .78rem;
  color: rgba(237,232,225,.46);
  line-height: 1.65;
}

/* ── Year label (above card) ── */
.path-dot-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
  will-change: opacity, transform;
}

.path-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bordo);
  flex-shrink: 0;
  will-change: transform;
}

.path-year {
  font-family: var(--ff-script);
  font-size: 1.1rem; font-weight: 600;
  color: var(--bordo); opacity: .6;
  white-space: nowrap;
  will-change: opacity, transform;
}

/* ── No-media fallback ── */
.path-node.no-media .path-card {
  background: linear-gradient(160deg, var(--dark2) 55%, rgba(107,16,32,.2));
}
.path-node.no-media .path-text {
  flex: 1;
  border-top: none;
  justify-content: center;
}

/* Empty state */
.path-empty {
  text-align: center; padding: 6rem 2rem;
  color: var(--muted); font-style: italic; font-size: 1.05rem;
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.footer {
  background: var(--dark2);
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 2.5rem 0;
}
.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; }
.footer-logo  { width: 90px; filter: brightness(0) invert(1); opacity: .7; }
.footer-copy  {
  font-family: var(--ff-label);
  font-size: .6rem; letter-spacing: .1em;
  color: rgba(237,232,225,.25);
}

/* ═══════════════════════════════════════════
   GLIGHTBOX
   ═══════════════════════════════════════════ */
.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev { background: rgba(107,16,32,.85) !important; }
.glightbox-clean .gclose svg,
.glightbox-clean .gnext svg,
.glightbox-clean .gprev svg { stroke: var(--cream) !important; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .burger    { display: flex; }
  .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
}

@media (max-width: 760px) {
  .path-section { padding: 5rem 0 7rem; }
  .path-wrap {
    grid-template-columns: 1fr;
    padding: 0 1.5rem;
    gap: 2rem;
  }
  .path-node:nth-child(even) .path-card {
    clip-path: url(#sd-left);
  }
  .path-node:nth-child(even) .path-card::before {
    left: 0; right: auto; border-radius: 0 3px 3px 0;
  }
}

@media (max-width: 480px) {
  .ab-hero { min-height: 90svh; }
}