/* ==========================================================================
   Animations — CSS owns hover / focus states, the menu reveal, the page transition
   mask and the pre-reveal states of above-the-fold parts. GSAP (assets/js) owns load
   timelines and scroll motion; the custom cursor is assets/js/animations/cursor.js.

   Motion system (UI redesign §14): --dur-micro 240ms / --dur-normal 400ms /
   --dur-large 600ms, one easing --ease-out cubic-bezier(.22, 1, .36, 1). No bounce.

   Pre-reveal states apply only under html.motion, which the inline head script sets
   when JS runs and reduced motion is off; a failsafe removes it after 2.5s if the
   motion code never reports ready, so nothing can stay hidden.
   ========================================================================== */

/* ---------- transitions ---------- */

.arrow,
.global-menu__en {
  transition: transform var(--dur-normal) var(--ease-out);
}

.footer-nav a,
.footer-legal a,
.global-menu__legal a {
  transition: opacity var(--dur-micro) ease;
}

.problem-card__img,
.works-card__img,
.people-card__img,
.featured-work__img,
.works-row__thumb img {
  transition: transform var(--dur-large) var(--ease-out);
}

.problem-card__link::after {
  transition: opacity var(--dur-normal) ease;
}

.problem-card__num,
.problem-card__title,
.recruit-cta__copy {
  transition: transform var(--dur-normal) var(--ease-out);
}

.problem-card__arrow,
.works-card__arrow {
  transition: opacity var(--dur-micro) ease, transform var(--dur-normal) var(--ease-out);
}

.recruit-cta__brush {
  transition: transform var(--dur-large) var(--ease-out), filter var(--dur-large) var(--ease-out);
}

/* ---------- hover (devices that really hover) ---------- */

@media (hover: hover) {
  .global-nav__link:hover .global-nav__label::after { clip-path: inset(0 0 0 0); }
  .global-nav__link:hover .global-nav__num { color: var(--color-brand-text); }

  /* Primary CTA: paint runs left to right, type turns white, the arrow moves up-right. */
  .cta-primary:hover { color: var(--color-white); }
  .cta-primary:hover::before { clip-path: inset(0 0 0 0); }
  .cta-primary:hover::after { opacity: 0; }
  .cta-primary:hover .arrow--ne { transform: translate(6px, -6px) rotate(-45deg); }

  /* Secondary link: the line is drawn in red, the arrow moves 10px. */
  .text-link:hover::after { transform: scaleX(1); }
  .text-link:hover > .arrow { transform: translateX(10px); }
  .text-link:not(.text-link--light):hover { color: var(--color-brand-text); }

  a:hover > .arrow { transform: translateX(6px); }

  .menu-button[aria-expanded="false"]:hover .menu-button__lines span:last-child { transform: none; }

  .global-menu__link:hover .global-menu__en { transform: translateX(8px); }
  .global-menu__link:hover .global-menu__num { color: var(--color-brand); }
  .global-menu__link:hover .global-menu__en::after { animation: brush-run var(--dur-large) var(--ease-out) forwards; }

  /* RECRUIT CTA: a few pixels only. */
  .recruit-cta:hover .recruit-cta__brush { transform: translate(8px, -6px); filter: saturate(1.15) contrast(1.06); }
  .recruit-cta:hover .recruit-cta__copy { transform: translateX(2px); }
  .recruit-cta:hover .arrow--ne { transform: translate(8px, -8px) rotate(-45deg); }

  .footer-nav a:hover,
  .footer-legal a:hover,
  .global-menu__legal a:hover { opacity: .65; }

  .breadcrumb a:hover { text-decoration-color: currentColor; }

  /* PROBLEM (spec §15): image 1.035, lighter overlay, number and title up 4px, arrow in. */
  .problem-card__link:hover .problem-card__img { transform: scale(1.035); }
  .problem-card__link:hover::after { opacity: .82; }
  .problem-card__link:hover :is(.problem-card__num, .problem-card__title) { transform: translateY(-4px); }
  .problem-card__link:hover .problem-card__arrow { opacity: 1; transform: none; }

  /* WORKS (spec §19, UI §9): image 1.03, thin arrow beside the title. */
  a.works-card__link:hover .works-card__img,
  .featured-work__link:hover .featured-work__img { transform: scale(1.03); }
  a.works-card__link:hover .works-card__arrow { opacity: 1; transform: none; }

  /* PEOPLE (spec §21): scale 1.02 only. */
  .people-card:hover .people-card__img { transform: scale(1.02); }

  .service-panel:hover .service-panel__title { text-decoration: underline 1px; text-underline-offset: .22em; }
}

/* ---------- the same states for keyboard focus ---------- */

.global-nav__link:focus-visible .global-nav__label::after { clip-path: inset(0 0 0 0); }
.global-nav__link:focus-visible .global-nav__num { color: var(--color-brand-text); }

.cta-primary:focus-visible { color: var(--color-white); }
.cta-primary:focus-visible::before { clip-path: inset(0 0 0 0); }
.cta-primary:focus-visible::after { opacity: 0; }

.text-link:focus-visible::after { transform: scaleX(1); }

.global-menu__link:focus-visible .global-menu__num { color: var(--color-brand); }
.global-menu__link:focus-visible .global-menu__en::after { animation: brush-run var(--dur-large) var(--ease-out) forwards; }

/* A thin orange brush runs behind the word once, then stays faint. */
@keyframes brush-run {
  0% { clip-path: inset(0 100% 0 0); opacity: .9; }
  60% { clip-path: inset(0 0 0 0); opacity: .9; }
  100% { clip-path: inset(0 0 0 0); opacity: .32; }
}

.problem-card__link:focus-visible .problem-card__arrow,
a.works-card__link:focus-visible .works-card__arrow {
  opacity: 1;
  transform: none;
}

/* ---------- menu: navy plane → items → labels → brush ---------- */

.global-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-large) var(--ease-draw);
}

.global-menu.is-open {
  clip-path: inset(0 0 0 0);
}

.global-menu__item,
.global-menu__side {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-normal) ease, transform var(--dur-large) var(--ease-out);
}

.global-menu__ja,
.global-menu__words {
  opacity: 0;
  transition: opacity var(--dur-large) ease;
}

.global-menu__brush {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-draw);
}

.global-menu.is-open .global-menu__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(.28s + var(--i) * .05s);
}

.global-menu.is-open .global-menu__ja {
  opacity: 1;
  transition-delay: calc(.5s + var(--i) * .05s);
}

.global-menu.is-open .global-menu__words {
  opacity: 1;
  transition-delay: .4s;
}

.global-menu.is-open .global-menu__side {
  opacity: 1;
  transform: none;
  transition-delay: .6s;
}

.global-menu.is-open .global-menu__brush {
  clip-path: inset(0 0 0 0);
  transition-delay: .45s;
}

/* ---------- page transition (spec §42): navy mask 250ms out → load → 450ms in ---------- */

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--color-navy-deep);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.page-transition.is-leaving {
  transform: scaleY(1);
  transition: transform .25s var(--ease-in-out);
}

html.is-arriving .page-transition {
  transform: scaleY(1);
  transform-origin: 50% 0;
}

html.is-arriving.is-arrived .page-transition {
  transform: scaleY(0);
  transition: transform .45s var(--ease-in-out);
}

/* ---------- pre-reveal states (above the fold only) ---------- */

.motion:not(.motion-ready) .view-home .site-header,
.motion:not(.motion-ready) [data-hero-part],
.motion:not(.motion-ready) [data-sub-part] {
  opacity: 0;
}

/* ---------- no JavaScript ---------- */

.no-js .menu-button { display: none; }

@media (min-width: 1024px) and (max-width: 1279px) {
  /* The nav is folded into the menu here; without JS show the nav instead of nothing. */
  .no-js .global-nav { display: flex; }
}

/* ---------- reduced motion (spec §48) ---------- */

@media (prefers-reduced-motion: reduce) {
  .arrow,
  .global-menu__en,
  .site-header.is-hidden,
  .problem-card__num,
  .problem-card__title,
  .problem-card__img,
  .works-card__img,
  .people-card__img,
  .recruit-cta__brush,
  .recruit-cta__copy {
    transform: none !important;
  }

  .arrow--ne { transform: rotate(-45deg) !important; }

  .global-menu,
  .global-menu.is-open,
  .global-menu__brush {
    clip-path: none;
  }

  .global-menu__item,
  .global-menu__ja,
  .global-menu__side,
  .global-menu__words {
    opacity: 1;
    transform: none;
  }

  .page-transition { display: none; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .global-menu__words { transform: translateY(-50%); }
}