/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Hanya diterapkan di layar ≤720px
   ============================================ */

/* ============================================
   THEME TOGGLE SMOOTH TRANSITION
   ============================================ */

/* Ensure smooth theme transition on mobile */
html {
  color-scheme: light dark;
}

/* Smooth transition for theme change - limited scope for better performance */
.site-header,
.nav-links {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* Theme toggle button transition */
.theme-toggle {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
  touch-action: manipulation;
  /* Better touch response */
  -webkit-tap-highlight-color: transparent;
  /* Remove tap highlight on mobile */
}

/* Ensure all elements using CSS variables transition smoothly */
body,
.container,
main,
section {
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Reduce backdrop-filter on mobile */
.site-header {
  \n backdrop-filter: blur(12px) !important;
  \n -webkit-backdrop-filter: blur(12px) !important;
  \n background: var(--bg-2) !important;
  \n
  /* Smooth theme transition */
  \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  \n
}

.nav-links {
  \n backdrop-filter: blur(12px) !important;
  \n -webkit-backdrop-filter: blur(12px) !important;
  \n
  /* Smooth theme transition */
  \n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  \n
}

/* Reduce shadow complexity on mobile */
.step,
.card,
.testimonial,
.portfolio-card,
.hero-card,
.team-card,
.contact-map,
.process .steps {
  box-shadow: 0 4px 12px rgba(29, 31, 36, 0.1) !important;
}

.step:hover,
.card:hover,
.testimonial:hover,
.portfolio-card:hover,
.hero-card:hover,
.team-card:hover {
  box-shadow: 0 8px 24px rgba(29, 31, 36, 0.12) !important;
}

/* Reduce animation complexity on mobile */
.hero::before,
.hero::after,
.services::before,
.services::after {
  animation: none !important;
}

/* Disable hover transforms on touch devices */
.step:hover,
.card:hover,
.testimonial:hover,
.portfolio-card:hover,
.hero-card:hover,
.team-card:hover,
.process .process-text:hover,
.process .process-visual img:hover {
  transform: none !important;
}

/* Reduce button shadow on mobile */
.btn {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12) !important;
}

.btn:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
  transform: none !important;
}

/* Smaller hero padding on mobile */
.hero {
  padding: 20px 0 40px !important;
}

.hero .hero-card {
  padding: 20px !important;
}

.hero .hero-actions {
  gap: 16px !important;
  margin: 20px 0 28px !important;
}

.hero .hero-whatsapp {
  width: 42px !important;
  height: 42px !important;
}

.hero .hero-whatsapp i {
  font-size: 2rem !important;
}

/* Reduce section padding on mobile */
.section {
  padding: 40px 0 !important;
}

/* Smaller team card on mobile */
.team-card {
  padding: 20px !important;
}

.team-photo {
  width: 72px !important;
  height: 72px !important;
}

/* ============================================
   ADDITIONAL MOBILE PERFORMANCE
   ============================================ */

/* Disable bg-orbit on mobile (heavy blur effect) */
.bg-orbit {
  display: none !important;
}

/* Reduce gradient complexity */
body {
  background: var(--bg-1) !important;
}

.services,
.testimonials,
.team,
.contact {
  background: var(--bg-1) !important;
}

/* Simplify process section */
.process::before {
  display: none !important;
}

/* Reduce card padding on mobile */
.card,
.step {
  padding: 16px 18px !important;
}

/* Smaller border radius on mobile for faster paint */
.hero-card,
.portfolio-card,
.team-card,
.card {
  border-radius: 16px !important;
}

/* Optimize image rendering */
img {
  content-visibility: auto;
}

/* Reduce navbar complexity */
.brand-mark {
  box-shadow: none !important;
}

/* Simplify nav-links on mobile */
.nav-links {
  background: var(--card) !important;
}

/* Reduce text shadow on mobile */
.hero .hero-copy h1 {
  text-shadow: none !important;
}

/* Optimize reveal animations - show immediately */
.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Reduce service card decorations */
#layanan .card::after {
  display: none !important;
}

/* Simplify team card gradient */
.team-photo {
  background: var(--sage) !important;
}

.team-photo.alt {
  background: var(--clay) !important;
}

/* Reduce portfolio image height on mobile */
.portfolio-image {
  height: 200px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Smaller stats on mobile */
.hero .hero-stats h3 {
  font-size: 1.1rem !important;
}

.hero .hero-stats p {
  font-size: 0.8rem !important;
}

/* Reduce hero h1 size on mobile */
.hero .hero-copy h1 {
  font-size: 2rem !important;
}

/* Optimize footer */
.footer {
  padding: 30px 0 20px !important;
}

/* ============================================
   EXTREME MOBILE OPTIMIZATIONS
   ============================================ */

/* Disable content-visibility animation cost */
.reveal.show {
  will-change: auto !important;
}

/* Reduce icon animation */
.fa-beat,
.fa-bounce,
.fa-fade,
.fa-beat-fade,
.fa-blink,
.fa-flip,
.fa-shake,
.fa-spin,
.fa-spin-pulse,
.fa-spin-reverse {
  animation: none !important;
}

/* Simplify hero card border */
.hero-card {
  border: 1px solid var(--border) !important;
}

/* Reduce eyebrow padding */
.eyebrow {
  padding: 4px 8px !important;
}

/* Optimize section head */
.section-head {
  margin-bottom: 24px !important;
}

/* Reduce card gap on mobile */
.card-grid,
.portfolio-grid,
.testimonial-grid,
.team-grid {
  gap: 16px !important;
}

/* Optimize contact section */
.contact-info {
  gap: 10px !important;
  margin-top: 12px !important;
}

/* Reduce map size on mobile */
.contact-map img {
  height: 180px !important;
  object-fit: cover;
}

/* Optimize process steps */
.process-grid {
  gap: 16px !important;
}

.steps {
  gap: 12px !important;
}

/* Reduce hero stats gap */
.hero .hero-stats {
  gap: 10px !important;
}

.hero .hero-stats>div {
  padding: 8px 10px !important;
}

/* Optimize brand text animation - KEEP ANIMATION BUT REDUCE COMPLEXITY */
.brand-text {
  /* Animation kept for mobile visual consistency */
  background-size: 200%;
  background-position: 0% 50%;
  /* Use steps() for better mobile performance than smooth animation */
  animation: brandTextShift 2s steps(5) infinite;
}

@keyframes brandTextShift {
  to {
    background-position: 200%;
  }
}

/* Reduce nav padding */
.nav {
  padding-block: 0.8rem !important;
}

/* Optimize scroll behavior */
html {
  scroll-behavior: auto !important;
}

/* ============================================
   ICON OPTIMIZATIONS FOR MOBILE
   Hide non-critical icons on mobile
   ============================================ */

/* Hide decorative icons on mobile */
.eyebrow i.bi,
.section-head i {
  display: none !important;
}

/* Reduce icon size on mobile */
.fa-2x {
  font-size: 1.5rem !important;
}

.fa-3x {
  font-size: 2rem !important;
}

/* ============================================
   LAZY LOADING OPTIMIZATIONS
   ============================================ */

/* Defer non-critical images */
.portfolio-image {
  \n min-height: 140px;
  \n
}

/* Show placeholder background */
/* .img-1 placeholder removed */

/* .img-2 placeholder removed */

/* .img-3 placeholder removed */

/* ============================================
   FONT OPTIMIZATIONS
   ============================================ */

/* Use system fonts fallback for faster render */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "IBM Plex Sans", sans-serif !important;
}

/* ============================================
   BATTERY SAVER MODE
   Additional optimizations for low power
   ============================================ */

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

  .hero::before,
  .hero::after,
  .services::before,
  .services::after {
    display: none !important;
  }

  * {
    transition: none !important;
  }
}