/* ============================================================
   DGA Motion Standards
   Saudi Digital Government Authority — design.dga.gov.sa v1.0
   Higher Commission for Industrial Security (HCIS) website
   All motion is gated by prefers-reduced-motion: no-preference
   ============================================================ */

/* ── Motion Token Variables ────────────────────────────────────────────── */
:root {
  --dga-motion-instant:  0.1s;   /* micro-feedback: z-index flash, radio detail  */
  --dga-motion-fast:     0.2s;   /* hover states, input focus, icon rotate       */
  --dga-motion-standard: 0.3s;   /* checkbox, accordion open/close, table hover  */
  --dga-motion-panel:    0.4s;   /* sidepanel, mobile menu, hero fade, header    */
  --dga-motion-hero:     0.5s;   /* spinner cycle, hero content entrance         */
  --dga-ease:            ease-in-out;                     /* all major transitions */
  --dga-ease-micro:      cubic-bezier(0.4, 0, 0.2, 1);   /* interactive elements  */
}

/* ============================================================
   All animations below run ONLY when reduced-motion is off
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ── Page Entry ─────────────────────────────────────────────────────── */
  body {
    animation: dga-page-enter var(--dga-motion-standard) var(--dga-ease) both;
  }

  @keyframes dga-page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ── Scroll Reveal: Initial Hidden States ───────────────────────────── */
  /* Applied by dga-motion.js via IntersectionObserver.                    */
  /* Using only opacity + transform for GPU-composited, jank-free motion.  */

  .dga-reveal-heading {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dga-motion-panel) var(--dga-ease),
                transform var(--dga-motion-panel) var(--dga-ease);
  }

  .dga-reveal-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dga-motion-standard) var(--dga-ease),
                transform var(--dga-motion-standard) var(--dga-ease);
  }

  .dga-reveal-hero {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--dga-motion-hero) var(--dga-ease),
                transform var(--dga-motion-hero) var(--dga-ease);
  }

  .dga-reveal-img {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity var(--dga-motion-standard) var(--dga-ease),
                transform var(--dga-motion-standard) var(--dga-ease);
  }

  /* Visible state — added by JS once element enters viewport */
  .dga-is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Navigation: Header shrink on scroll ────────────────────────────── */
  .hcis-main-header-wrapper {
    transition: padding       var(--dga-motion-standard) var(--dga-ease),
                box-shadow    var(--dga-motion-standard) var(--dga-ease);
  }

  .hcis-main-header-wrapper.dga-header-scrolled {
    box-shadow: 0 2px 20px rgba(16, 24, 40, 0.10) !important;
  }

  /* ── Navigation: Dropdown menus ─────────────────────────────────────── */
  .hcis-main-header-wrapper .dropdown-menu {
    transition: opacity    var(--dga-motion-fast) var(--dga-ease),
                transform  var(--dga-motion-fast) var(--dga-ease);
  }

  /* ── Navigation: Mobile menu slide ──────────────────────────────────── */
  .navbar-collapse.collapsing {
    transition: height var(--dga-motion-panel) var(--dga-ease) !important;
  }

  /* ── Buttons ────────────────────────────────────────────────────────── */
  .btn {
    transition: background-color var(--dga-motion-fast) var(--dga-ease),
                color             var(--dga-motion-fast) var(--dga-ease),
                border-color      var(--dga-motion-fast) var(--dga-ease),
                box-shadow        var(--dga-motion-fast) var(--dga-ease),
                transform         var(--dga-motion-fast) var(--dga-ease) !important;
  }

  .btn:hover:not(:disabled) {
    transform: scale(1.02);
  }

  .btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: var(--dga-motion-instant) !important;
  }

  /* ── Interactive: Icon hover (micro-interaction easing) ─────────────── */
  .footer-social__icon {
    display: inline-flex;
    transition: transform var(--dga-motion-fast) var(--dga-ease-micro);
  }

  .footer-social__icon:hover {
    transform: scale(1.12);
  }

  /* ── Cards: Hover lift ──── */
  .card,
  .hcis-service-box,
  .learned-lesson-card,
  .regulation-card,
  .green-card,
  .hcis-media-card,
  .related-services-item {
    transition: box-shadow var(--dga-motion-standard) var(--dga-ease),
                transform  var(--dga-motion-standard) var(--dga-ease);
  }

  .card:hover,
  .hcis-service-box:hover,
  .learned-lesson-card:hover,
  .regulation-card:hover,
  .green-card:hover,
  .hcis-media-card:hover,
  .related-services-item:hover {
    transform: translateY(-4px);
    /* box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12) !important; */
  }

  /* Card image subtle zoom on card hover */
  .card .card-img,
  .card .card-img-top {
    transition: transform var(--dga-motion-standard) var(--dga-ease);
    overflow: hidden;
  }

  .card:hover .card-img,
  .card:hover .card-img-top {
    transform: scale(1.03);
  }

  /* ── Accordion / Collapsible panels ─────────────────────────────────── */
  .accordion-collapse {
    transition: height var(--dga-motion-standard) var(--dga-ease) !important;
  }

  /* Digital stamp collapsible */
  .digital-stamp-body {
    transition: max-height var(--dga-motion-standard) var(--dga-ease),
                opacity    var(--dga-motion-fast)     var(--dga-ease);
  }

  /* ── Forms & Inputs ─────────────────────────────────────────────────── */
  .form-control,
  .form-select,
  .form-control-sm,
  .form-control-lg {
    transition: border-color var(--dga-motion-fast) var(--dga-ease),
                box-shadow   var(--dga-motion-fast) var(--dga-ease) !important;
  }

  /* Checkbox / radio — exact DGA 0.3s standard */
  .form-check-input {
    transition: background-color var(--dga-motion-standard) var(--dga-ease),
                border-color     var(--dga-motion-standard) var(--dga-ease) !important;
  }

  /* ── Modal / Dialog ─────────────────────────────────────────────────── */
  .modal.fade .modal-dialog {
    transform: scale(0.95);
    transition: transform var(--dga-motion-standard) var(--dga-ease) !important;
  }

  .modal.show .modal-dialog {
    transform: scale(1);
  }

  /* ── Tab / Page transitions ─────────────────────────────────────────── */
  .tab-pane.fade {
    transition: opacity var(--dga-motion-standard) var(--dga-ease) !important;
  }

} /* end @media (prefers-reduced-motion: no-preference) */