/* =========================================================
   CV. GENERAL INOVASI ASIA
   Animation & Parallax Stylesheet
   ========================================================= */


/* =========================================================
   01. ANIMATION TOKENS
   ========================================================= */

:root {
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 300ms;
  --duration-base: 600ms;
  --duration-slow: 900ms;
  --duration-extra-slow: 1200ms;
}


/* =========================================================
   02. BASE REVEAL
   ========================================================= */

[data-reveal] {
  opacity: 0;

  transition:
    opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth),
    filter var(--duration-slow) var(--ease-smooth);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}


/* =========================================================
   03. REVEAL DIRECTIONS
   ========================================================= */

[data-reveal="fade"] {
  opacity: 0;
}

[data-reveal="fade-up"] {
  transform: translate3d(0, 44px, 0);
}

[data-reveal="fade-down"] {
  transform: translate3d(0, -44px, 0);
}

[data-reveal="fade-left"] {
  transform: translate3d(44px, 0, 0);
}

[data-reveal="fade-right"] {
  transform: translate3d(-44px, 0, 0);
}

[data-reveal="zoom-in"] {
  transform: scale(0.94);
}

[data-reveal="zoom-out"] {
  transform: scale(1.06);
}

[data-reveal="blur-up"] {
  filter: blur(12px);
  transform: translate3d(0, 30px, 0);
}


/* =========================================================
   04. REVEAL DELAYS
   ========================================================= */

[data-delay="100"] {
  transition-delay: 100ms;
}

[data-delay="200"] {
  transition-delay: 200ms;
}

[data-delay="300"] {
  transition-delay: 300ms;
}

[data-delay="400"] {
  transition-delay: 400ms;
}

[data-delay="500"] {
  transition-delay: 500ms;
}

[data-delay="600"] {
  transition-delay: 600ms;
}

[data-delay="700"] {
  transition-delay: 700ms;
}

[data-delay="800"] {
  transition-delay: 800ms;
}


/* =========================================================
   05. STAGGER CHILDREN
   ========================================================= */

[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 34px, 0);

  transition:
    opacity var(--duration-slow) var(--ease-smooth),
    transform var(--duration-slow) var(--ease-smooth);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-stagger].is-visible > *:nth-child(1) {
  transition-delay: 0ms;
}

[data-stagger].is-visible > *:nth-child(2) {
  transition-delay: 90ms;
}

[data-stagger].is-visible > *:nth-child(3) {
  transition-delay: 180ms;
}

[data-stagger].is-visible > *:nth-child(4) {
  transition-delay: 270ms;
}

[data-stagger].is-visible > *:nth-child(5) {
  transition-delay: 360ms;
}

[data-stagger].is-visible > *:nth-child(6) {
  transition-delay: 450ms;
}

[data-stagger].is-visible > *:nth-child(7) {
  transition-delay: 540ms;
}

[data-stagger].is-visible > *:nth-child(8) {
  transition-delay: 630ms;
}


/* =========================================================
   06. TEXT REVEAL
   ========================================================= */

.text-reveal {
  display: block;
  overflow: hidden;
}

.text-reveal__inner {
  display: block;

  opacity: 0;
  transform: translate3d(0, 115%, 0);

  transition:
    opacity var(--duration-slow) var(--ease-expo),
    transform var(--duration-extra-slow) var(--ease-expo);
}

.text-reveal.is-visible .text-reveal__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.text-reveal--delay-1 .text-reveal__inner {
  transition-delay: 100ms;
}

.text-reveal--delay-2 .text-reveal__inner {
  transition-delay: 200ms;
}

.text-reveal--delay-3 .text-reveal__inner {
  transition-delay: 300ms;
}


/* =========================================================
   07. WORD REVEAL
   ========================================================= */

.word-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.24em;
}

.word-reveal__word {
  display: inline-block;
  overflow: hidden;
}

.word-reveal__word-inner {
  display: inline-block;

  opacity: 0;
  transform: translate3d(0, 110%, 0);

  transition:
    opacity var(--duration-slow) var(--ease-expo),
    transform var(--duration-extra-slow) var(--ease-expo);
}

.word-reveal.is-visible .word-reveal__word-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   08. IMAGE REVEAL
   ========================================================= */

.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal::before {
  content: "";

  position: absolute;
  z-index: 3;
  inset: 0;

  background-color: var(--color-orange);

  transform: scaleX(1);
  transform-origin: right center;

  transition:
    transform var(--duration-extra-slow) var(--ease-expo);
}

.image-reveal::after {
  content: "";

  position: absolute;
  z-index: 2;
  inset: 0;

  background-color: var(--color-carbon);

  transform: scaleX(1);
  transform-origin: right center;

  transition:
    transform var(--duration-extra-slow) var(--ease-expo);
  transition-delay: 120ms;
}

.image-reveal img {
  opacity: 0;
  transform: scale(1.08);

  transition:
    opacity var(--duration-slow) ease,
    transform 1.4s var(--ease-smooth);

  transition-delay: 220ms;
}

.image-reveal.is-visible::before,
.image-reveal.is-visible::after {
  transform: scaleX(0);
}

.image-reveal.is-visible img {
  opacity: 1;
  transform: scale(1);
}


/* =========================================================
   09. IMAGE REVEAL VERTICAL
   ========================================================= */

.image-reveal--vertical::before,
.image-reveal--vertical::after {
  transform: scaleY(1);
  transform-origin: center bottom;
}

.image-reveal--vertical.is-visible::before,
.image-reveal--vertical.is-visible::after {
  transform: scaleY(0);
}


/* =========================================================
   10. CLIP REVEAL
   ========================================================= */

.clip-reveal {
  clip-path: inset(0 100% 0 0);

  transition:
    clip-path var(--duration-extra-slow) var(--ease-expo);
}

.clip-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

.clip-reveal--bottom {
  clip-path: inset(100% 0 0 0);
}

.clip-reveal--bottom.is-visible {
  clip-path: inset(0 0 0 0);
}

.clip-reveal--center {
  clip-path: inset(0 50% 0 50%);
}

.clip-reveal--center.is-visible {
  clip-path: inset(0 0 0 0);
}


/* =========================================================
   11. PARALLAX BASE
   ========================================================= */

[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
}

[data-parallax="image"] {
  position: relative;
  overflow: hidden;
}

[data-parallax="image"] img {
  width: 100%;
  height: calc(100% + 100px);
  max-width: none;

  object-fit: cover;

  transform:
    translate3d(
      0,
      calc(var(--parallax-y, 0px) - 50px),
      0
    )
    scale(1.04);

  will-change: transform;
}

[data-parallax="background"] {
  background-position:
    center
    calc(50% + var(--parallax-y, 0px));

  background-repeat: no-repeat;
  background-size: cover;

  will-change: background-position;
}

[data-parallax="horizontal"] {
  transform:
    translate3d(
      var(--parallax-x, 0),
      0,
      0
    );

  will-change: transform;
}


/* =========================================================
   12. PARALLAX FLOATING OBJECTS
   ========================================================= */

.parallax-object {
  position: absolute;

  pointer-events: none;
  user-select: none;

  will-change: transform;
}

.parallax-object--slow {
  transform:
    translate3d(
      0,
      calc(var(--scroll-offset, 0) * 0.06),
      0
    );
}

.parallax-object--medium {
  transform:
    translate3d(
      0,
      calc(var(--scroll-offset, 0) * 0.1),
      0
    );
}

.parallax-object--fast {
  transform:
    translate3d(
      0,
      calc(var(--scroll-offset, 0) * 0.16),
      0
    );
}


/* =========================================================
   13. FLOATING TEXTURE
   ========================================================= */

.floating-texture {
  animation:
    texture-float 9s ease-in-out infinite;
}

.floating-texture--reverse {
  animation-direction: reverse;
}

.floating-texture--slow {
  animation-duration: 14s;
}

@keyframes texture-float {
  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg);
  }

  50% {
    transform:
      translate3d(0, -18px, 0)
      rotate(1.5deg);
  }
}


/* =========================================================
   14. ROTATING ACCENT
   ========================================================= */

.rotating-accent {
  animation: rotate-accent 18s linear infinite;
  transform-origin: center;
}

@keyframes rotate-accent {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   15. PULSE ACCENT
   ========================================================= */

.pulse-accent {
  position: relative;
}

.pulse-accent::before {
  content: "";

  position: absolute;
  inset: -5px;

  border: 1px solid var(--color-orange);
  border-radius: inherit;

  opacity: 0;

  animation: pulse-ring 2.4s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    opacity: 0.55;
    transform: scale(0.94);
  }

  70% {
    opacity: 0;
    transform: scale(1.22);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}


/* =========================================================
   16. MARQUEE
   ========================================================= */

.marquee {
  position: relative;
  overflow: hidden;

  width: 100%;
}

.marquee::before,
.marquee::after {
  content: "";

  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;

  width: clamp(40px, 8vw, 140px);

  pointer-events: none;
}

.marquee::before {
  left: 0;

  background:
    linear-gradient(
      90deg,
      var(--color-warm-white),
      transparent
    );
}

.marquee::after {
  right: 0;

  background:
    linear-gradient(
      270deg,
      var(--color-warm-white),
      transparent
    );
}

.section--dark .marquee::before,
.section--graphite .marquee::before {
  background:
    linear-gradient(
      90deg,
      var(--color-carbon),
      transparent
    );
}

.section--dark .marquee::after,
.section--graphite .marquee::after {
  background:
    linear-gradient(
      270deg,
      var(--color-carbon),
      transparent
    );
}

.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;

  animation:
    marquee-scroll
    var(--marquee-duration, 30s)
    linear
    infinite;

  will-change: transform;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}


/* =========================================================
   17. CLIENT MARQUEE
   ========================================================= */

.client-marquee__item {
  display: grid;
  width: 190px;
  height: 100px;
  flex-shrink: 0;
  place-items: center;

  margin-inline: 10px;
  padding: 20px 28px;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  background-color: var(--color-white);
}

.client-marquee__item img {
  width: auto;
  max-width: 120px;
  max-height: 48px;

  object-fit: contain;

  filter: grayscale(1);
  opacity: 0.62;

  transition:
    filter var(--transition-base),
    opacity var(--transition-base),
    transform var(--transition-base);
}

.client-marquee__item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}


/* =========================================================
   18. HERO BACKGROUND SCALE
   ========================================================= */

.hero-background-scale {
  animation:
    hero-background-scale
    14s
    ease-out
    forwards;
}

@keyframes hero-background-scale {
  from {
    transform: scale(1.1);
  }

  to {
    transform: scale(1);
  }
}


/* =========================================================
   19. HERO INTRO
   ========================================================= */

.hero-intro {
  opacity: 0;
  transform: translate3d(0, 40px, 0);

  animation:
    hero-intro
    900ms
    var(--ease-expo)
    forwards;
}

.hero-intro--delay-1 {
  animation-delay: 120ms;
}

.hero-intro--delay-2 {
  animation-delay: 240ms;
}

.hero-intro--delay-3 {
  animation-delay: 360ms;
}

.hero-intro--delay-4 {
  animation-delay: 480ms;
}

@keyframes hero-intro {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* =========================================================
   20. HERO LINE
   ========================================================= */

.hero-line {
  transform: scaleX(0);
  transform-origin: left center;

  animation:
    hero-line-grow
    900ms
    var(--ease-expo)
    forwards;

  animation-delay: 560ms;
}

@keyframes hero-line-grow {
  to {
    transform: scaleX(1);
  }
}


/* =========================================================
   21. HOVER LIFT
   ========================================================= */

.hover-lift {
  transition:
    transform var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
}

.hover-lift:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: var(--shadow-md);
}


/* =========================================================
   22. HOVER IMAGE ZOOM
   ========================================================= */

.hover-image-zoom {
  overflow: hidden;
}

.hover-image-zoom img {
  transition:
    transform 900ms var(--ease-smooth),
    filter 900ms var(--ease-smooth);
}

.hover-image-zoom:hover img {
  transform: scale(1.06);
}


/* =========================================================
   23. HOVER ARROW
   ========================================================= */

.hover-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hover-arrow__icon {
  transition:
    transform var(--duration-fast) var(--ease-smooth);
}

.hover-arrow:hover .hover-arrow__icon {
  transform: translate3d(5px, -3px, 0);
}


/* =========================================================
   24. BUTTON SHINE
   ========================================================= */

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::before {
  content: "";

  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -80%;

  width: 40%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.34),
      transparent
    );

  transform: skewX(-20deg);

  transition:
    left 700ms var(--ease-smooth);
}

.btn-shine:hover::before {
  left: 130%;
}


/* =========================================================
   25. UNDERLINE DRAW
   ========================================================= */

.link-draw {
  position: relative;
}

.link-draw::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;

  height: 1px;

  background-color: currentColor;

  transform: scaleX(0);
  transform-origin: right center;

  transition:
    transform var(--duration-fast) var(--ease-smooth);
}

.link-draw:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}


/* =========================================================
   26. CARD BORDER DRAW
   ========================================================= */

.border-draw {
  position: relative;
  overflow: hidden;
}

.border-draw::before {
  content: "";

  position: absolute;
  z-index: 2;
  inset: 0;

  border: 1px solid var(--color-orange);
  border-radius: inherit;

  opacity: 0;
  transform: scale(0.98);

  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-smooth);

  pointer-events: none;
}

.border-draw:hover::before {
  opacity: 1;
  transform: scale(1);
}


/* =========================================================
   27. COUNTER
   ========================================================= */

[data-counter] {
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   28. LOADING FADE
   ========================================================= */

.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.is-loaded {
  animation:
    loaded-fade
    500ms
    ease
    both;
}

@keyframes loaded-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* =========================================================
   29. PAGE TRANSITION
   ========================================================= */

.page-transition {
  position: fixed;
  z-index: 9999;
  inset: 0;

  background-color: var(--color-carbon);

  transform: scaleY(0);
  transform-origin: bottom center;

  pointer-events: none;
}

.page-transition.is-entering {
  animation:
    page-cover
    650ms
    var(--ease-expo)
    forwards;
}

.page-transition.is-leaving {
  transform: scaleY(1);
  transform-origin: top center;

  animation:
    page-uncover
    650ms
    var(--ease-expo)
    forwards;
}

@keyframes page-cover {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes page-uncover {
  from {
    transform: scaleY(1);
  }

  to {
    transform: scaleY(0);
  }
}


/* =========================================================
   30. MOBILE & TOUCH OPTIMIZATION
   ========================================================= */

@media (hover: none) {
  .marquee:hover .marquee__track {
    animation-play-state: running;
  }

  .hover-lift:hover {
    transform: none;
    box-shadow: none;
  }

  .hover-image-zoom:hover img,
  .service-card:hover .service-card__media img,
  .portfolio-card:hover .portfolio-card__media img {
    transform: none;
  }
}


/* =========================================================
   31. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > *,
  .text-reveal__inner,
  .word-reveal__word-inner,
  .image-reveal img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .image-reveal::before,
  .image-reveal::after {
    display: none !important;
  }

  [data-parallax],
  [data-parallax] img,
  .parallax-object {
    transform: none !important;
  }

  .marquee__track,
  .floating-texture,
  .rotating-accent,
  .pulse-accent::before,
  .hero-background-scale,
  .hero-intro,
  .hero-line,
  .skeleton::after {
    animation: none !important;
  }

  .hero-intro {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-line {
    transform: scaleX(1) !important;
  }
}