@charset "UTF-8";

/* =========================================================
   MEMBUMI CONSULTING
   Motion, Reveal, and Parallax System
   File: assets/css/animations.css
   ========================================================= */


/* =========================================================
   01. MOTION TOKENS
   ========================================================= */

:root {
  --motion-duration-fast: 280ms;
  --motion-duration-base: 600ms;
  --motion-duration-slow: 900ms;
  --motion-duration-xslow: 1200ms;

  --motion-ease:
    cubic-bezier(0.22, 1, 0.36, 1);

  --motion-ease-soft:
    cubic-bezier(0.16, 1, 0.3, 1);

  --motion-ease-out:
    cubic-bezier(0.33, 1, 0.68, 1);

  --motion-ease-in-out:
    cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-distance-sm: 18px;
  --reveal-distance-md: 36px;
  --reveal-distance-lg: 64px;

  --parallax-y: 0px;
  --parallax-x: 0px;
  --parallax-scale: 1;
  --parallax-rotate: 0deg;
}


/* =========================================================
   02. BASE REVEAL STATE
   JavaScript adds .is-visible
   ========================================================= */

[data-reveal] {
  visibility: hidden;
  opacity: 0;

  will-change: opacity, transform;

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

[data-reveal].is-visible {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}


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

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="up"] {
  transform:
    translate3d(
      0,
      var(--reveal-distance-md),
      0
    );
}

[data-reveal="up-sm"] {
  transform:
    translate3d(
      0,
      var(--reveal-distance-sm),
      0
    );
}

[data-reveal="up-lg"] {
  transform:
    translate3d(
      0,
      var(--reveal-distance-lg),
      0
    );
}

[data-reveal="down"] {
  transform:
    translate3d(
      0,
      calc(var(--reveal-distance-md) * -1),
      0
    );
}

[data-reveal="left"] {
  transform:
    translate3d(
      var(--reveal-distance-md),
      0,
      0
    );
}

[data-reveal="right"] {
  transform:
    translate3d(
      calc(var(--reveal-distance-md) * -1),
      0,
      0
    );
}

[data-reveal="scale"] {
  transform: scale(0.96);
}

[data-reveal="scale-up"] {
  transform:
    translate3d(
      0,
      var(--reveal-distance-sm),
      0
    )
    scale(0.96);
}

[data-reveal="rotate-left"] {
  transform:
    translate3d(
      var(--reveal-distance-sm),
      var(--reveal-distance-sm),
      0
    )
    rotate(2deg);
}

[data-reveal="rotate-right"] {
  transform:
    translate3d(
      calc(var(--reveal-distance-sm) * -1),
      var(--reveal-distance-sm),
      0
    )
    rotate(-2deg);
}


/* =========================================================
   04. REVEAL SPEED
   ========================================================= */

[data-reveal-speed="fast"] {
  transition-duration: var(--motion-duration-base);
}

[data-reveal-speed="slow"] {
  transition-duration: var(--motion-duration-xslow);
}


/* =========================================================
   05. REVEAL DELAYS
   ========================================================= */

[data-reveal-delay="1"] {
  transition-delay: 80ms;
}

[data-reveal-delay="2"] {
  transition-delay: 160ms;
}

[data-reveal-delay="3"] {
  transition-delay: 240ms;
}

[data-reveal-delay="4"] {
  transition-delay: 320ms;
}

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

[data-reveal-delay="6"] {
  transition-delay: 480ms;
}

[data-reveal-delay="7"] {
  transition-delay: 560ms;
}

[data-reveal-delay="8"] {
  transition-delay: 640ms;
}


/* =========================================================
   06. STAGGER GROUP
   JavaScript adds .is-visible to parent
   ========================================================= */

[data-stagger] > * {
  visibility: hidden;
  opacity: 0;

  transform:
    translate3d(
      0,
      var(--reveal-distance-md),
      0
    );

  will-change: opacity, transform;

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

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

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

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

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

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

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

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

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

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

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

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


/* =========================================================
   07. TEXT REVEAL
   ========================================================= */

.text-reveal {
  position: relative;

  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.text-reveal__inner {
  display: block;

  opacity: 0;

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

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

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


/* =========================================================
   08. WORD REVEAL
   ========================================================= */

.word-reveal {
  display: inline;
}

.word-reveal__word {
  display: inline-block;

  opacity: 0;

  transform:
    translate3d(
      0,
      0.7em,
      0
    );

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

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

.word-reveal.is-visible .word-reveal__word:nth-child(1) {
  transition-delay: 40ms;
}

.word-reveal.is-visible .word-reveal__word:nth-child(2) {
  transition-delay: 90ms;
}

.word-reveal.is-visible .word-reveal__word:nth-child(3) {
  transition-delay: 140ms;
}

.word-reveal.is-visible .word-reveal__word:nth-child(4) {
  transition-delay: 190ms;
}

.word-reveal.is-visible .word-reveal__word:nth-child(5) {
  transition-delay: 240ms;
}

.word-reveal.is-visible .word-reveal__word:nth-child(6) {
  transition-delay: 290ms;
}

.word-reveal.is-visible .word-reveal__word:nth-child(7) {
  transition-delay: 340ms;
}

.word-reveal.is-visible .word-reveal__word:nth-child(8) {
  transition-delay: 390ms;
}


/* =========================================================
   09. MASK REVEAL
   Suitable for images and large panels
   ========================================================= */

.mask-reveal {
  position: relative;

  overflow: hidden;
}

.mask-reveal::before {
  position: absolute;
  inset: 0;
  z-index: 3;

  content: "";

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

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

  transition:
    transform var(--motion-duration-xslow)
    var(--motion-ease);
}

.mask-reveal.is-visible::before {
  transform: scaleX(0);
}

.mask-reveal--purple::before {
  background-color: var(--color-primary);
}

.mask-reveal--plum::before {
  background-color: var(--color-plum);
}

.mask-reveal--orange::before {
  background-color: var(--color-orange);
}


/* =========================================================
   10. IMAGE REVEAL
   ========================================================= */

.image-reveal {
  position: relative;

  overflow: hidden;
}

.image-reveal img {
  opacity: 0;

  transform:
    scale(1.08)
    translate3d(
      0,
      18px,
      0
    );

  transition:
    opacity var(--motion-duration-slow) var(--motion-ease),
    transform 1400ms var(--motion-ease);
}

.image-reveal.is-visible img {
  opacity: 1;

  transform:
    scale(1)
    translate3d(
      0,
      0,
      0
    );
}

.image-reveal::after {
  position: absolute;
  inset: 0;
  z-index: 2;

  content: "";

  pointer-events: none;

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

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

  transition:
    transform var(--motion-duration-xslow)
    var(--motion-ease);
}

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


/* =========================================================
   11. PARALLAX FOUNDATION
   JavaScript updates CSS variables
   ========================================================= */

[data-parallax] {
  transform:
    translate3d(
      var(--parallax-x),
      var(--parallax-y),
      0
    )
    scale(var(--parallax-scale))
    rotate(var(--parallax-rotate));

  will-change: transform;
}

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

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

  object-fit: cover;

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

  will-change: transform;
}

.parallax-wrapper {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;

  pointer-events: none;

  transform:
    translate3d(
      var(--parallax-x),
      var(--parallax-y),
      0
    )
    scale(var(--parallax-scale))
    rotate(var(--parallax-rotate));

  will-change: transform;
}

.parallax-layer--back {
  z-index: 0;
}

.parallax-layer--middle {
  z-index: 2;
}

.parallax-layer--front {
  z-index: 4;
}


/* =========================================================
   12. HERO PARALLAX
   ========================================================= */

.hero-parallax {
  position: relative;

  overflow: clip;
}

.hero-parallax__content {
  position: relative;
  z-index: 5;
}

.hero-parallax__media {
  position: absolute;
  inset: 0;
  z-index: 1;

  overflow: hidden;
}

.hero-parallax__media img {
  width: 100%;
  height: calc(100% + 120px);

  object-fit: cover;

  transform:
    translate3d(
      0,
      var(--parallax-y),
      0
    )
    scale(1.06);

  will-change: transform;
}

.hero-parallax__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(43, 0, 53, 0.88) 0%,
      rgba(43, 0, 53, 0.64) 48%,
      rgba(43, 0, 53, 0.2) 100%
    );
}


/* =========================================================
   13. DECORATIVE PARALLAX
   ========================================================= */

.parallax-orb {
  position: absolute;

  pointer-events: none;

  border-radius: 50%;

  transform:
    translate3d(
      var(--parallax-x),
      var(--parallax-y),
      0
    )
    scale(var(--parallax-scale));

  will-change: transform;
}

.parallax-ring {
  position: absolute;

  pointer-events: none;

  border-radius: 50%;

  transform:
    translate3d(
      var(--parallax-x),
      var(--parallax-y),
      0
    )
    rotate(var(--parallax-rotate));

  will-change: transform;
}


/* =========================================================
   14. FLOATING DECORATION
   Used selectively, not on every section
   ========================================================= */

.float-slow {
  animation:
    floatSlow
    8s
    ease-in-out
    infinite;
}

.float-medium {
  animation:
    floatMedium
    6s
    ease-in-out
    infinite;
}

.float-rotate {
  animation:
    floatRotate
    12s
    ease-in-out
    infinite;
}

@keyframes floatSlow {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

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

@keyframes floatMedium {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

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

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

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


/* =========================================================
   15. CARD MOTION
   ========================================================= */

.motion-card {
  position: relative;

  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--motion-duration-base) var(--motion-ease);
}

.motion-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: 3px;

  content: "";

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

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

  transition:
    transform var(--motion-duration-base)
    var(--motion-ease);
}

.motion-card:hover {
  transform:
    translate3d(
      0,
      -6px,
      0
    );
}

.motion-card:hover::after {
  transform: scaleX(1);
}


/* =========================================================
   16. LINK MOTION
   ========================================================= */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.link-arrow__icon {
  transition:
    transform var(--motion-duration-fast)
    var(--motion-ease);
}

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

.link-underline {
  position: relative;

  display: inline-block;
}

.link-underline::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;

  height: 1px;

  content: "";

  background-color: currentColor;

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

  transition:
    transform var(--motion-duration-base)
    var(--motion-ease);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}


/* =========================================================
   17. BUTTON MOTION
   ========================================================= */

.btn-motion {
  position: relative;

  overflow: hidden;
  isolation: isolate;
}

.btn-motion::before {
  position: absolute;
  inset: 0;
  z-index: -1;

  content: "";

  background-color: rgba(255, 255, 255, 0.14);

  transform:
    translate3d(
      -110%,
      0,
      0
    )
    skewX(-18deg);

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

.btn-motion:hover::before,
.btn-motion:focus-visible::before {
  transform:
    translate3d(
      110%,
      0,
      0
    )
    skewX(-18deg);
}


/* =========================================================
   18. ICON MOTION
   ========================================================= */

.icon-lift {
  transition:
    transform var(--motion-duration-base)
    var(--motion-ease);
}

.icon-lift:hover {
  transform:
    translate3d(
      0,
      -4px,
      0
    );
}

.icon-rotate {
  transition:
    transform var(--motion-duration-base)
    var(--motion-ease);
}

.icon-rotate:hover {
  transform: rotate(8deg);
}


/* =========================================================
   19. ACCENT LINE REVEAL
   ========================================================= */

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

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

.accent-line-reveal.is-visible {
  transform: scaleX(1);
}


/* =========================================================
   20. BORDER DRAW
   ========================================================= */

.border-draw {
  position: relative;
}

.border-draw::before {
  position: absolute;
  inset: 0;

  content: "";

  pointer-events: none;

  border: 1px solid rgba(80, 30, 99, 0.24);
  border-radius: inherit;

  opacity: 0;

  transform: scale(0.97);

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

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


/* =========================================================
   21. COUNTER
   JavaScript updates the number
   ========================================================= */

[data-counter] {
  display: inline-block;

  font-variant-numeric: tabular-nums;

  opacity: 0;

  transform:
    translate3d(
      0,
      var(--reveal-distance-sm),
      0
    );

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

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


/* =========================================================
   22. TIMELINE MOTION
   ========================================================= */

.timeline-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;

  width: 2px;

  overflow: hidden;

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

.timeline-progress::after {
  position: absolute;
  inset: 0;

  content: "";

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

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

  transition:
    transform
    1400ms
    var(--motion-ease);
}

.timeline-progress.is-visible::after {
  transform: scaleY(1);
}

.timeline-item {
  opacity: 0;

  transform:
    translate3d(
      var(--reveal-distance-md),
      0,
      0
    );

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

.timeline-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   23. SECTION BACKGROUND MOTION
   ========================================================= */

.section-glow {
  position: absolute;

  pointer-events: none;

  border-radius: 50%;
  filter: blur(70px);

  opacity: 0.22;

  animation:
    glowPulse
    9s
    ease-in-out
    infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.16;
    transform: scale(0.94);
  }

  50% {
    opacity: 0.28;
    transform: scale(1.04);
  }
}


/* =========================================================
   24. PAGE ENTRY
   ========================================================= */

.page-enter {
  animation:
    pageEnter
    var(--motion-duration-slow)
    var(--motion-ease)
    both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform:
      translate3d(
        0,
        12px,
        0
      );
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


/* =========================================================
   25. LOADING STATE
   ========================================================= */

.is-loading {
  cursor: wait;
}

.loading-shimmer {
  position: relative;

  overflow: hidden;

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

.loading-shimmer::after {
  position: absolute;
  inset: 0;

  content: "";

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.68) 50%,
      transparent 100%
    );

  transform: translateX(-100%);

  animation:
    shimmer
    1.5s
    infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}


/* =========================================================
   26. MARQUEE FOUNDATION
   Optional for client or partner logos
   ========================================================= */

.marquee {
  position: relative;

  display: flex;
  overflow: hidden;

  user-select: none;
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-12);

  min-width: max-content;

  animation:
    marqueeMove
    28s
    linear
    infinite;
}

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

@keyframes marqueeMove {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* =========================================================
   27. SCROLL INDICATOR
   ========================================================= */

.scroll-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.scroll-indicator__line {
  position: relative;

  width: 1px;
  height: 54px;

  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.26);
}

.scroll-indicator__line::after {
  position: absolute;
  top: -100%;
  left: 0;

  width: 100%;
  height: 55%;

  content: "";

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

  animation:
    scrollLine
    2s
    var(--motion-ease-in-out)
    infinite;
}

@keyframes scrollLine {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(280%);
  }
}


/* =========================================================
   28. ACTIVE NAVIGATION MOTION
   ========================================================= */

.site-nav__link.is-active {
  transition:
    color var(--motion-duration-fast) ease,
    background-color var(--motion-duration-fast) ease;
}

@media (min-width: 1181px) {
  .site-nav__link.is-active::after {
    animation:
      activeNavLine
      var(--motion-duration-base)
      var(--motion-ease)
      both;
  }
}

@keyframes activeNavLine {
  from {
    transform: scaleX(0);
    transform-origin: left center;
  }

  to {
    transform: scaleX(1);
    transform-origin: left center;
  }
}


/* =========================================================
   29. HOVER MEDIA ZOOM
   ========================================================= */

.media-zoom {
  overflow: hidden;
}

.media-zoom img {
  transition:
    transform
    1100ms
    var(--motion-ease);
}

.media-zoom:hover img {
  transform: scale(1.045);
}


/* =========================================================
   30. TILT FOUNDATION
   Optional, use only for decorative cards
   ========================================================= */

[data-tilt] {
  transform:
    perspective(1000px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translate3d(0, 0, 0);

  transform-style: preserve-3d;

  transition:
    transform
    var(--motion-duration-fast)
    ease-out;

  will-change: transform;
}

[data-tilt] > * {
  transform: translateZ(20px);
}


/* =========================================================
   31. TABLET MOTION ADJUSTMENT
   ========================================================= */

@media (max-width: 1024px) {
  :root {
    --reveal-distance-md: 28px;
    --reveal-distance-lg: 44px;
  }

  .hero-parallax__media img {
    height: calc(100% + 80px);
  }

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

  .section-glow {
    filter: blur(56px);
  }
}


/* =========================================================
   32. MOBILE MOTION ADJUSTMENT
   ========================================================= */

@media (max-width: 640px) {
  :root {
    --reveal-distance-sm: 12px;
    --reveal-distance-md: 22px;
    --reveal-distance-lg: 32px;

    --motion-duration-base: 500ms;
    --motion-duration-slow: 700ms;
    --motion-duration-xslow: 900ms;
  }

  [data-reveal-delay] {
    transition-delay: 0ms;
  }

  [data-stagger].is-visible > *:nth-child(n) {
    transition-delay: calc(
      (var(--stagger-index, 0)) * 50ms
    );
  }

  .float-slow,
  .float-medium,
  .float-rotate {
    animation: none;
  }

  .hero-parallax__media img,
  [data-parallax="image"] img {
    height: 100%;
    transform: none;
  }

  .parallax-layer,
  .parallax-orb,
  .parallax-ring,
  [data-parallax] {
    transform: none;
  }

  .section-glow {
    animation: none;
    filter: blur(46px);
  }

  .motion-card:hover,
  .media-zoom:hover img {
    transform: none;
  }

  [data-tilt] {
    transform: none;
  }

  [data-tilt] > * {
    transform: none;
  }

  .marquee__track {
    animation-duration: 34s;
  }
}


/* =========================================================
   33. TOUCH DEVICE SAFETY
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
  .motion-card:hover,
  .media-zoom:hover img,
  .icon-lift:hover,
  .icon-rotate:hover {
    transform: none;
  }

  .btn-motion::before {
    display: none;
  }

  [data-tilt] {
    transform: none !important;
  }
}


/* =========================================================
   34. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger] > *,
  .text-reveal__inner,
  .word-reveal__word,
  .image-reveal img,
  [data-counter],
  .timeline-item {
    visibility: visible !important;
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }

  .mask-reveal::before,
  .image-reveal::after,
  .accent-line-reveal,
  .timeline-progress::after {
    display: none !important;
  }

  [data-parallax],
  [data-parallax] img,
  .parallax-layer,
  .parallax-orb,
  .parallax-ring,
  .hero-parallax__media img {
    transform: none !important;
  }

  .float-slow,
  .float-medium,
  .float-rotate,
  .section-glow,
  .loading-shimmer::after,
  .marquee__track,
  .scroll-indicator__line::after,
  .page-enter {
    animation: none !important;
  }

  .motion-card,
  .btn-motion,
  .media-zoom img,
  .icon-lift,
  .icon-rotate,
  [data-tilt] {
    transition: none !important;
  }
}


/* =========================================================
   35. PRINT SAFETY
   ========================================================= */

@media print {
  [data-reveal],
  [data-stagger] > *,
  .text-reveal__inner,
  .word-reveal__word,
  .image-reveal img,
  [data-counter],
  .timeline-item {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mask-reveal::before,
  .image-reveal::after,
  .section-glow,
  .parallax-layer,
  .parallax-orb,
  .parallax-ring,
  .scroll-indicator {
    display: none !important;
  }
}