/* ==========================================================
   Custom CSS — LPK Ken Ichiru Indonesia
   Performance & UX Enhancement | Phase 4
   ========================================================== */

/* ========================
   1. BASE ENHANCEMENTS
   ======================== */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
  content-visibility: auto;
}

/* Contain paint for performance */
section, .vs-section {
  contain: layout style;
}

/* Preloader fade-out */
#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* ========================
   2. ACCESSIBILITY
   ======================== */
:focus-visible {
  outline: 2px solid var(--primary, #dc2626);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--primary, #dc2626);
  color: #fff;
  padding: 12px 24px;
  z-index: 100000;
  border-radius: 0 0 var(--radius-sm, 8px) var(--radius-sm, 8px);
  font-weight: 700;
  font-size: 14px;
  transition: top 0.3s ease;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode */
@media (forced-colors: active) {
  .ibt-btn {
    border: 2px solid ButtonText;
  }
}

/* ========================
   3. SCROLL ANIMATIONS
   ======================== */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}
[data-animate="fade-left"] {
  transform: translateX(-30px);
}
[data-animate="fade-left"].animated {
  transform: translateX(0);
}
[data-animate="fade-right"] {
  transform: translateX(30px);
}
[data-animate="fade-right"].animated {
  transform: translateX(0);
}
[data-animate="zoom-in"] {
  transform: scale(0.9);
}
[data-animate="zoom-in"].animated {
  transform: scale(1);
}
[data-animate="fade-up"].animated,
[data-animate="fade"].animated {
  transform: translateY(0);
}

/* Stagger delay classes */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* ========================
   4. MICRO-INTERACTIONS
   ======================== */

/* Card hover lift */
.service-card, .blog-card, .team-card, .product-card,
.about-card, .course-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover, .blog-card:hover, .team-card:hover,
.product-card:hover, .course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* Button press feedback */
.ibt-btn:active {
  transform: scale(0.97);
}

/* Link underline animation */
.animated-link {
  position: relative;
  display: inline-block;
}
.animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary, #dc2626);
  transition: width 0.3s ease;
}
.animated-link:hover::after {
  width: 100%;
}

/* ========================
   5. COUNTER ENHANCEMENTS
   ======================== */
.counter-number {
  font-variant-numeric: tabular-nums;
}

/* ========================
   6. RESPONSIVE BREAKPOINTS
   ======================== */

/* Touch-friendly targets on mobile */
@media (max-width: 991px) {
  .menu-style1 > ul > li > a,
  .ibt-btn,
  .nav-link,
  .footer-link a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Mobile scroll-snap for card carousels */
@media (max-width: 767px) {
  .scroll-snap-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .scroll-snap-container::-webkit-scrollbar {
    display: none;
  }
  .scroll-snap-container > * {
    scroll-snap-align: center;
    flex: 0 0 85%;
    max-width: 85%;
  }
}

/* ========================
   7. PERFORMANCE HINTS
   ======================== */
/* Prevent layout shift on images */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* Lazy-loaded images placeholder */
img[loading="lazy"] {
  background: linear-gradient(135deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
img[loading="lazy"][src]:not([src=""]) {
  animation: none;
  background: none;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* WebP fallback signaling */
.no-webp img[data-webp] {
  /* Keep original src */
}

/* ========================
   8. DARK MODE SUPPORT
   ======================== */
[data-theme="dark"] {
  --dark: #f8fafc;
  --dark-2: #e2e8f0;
  --dark-3: #cbd5e1;
  --gray: #94a3b8;
  --gray-light: #64748b;
  --gray-lighter: #334155;
  --white: #0f172a;
  --light: #1e293b;
  --lighter: #1e293b;
}
[data-theme="dark"] body {
  background: #0f172a;
  color: #e2e8f0;
}
[data-theme="dark"] .sticky-active {
  background: rgba(15, 23, 42, 0.95);
}
[data-theme="dark"] p {
  color: #94a3b8;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f1f5f9;
}

/* ========================
   9. PRINT STYLES
   ======================== */
@media print {
  #preloader, .sticky-active, .vs-header2,
  .hamburger, #scrollBtn, #themeBtn,
  .video-modal, .search-popup, .side-menu,
  .mobile-menu-wrapper, .overlay2 {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}