/* ParsMazi cinematic motion system */
:root{
  --motion-ease:cubic-bezier(.16,.84,.24,1);
  --motion-spring:cubic-bezier(.18,1.25,.34,1);
  --motion-velocity:0;
  --motion-direction:1;
}

.motion-smear{
  position:fixed;z-index:9997;inset:-12vh -8vw;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(180deg,transparent 0 7px,#a999ff08 8px,#55b9ff05 9px,transparent 11px 18px),
    linear-gradient(180deg,transparent 8%,#a68dff09 47%,#55b9ff08 55%,transparent 92%);
  mix-blend-mode:screen;
  transform:translate3d(0,calc(var(--motion-direction) * -8px),0) scaleY(1.025);
  filter:none;
  transition:opacity .18s ease;
  will-change:opacity,transform;
}
body.motion-scroll-active .motion-smear{opacity:calc(var(--motion-velocity) * .16)}

/* First-visit video opening: masked reveal, subtle push-in and clean hand-off. */
#parsmazi-intro.intro-video-mode{
  background:
    radial-gradient(ellipse 48% 43% at 50% 50%,#795dff32,transparent 72%),
    radial-gradient(ellipse 38% 35% at 31% 63%,#ff66851c,transparent 74%),
    radial-gradient(ellipse 40% 38% at 76% 37%,#55b9ff1b,transparent 74%),
    linear-gradient(135deg,#070817,#050812 52%,#07101a)!important;
}
#parsmazi-intro.intro-video-mode .intro-video-frame{
  position:relative;
  border:1px solid #b8c7ff20!important;
  border-radius:24px!important;
  clip-path:none;
  background:#020307!important;
  box-shadow:0 28px 90px #000c,0 0 70px #765dff24!important;
  animation:motionIntroFrame .42s var(--motion-ease) forwards!important;
}
#parsmazi-intro.intro-video-mode .intro-video-frame::before{
  content:"";position:absolute;z-index:-1;inset:-9% -7%;pointer-events:none;border-radius:34px;
  background:conic-gradient(from 35deg,#55b9ff99,#9b86ffaa,#ff66858f,#7fe28f75,#55b9ff99);
  filter:blur(54px);opacity:.52;transform:scale(.94);
}
#parsmazi-intro.intro-video-mode .intro-video-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(110deg,transparent 36%,#ffffff18 49%,transparent 62%);
  transform:translateX(-130%);animation:motionIntroScan .78s var(--motion-ease) .22s both;
}
#parsmazi-intro.intro-video-mode .intro-opening-video{
  background:transparent!important;
  mix-blend-mode:screen;
  border-radius:22px!important;
  transform:scale(1.018);filter:contrast(1.16) brightness(1.09) saturate(1.12);
  animation:motionIntroVideo .55s var(--motion-ease) forwards;
}
#parsmazi-intro.intro-video-mode .intro-skip{
  left:50%!important;right:auto!important;bottom:clamp(24px,5vh,48px)!important;
  min-width:116px!important;min-height:46px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:12px 25px!important;
  transform:translateX(-50%)!important;
  border:1px solid #ae9cff55!important;border-radius:999px!important;
  color:#f5f3ff!important;
  background:linear-gradient(135deg,#16142ad9,#0a1020e8)!important;
  box-shadow:0 16px 46px #0008,0 0 30px #765dff24,inset 0 1px #ffffff12!important;
  backdrop-filter:none!important;
  font:800 11px/1 "Space Grotesk",sans-serif!important;
  letter-spacing:2.2px!important;
}
#parsmazi-intro.intro-video-mode .intro-skip:hover{
  border-color:#80c8ff8c!important;
  background:linear-gradient(135deg,#765dff,#376fbd)!important;
  box-shadow:0 18px 52px #0009,0 0 38px #765dff44!important;
  transform:translateX(-50%) translateY(-3px)!important;
}
#parsmazi-intro.intro-video-mode.intro-hide .intro-video-frame{
  transform:scale(1.035);filter:blur(12px);opacity:0;transition:.46s var(--motion-ease)!important;
}
@keyframes motionIntroFrame{0%{opacity:0;transform:scale(.975)}100%{opacity:1;transform:none}}
@keyframes motionIntroVideo{to{transform:none;filter:contrast(1.2) brightness(1.08) saturate(1.12)}}
@keyframes motionIntroScan{to{transform:translateX(135%)}}
@supports not (mix-blend-mode:screen){
  #parsmazi-intro.intro-video-mode,
  #parsmazi-intro.intro-video-mode .intro-video-frame,
  #parsmazi-intro.intro-video-mode .intro-opening-video{background:#000!important}
}

html.motion-enabled .motion-reveal{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  filter:blur(9px) saturate(.82);
  transition:
    opacity .72s var(--motion-ease) var(--motion-delay,0ms),
    transform .86s var(--motion-ease) var(--motion-delay,0ms),
    filter .7s ease var(--motion-delay,0ms);
  will-change:opacity,transform,filter;
}
html.motion-enabled .motion-reveal.motion-visible{
  opacity:1;
  transform:none;
  filter:none;
}
html.motion-enabled .motion-reveal.motion-complete{will-change:auto}

/* The first viewport lands like a clean edit rather than a generic fade. */
body.motion-page-enter .hero .hero-inner{
  animation:motionHeroLand 1.05s var(--motion-ease) both;
}
body.motion-page-enter .hero .kicker{animation:motionHeroChip .68s var(--motion-ease) .12s both!important}
body.motion-page-enter .hero h1>span:first-child{animation:motionTitleLeft .88s var(--motion-ease) .1s both}
body.motion-page-enter .hero h1>span:last-child{animation:motionTitleRight .88s var(--motion-ease) .16s both}
body.motion-page-enter .hero-timeline{animation:motionTimeline 1.05s var(--motion-ease) .34s both}
body.motion-page-enter .plugin-guide-card{animation:motionGuideIn .72s var(--motion-ease) .48s both}

@keyframes motionHeroLand{
  0%{opacity:0;transform:translate3d(0,42px,0) scale(.965);filter:blur(16px) saturate(.65)}
  58%{opacity:1;filter:blur(1px) saturate(1.08)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes motionHeroChip{from{opacity:0;transform:translateY(-14px) scale(.9);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes motionTitleLeft{from{opacity:0;transform:translate3d(-46px,12px,0);filter:blur(11px)}to{opacity:1;transform:none;filter:none}}
@keyframes motionTitleRight{from{opacity:0;transform:translate3d(46px,12px,0);filter:blur(11px)}to{opacity:1;transform:none;filter:none}}
@keyframes motionTimeline{from{opacity:0;transform:scaleX(.15);filter:blur(6px)}to{opacity:1;transform:scaleX(1);filter:none}}
@keyframes motionGuideIn{from{opacity:0;transform:translateY(22px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

.hero-timeline::before{background-size:220% 100%!important;animation:motionGradientRail 4.8s linear infinite}
@keyframes motionGradientRail{to{background-position:220% 0}}
.hero .orbit{animation:motionFloat 5.8s ease-in-out infinite alternate!important}
.hero .o2{animation-delay:-1.9s!important}.hero .o3{animation-delay:-3.4s!important}
@keyframes motionFloat{from{translate:0 -4px;rotate:-2deg}to{translate:0 7px;rotate:3deg}}

/* Category cards react to the pointer with restrained perspective. */
html.motion-enabled .category-card.motion-tilt{
  transform:perspective(900px) translate3d(0,-5px,0) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) scale(1.012)!important;
  border-color:color-mix(in srgb,var(--hub-a) 68%,transparent)!important;
  box-shadow:0 30px 78px #000a,0 0 38px color-mix(in srgb,var(--hub-a) 18%,transparent)!important;
  transition:transform .16s ease-out,border-color .25s ease,box-shadow .25s ease!important;
}
.category-card .category-media img,.category-card .category-media video{
  transform:scale(1.035) translate3d(calc(var(--media-x,0) * 1px),calc(var(--media-y,0) * 1px),0);
  transition:transform .55s var(--motion-ease),opacity .35s ease!important;
}
.category-card.motion-tilt .category-media img,.category-card.motion-tilt .category-media video{
  transform:scale(1.09) translate3d(calc(var(--media-x,0) * 1px),calc(var(--media-y,0) * 1px),0)!important;
}

.motion-magnetic{translate:var(--magnet-x,0) var(--magnet-y,0);transition:translate .2s var(--motion-ease),transform .23s ease,filter .23s ease!important}

/* A light sweep communicates speed without blurring text. */
.category-card::after,.plugin-guide-card::after,.about-pro-profile::after{
  content:"";position:absolute;z-index:5;inset:-35% auto -35% -42%;width:28%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#ffffff13,transparent);transform:skewX(-17deg);opacity:0;
}
.about-pro-profile{position:relative;overflow:hidden}
.category-card:hover::after,.plugin-guide-card:hover::after,.about-pro-profile:hover::after{
  opacity:1;animation:motionSweep .82s var(--motion-ease) both;
}
@keyframes motionSweep{from{left:-42%}to{left:125%}}

body.motion-scroll-active .bg{transition-duration:.06s!important}
body.motion-scroll-active .grid-bg{opacity:calc(.2 - var(--motion-velocity) * .07)!important}
body.motion-scroll-active .hero .orbit{filter:blur(calc(var(--motion-velocity) * .65px))}
body.motion-scroll-active .category-hub,
body.motion-scroll-active .pack-section.category-active{
  transform:translate3d(0,calc(var(--motion-direction) * -1px),0);
}

body.motion-category-switch .pack-section.category-active>.section-head{
  animation:motionSectionHead .65s var(--motion-ease) both;
}
body.motion-category-switch .category-back{animation:motionBackIn .58s var(--motion-spring) .1s both}
@keyframes motionSectionHead{from{opacity:0;transform:translate3d(0,-22px,0);filter:blur(9px)}to{opacity:1;transform:none;filter:none}}
@keyframes motionBackIn{from{opacity:0;transform:translateX(-18px) scale(.92)}to{opacity:1;transform:none}}

.effect-preview-modal.open .effect-modal-panel{animation:motionModalLand .48s var(--motion-spring) both!important}
.effect-preview-modal.open .effect-modal-stage{animation:motionModalMedia .62s var(--motion-ease) .06s both}
@keyframes motionModalLand{from{opacity:0;transform:translateY(25px) scale(.94);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes motionModalMedia{from{opacity:0;transform:scale(1.035);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

@media(max-width:768px){
  .motion-smear{display:none!important}
  html.motion-enabled .motion-reveal{transform:translate3d(0,16px,0);filter:none;transition-duration:.42s,.48s,.01s}
  .hero .orbit{animation:none!important}
  .hero-timeline::before{animation:none!important}
  .category-card::after,.plugin-guide-card::after,.about-pro-profile::after{display:none!important}
  body.motion-page-enter .hero .hero-inner{animation-duration:.62s}
  body.motion-page-enter .hero h1>span:first-child,
  body.motion-page-enter .hero h1>span:last-child{animation-duration:.55s}
}

@media(prefers-reduced-motion:reduce){
  .motion-smear{display:none!important}
  html.motion-enabled .motion-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  body.motion-page-enter *{animation:none!important}
  .motion-magnetic{translate:0 0!important}
}