/* ==========================================================
   TrueForks — homepage motion
   Loaded on the front page only. Additive: this file never
   changes layout, only how things arrive on screen.

   Easing note: --tf-release pulls slightly past its mark and
   settles, the way a band does when it is let go. It is used
   for the hero only, so the effect stays a signature and not
   a tic.
   ========================================================== */

:root{
  --tf-release:cubic-bezier(.16,1.08,.3,1);
  --tf-quiet:cubic-bezier(.22,.61,.36,1);
  --tf-gold:#c9a96e;
}

/* ── Hero ─────────────────────────────────────────────────── */

/* Slow settle rather than a zoom-out: the frame comes into focus. */
.op-hero .op-hslide img{
  transform:scale(1.055);
  transition:transform 0s;
}
.op-hero .op-hslide.on img{
  animation:tfSettle 9s var(--tf-quiet) forwards;
}
@keyframes tfSettle{
  from{transform:scale(1.055)}
  to{transform:scale(1)}
}

/* Crossfade instead of a hard swap. */
.op-hero .op-hslide{transition:opacity .9s var(--tf-quiet)}

/* Copy arrives in sequence: rule, then title, then body, then CTA. */
.op-hero .op-hslide .op-hbody > *{
  opacity:0;
  transform:translateY(20px);
}
.op-hero .op-hslide.on .op-hbody > *{
  animation:tfRelease .82s var(--tf-release) forwards;
}
.op-hero .op-hslide.on .op-hbody > *:nth-child(1){animation-delay:.10s}
.op-hero .op-hslide.on .op-hbody > *:nth-child(2){animation-delay:.20s}
.op-hero .op-hslide.on .op-hbody > *:nth-child(3){animation-delay:.32s}
.op-hero .op-hslide.on .op-hbody > *:nth-child(4){animation-delay:.44s}
.op-hero .op-hslide.on .op-hbody > *:nth-child(5){animation-delay:.54s}
@keyframes tfRelease{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* The rule draws out rather than fading in. */
.op-hero .op-hslide .op-hrule{transform-origin:left center}
.op-hero .op-hslide.on .op-hrule{animation:tfDraw .7s var(--tf-release) .10s forwards}
@keyframes tfDraw{
  from{opacity:0;transform:scaleX(0)}
  to{opacity:1;transform:scaleX(1)}
}

/* Dots carry the timer. 5s matches the interval in theme.js —
   if that interval changes, change this duration to match. */
.op-hdots button{position:relative;overflow:hidden}
.op-hdots button.on::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--tf-gold);
  transform-origin:left center;
  animation:tfTick 5s linear forwards;
}
@keyframes tfTick{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* ── Trust strip ──────────────────────────────────────────── */

/* Fade the edges so items enter and leave instead of clipping. */
.op-trustbar{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.op-trustbar:hover .op-trustbar__track{animation-play-state:paused}
.op-trustbar__ic{transition:background .25s var(--tf-quiet),color .25s var(--tf-quiet)}
.op-trustbar__item:hover .op-trustbar__ic{background:var(--tf-gold);color:#fff}

/* ── Scroll reveals ───────────────────────────────────────── */

/* Quiet by design. The hero is where the motion budget is spent. */
[data-tf-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--tf-quiet),transform .7s var(--tf-quiet);
  transition-delay:calc(var(--tf-i,0) * 70ms);
}
[data-tf-reveal].tf-in{
  opacity:1;
  transform:none;
}

/* ── Cards ────────────────────────────────────────────────── */

.op-pcard{transition:transform .4s var(--tf-quiet)}
.op-pcard:hover{transform:translateY(-4px)}
.op-pcard img{transition:transform .6s var(--tf-quiet)}
.op-pcard:hover img{transform:scale(1.035)}

.op-cat .op-cat-ph{overflow:hidden}
.op-cat img{transition:transform .7s var(--tf-quiet)}
.op-cat:hover img{transform:scale(1.06)}
.op-cat-lbl{transition:color .25s var(--tf-quiet)}
.op-cat:hover .op-cat-lbl{color:var(--tf-gold)}

.op-pj img{transition:transform .7s var(--tf-quiet)}
.op-pj:hover img{transform:scale(1.04)}

/* ── Category rail ────────────────────────────────────────── */

.op-cats-track{
  scroll-behavior:smooth;
  scrollbar-width:none;
  cursor:grab;
}
.op-cats-track::-webkit-scrollbar{display:none}
.op-cats-track.tf-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
  scroll-snap-type:none;
}
.op-cats-track.tf-dragging a{pointer-events:none}
.op-cat-arr{transition:opacity .25s var(--tf-quiet)}
.op-cat-arr.tf-off{opacity:.25;pointer-events:none}

/* ── Full-bleed block parallax ────────────────────────────── */

.op-fullblock{overflow:hidden}
.op-fullblock img{will-change:transform}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .op-hero .op-hslide img,
  .op-hero .op-hslide.on img,
  .op-hero .op-hslide.on .op-hbody > *,
  .op-hero .op-hslide.on .op-hrule,
  .op-hdots button.on::after{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
  [data-tf-reveal]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .op-pcard,.op-pcard img,.op-cat img,.op-pj img{transition:none !important}
  .op-trustbar__track{animation:none !important}
  .op-fullblock img{transform:none !important}
}