/* ==========================================================================
   Arshan – Global motion & interaction layer
   Load LAST on every page (after component and demo stylesheets).
   Uses the --ar-* motion tokens defined in style.css. Everything here is
   transform/opacity based, and prefers-reduced-motion switches it off
   (see the end of this file and the base rule in style.css).
   --------------------------------------------------------------------------
   1. Accordions / FAQ (<details>; height is animated by main.js)
   2. Tabs, filters, lightbox
   3. Component transition timing
   4. Card hover
   5. Scroll reveal  [data-ar-reveal] / [data-ar-reveal-group]
   6. Reduced motion
   ========================================================================== */

/* 1. Accordions / FAQ ------------------------------------------------------ */
details > summary { -webkit-tap-highlight-color: transparent; }
:is(.faq-x, .faq-list, [data-accordion], .ar-accordion) details > summary,
:is(.faq-x, .faq-list, [data-accordion], .ar-accordion) details > summary .icon {
  transition: color var(--ar-transition-base), background-color var(--ar-transition-base), transform var(--ar-transition-slow);
}
:is(.faq-x, .faq-list, [data-accordion], .ar-accordion) details {
  transition: border-color var(--ar-transition-base), box-shadow var(--ar-transition-base), background-color var(--ar-transition-base);
}
/* main.js animates the height of a <details> while it opens or closes */
details.is-animating { overflow: hidden; }

/* 2. Tabs, filters, lightbox ---------------------------------------------- */
@keyframes ar-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ar-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ar-scale-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.ar-tab-in { animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out) both; }
.ar-filter-in { animation: ar-scale-in var(--ar-dur-slow) var(--ar-ease-out) both; }
[role="tab"] { transition: color var(--ar-transition-base), background-color var(--ar-transition-base), border-color var(--ar-transition-base), box-shadow var(--ar-transition-base); }

dialog.lightbox[open] { animation: ar-scale-in var(--ar-dur-slow) var(--ar-ease-out); }
dialog.lightbox[open]::backdrop { animation: ar-fade-in var(--ar-dur-base) var(--ar-ease-standard); }

/* 3. Component transition timing ------------------------------------------ */
.hdr-dd, .hdr-mega { transition-duration: var(--ar-dur-base); transition-timing-function: var(--ar-ease-out); }
.filter-btn { transition: background-color var(--ar-transition-base), border-color var(--ar-transition-base), color var(--ar-transition-base), box-shadow var(--ar-transition-base); }
.demo-card .thumb { transition: transform var(--ar-dur-slow) var(--ar-ease-out), box-shadow var(--ar-dur-slow) var(--ar-ease-out); }
.demo-card .thumb__art { transition: transform 600ms var(--ar-ease-out); }
.demo-card:hover .thumb__art { transform: scale(1.03); }

/* 4. Card hover ------------------------------------------------------------ */
.feature, .lib-col, .el-link, .f-card, .plan {
  transition: transform var(--ar-dur-slow) var(--ar-ease-out), box-shadow var(--ar-dur-slow) var(--ar-ease-out), border-color var(--ar-transition-base);
}
@media (hover: hover) {
  .feature:hover, .lib-col:hover, .f-card:hover { transform: translateY(-4px); border-color: var(--primary-100); box-shadow: var(--shadow); }
  .plan:hover { transform: translateY(-4px); }
}

/* 5. Scroll reveal ----------------------------------------------------------
   <div data-ar-reveal>            fade-up (default)
   <div data-ar-reveal="fade">     fade only
   <div data-ar-reveal="scale">    subtle scale-in
   <div data-ar-reveal-group>      reveals its direct children with a stagger
   Hidden only once main.js marks the page with .ar-js, so content is always
   visible without JavaScript.                                                */
.ar-js [data-ar-reveal] {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity var(--ar-dur-reveal) var(--ar-ease-out), transform var(--ar-dur-reveal) var(--ar-ease-out);
  transition-delay: calc(var(--ar-stagger, 0) * 80ms);
}
.ar-js [data-ar-reveal="fade"] { transform: none; }
.ar-js [data-ar-reveal="scale"] { transform: scale(.96); }
.ar-js [data-ar-reveal].is-revealed { opacity: 1; transform: none; }

/* 6. Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ar-js [data-ar-reveal] { opacity: 1 !important; transform: none !important; }
  .ar-tab-in, .ar-filter-in, dialog.lightbox[open], dialog.lightbox[open]::backdrop { animation: none !important; }
  .feature:hover, .lib-col:hover, .f-card:hover, .plan:hover, .demo-card:hover .thumb__art { transform: none; }
}