/* ================================================================
   SITE PRELOADER — rotating Pulse mark + real asset progress
   ================================================================ */
body.is-loading { overflow: hidden; }

#site-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #050505;
  color: #F5F5F7;
  clip-path: inset(0 0 0 0);
  transition: clip-path 820ms var(--ease-pulse), visibility 0s linear 820ms;
  visibility: visible;
}

#site-preloader.is-complete { clip-path: inset(0 0 100% 0); visibility: hidden; }
.preloader-inner { display:flex; flex-direction:column; align-items:center; gap:26px; opacity:1; transition:transform 560ms var(--ease-pulse), opacity 420ms ease; }
#site-preloader.is-complete .preloader-inner { transform:translateY(-18px) scale(.97); opacity:0; }
.preloader-mark-shell { width:clamp(72px,7vw,108px); aspect-ratio:1; display:grid; place-items:center; }
.preloader-mark { width:100%; height:100%; object-fit:contain; transform-origin:50% 50%; animation:pulse-preloader-spin 1.28s linear infinite; will-change:transform; }
.preloader-progress { min-width:72px; text-align:center; font-family:'Space Mono',monospace; font-size:11px; line-height:1; letter-spacing:.10em; color:#F5F5F7; font-variant-numeric:tabular-nums; }
@keyframes pulse-preloader-spin { to { transform:rotate(360deg); } }

/* ================================================================
   HOMEPAGE REEL — continuous project films + XYZ-style 3D response
   ================================================================ */
#hero-media-scene {
  position:absolute;
  inset:-3.5vw;
  z-index:0;
  pointer-events:none;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  transform-origin:50% 50%;
  transform:perspective(1500px) rotateX(0deg) rotateY(0deg) translate3d(0,0,0) scale(1.02);
}

.hero-reel-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transform:scale(1.045);
  transition:opacity var(--reel-transition-ms, 520ms) cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.hero-reel-video.is-active { opacity:1; z-index:2; }

.hero-film-shade {
  position:absolute;
  inset:0;
  z-index:4;
  background:linear-gradient(to bottom,rgba(5,5,5,.06) 0%,rgba(5,5,5,0) 52%,rgba(5,5,5,.58) 100%);
  pointer-events:none;
}

/* Project title / client — based on the supplied NEXT LAP / AUDI F1 reference. */
.hero-project-meta {
  --meta-x: 0px;
  --meta-y: 0px;
  --meta-rx: 0deg;
  --meta-ry: 0deg;
  --meta-change-y: 0px;
  position:absolute;
  z-index:20;
  left:clamp(20px,3vw,52px);
  bottom:clamp(54px,6.5vh,88px);
  display:flex;
  align-items:baseline;
  gap:clamp(14px,2vw,34px);
  max-width:calc(100% - 40px);
  color:#F5F5F7;
  text-decoration:none;
  transform-style:preserve-3d;
  transform-origin:left center;
  will-change:transform,opacity;
  transform:perspective(1200px)
    translate3d(var(--meta-x), calc(var(--meta-y) + var(--meta-change-y)), 42px)
    rotateX(var(--meta-rx)) rotateY(var(--meta-ry));
  transition:opacity min(180ms, var(--reel-transition-ms, 520ms)) ease, transform var(--reel-transition-ms, 520ms) var(--ease-pulse);
}

.hero-project-meta.is-changing { opacity:0; --meta-change-y:7px; }
.hero-project-meta.is-disabled { pointer-events:none; }

.hero-project-title {
  font-family:'Inter',sans-serif;
  font-size:clamp(30px,4.5vw,72px);
  line-height:.92;
  font-weight:500;
  letter-spacing:-.055em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hero-project-client {
  font-family:'Inter',sans-serif;
  font-size:clamp(18px,2.5vw,42px);
  line-height:1;
  font-weight:300;
  letter-spacing:-.035em;
  color:rgba(245,245,247,.62);
  text-transform:uppercase;
  white-space:nowrap;
}

.hero-reel-ui {
  position:absolute;
  z-index:24;
  left:clamp(20px,3vw,52px);
  right:clamp(20px,3vw,52px);
  bottom:18px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:18px;
}

.hero-reel-counter {
  min-width:54px;
  font-family:'Space Mono',monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.08em;
  color:rgba(245,245,247,.56);
  font-variant-numeric:tabular-nums;
}

.hero-reel-slider {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(34px,1fr);
  gap:6px;
  width:100%;
}

.hero-reel-segment {
  position:relative;
  height:18px;
  padding:8px 0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.hero-reel-segment-track {
  position:absolute;
  left:0;
  right:0;
  top:8px;
  height:2px;
  overflow:hidden;
  background:rgba(245,245,247,.22);
}

.hero-reel-segment-fill {
  position:absolute;
  inset:0;
  background:#F5F5F7;
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

.hero-reel-segment:hover .hero-reel-segment-track,
.hero-reel-segment:focus-visible .hero-reel-segment-track { background:rgba(245,245,247,.38); }
.hero-reel-segment:focus-visible { outline:1px solid rgba(245,245,247,.45); outline-offset:2px; }

@media (max-width: 700px) {
  .hero-project-meta {
    bottom:70px;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
  }
  .hero-project-title { font-size:clamp(28px,10vw,48px); white-space:normal; }
  .hero-project-client { font-size:clamp(16px,5vw,24px); white-space:normal; }
  .hero-reel-ui { grid-template-columns:1fr; gap:7px; bottom:12px; }
  .hero-reel-counter { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  #hero-media-scene { transform:none !important; }
  .hero-reel-video { transition:none; }
  .hero-project-meta { transition:none; transform:none !important; }
}