/* =========================================================
   TARUNA MAKALA — BINTANG BANGSA STYLE SCROLL MOTION
   Native CSS + IntersectionObserver. No external library.
   ========================================================= */

html{
  scroll-behavior:smooth;
}

body{
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-distance:34px;
}

body.motion-enabled{
  overflow-x:hidden;
}

/* Soft scroll-progress indicator */
.scroll-progress{
  position:fixed;
  inset:0 0 auto 0;
  height:3px;
  width:0;
  z-index:9999;
  background:linear-gradient(90deg,var(--red,#8f0b18),#c73646);
  transform-origin:left center;
  pointer-events:none;
  opacity:.95;
}

/* Section reveal: subtle, not dramatic */
.motion-section{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:
    opacity .78s var(--motion-ease),
    transform .9s var(--motion-ease);
  will-change:opacity,transform;
}

.motion-section.is-visible{
  opacity:1;
  transform:none;
}

/* Hero arrives immediately */
.hero.motion-section{
  transform:translate3d(0,18px,0);
}
.hero.motion-section.is-visible{
  transition-duration:.72s;
}

/* Heading/body pieces: staggered entrance */
.motion-child{
  opacity:0;
  transform:translate3d(0,var(--motion-distance),0);
  transition:
    opacity .7s var(--motion-ease),
    transform .82s var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}

.is-visible .motion-child{
  opacity:1;
  transform:none;
}

/* Cards/links get a slightly stronger lift */
.motion-card{
  opacity:0;
  transform:translate3d(0,38px,0) scale(.985);
  transition:
    opacity .68s var(--motion-ease),
    transform .82s var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}

.is-visible .motion-card{
  opacity:1;
  transform:none;
}

/* Horizontal lines / strips wake up from the side */
.motion-slide-left{
  opacity:0;
  transform:translate3d(-30px,0,0);
  transition:opacity .7s var(--motion-ease),transform .82s var(--motion-ease);
}
.is-visible .motion-slide-left{
  opacity:1;
  transform:none;
}

.motion-slide-right{
  opacity:0;
  transform:translate3d(30px,0,0);
  transition:opacity .7s var(--motion-ease),transform .82s var(--motion-ease);
}
.is-visible .motion-slide-right{
  opacity:1;
  transform:none;
}

/* Parallax is driven by JS using --parallax-y */
.motion-parallax{
  transform:translate3d(0,var(--parallax-y,0px),0);
  will-change:transform;
}

/* While section is entering, keep parallax transforms composited */
.motion-section.is-visible .motion-parallax{
  transition:transform .12s linear;
}

/* Gentle float on selected visual elements */
.motion-float{
  animation:tarunaFloat 5.8s ease-in-out infinite;
  will-change:transform;
}
@keyframes tarunaFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-7px,0)}
}

/* Image/media zooms softly as its section enters */
.motion-media{
  overflow:hidden;
}
.motion-media > img,
.motion-media img{
  transform:scale(1.045);
  transition:transform 1.15s var(--motion-ease);
}
.is-visible .motion-media > img,
.is-visible .motion-media img{
  transform:scale(1);
}

/* Section heading accent */
.motion-section .section-heading::after{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s .08s var(--motion-ease);
}
.motion-section.is-visible .section-heading::after{
  transform:scaleX(1);
}

/* Keep interactive hover feeling intact */
.motion-card,
.motion-child,
.motion-slide-left,
.motion-slide-right{
  backface-visibility:hidden;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
  .motion-section,
  .motion-child,
  .motion-card,
  .motion-slide-left,
  .motion-slide-right{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .motion-parallax{transform:none !important}
  .motion-float{animation:none !important}
  .motion-media img{transform:none !important;transition:none !important}
}

@media (max-width:780px){
  body{
    --motion-distance:22px;
  }
  .motion-section{
    transform:translate3d(0,20px,0);
    transition-duration:.68s;
  }
  .motion-card{
    transform:translate3d(0,28px,0) scale(.99);
  }
  .motion-slide-left,
  .motion-slide-right{
    transform:translate3d(0,18px,0);
  }
  .motion-float{
    animation-duration:6.5s;
  }
}

@media (max-width:520px){
  .scroll-progress{height:2px}
  .motion-section{
    transform:translate3d(0,16px,0);
  }
}