/* Garoon motion: cases section. OWNER FILE: only the cases agent edits this file.
 * Tokens: see motion.css (:root). Hover rules only inside @media (hover:hover) and (pointer:fine).
 * Scope: every selector hangs on [data-barba-namespace="case"] (present in the HTML from first byte, unlike html[data-ns]).
 * Start states exist only under html.js-motion; .gm-c-fail (JS failsafe, 8 s) and html.gm-rm show everything. */

/* ---------- start states (before JS) ---------- */
html.js-motion [data-barba-namespace="case"] .main_header h2:not(.gm-ready),
html.js-motion [data-barba-namespace="case"] #description-text:not(.gm-ready),
html.js-motion [data-barba-namespace="case"] .main_item-text p:not(.gm-ready),
html.js-motion [data-barba-namespace="case"] .see_all p:not(.gm-ready) { visibility: hidden; }

html.js-motion [data-barba-namespace="case"] .main_header-description:not(.gm-in),
html.js-motion [data-barba-namespace="case"] .stats:not(.gm-in),
html.js-motion [data-barba-namespace="case"] .see_all a:not(.gm-in),
html.js-motion [data-barba-namespace="case"] .main_item-image:has(.lm):not(.gm-in) { opacity: 0; }

/* media wipe: clip-path only, never scale (twin mobile/desktop <img> get .gm-in from JS when hidden) */
html.js-motion [data-barba-namespace="case"] .main_item-image:not(:has(.lm)) :is(img, video):not(.gm-in),
html.js-motion [data-barba-namespace="case"] .works_slide .work_item > a > :is(img, video):not(.gm-in) { clip-path: inset(100% 0 0 0); }

/* failsafe + reduced motion */
html.js-motion [data-barba-namespace="case"].gm-c-fail :is(h2, #description-text, p, .main_header-description, .stats, .see_all a, .main_item-image, img, video) { visibility: visible !important; opacity: 1 !important; clip-path: none !important; }
html.gm-rm [data-barba-namespace="case"] :is(.main_header h2, #description-text, .main_item-text p, .see_all p) { visibility: visible !important; }
html.gm-rm [data-barba-namespace="case"] :is(.main_header-description, .stats, .see_all a, .main_item-image) { opacity: 1 !important; }
html.gm-rm [data-barba-namespace="case"] :is(.main_item-image, .work_item > a) :is(img, video) { clip-path: none !important; }

/* ---------- scroll hint: hidden on mobile ---------- */
@media (max-width: 500px) {
  [data-barba-namespace="case"] .main_header-description { display: none; }
}

/* ---------- "+" toggle: collapsed 3 lines, JS owns the state (old inline jQuery handlers are blocked in capture phase) ----------
 * Values 1:1 from the old site: max-height .6 s ease-in-out (.8 s while opening), "+" 45deg .6 s ease on open / .1 s on close. */
[data-barba-namespace="case"] .gm-clamp {
  overflow: hidden;
  max-height: var(--gm-h, 63px) !important;
  transition: max-height .6s ease-in-out !important;
}
[data-barba-namespace="case"] .gm-clamp.gm-open { transition: max-height .8s ease-in-out !important; }
[data-barba-namespace="case"] .gm-free { max-height: none !important; }
/* before JS: the same 3-line clamp the old inline script applied, so nothing jumps when it boots */
html.js-motion [data-barba-namespace="case"] .main_item-text:has(.toggle-button) p:not(.gm-clamp):not(.gm-free) { max-height: 66px; overflow: hidden; }
[data-barba-namespace="case"] .toggle-button { transition: transform .1s ease; transform: rotate(0deg); }
[data-barba-namespace="case"] .toggle-button.gm-open { transition: transform .6s ease; transform: rotate(45deg); }
[data-barba-namespace="case"] .toggle-button.gm-tb-off { display: none !important; }
[data-barba-namespace="case"] .toggle-button.gm-tb-on { display: inline-block !important; }
[data-barba-namespace="case"] .toggle-button:focus-visible { outline: 1px solid #e7e4e0; outline-offset: 4px; }
html.gm-rm [data-barba-namespace="case"] .gm-clamp,
html.gm-rm [data-barba-namespace="case"] .toggle-button { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-barba-namespace="case"] .gm-clamp, [data-barba-namespace="case"] .toggle-button { transition: none !important; }
}

/* ---------- "You might also like" cards: hover (same as /works, pure CSS) ---------- */
[data-barba-namespace="case"] .works_slide .work_item > a > :is(img, video) { transition: opacity var(--dur-micro) linear; }
@media (hover: hover) and (pointer: fine) {
  /* neighbours dim to 30% over the black page = 70% black veil on the media only, 167 ms linear (KOT) */
  [data-barba-namespace="case"] .works_slide .work_items_container:has(.work_item:hover) .work_item:not(:hover) > a > :is(img, video) { opacity: .3; }
}

/* defence: card-level clip rules of other areas (home) must never hide the "You might also like" cards on case pages;
 * the wipe here lives on the media inside the card */
[data-barba-namespace="case"] .works_slide .work_item { clip-path: none !important; }

/* original layout: See all keeps its arrow and the row its own borders (motion-home.css rules are not scoped) */
[data-barba-namespace="case"] .see_all { border-top-color: #9c958a !important; border-bottom-color: #9c958a !important; }
[data-barba-namespace="case"] .see_all a { clip-path: none !important; }
[data-barba-namespace="case"] .see_all a svg { transform: none !important; }
[data-barba-namespace="case"] .see_all a span { transform: none; }
[data-barba-namespace="case"] .see_all::before, [data-barba-namespace="case"] .see_all::after { display: none; }
[data-barba-namespace="case"] .see_all a::before { display: none; }
html body:has([data-barba-namespace="case"]) { background-color: #000; }
[data-barba-namespace="case"] { background-color: #000; }