:root{
  --bg:#000; --fg:#fff;
  --active-interval:12000;     /* ms: auto-advance */
  --inactivity-delay:4000;     /* ms: idle resume */
  --header-h:56px;             /* adjust to real header height */
  --footer-h:44px;             /* adjust to real footer height */
}

/* --- Base --------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  overflow:hidden; /* scrolling happens in #scrollArea */
}

/* --- iOS scroll/tap polish (prevents sticky highlights) ----------------- */
html, body { -webkit-text-size-adjust: 100%; }

*{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* kill the grey/blue tap highlight on iOS */
a, button, [role="button"]{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* prevent “stuck” focus ring/state on iOS */
a:focus, a:active{ outline:none; }

/* iOS: make sure text itself can’t be selected on slow drag */
.project, .project *{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}

/* Desktop: show pointer only on active, clickable project */
@media (hover: hover) and (pointer: fine) {
  .project.active .project-link {
    cursor: pointer;
  }
}

/* iOS: prevent the “blue/grey selection highlight” */
.project .title, .project .meta{ -webkit-user-drag:none; }

/* --- Background media (poster-first; Vimeo revealed only when settled) -- */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

/* Poster: always visible */
.bg .poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;      /* poster layer */
  opacity:1;      /* never hide poster -> prevents black flash */
}

/* Video wrapper: fades ON TOP of poster */
#bgVideoWrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:2;      /* video above poster */
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
  background:transparent;
}

#bgVideoWrap.is-visible{ opacity:1; }

/* Vimeo iframe sizing */
#bgVideoWrap iframe{
  position:absolute;
  top:50%; left:50%;
  width:100vw; height:56.25vw;
  min-width:177.78vh; min-height:100vh;
  transform:translate(-50%,-50%);
  border:0;
  opacity:1;              /* MUST be visible */
  background:transparent; /* avoid black panel */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #bgVideoWrap{transition:none}
}

/* Header */
header{
  position:fixed;
  inset:0 0 auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px clamp(16px,3vw,40px);
  z-index:3;
  mix-blend-mode:difference;
  pointer-events:none
}
header .brand,
header .nav a{
  pointer-events:auto;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px
}
header .nav a{
  font-weight:600;
  border-bottom:1px solid transparent
}
header .nav a:hover{border-bottom-color:currentColor}
header .logo{
  height:clamp(22px,3vw,28px);
  width:auto;
  display:block;
  transition:opacity .3s ease
}
header .logo:hover{opacity:.85}

/* Footer */
footer{
  position:fixed;
  inset:auto 0 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(40px,16vw,40px);
  z-index:3;
  mix-blend-mode:difference;
  font-weight:600;
  font-size:clamp(12px, 7vw, 12px);
}
footer a,footer span{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}

/* --- Scroll area (NO scroll-snap; JS handles centering) ----------------- */
#scrollArea{
  position:relative;
  height:100vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  z-index:2;
}

/* --- Project list ------------------------------------------------------- */
ul.projects{
  list-style:none;
  margin:0;
  padding:20vh clamp(16px,10vw,80px) 20vh clamp(16px,10vw,80px);
  display:flex;
  flex-direction:column;
  gap:clamp(12px,3vh,28px);
  align-items:flex-end;
}

/* Seamless loop spacers (keep your original seam tuning) */
ul.projects#projects-head { padding-bottom: 0px !important; }
ul.projects#projects-mid  { padding-top: 50px !important; padding-bottom: 50px !important; }
ul.projects#projects-tail { padding-top: 0px !important; }

/* Desktop breathing room on the right via transform */
@media (min-width:1024px){ ul.projects .project{ transform:translateX(-6vw);} }
@media (min-width:1440px){ ul.projects .project{ transform:translateX(-9vw);} }
@media (min-width:1920px){ ul.projects .project{ transform:translateX(-12vw);} }

/* Mobile / tablet: center alignment */
@media (max-width:820px){
  main#scrollArea ul.projects{ align-items:center; padding-left:0; padding-right:0; }
  main#scrollArea .project{ text-align:center; margin:0 auto; max-width:92vw; }
}
@media (max-width:820px){
  ul.projects#projects-tail { padding-top: 0 !important; }
  ul.projects#projects-mid  { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* --- Project items ------------------------------------------------------ */
.project{ max-width:90vw; text-align:right; line-height:.94; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* Visibility logic */
.project .title,.project .meta{ opacity:0; transition:opacity .3s ease, transform .4s ease; }
.project .title{ font-weight:800; font-size:clamp(36px,8vw,90px); letter-spacing:-.5px; color:#fff; }
.project .meta{ margin-top:6px; font-weight:700; font-size:clamp(14px,2.4vw,28px); color:rgba(255,255,255,.85); }
.project.active .title,.project.active .meta{ opacity:1 }
.project.active .title{ transform:translateZ(0) scale(1.02) }

.project a,
.project-link{
  color:inherit;
  text-decoration:none;
  display:inline-block;
  transition:opacity .3s ease;
}
.project a:hover .title{
  opacity:1 !important;
  transform:translateZ(0) scale(1.03);
}

/* iOS: scrolling should win over “tap/drag selection” */
#scrollArea, .project{ touch-action: pan-y; }

/* iOS: sometimes paints :active on tap-drag; keep it invisible */
.project:active, .project *:active{ background:transparent; }

/* iOS: no tap highlight on clickable blocks */
.project{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Idle vs user-active */
body:not(.user-active) .project .title,
body:not(.user-active) .project .meta{ opacity:0 }
body:not(.user-active) .project.active .title,
body:not(.user-active) .project.active .meta{ opacity:1 }

body.user-active .project .title{ opacity:.15 }
body.user-active .project .meta{ opacity:0 }
body.user-active .project.active .title{ opacity:1 }
body.user-active .project.active .meta{ opacity:.85 }

/* Mobile tuning */
@media (max-width:480px){
  .project .title{ font-size:clamp(44px,10vw,64px); line-height:.98; }
  .project .meta{ font-size:clamp(16px,4.2vw,20px); margin-top:10px; }
  ul.projects{ gap:clamp(16px,3.5vh,34px); }
}
@media (max-width:480px){
  footer, .footer{ padding-left:16px; padding-right:16px; }
}