/**
 * Günal Global Otomotiv - Controlled Motion System
 *
 * Premium but restrained animations and micro-interactions.
 * Uses CSS transitions and native browser APIs first.
 * Respects prefers-reduced-motion throughout.
 *
 * @package GUNAL_Otomotiv
 */

/* ============================================================
   SCROLL REVEAL SYSTEM (data-reveal)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-reveal="fade-up"] { transform: translateY(24px); }
[data-reveal="fade-in"] { transform: none; }
[data-reveal="slide-left"] { transform: translateX(40px); }
[data-reveal="slide-right"] { transform: translateX(-40px); }
[data-reveal="scale-in"] { transform: scale(0.95); }

[data-reveal].is-revealed {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger delays */
[data-reveal-delay="0"] { transition-delay: 0ms; }
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="150"] { transition-delay: 150ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="250"] { transition-delay: 250ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }
[data-reveal-delay="600"] { transition-delay: 600ms; }
[data-reveal-delay="700"] { transition-delay: 700ms; }
[data-reveal-delay="800"] { transition-delay: 800ms; }

/* ============================================================
   BUTTON MICRO-INTERACTIONS
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: all var(--transition-base);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-eurorepar-light);
}

/* Pure CSS ripple on active */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(4, 4);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.btn:active::after {
  transform: scale(0, 0);
  opacity: 0.3;
  transition: 0s;
}

/* ============================================================
   ICON MICRO-INTERACTIONS
   ============================================================ */
.service-card__icon {
  transition: transform var(--transition-spring), background-color var(--transition-base), color var(--transition-base);
}

.service-card:hover .service-card__icon,
.service-card:focus-within .service-card__icon {
  transform: translateY(-4px) scale(1.05);
}

.service-card__arrow svg,
.category-card__icon svg,
.campaign-card__cta svg,
.btn svg,
.inline-arrow svg {
  transition: transform var(--transition-base);
}

.service-card:hover .service-card__arrow svg,
.service-card:focus-within .service-card__arrow svg,
.category-card:hover .category-card__icon svg,
.category-card:focus-within .category-card__icon svg,
.campaign-card:hover .campaign-card__cta svg,
.campaign-card:focus-within .campaign-card__cta svg,
.btn:hover svg,
.btn:focus-visible svg,
.inline-arrow:hover svg,
.inline-arrow:focus-visible svg {
  transform: translateX(3px);
}

/* Social icons */
.social-icon,
#site-header a[href*="facebook"] svg,
#site-header a[href*="instagram"] svg,
#site-header a[href*="youtube"] svg,
#site-header a[href*="tiktok"] svg,
#site-header a[href*="twitter"] svg {
  transition: transform var(--transition-base), color var(--transition-base);
}

.social-icon:hover,
#site-header a[href*="facebook"]:hover svg,
#site-header a[href*="instagram"]:hover svg,
#site-header a[href*="youtube"]:hover svg,
#site-header a[href*="tiktok"]:hover svg,
#site-header a[href*="twitter"]:hover svg {
  transform: scale(1.15);
}

/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   STICKY HEADER TRANSITION
   ============================================================ */
.site-header {
  backdrop-filter: blur(12px);
  transition:
    padding 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    backdrop-filter 0.2s ease,
    border-color 0.2s ease;
}

.site-header.is-compact {
  backdrop-filter: blur(24px);
  box-shadow: 0 10px 15px -3px rgba(31, 35, 40, 0.08), 0 4px 6px -4px rgba(31, 35, 40, 0.04);
}

/* ============================================================
   MEGA MENU TRANSITION
   ============================================================ */
.mega-menu-panel {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  transform-origin: top center;
}

.mega-menu-panel:not(.opacity-100) {
  transform: translateY(-8px);
}

.mega-menu-panel.opacity-100 {
  transform: translateY(0);
}

.mega-menu-backdrop {
  transition: opacity 0.2s ease;
}

/* ============================================================
   CARD HOVER MICRO-INTERACTIONS
   ============================================================ */
.card,
.service-card,
.category-card,
.campaign-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover,
.service-card:hover,
.category-card:hover,
.campaign-card:hover,
.card:focus-within,
.service-card:focus-within,
.category-card:focus-within,
.campaign-card:focus-within {
  transform: translateY(-2px);
}

/* will-change only on hover to avoid wasting compositor memory */
.service-card:hover .service-card__media img,
.campaign-card:hover .campaign-card__media img,
.service-card:hover .service-card__icon,
.category-card:hover .category-card__icon,
.btn:hover,
.quick-contact__btn:hover,
.social-icon:hover,
#site-header a[href*="facebook"]:hover svg,
#site-header a[href*="instagram"]:hover svg,
#site-header a[href*="youtube"]:hover svg,
#site-header a[href*="tiktok"]:hover svg,
#site-header a[href*="twitter"]:hover svg,
.site-footer__social-link:hover,
.inline-arrow:hover svg,
.btn:hover svg {
  will-change: transform;
}

/* ============================================================
   FAQ ACCORDION MICRO-INTERACTIONS
   ============================================================ */
details[open] > summary .faq-icon,
details[open] > summary .faq-arrow {
  transition: transform var(--transition-base);
}

/* ============================================================
   PREFERS REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .btn::after,
  .btn svg,
  .card,
  .service-card,
  .category-card,
  .campaign-card,
  .service-card__icon,
  .service-card__arrow svg,
  .category-card__icon svg,
  .campaign-card__cta svg,
  .social-icon,
  #site-header a[href*="facebook"] svg,
  #site-header a[href*="instagram"] svg,
  #site-header a[href*="youtube"] svg,
  #site-header a[href*="tiktok"] svg,
  #site-header a[href*="twitter"] svg,
  .site-header,
  .mega-menu-panel,
  .mega-menu-backdrop,
  details[open] > summary .faq-icon,
  details[open] > summary .faq-arrow {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  .btn::after {
    display: none;
  }
}