/* Fryk Works — motion system (see .cursor/rules/motion-system.mdc) */

/* headline — line reveal (vertical only) */
[data-anim="headline"] .tx-line{
  display:block;
  overflow:hidden;
  padding-bottom:.06em;
  margin-bottom:-.06em;
}
[data-anim="headline"] .tx-line-inner{
  display:block;
  transform:translate3d(0,0,0);
  transition:transform var(--motion-dur-headline) var(--ease-spring);
  transition-delay:calc(var(--d,0ms) + var(--i,0) * var(--motion-stagger-line));
  will-change:transform;
}

/* text — single block rise (no word stagger) */
.anim-rise{overflow:hidden}
span.anim-rise,
a.anim-rise{display:inline-block;vertical-align:top;max-width:100%}
.anim-rise-inner{
  display:block;
  transform:translate3d(0,0,0);
  transition:transform var(--motion-dur-text) var(--ease-spring);
  transition-delay:var(--d,0ms);
  will-change:transform;
}

/* media — image frames: a bg-matched veil wipes ↑ while the image settles 1.08 → 1.
   Uses a transform veil (not clip-path on the element itself) so the observed
   element keeps a paintable box for the IntersectionObserver. Set --media-veil
   to the surrounding section background. */
[data-anim="media"]{position:relative}
[data-anim="media"]::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:var(--media-veil,var(--bg));
  transform:scaleY(0);
  transform-origin:top center;
  transition:transform var(--motion-dur-media) var(--ease-spring);
  transition-delay:var(--d,0ms);
  pointer-events:none;
}
[data-anim="media"] img,
[data-anim="media"] video{
  transition:transform var(--motion-dur-media) var(--ease-spring);
  transition-delay:var(--d,0ms);
}
html.motion-ready:not(.motion-reduce) [data-anim="media"]:not(.is-inview)::after{
  transform:scaleY(1);
}
html.motion-ready:not(.motion-reduce) [data-anim="media"].is-inview::after{
  transform:scaleY(0);
}
html.motion-ready:not(.motion-reduce) [data-anim="media"]:not(.is-inview) img,
html.motion-ready:not(.motion-reduce) [data-anim="media"]:not(.is-inview) video{
  transform:scale(1.08);
}
html.motion-ready:not(.motion-reduce) [data-anim="media"].is-inview img,
html.motion-ready:not(.motion-reduce) [data-anim="media"].is-inview video{
  transform:scale(1);
}

/* block — cards, button rows, form panels (transform only; content stays visible) */
[data-anim="block"]{
  transform:translate3d(0,0,0);
  transition:transform var(--motion-dur-block) var(--ease-out);
  transition-delay:var(--d,0ms);
}
/* scroll offsets apply only once motion JS has run */
html.motion-ready:not(.motion-reduce) [data-anim="block"]:not(.is-inview){
  transform:translate3d(0,var(--motion-y-block),0);
}
html.motion-ready:not(.motion-reduce) [data-anim="block"].is-inview{
  transform:translate3d(0,0,0);
}
html.motion-ready:not(.motion-reduce) [data-anim="headline"]:not(.is-inview) .tx-line-inner,
html.motion-ready:not(.motion-reduce) [data-anim="text"]:not(.is-inview) .anim-rise-inner{
  transform:translate3d(0,var(--motion-y-enter),0);
}
html.motion-ready:not(.motion-reduce) [data-anim="headline"].is-inview .tx-line-inner,
html.motion-ready:not(.motion-reduce) [data-anim="text"].is-inview .anim-rise-inner{
  transform:translate3d(0,0,0);
}

/* hover lift — text links & card titles */
.anim-hover-lift{
  transition:transform var(--motion-dur-hover) var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){
  .anim-hover-lift:hover,
  .work-card:hover .work-title,
  .ref-cell:hover .ref-logo,
  .svc-card:hover .svc-name,
  .del-card:hover .del-name{transform:translateY(var(--motion-lift))}
}

/* press — all clickables */
.anim-press:active{transform:scale(0.97)}

/* nav link — vertical text swap (nav only) */
.nav-link-text{
  display:block;
  overflow:hidden;
  line-height:1.2;
  height:1.2em;
}
.nav-link-text span{
  display:block;
  transition:transform var(--motion-dur-hover) var(--ease-spring);
}
.nav-link-text span:last-child{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .nav-link:hover .nav-link-text span{transform:translateY(-100%)}
}

/* sec-action — lift + underline grow ↑ */
.sec-action{position:relative;overflow:hidden}
.sec-action::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:var(--ink);
  transform:scaleY(0);
  transform-origin:bottom center;
  transition:transform var(--motion-dur-hover) var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){
  .sec-action:hover::after{transform:scaleY(1)}
}

@media (hover:hover) and (pointer:fine){
  .ref-gallery:hover .ref-gallery-track{animation-play-state:paused}
}

.ref-logo{
  transition:
    opacity var(--motion-dur-hover) var(--ease-out),
    filter var(--motion-dur-hover) var(--ease-out),
    transform var(--motion-dur-hover) var(--ease-spring);
}
@media (hover:hover) and (pointer:fine){
  .ref-cell:hover .ref-logo{opacity:.85;filter:grayscale(0)}
}

.svc-name{
  transition:transform var(--motion-dur-hover) var(--ease-spring);
}

.work-title{transition:transform var(--motion-dur-hover) var(--ease-spring)}

.fcta-h .tx-line-inner{transition-duration:950ms}
.stmt-q .anim-rise-inner{transition-duration:800ms}

/* hero gallery — masked curtain reveal */
@keyframes hero-wipe-in{
  from{clip-path:inset(0 0 0 100%)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes hero-wipe-line{
  0%{
    transform:translate3d(100cqw,0,0);
    opacity:.4;
  }
  85%{opacity:.4}
  100%{
    transform:translate3d(0,0,0);
    opacity:0;
  }
}
@keyframes hero-dot-progress{
  to{transform:scaleX(1)}
}

html:not(.motion-reduce) .hero-slide.is-entering .hero-slide-media{
  animation:hero-wipe-in var(--hero-transition-dur) var(--hero-ease) forwards;
}
html:not(.motion-reduce) .hero-slide.is-entering .hero-slide-wipe-line{
  animation:hero-wipe-line var(--hero-transition-dur) var(--hero-ease) forwards;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim="block"],
  [data-anim="headline"] .tx-line-inner,
  .anim-rise-inner{
    transform:none;
    transition:none;
  }
  [data-anim="media"]::after{
    content:none;
  }
  [data-anim="media"] img,
  [data-anim="media"] video{
    transform:none;
    transition:none;
  }
  .nav-menu,
  .nav-menu-scrim,
  .nav-menu-panel,
  .nav-menu-card,
  .nav-menu-card-media img,
  .nav-menu-card-title,
  .nav-menu-card-arrow,
  .nav-toggle-bar,
  .nav-drawer,
  .nav-link-text span,
  .work-title,
  .svc-name,
  .del-name,
  .scope-title,
  .phase-title,
  .sec-action,
  .sec-action::after,
  .ref-logo,
  .fcta-submit,
  .anim-hover-lift{
    transition:none;
  }
  .hero-slide,
  .hero-slide-img,
  .hero-dot-track,
  .hero-dot-fill{
    transition:none;
    animation:none !important;
  }
  .hero-slide{
    transition:opacity var(--hero-fade-dur) var(--ease-out);
  }
  .hero-slide.is-entering .hero-slide-media,
  .hero-slide-wipe-line{
    animation:none !important;
    clip-path:none;
    transform:none;
  }
  .ref-gallery-track{
    animation:none !important;
    flex-wrap:wrap;
    width:100%;
    justify-content:center;
  }
  .ref-cell[aria-hidden="true"]{display:none}
  .work-thumb img,
  .svc-frame img,
  .btn,
  .nav-cta{
    transition:none;
  }
}