/* Garoon motion: works section. OWNER FILE: only the works agent edits this file.
 * Tokens: see motion.css (:root). Hover rules only inside @media (hover:hover) and (pointer:fine).
 * Scope: [data-barba-namespace="works"] (set by PHP on the container, present before first paint). */

/* ---------- title "Works": line mask (JS wraps the text node, see works.js) ---------- */
html.js-motion:not(.gm-rm) [data-barba-namespace="works"] .works_header h1:not(.gm-ready) {
  visibility: hidden;
  animation: gm-works-unhide 0s linear 8s forwards; /* failsafe if the module never runs */
}
@keyframes gm-works-unhide { to { visibility: visible; } }
[data-barba-namespace="works"] .works_header h1 .gm-line { display: block; overflow: hidden; padding: .1em 0; margin: -.1em 0; }
[data-barba-namespace="works"] .works_header h1 .gm-line__in { display: block; will-change: transform; }

/* ---------- filters: colour 167 ms linear (KOT); underline keeps 300 ms linear ---------- */
[data-barba-namespace="works"] .tag_item { transition: color 167ms linear, background-color 167ms linear; }
[data-barba-namespace="works"] .tag_item span:before { transition: width 300ms linear, background-color 300ms linear; }
[data-barba-namespace="works"] .work_items_container { will-change: opacity; }

/* ---------- card entrance: clip-path from the bottom (start state; GSAP animates it) ---------- */
html.js-motion:not(.gm-rm) [data-barba-namespace="works"] .work_item:not(.gm-in) { clip-path: inset(100% 0 0 0); }
.gm-rm [data-barba-namespace="works"] .work_item { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-barba-namespace="works"] .work_item { clip-path: none !important; }
}

/* ---------- hover: dim the neighbours' media 70 % (167 ms linear), underline stays as is ----------
 * img/video cannot carry ::after, so the media opacity goes 1 -> .3 over the near-black page (#0d0d0d):
 * same pixels as a 70 % #000 layer (+-9/255). Pure CSS, no JS, no filter, no scale. */
@media (hover: hover) and (pointer: fine) {
  [data-barba-namespace="works"] .work_item img,
  [data-barba-namespace="works"] .work_item video.work_cover,
  [data-barba-namespace="works"] .work_item #preloader_ { transition: opacity 167ms linear; }
  [data-barba-namespace="works"] .work_items_container:has(.work_item:hover) .work_item:not(:hover) img,
  [data-barba-namespace="works"] .work_items_container:has(.work_item:hover) .work_item:not(:hover) video.work_cover,
  [data-barba-namespace="works"] .work_items_container:has(.work_item:hover) .work_item:not(:hover) #preloader_ { opacity: .3; }
}
/* touch: no sticky hover */
@media (hover: none), (pointer: coarse) {
  [data-barba-namespace="works"] .work_item:hover .slider_text p:before { width: 0; }
  [data-barba-namespace="works"] .works_header-title:hover svg { transform: none; transition: none; }
}

/* ---------- Arca card logo loop: transform-only (WAAPI in works.js replaces the 26 ms setInterval) ---------- */
[data-barba-namespace="works"] #preloader_ .gm-logo { width: 150px; height: max-content; overflow: visible; flex: none; transition: none; transform: scale(0); transform-origin: 50% 50%; }
[data-barba-namespace="works"] #preloader_ .gm-part { width: 48px; height: 48px; flex: none; position: relative; transition: none; transform-origin: 50% 50%; }