: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;
}

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

/* Background video */
.bg{position:fixed; inset:0; z-index:0; overflow:hidden}
.bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Vimeo */
.vimeo-wrap{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vimeo-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vimeo-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* background only */
}

/* Vimeo iframe as COVER */
.vimeo-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 based on viewport width */
  min-width: 177.78vh; /* 16:9 based on viewport height */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .vimeo-bg {
    display: 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 to avoid visible seam when lists join */
/* Remove padding at the joins for seamless loop */
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; } /* was 50px */

/* 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; }

/* 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 {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.project a:hover .title {
  opacity: 1 !important;
  transform: translateZ(0) scale(1.03);
}


/* iOS: scrolling should win over “tap/drag selection” */
#scroll-area,
.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: give each item more vertical “mass” so the center lands earlier (Latitudes) */
@media (max-width: 480px) {
  .project .title {
    font-size: clamp(44px, 10vw, 64px);
    line-height: 0.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;
  }
}

.vimeo-bg 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:0;
  transition: opacity 220ms ease;
}

.vimeo-bg iframe.is-on{
  opacity:1;
}