/* Small custom touches that go beyond Tailwind utilities */

html {
  scroll-behavior: smooth;
}

/* Safety net: a few decorative elements (e.g. the rotating "AI TECH DIGI"
   seal) are intentionally positioned past their container's edge. Clip any
   stray overflow at the viewport instead of letting it create a horizontal
   scrollbar on mobile. */
html,
body {
  overflow-x: hidden;
}

/* Custom scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: #FF5A1F #121212;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #121212;
}

::-webkit-scrollbar-thumb {
  background-color: #FF5A1F;
  border-radius: 999px;
  border: 2px solid #121212;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #e04d16;
}

/* Mobile hamburger -> X animation */
#menuBtn.is-open .menu-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

#menuBtn.is-open .menu-bar:nth-child(2) {
  opacity: 0;
}

#menuBtn.is-open .menu-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Slow rotation for the circular "AI TECH DIGI" seal in the About section */
@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

/* Services cards: the featured card is full size by default. Hovering any
   card in the row expands that card to full size and shrinks the rest,
   including the featured one. Desktop only -- mobile keeps its scroll row. */
@media (min-width: 1024px) {
  .service-row .service-card {
    flex-grow: 1;
    flex-basis: 0%;
    transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .service-row .service-card.is-featured {
    flex-grow: 3;
  }

  .service-row:hover .service-card {
    flex-grow: 1;
  }

  .service-row:hover .service-card:hover {
    flex-grow: 3;
  }

  /* Description + Learn More: visible on the featured card by default,
     swaps to whichever card is hovered, hidden on every other card. */
  .service-card .service-desc-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
  }

  .service-card .service-desc-panel>div {
    overflow: hidden;
  }

  .service-card.is-featured .service-desc-panel {
    grid-template-rows: 1fr;
  }

  .service-row:hover .service-card .service-desc-panel {
    grid-template-rows: 0fr;
  }

  .service-row:hover .service-card:hover .service-desc-panel {
    grid-template-rows: 1fr;
  }
}

/* "How It Works" slider: equal-height cards, no default Slick arrows/dots */
.how-it-works-slider .slick-track {
  display: flex !important;
}

.how-it-works-slider .slick-slide {
  height: auto;
}

.how-it-works-slider .slick-slide>div {
  height: 100%;
}

/* Featured Projects card stack: fanned/overlapping by default, spreads into
   a row when the stack is hovered. */
.project-stack .project-card {
  top: 50%;
  left: 50%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-stack .project-card:nth-child(1) {
  transform: translate(-50%, -50%) translateX(-28px) rotate(-8deg);
  z-index: 1;
}

.project-stack .project-card:nth-child(2) {
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 3;
}

.project-stack .project-card:nth-child(3) {
  transform: translate(-50%, -50%) translateX(28px) rotate(8deg);
  z-index: 2;
}

.project-stack:hover .project-card:nth-child(1) {
  transform: translate(-50%, -50%) translateX(-19rem) rotate(0deg);
  z-index: 2;
}

.project-stack:hover .project-card:nth-child(2) {
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 2;
}

.project-stack:hover .project-card:nth-child(3) {
  transform: translate(-50%, -50%) translateX(19rem) rotate(0deg);
  z-index: 2;
}

/* Running marquee under the video section: two identical groups placed
   side by side, scrolled left by exactly one group's width for a seamless loop. */
.marquee-track {
  animation: marquee-scroll 24s linear infinite;
}

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

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

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

/* Testimonials slider: equal-height fade slides, pill-shaped dot indicator */
.testimonial-slider .slick-track {
  display: flex !important;
}

.testimonial-slider .slick-slide {
  height: auto;
}

.testimonial-slider .slick-slide>div {
  height: 100%;
}

.testimonial-dots ul.slick-dots {
  position: static;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
}

.testimonial-dots ul.slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.testimonial-dots ul.slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 9999px;
  background: #d1d5db;
  font-size: 0;
  line-height: 0;
  transition: background-color 0.3s, width 0.3s;
}

.testimonial-dots ul.slick-dots li button:before {
  content: none;
}

.testimonial-dots ul.slick-dots li.slick-active button {
  width: 20px;
  background: #121212;
}

/* Team slider: equal-height cards, plain (unboxed) dot row */
.team-slider .slick-track {
  display: flex !important;
}

.team-slider .slick-slide {
  height: auto;
}

.team-slider .slick-slide>div {
  height: 100%;
}

.team-dots ul.slick-dots {
  position: static;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-dots ul.slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.team-dots ul.slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 9999px;
  background: #d1d5db;
  font-size: 0;
  line-height: 0;
  transition: background-color 0.3s, width 0.3s;
}

.team-dots ul.slick-dots li button:before {
  content: none;
}

.team-dots ul.slick-dots li.slick-active button {
  width: 20px;
  background: #121212;
}

/* Featured Projects slider (mobile only): plain dot row, same treatment as
   the team slider's dots. */
.project-dots ul.slick-dots {
  position: static;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-dots ul.slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.project-dots ul.slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 9999px;
  background: #d1d5db;
  font-size: 0;
  line-height: 0;
  transition: background-color 0.3s, width 0.3s;
}

.project-dots ul.slick-dots li button:before {
  content: none;
}

.project-dots ul.slick-dots li.slick-active button {
  width: 20px;
  background: #121212;
}

/* FAQ accordion: smooth height animation via the 0fr/1fr grid-rows trick
   (no JS height measurement needed), plus-to-minus icon via opacity fade. */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel-inner {
  overflow: hidden;
}

.faq-icon-vert {
  transition: opacity 0.2s ease;
  transform-origin: center;
}

.faq-item.is-open .faq-icon-vert {
  opacity: 0;
}


/* ============ MOBILE RESPONSIVE FIXES (<= 768px) ============ */
@media (max-width: 768px) {

  /* Hero banner: the header is absolutely positioned so it overlaps the
     banner image on desktop (see index.html comment). On mobile that overlap
     crowds the navbar against the banner, so push the banner down to leave
     clean space beneath the floating nav pill. */
  #home {
    padding-top: 0;
  }

  #for-disp-property {
    display: none;
  }

  /* Rotating "AI TECH DIGI" seal: its desktop offset (-right-6/-bottom-6)
     pushes it past the page's own side padding on narrow screens, which is
     what was creating the horizontal overflow. Pull it back in. */
  .seal-badge {
    right: -0.25rem;
    bottom: -0.25rem;
  }

  /* "Why Choose Us" cards: keep a 2-per-row (col-6 style) layout instead of
     stacking to a single column, and trim their padding so two fit comfortably. */
  #why-choose-us .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  #why-choose-us .grid>div {
    padding: 1rem;
  }

  /* Smaller icon, heading and body text so the 2-up cards read as compact
     tiles instead of shrunk desktop cards. */
  #why-choose-us .grid span {
    height: 2.25rem;
    width: 2.25rem;
  }

  #why-choose-us .grid svg {
    height: 1rem;
    width: 1rem;
  }

  #why-choose-us .grid h3 {
    margin-top: 0.75rem;
    font-size: 0.9rem;
  }

  #why-choose-us .grid p {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    line-height: 1.4;
  }

  /* Featured Projects stack: the fan/spread effect only triggers on :hover,
     which never fires on touch, so mobile visitors only ever saw the top
     card. script.js turns .project-stack into a Slick slider below this
     breakpoint -- these rules just take each card out of the desktop
     absolute/rotated stack so it can sit inside a normal slick-slide. */
  .project-stack {
    height: auto;
  }

  .project-stack .project-card {
    position: static;
    width: 100%;
    max-width: 22rem;
    margin: 0 auto;
    transform: none !important;
  }
}

.rounded-full-1 {
  border-radius: 100% !important;
}

.rounded-full {
  border-radius: 10px !important;
}

/* "Arrow" CTA pills (text + circular arrow icon, e.g. "Let's Talk", "Book Now",
   "Learn More"...): on hover, the icon's own background floods outward from
   its circle to fill the whole pill, and the arrow keeps sliding in place. */
.arrow-btn {
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.arrow-btn.absolute {
  position: absolute;
}

.arrow-btn:hover {
  color: #fff !important;
  border-color: var(--arrow-btn-fill, #FF5A1F) !important;
}

/* Negative z-index puts the icon (and the flood it grows) behind the
   button's own label text, so the flood sweeps under the words instead
   of covering them. */
.arrow-btn .arrow-btn-icon {
  position: relative;
  z-index: -1;
}

.arrow-btn .arrow-btn-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--arrow-btn-fill, #FF5A1F);
  transform: scale(1);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.arrow-btn:hover .arrow-btn-icon::before {
  transform: scale(35);
}

.arrow-btn .arrow-btn-icon svg {
  position: relative;
  z-index: 1;
}

.arrow-btn:hover .arrow-btn-icon svg {
  animation: arrow-slide-x 0.9s ease-in-out infinite;
}

@keyframes arrow-slide-x {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

/* Mobile nav panel: smooth open/close via the same 0fr/1fr grid-rows trick
   used for the FAQ accordion (no JS height measurement needed), instead of
   an abrupt hidden/block toggle. Shared header, so this affects every page
   including the homepage -- intentional, matches the site's own accordion
   language rather than introducing a new one. */
.mobile-nav-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-top 0.35s ease;
}

.mobile-nav-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0.5rem;
}

.mobile-nav-panel-inner {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-panel {
    transition: opacity 0.15s ease;
  }
}

/* ============ SCROLL-REVEAL UTILITIES (service pages) ============ */
/* Generic fade-up-on-scroll: add .reveal to any element, script.js flips
   .is-visible via IntersectionObserver the first time it enters view. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children: each direct child delays a little more than the last,
   so cards/steps/rows cascade in rather than popping together. */
.reveal-stagger>*{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-stagger.is-visible>*:nth-child(2) {
  transition-delay: 80ms;
}

.reveal-stagger.is-visible>*:nth-child(3) {
  transition-delay: 160ms;
}

.reveal-stagger.is-visible>*:nth-child(4) {
  transition-delay: 240ms;
}

.reveal-stagger.is-visible>*:nth-child(5) {
  transition-delay: 320ms;
}

.reveal-stagger.is-visible>*:nth-child(6) {
  transition-delay: 400ms;
}

.reveal-stagger.is-visible>* {
  opacity: 1;
  transform: translateY(0);
}

/* Scale-in for hero/showcase imagery and dashboard mockups. */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Service page hero heading: blinking caret while script.js types it out,
   removed once typing finishes (see .hero-typewriter in script.js). */
.hero-typewriter.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 3px;
  vertical-align: -0.1em;
  background: currentColor;
  animation: tw-caret-blink 0.8s steps(1) infinite;
}

@keyframes tw-caret-blink {
  50% {
    opacity: 0;
  }
}

/* Subtle infinite float for dashboard/UI cards layered over hero and
   showcase visuals -- gives the composition a quiet sense of motion
   without ever distracting from the copy. */
@keyframes float-slow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

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

.float-slow-delay {
  animation: float-slow 6s ease-in-out infinite;
  animation-delay: 1.4s;
}

.float-slow-delay-2 {
  animation: float-slow 7s ease-in-out infinite;
  animation-delay: 2.6s;
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal-stagger>*,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float-slow,
  .float-slow-delay,
  .float-slow-delay-2 {
    animation: none;
  }
}

/* ============================================================
   PREMIUM INNER-PAGE MOTION SYSTEM
   Every selector below is new and additive -- none of these
   classes/ids are used anywhere in index.php (the homepage) or
   in header.php/footer.php's own markup, so the homepage is
   unaffected. Scoped opt-in via class, not via redefining any
   existing selector. See js/script.js for the matching
   controllers (same file, block labeled to match).
   ============================================================ */

/* ---- Directional scroll reveals ---- */
.reveal-left {
  opacity: 0;
  transform: translateX(-64px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(64px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ---- Clip-path reveals: hero visuals, case studies, large images ---- */
.reveal-clip-left {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-clip-right {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-clip-bottom {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ---- Divider lines that grow in on reveal (editorial section breaks) ---- */
.divider-grow {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.divider-grow.is-visible {
  transform: scaleX(1);
}

/* ---- Word-by-word text reveal for major headings (script.js wraps words in .trw spans) ---- */
.text-reveal-words .trw {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-reveal-words.is-visible .trw {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 3D tilt card: script.js sets the full `transform` directly via inline style on
   mousemove/mouseleave (fine-pointer desktop only) rather than driving it through CSS custom
   properties -- inline style always wins the cascade outright, so this can never be silently
   overridden by ".reveal-stagger(.is-visible) > *" or any other rule sharing the `transform`
   property, no matter where the card sits in the DOM. This class only supplies the rest-state
   transition and the 3D context; there is no transform declared here (untransformed is the
   correct resting look). ---- */
.tilt-card {
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
}

.tilt-card:hover {
  transition: transform 0.05s linear;
}

/* ---- Magnetic button: same reasoning -- script.js sets `transform` directly via inline
   style on mousemove/mouseleave, so it can be combined directly on the same element as
   .reveal/.reveal-left/etc: the inline transform simply wins while the cursor is near, and
   clearing it on mouseleave falls back to whatever the reveal class has already settled on.
   The opacity transition is repeated here (matching .reveal's own timing) purely so that
   declaring `transition` here doesn't blow away .reveal's opacity fade when both classes
   land on the same element -- `transition` is a single cascaded property, so whichever rule
   wins supplies the complete list. ---- */
.magnetic-btn {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Cursor-follow glow inside a card (script.js drives --gx/--gy) ---- */
.glow-card {
  position: relative;
  isolation: isolate;
}

.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 90, 31, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.glow-card:hover::before {
  opacity: 1;
}

.glow-card>* {
  position: relative;
  z-index: 1;
}

/* ---- Animated gradient mesh background: slow-drifting blurred blobs for hero/CTA sections ---- */
.bg-mesh-glow {
  position: relative;
  isolation: isolate;
}

.bg-mesh-glow::before,
.bg-mesh-glow::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
}

.bg-mesh-glow::before {
  width: 32rem;
  height: 32rem;
  top: -10rem;
  left: -8rem;
  opacity: 0.35;
  background: radial-gradient(circle, #FF5A1F, transparent 70%);
  animation: mesh-drift-a 18s ease-in-out infinite;
}

.bg-mesh-glow::after {
  width: 26rem;
  height: 26rem;
  bottom: -8rem;
  right: -6rem;
  opacity: 0.12;
  background: radial-gradient(circle, #121212, transparent 70%);
  animation: mesh-drift-b 22s ease-in-out infinite;
}

@keyframes mesh-drift-a {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(3rem, 2rem) scale(1.08);
  }
}

@keyframes mesh-drift-b {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-2rem, -1.5rem) scale(1.05);
  }
}

/* ---- Floating decorative orbs ---- */
.orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

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

.orb-float-delay {
  animation: orb-float 11s ease-in-out infinite;
  animation-delay: 1.8s;
}

@keyframes orb-float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-16px) rotate(6deg);
  }
}

/* ---- Subtle background grid, faded toward the edges (technology-forward sections) ---- */
.bg-grid-fade {
  position: relative;
}

.bg-grid-fade::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(18, 18, 18, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 18, 18, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 100%);
  pointer-events: none;
}

.bg-grid-fade>* {
  position: relative;
  z-index: 1;
}

/* ---- Button shine sweep, triggered on hover only (never continuous) ---- */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

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

/* ---- Scroll progress bar: injected by header.php, inner pages only ---- */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: #FF5A1F;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 60;
  will-change: transform;
}

@media (max-width: 640px) {

  /* Halve travel distance on mobile and drop the heaviest decorative
     effects, per the mobile-motion requirements. */
  .reveal-left {
    transform: translateX(-28px);
  }

  .reveal-right {
    transform: translateX(28px);
  }

  .bg-mesh-glow::before,
  .bg-mesh-glow::after {
    display: none;
  }

  .tilt-card {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .reveal-left,
  .reveal-right,
  .reveal-blur,
  .reveal-clip-left,
  .reveal-clip-right,
  .reveal-clip-bottom,
  .divider-grow,
  .text-reveal-words .trw {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
  }

  .tilt-card,
  .magnetic-btn {
    transform: none !important;
    transition: none;
  }

  .bg-mesh-glow::before,
  .bg-mesh-glow::after,
  .orb-float,
  .orb-float-delay {
    animation: none;
  }

  .scroll-progress-bar {
    transition: none;
  }
}