/* ==========================================================================
   Ha.Des — post-production portfolio
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:        #0a0a09;
  --bg-raised: #131311;
  --fg:        #ededea;
  --fg-dim:    #8c8c86;
  --fg-faint:  #55554f;
  --line:      #262620;
  --accent:    #e0402c; /* tally-light red */
  --accent-dim:#5c2018;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --nav-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* --------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------- */
.wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}

/* --------------------------------------------------------------------
   Motion — page-load intro & scroll reveals
   -------------------------------------------------------------------- */
.intro-hide{
  opacity:0;
  transform:translateY(14px);
}
.intro-in{
  opacity:1;
  transform:translateY(0);
  transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);
}
.intro-in.d1{ transition-delay:.05s; }
.intro-in.d2{ transition-delay:.16s; }
.intro-in.d3{ transition-delay:.27s; }

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion:reduce){
  .intro-hide{ opacity:1; transform:none; }
  .intro-in{ transition:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* --------------------------------------------------------------------
   Header / nav — styled like a mixer console strip
   -------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  padding:20px 0;
  background:rgba(10,10,9,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.logo-block{ display:flex; flex-direction:column; gap:1px; }
.logo{
  font-family:var(--display);
  font-weight:700;
  font-size:30px;
  letter-spacing:0.005em;
  display:inline-flex;
  align-items:baseline;
}
.logo-accent{ color:var(--accent); }
.header-tagline{ margin:0; line-height:1.15; }
.header-tagline .line1{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.tagline-dot{
  color:var(--accent);
  font-size:1.4em;
  line-height:0;
  display:inline-block;
  vertical-align:-0.08em;
  margin:0 0.02em;
}
.header-tagline .line2{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  color:var(--fg-faint);
}
@media (max-width:600px){
  .logo{ font-size:23px; }
  .header-tagline .line2{ display:none; }
}

.nav{
  display:flex;
  align-items:center;
  gap:0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.nav a{
  position:relative;
  padding:8px 18px;
  color:var(--fg-dim);
  transition:color .15s ease;
  border-left:1px solid var(--line);
}
.nav a:first-child{ border-left:none; }
.nav a:hover, .nav a:focus-visible{ color:var(--fg); }
.nav a.active{ color:var(--fg); }
.nav a.active::after{
  content:'';
  position:absolute;
  left:18px; right:18px; bottom:-1px;
  height:2px;
  background:var(--accent);
}

.nav-toggle{
  display:none;
  background:none; border:none; color:var(--fg);
  padding:8px;
}
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width:760px){
  .nav{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .nav.open{ display:flex; }
  .nav a{ border-left:none; border-top:1px solid var(--line); padding:16px 24px; width:100%; }
  .nav a.active::after{ display:none; }
  .nav-toggle{ display:block; }
}

/* --------------------------------------------------------------------
   Page sections — each is a self-contained block with a sticky background
   video that pins in place while its own content scrolls up and overlaps
   it; the next section's video then takes over. Mirrors the stacked
   scroll-reveal effect on ace.nl.
   -------------------------------------------------------------------- */
.page-block{
  position:relative;
  scroll-margin-top:var(--nav-h);
}

.hero-sticky{
  position:sticky;
  top:0;
  z-index:0;
  min-height:60vh;
  display:flex;
  align-items:flex-start;
  overflow:hidden;
}
.hero-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(10,10,9,0.45) 0%, rgba(10,10,9,0.3) 45%, rgba(10,10,9,0.9) 100%);
}
.hero-sticky .wrap{
  position:relative;
  z-index:2;
  padding-top:96px;
}
@media (max-width:700px){
  .hero-sticky{ min-height:54vh; }
  .hero-sticky .wrap{ padding-top:84px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-bg-video{ display:none; }
}
/* Sticky video backgrounds are unreliable/battery-heavy on many phones —
   fall back to a normal in-flow (non-pinning) hero below ~700px */
@media (max-width:700px){
  .hero-sticky{ position:relative; }
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
}
.rec-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  animation:pulse 2s ease-in-out infinite;
  flex:none;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
@media (prefers-reduced-motion:reduce){
  .rec-dot{ animation:none; }
}
.hero-sticky h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(32px,5vw,52px);
  margin:0 0 12px;
  letter-spacing:-0.01em;
  color:var(--fg);
}
.hero-sticky p{
  color:var(--fg-dim);
  max-width:52ch;
  margin:0;
  font-size:16px;
}

/* --------------------------------------------------------------------
   Video grid — bento layout: the most recent video is large, the next
   ones tuck in tightly beside it. The whole section has an opaque
   background and sits above the fixed hero video, so it visually slides
   up and over it as the page scrolls.
   -------------------------------------------------------------------- */
.grid-section{
  position:relative;
  z-index:2;
  background:var(--bg);
  padding:56px 0 96px;
  margin-top:-120px;
  box-shadow:0 -60px 80px -30px rgba(0,0,0,0.75);
}
@media (max-width:700px){
  .grid-section{ margin-top:-56px; }
}

/* --------------------------------------------------------------------
   Tag filter — a slim bar fixed to the bottom of the viewport (doesn't
   scroll with the page, stays compact on mobile via horizontal scroll
   instead of wrapping to multiple rows).
   -------------------------------------------------------------------- */
.tag-filter-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:60;
  background:rgba(10,10,9,0.92);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:10px 0;
}
.tag-filter-bar:has(.tag-filter:empty){ display:none; }

.tag-filter{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
  mask-image:linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
}
.tag-filter::-webkit-scrollbar{ display:none; }
.tag-filter:empty{ display:none; }

.tag-chip{
  flex:none;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--fg-dim);
  background:none;
  border:1px solid var(--line);
  padding:6px 13px;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.tag-chip:hover{ color:var(--fg); border-color:var(--fg-faint); }
.tag-chip.active{
  color:#fff;
  background:var(--accent);
  border-color:var(--accent);
}
@media (max-width:600px){
  .tag-filter-bar{ padding:8px 0; }
  .tag-chip{ font-size:10px; padding:5px 11px; }
}

/* When a tag other than "All" is active, the per-section scroll view is
   hidden and every matching video (from every section) is shown together
   in this single flat grid instead. */
.filtered-results{
  position:relative;
  z-index:2;
  background:var(--bg);
  padding:48px 0 96px;
}
.filtered-results[hidden]{ display:none; }
.filtered-results-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin:0 0 24px;
}
main.filtering .page-block{ display:none; }

.video-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:clamp(130px, 15.5vw, 220px);
  grid-auto-flow:dense;
  gap:20px;
}
@media (max-width:1000px){
  .video-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .video-grid{ grid-template-columns:1fr; grid-auto-rows:230px; }
}

.video-card{
  position:relative;
  height:100%;
  background:var(--bg-raised);
  border:1px solid var(--line);
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s ease, transform .2s ease;
}
.video-card:hover, .video-card:focus-visible{
  border-color:var(--fg-faint);
  transform:translateY(-2px);
}

/* Featured card — the most recent video, shown full-width and wider than
   16:9 so it reads as a lead banner rather than a regular grid tile */
.video-card.featured{
  grid-column:1 / -1;
  grid-row:span 2;
}
@media (max-width:600px){
  .video-card.featured{ grid-row:span 2; }
}
.video-card.featured .thumb-caption h3{ font-size:26px; }
.video-card.featured .thumb-caption .cat{ font-size:12px; }
.video-card.featured .reel-tag{
  font-size:11.5px;
  padding:5px 10px 5px 8px;
}
.video-card.featured .play-btn{
  width:64px; height:64px;
}
.video-card.featured .play-btn svg{ width:20px; height:20px; }

.video-thumb{
  position:absolute;
  inset:0;
  background:#000;
}
.video-thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(35%) contrast(1.05);
  transition:filter .25s ease, transform .4s ease;
}
.video-card:hover .video-thumb img{
  filter:grayscale(0%) contrast(1.05);
  transform:scale(1.03);
}

.thumb-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:12px 14px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.82) 100%);
}
.reel-tag{
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  color:#fff;
  background:rgba(0,0,0,0.55);
  padding:4px 8px 4px 6px;
  border-left:2px solid var(--accent);
}
.reel-tag .num{ color:#fff; }
.reel-tag .of{ color:rgba(255,255,255,0.45); }

.play-btn{
  align-self:center;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transform:scale(.85);
  transition:opacity .2s ease, transform .2s ease;
}
.video-card:hover .play-btn, .video-card:focus-visible .play-btn{
  opacity:1; transform:scale(1);
}
.play-btn svg{ width:16px; height:16px; margin-left:2px; fill:#fff; }

.thumb-caption h3{
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
  color:#fff;
  margin:0 0 1px;
  line-height:1.25;
  text-shadow:0 1px 6px rgba(0,0,0,0.4);
}
.thumb-caption .cat{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.65);
}

.empty-state{
  padding:64px 24px;
  text-align:center;
  color:var(--fg-dim);
  border:1px dashed var(--line);
  font-family:var(--mono);
  font-size:13px;
}

/* --------------------------------------------------------------------
   Lightbox player
   -------------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0;
  background:rgba(4,4,4,0.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:40px 20px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
  width:100%;
  max-width:1100px;
}
.lightbox-nav{
  flex:none;
  background:none;
  border:1px solid var(--line);
  color:var(--fg);
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  margin:0 14px;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.lightbox-nav svg{ width:20px; height:20px; }
.lightbox-nav:hover, .lightbox-nav:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  transform:scale(1.06);
}
.lightbox-nav:disabled{
  opacity:.25;
  cursor:default;
  pointer-events:none;
}
@media (max-width:760px){
  .lightbox-nav{ width:38px; height:38px; margin:0 6px; }
  .lightbox-nav svg{ width:16px; height:16px; }
}
.lightbox-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.lightbox-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.lightbox-title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--fg-dim);
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:16px;
}
.lightbox-close{
  position:absolute;
  top:24px; right:28px;
  background:none; border:1px solid var(--line);
  color:var(--fg);
  width:38px; height:38px;
  font-family:var(--mono);
  font-size:16px;
}
.lightbox-close:hover{ border-color:var(--accent); color:var(--accent); }

/* --------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------- */
.contact-section{
  position:relative;
  z-index:2;
  background:var(--bg);
  padding:64px 0 96px;
  margin-top:-120px;
  box-shadow:0 -60px 80px -30px rgba(0,0,0,0.75);
}
@media (max-width:700px){
  .contact-section{ margin-top:-56px; }
}
.contact-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:56px;
  align-items:start;
}
@media (max-width:700px){
  .contact-grid{ grid-template-columns:1fr; }
}
.contact-portrait{
  border:1px solid var(--line);
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--bg-raised);
}
.contact-portrait img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(100%);
}
.contact-tagline{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin:0 0 32px;
}
.contact-list{
  list-style:none;
  margin:0; padding:0;
}
.contact-list li{
  padding:16px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:16px;
}
.contact-list li:last-child{ border-bottom:1px solid var(--line); }
.contact-list .label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-faint);
  padding-top:2px;
}
.contact-list a:hover{ color:var(--accent); }

.contact-form{
  margin-top:36px;
  padding-top:32px;
  border-top:1px solid var(--line);
  max-width:460px;
}
.honeypot-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
.contact-form .field{
  margin-bottom:18px;
}
.contact-form label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:7px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  background:var(--bg-raised);
  border:1px solid var(--line);
  color:var(--fg);
  padding:11px 13px;
  font-family:inherit;
  font-size:15px;
  resize:vertical;
  transition:border-color .2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.contact-form .btn{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  padding:12px 24px;
  cursor:pointer;
  transition:opacity .2s ease;
}
.contact-form .btn:hover{ opacity:0.85; }
.contact-form .btn:disabled{ opacity:0.5; cursor:default; }
.form-status{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:12px;
  color:var(--fg-dim);
  min-height:1em;
}
.form-status.ok{ color:#6fc98a; }
.form-status.err{ color:var(--accent); }

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:28px 0 76px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--fg-faint);
}
.site-footer .wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}