/* GF Web signature interaction layer. Kept separate from the base redesign for easy tuning. */

:root { --page-progress: 0; }
.site-header { overflow: visible; }
.site-header::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--moss);
  transform:scaleX(var(--page-progress));
  transform-origin:left center;
  pointer-events:none;
  z-index:20;
}

/* Portfolio images should feel like objects, not screenshots pasted into cards. */
.live-project-art {
  --pointer-x:50%;
  --pointer-y:50%;
  --tilt-x:0deg;
  --tilt-y:0deg;
  --project-pan:0px;
  position:relative;
  transform:perspective(1500px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease;
  will-change:transform;
}
.live-project-art .live-project-shot {
  transform:translate3d(0,var(--project-pan),0) scale(1.018);
  transform-origin:center center;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .35s ease !important;
  will-change:transform;
}
.live-project-art::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(216,255,63,.13),transparent 30%);
  transition:opacity .25s ease;
}
.live-project-art::after {
  content:"VIEW ↗";
  position:absolute;
  z-index:5;
  left:var(--pointer-x);
  top:var(--pointer-y);
  width:84px;
  height:84px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--moss);
  color:var(--ink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.68);
  transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}
.live-project-art:hover { box-shadow:0 34px 80px rgba(11,11,11,.16); }
.live-project-art:hover::before { opacity:1; }
.live-project-art:hover::after { opacity:1; transform:translate(-50%,-50%) scale(1); }
.live-project-art:hover .live-project-shot {
  transform:translate3d(0,var(--project-pan),0) scale(1.035);
  filter:saturate(1.04) contrast(1.015);
}
.live-project-art:hover .live-project-domain,
.live-project-art:hover .live-project-arrow { opacity:.2 !important; }

/* More cinematic movement inside the secondary motion canvases. */
.motion-feature-media video,
.motion-close > video {
  will-change:transform;
  transform:translate3d(0,var(--motion-parallax,0px),0) scale(1.06);
  transform-origin:center center;
}

@media (min-width:1051px) and (prefers-reduced-motion:no-preference) {
  /* A short hero scroll chapter. The visual stays pinned; copy can leave naturally so it never clips under the header. */
  .hero {
    min-height:132vh !important;
    align-items:start !important;
    position:relative;
    overflow:visible !important;
  }
  .hero-copy {
    position:relative !important;
    top:auto !important;
    height:auto !important;
    max-height:none !important;
    min-height:calc(100vh - 150px);
    align-self:start !important;
    justify-content:flex-start !important;
    padding-top:clamp(42px,7vh,86px) !important;
    z-index:1;
    transform:translate3d(0,var(--hero-copy-y,0px),0) scale(var(--hero-copy-scale,1));
    transform-origin:left top;
    opacity:var(--hero-copy-opacity,1);
    transition:opacity .08s linear;
    will-change:transform,opacity;
  }
  .hero h1 {
    font-size:clamp(64px,7.15vw,118px) !important;
    line-height:.9 !important;
  }
  .hero-motion {
    position:sticky;
    top:104px;
    height:calc(100vh - 140px);
    max-height:860px;
    z-index:3;
    min-height:0 !important;
    transform:translate3d(var(--hero-x,0px),0,0) scale(var(--hero-scale,1));
    transform-origin:right center;
    border-radius:var(--hero-radius,0px);
    will-change:transform,border-radius;
  }
  .hero-motion video {
    transform:translate3d(var(--hero-video-x,0px),var(--hero-video-y,0px),0) scale(var(--hero-video-scale,1.04)) !important;
    will-change:transform;
  }
  .hero-motion-label,
  .hero-motion-index,
  .hero-motion-meta,
  .hero-motion-mark {
    transform:translate3d(0,var(--hero-ui-y,0px),0);
    opacity:var(--hero-ui-opacity,1);
    will-change:transform,opacity;
  }
}

/* Give big headings a little more editorial tension. */
.section-intro h2,
.motion-feature-copy h2,
.approach h2,
.motion-close-copy h2 { text-wrap:balance; }
.project-copy h3 { text-wrap:balance; }

@media(max-width:1050px) {
  .site-header::after { height:1px; }
  .live-project-art { transform:none !important; }
  .live-project-art::before,
  .live-project-art::after { display:none; }
  .live-project-art .live-project-shot { transform:none !important; }
}

@media(prefers-reduced-motion:reduce) {
  .site-header::after { display:none; }
  .live-project-art,
  .live-project-art .live-project-shot,
  .motion-feature-media video,
  .motion-close > video { transform:none !important; transition:none !important; }
  .live-project-art::before,
  .live-project-art::after { display:none !important; }
}