/* ==========================================================================
   VideoCutStudio motion layer
   Editing-timeline animations: cut page transitions, a working editor in the
   hero, logo slip, scroll scrubber, timecode counters, step playhead and
   portfolio preview hovers. Transform/opacity only. Loaded by
   novamira-sandbox/vcs-motion.php when motion is switched on.
   ========================================================================== */

:root{--vcs-ease:cubic-bezier(.2,.8,.2,1);--vcs-grad:linear-gradient(90deg,#7C3AED,#EC4899)}

/* ---------- Page change: a diagonal cut, like the logo ---------- */
@view-transition{navigation:auto}
.site-header{view-transition-name:vcs-header}
::view-transition-group(vcs-header){animation:none}
::view-transition-old(root){animation:vcs-vt-out .5s cubic-bezier(.7,0,.25,1) both}
::view-transition-new(root){animation:vcs-vt-in .5s cubic-bezier(.7,0,.25,1) both}
@keyframes vcs-vt-in{
  from{clip-path:polygon(118% 0,140% 0,140% 100%,100% 100%)}
  to{clip-path:polygon(0 0,140% 0,140% 100%,-18% 100%)}
}
@keyframes vcs-vt-out{to{transform:translateX(-3%);opacity:.5}}

/* ---------- Logo: the tip slips up along the cut ---------- */
.brand__logo .vcs-slip-tip{transform-box:view-box}
.vcs-logo-intro .brand__logo .vcs-slip-tip{animation:vcs-slip .8s var(--vcs-ease) .15s both}
.brand:hover .brand__logo .vcs-slip-tip{animation:vcs-slip-h .6s var(--vcs-ease) both}
@keyframes vcs-slip{from{transform:translate(-1.6px,6.4px)}}
@keyframes vcs-slip-h{40%{transform:translate(-1.2px,4.8px)}}

/* ---------- Hero: the editor plays ---------- */
.vcs-motion .hero-visual .timeline{position:relative}
.vcs-motion .hero-visual .track i{transform-origin:left center;animation:vcs-trim .9s var(--vcs-ease) both}
.vcs-motion .hero-visual .track--v i{animation-delay:.25s}
.vcs-motion .hero-visual .track--a i{animation-delay:.4s}
.vcs-motion .hero-visual .track--t i{animation-delay:.55s}
@keyframes vcs-trim{from{transform:scaleX(0)}}

.vcs-playhead{position:absolute;top:6px;bottom:6px;left:14px;right:14px;pointer-events:none}
.vcs-playhead__line{
  position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;border-radius:2px;
  background:#EC4899;box-shadow:0 0 0 1px rgba(255,255,255,.6);will-change:transform;
}
.vcs-playhead__line::before{
  content:"";position:absolute;top:-5px;left:50%;margin-left:-6px;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #EC4899;
}
.vcs-tc{
  position:absolute;left:12px;bottom:10px;z-index:1;padding:.22rem .55rem;border-radius:6px;
  background:rgba(22,23,43,.6);color:#fff;font-size:.72rem;font-weight:600;line-height:1.2;
  font-family:var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:.03em;
}

/* Guided zoom: the frame Camtasia editors draw around the action */
.vcs-zoom{
  position:absolute;inset:0;border:4px solid rgba(255,255,255,.85);border-radius:14px;
  pointer-events:none;opacity:0;animation:vcs-zoom 8s var(--vcs-ease) 1.2s infinite;
}
@keyframes vcs-zoom{
  0%,12%{opacity:0;transform:none}
  24%,52%{opacity:1;transform:translate(-15%,-12%) scale(.43)}
  64%,100%{opacity:0;transform:none}
}
.vcs-motion .hero-visual .play-btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.75);
  animation:vcs-ring 2.4s ease-out infinite;
}
@keyframes vcs-ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.75);opacity:0}}

/* ---------- Scroll scrubber ---------- */
.vcs-scrub{position:fixed;left:0;right:0;top:0;height:3px;z-index:1000;pointer-events:none;transition:opacity .3s ease}
.vcs-scrub__fill{position:absolute;inset:0;background:var(--vcs-grad);transform-origin:left center;transform:scaleX(0)}
.vcs-scrub__head{
  position:absolute;top:-3px;left:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:#fff;border:2px solid #EC4899;box-sizing:border-box;
}
body.admin-bar .vcs-scrub{top:32px}
@media(max-width:782px){body.admin-bar .vcs-scrub{top:46px}}

/* ---------- Timecode counters ---------- */
.vcs-motion .stat__num{font-variant-numeric:tabular-nums}

/* ---------- Steps: a playhead walks the process ---------- */
.vcs-steps-track{display:none}
@media(min-width:1001px){
  .vcs-steps-track{display:block;position:relative;height:4px;border-radius:4px;background:var(--brand-100);margin:0 0 30px}
  .section--dark .vcs-steps-track{background:rgba(196,181,253,.18)}
  .vcs-steps-fill{position:absolute;inset:0;border-radius:4px;background:var(--vcs-grad);transform-origin:left center;transform:scaleX(0)}
  .vcs-steps-head{
    position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
    background:#fff;box-shadow:0 0 0 4px rgba(236,72,153,.35);
  }
}
.vcs-motion .step::after{
  content:"";position:absolute;top:-1px;left:22px;right:22px;height:3px;border-radius:0 0 3px 3px;
  background:var(--vcs-grad);transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--vcs-ease);
}
.vcs-motion .step::before{transition:color .5s ease}
.js .vcs-motion .step.reveal{transition:opacity .6s ease,transform .6s ease,border-color .5s ease}
.vcs-motion .step.vcs-on::after{transform:scaleX(1)}
.vcs-motion .step.vcs-on{border-color:rgba(124,58,237,.35)}
.vcs-motion .step.vcs-on::before{color:var(--brand-600)}
.vcs-motion .section--dark .step.vcs-on{border-color:rgba(196,181,253,.45)}
.vcs-motion .section--dark .step.vcs-on::before{color:#C4B5FD}

/* ---------- Portfolio: hover previews like a clip bin ---------- */
@media(hover:hover){
  .vcs-motion .work__thumb{overflow:hidden}
  .vcs-motion .work__art{transition:transform .6s var(--vcs-ease)}
  .vcs-motion .work:hover .work__art{transform:scale(1.05)}
  .vcs-thumb-play{
    position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;z-index:2;
    background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(22,23,43,.35);
    opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .35s var(--vcs-ease);
  }
  .vcs-thumb-play::after{
    content:"";position:absolute;left:50%;top:50%;margin:-9px 0 0 -5px;
    border-left:15px solid var(--brand-700);border-top:9px solid transparent;border-bottom:9px solid transparent;
  }
  .work:hover .vcs-thumb-play{opacity:1;transform:none}
  .vcs-thumb-scrub{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:2;background:rgba(255,255,255,.2);opacity:0;transition:opacity .2s ease}
  .vcs-thumb-scrub::after{content:"";position:absolute;inset:0;background:var(--vcs-grad);transform:scaleX(0);transform-origin:left center}
  .work:hover .vcs-thumb-scrub{opacity:1}
  .work:hover .vcs-thumb-scrub::after{transform:scaleX(1);transition:transform 2.4s linear}
}
@media(hover:none){.vcs-thumb-play,.vcs-thumb-scrub{display:none}}

/* ---------- Reduced motion: everything still, nothing hidden ---------- */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .vcs-playhead,.vcs-zoom,.vcs-scrub__head,.vcs-steps-head,.vcs-thumb-play,.vcs-thumb-scrub{display:none}
  .vcs-motion .hero-visual .track i,.vcs-motion .hero-visual .play-btn::before,
  .brand__logo .vcs-slip-tip{animation:none!important}
  .vcs-motion .step::after,.vcs-motion .work__art{transition:none}
}