/* BAROOMAN V21.2 MOTION SYSTEM
   Performance-first parallax + scroll choreography.
   No layout thrashing; only transform/opacity/filter are animated. */

:root{
  --motion-orange:#ff8a2a;
  --motion-blue:#46bfff;
  --motion-ease:cubic-bezier(.2,.75,.22,1);
}

html{scroll-behavior:smooth;scroll-padding-top:96px}
body.motion-ready{overflow-x:hidden}

/* Ambient depth that follows scroll through CSS variables set by JS. */
body.motion-ready::before,
body.motion-ready::after{
  content:"";
  position:fixed;
  width:42vw;height:42vw;
  min-width:420px;min-height:420px;
  border-radius:50%;
  pointer-events:none;
  z-index:-2;
  filter:blur(92px);
  opacity:.075;
  will-change:transform;
}
body.motion-ready::before{
  left:-16vw;top:8vh;
  background:radial-gradient(circle,var(--motion-orange),transparent 64%);
  transform:translate3d(0,var(--motion-glow-a,0px),0);
}
body.motion-ready::after{
  right:-17vw;top:35vh;
  background:radial-gradient(circle,var(--motion-blue),transparent 64%);
  transform:translate3d(0,var(--motion-glow-b,0px),0);
}

/* Header glass compacts as soon as scrolling begins. */
.header,.net-topbar,.portal-topbar{
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s var(--motion-ease),backdrop-filter .35s ease!important;
}
body.motion-scrolled .header{
  background:rgba(5,7,10,.78)!important;
  border-color:rgba(255,255,255,.075)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(22px) saturate(1.12)!important;
}
body.motion-scrolled .header .nav{min-height:70px!important}

/* General reveal system. Works beside the legacy .reveal class. */
.motion-reveal{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  filter:blur(7px);
  transition:
    opacity .8s var(--motion-ease),
    transform .9s var(--motion-ease),
    filter .75s ease;
  transition-delay:var(--motion-delay,0ms);
  will-change:transform,opacity,filter;
}
.motion-reveal.motion-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
.motion-reveal.motion-from-left{transform:translate3d(-42px,16px,0) scale(.985)}
.motion-reveal.motion-from-right{transform:translate3d(42px,16px,0) scale(.985)}
.motion-reveal.motion-from-left.motion-visible,
.motion-reveal.motion-from-right.motion-visible{transform:translate3d(0,0,0) scale(1)}

/* Section-heading line grows as it appears. */
.section-heading{position:relative}
.section-heading::after{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:-18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,138,42,.32),rgba(70,191,255,.30),transparent);
  transform:scaleX(var(--motion-line,0));
  transform-origin:center;
  opacity:.72;
  transition:transform 1s var(--motion-ease);
}
.section-heading.motion-visible::after{--motion-line:1}

/* Hero is intentionally excluded from V21.3 motion effects.
   Its image-reveal behavior is owned only by barooman-final.js/css. */

/* Scroll depth for large showcase blocks. */
.motion-depth{
  transform:translate3d(var(--motion-x,0px),var(--motion-y,0px),0) rotateX(var(--motion-rx,0deg)) rotateY(var(--motion-ry,0deg));
  transition:transform .12s linear;
  will-change:transform;
}

/* Project cards: compact 3D lift + inner image scroll parallax. */
.project-card{
  --card-tilt-x:0deg;
  --card-tilt-y:0deg;
  --card-lift:0px;
  transform:perspective(900px) translate3d(0,var(--card-lift),0) rotateX(var(--card-tilt-x)) rotateY(var(--card-tilt-y))!important;
  transform-style:preserve-3d;
  transition:transform .28s var(--motion-ease),border-color .28s ease,box-shadow .28s ease!important;
  will-change:transform;
}
.project-card:hover{
  --card-lift:-8px;
  box-shadow:0 26px 62px rgba(0,0,0,.34)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.project-card .project-media img{
  translate:0 var(--project-image-y,0px);
  scale:1.045;
  transition:translate .12s linear,scale .38s ease!important;
  will-change:translate,scale;
}
.project-card:hover .project-media img{scale:1.075!important}

/* Skills and academy cards get a subtle magnetic depth, not a flashy tilt. */
.skills-grid > *,
.academy-cards > *,
.network-mini-grid > *,
.digital-contact-grid > *{
  transition:transform .32s var(--motion-ease),border-color .3s ease,background .3s ease,box-shadow .3s ease!important;
}
.skills-grid > *:hover,
.academy-cards > *:hover,
.network-mini-grid > *:hover,
.digital-contact-grid > *:hover{
  transform:translate3d(0,-7px,0)!important;
}

/* Lab console depth and moving sheen. */
.lab-feature{position:relative;overflow:hidden}
.lab-feature::before{
  content:"";
  position:absolute;
  inset:-60% -25%;
  background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.035) 50%,transparent 58%);
  transform:translateX(var(--lab-sheen,-35%)) rotate(8deg);
  pointer-events:none;
  will-change:transform;
}
.lab-console{transform:translate3d(0,var(--lab-console-y,0px),36px);will-change:transform}

/* About orbit itself stays animated, whole system receives parallax depth. */
.tech-radar-v191{
  transform:translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0) scale(var(--orbit-scale,1));
  transition:transform .12s linear;
  will-change:transform;
}

/* Digital business card premium depth. */
.digital-card{
  --dc-rx:0deg;--dc-ry:0deg;
  transform:perspective(1100px) rotateX(var(--dc-rx)) rotateY(var(--dc-ry)) translate3d(0,var(--dc-scroll-y,0px),0)!important;
  transform-style:preserve-3d;
  transition:transform .22s var(--motion-ease),box-shadow .3s ease!important;
  will-change:transform;
}
.digital-card:hover{box-shadow:0 36px 90px rgba(0,0,0,.35)!important}
.digital-card-left,.digital-contact-grid{transform:translateZ(22px)}

/* Network / portal pages: lighter scroll choreography. */
body[data-page] .card,
body[data-page] .portal-card,
body[data-page] .hub-card,
body[data-page] .right-widget,
body[data-page] .library-card,
body[data-page] .resume-panel,
body[data-page] .resume-preview{
  transition:transform .35s var(--motion-ease),opacity .6s var(--motion-ease),border-color .3s ease,box-shadow .3s ease!important;
}
body[data-page] .card:hover,
body[data-page] .hub-card:hover,
body[data-page] .library-card:hover{transform:translateY(-4px)}

/* Link underline motion in navigation. */
.nav-links a,.side a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-8px;height:1px;
  background:linear-gradient(90deg,var(--motion-orange),var(--motion-blue));
  transition:left .3s ease,right .3s ease;
}
.nav-links a:hover::after{left:8%;right:8%}

/* Scroll-linked edge glow for sections. */
.section,.network-strip,.contact-section-v19{position:relative}
.section::before,.network-strip::before,.contact-section-v19::before{
  content:"";
  position:absolute;
  width:180px;height:1px;
  top:0;left:50%;transform:translateX(-50%) scaleX(var(--section-glow,0));
  background:linear-gradient(90deg,transparent,var(--motion-blue),var(--motion-orange),transparent);
  opacity:.38;
  transition:transform .8s var(--motion-ease);
}
.motion-section-active::before{--section-glow:1}

/* Reduced motion and mobile protect performance and accessibility. */
@media(max-width:900px), (pointer:coarse){
  body.motion-ready::before,body.motion-ready::after{opacity:.045;filter:blur(72px)}
  .uh-copy,.uh-terminal,.uh-voice{transform:none!important}
  .project-card{--card-tilt-x:0deg!important;--card-tilt-y:0deg!important}
  .digital-card{--dc-rx:0deg!important;--dc-ry:0deg!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.motion-ready::before,body.motion-ready::after{display:none}
  .motion-reveal,.motion-reveal.motion-visible{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .project-card,.project-card .project-media img,.digital-card,.tech-radar-v191,.lab-console{transform:none!important;translate:none!important;scale:none!important;transition:none!important}
  .lab-feature::before,.section-heading::after,.section::before,.network-strip::before,.contact-section-v19::before{display:none!important}
}