/* Editorial motion: the words remain in the page and fully readable without JavaScript. */
.reading-copy [data-reading-line] { display: block; }

.has-motion [data-reveal].reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity .85s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}
.has-motion [data-reveal].reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Two interaction families: contrast for actions, one rule for navigation.
   The generator assigns data-interaction to every action and link. */
:root {
  --interaction-duration: .4s;
  --interaction-ease: cubic-bezier(.22, .7, .22, 1);
  --interaction-dark: #211e25;
  --interaction-light: #fffdfa;
}

/* 01 — Action buttons: a soft surface wipe, with one restrained content shift. */
[data-interaction="button"] {
  --button-bg: rgba(255, 255, 255, .76);
  --button-ink: var(--interaction-dark);
  --button-border: var(--interaction-dark);
  --interaction-hover-bg: var(--interaction-dark);
  --interaction-hover-ink: var(--interaction-light);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--button-border) !important;
  background: var(--button-bg) !important;
  color: var(--button-ink);
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
  user-select: none;
  transition: color .36s var(--interaction-ease) .04s;
}
[data-interaction="button"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2px;
  background: var(--interaction-hover-bg);
  border-radius: 65% 65% 0 0;
  transform: translateY(103%);
  transition: transform .52s cubic-bezier(.22, .8, .25, 1),
    border-radius .52s cubic-bezier(.22, .8, .25, 1);
  pointer-events: none;
}
.interaction-button-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  max-width: 100%;
  font: inherit;
  line-height: inherit;
  transform: translateY(0);
  transition: transform .48s var(--interaction-ease);
}
.interaction-button-content [data-interaction-arrow] { flex: 0 0 auto; }
:is(.button.dark, .client-logos-toggle)[data-interaction="button"] {
  --button-bg: var(--interaction-dark);
  --button-ink: var(--interaction-light);
  --interaction-hover-bg: var(--interaction-light);
  --interaction-hover-ink: var(--interaction-dark);
}
.nav .nav-cta[data-interaction="button"] { --button-bg: #fff8; }
.interior-cta .button[data-interaction="button"] {
  --button-bg: #fff9f6;
  --button-ink: #24212c;
  --button-border: var(--interaction-light);
  --interaction-hover-bg: var(--interaction-dark);
  --interaction-hover-ink: var(--interaction-light);
}
[data-interaction="button"]:focus-visible {
  color: var(--interaction-hover-ink) !important;
}
[data-interaction="button"]:focus-visible::before { transform: translateY(0); border-radius: 0; }
[data-interaction="button"]:focus-visible .interaction-button-content { transform: translateY(-1px); }

/* 02 — Text, card and image links: one fine rule travels under the label. */
[data-interaction="link"] {
  position: relative;
  text-decoration: none !important;
}
[data-interaction-label] {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  text-decoration: none !important;
  transform: none !important;
}
[data-interaction="link"]:not(:has([data-interaction-label]))::after,
[data-interaction="link"] [data-interaction-label]::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.12em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--interaction-duration) var(--interaction-ease);
  pointer-events: none;
}
[data-interaction="link"]:has([data-interaction-label])::after { content: none !important; }
.work-media[data-interaction="link"]::after { bottom: 0; background: #fff; mix-blend-mode: difference; }
[data-interaction="link"]:focus-visible:not(:has([data-interaction-label]))::after,
[data-interaction="link"]:focus-visible [data-interaction-label]::after { transform: scaleX(1); }

/* Arrows use shared timing: along the link, or diagonally inside a button. */
[data-interaction-arrow] {
  display: inline-block;
  transform: none !important;
  background: none !important;
  transition: transform var(--interaction-duration) var(--interaction-ease) !important;
}
:is([data-interaction="button"], [data-interaction="link"]):focus-visible [data-interaction-arrow] {
  transform: translateX(3px) !important;
}
[data-interaction="button"]:focus-visible [data-interaction-arrow] { transform: translate(2px, -2px) !important; }

/* Keep each existing ink colour rather than adding a second hover colour cue. */
.home-vision-bridge a { --interaction-ink: #5d3e6f; }
.work-all-link { --interaction-ink: #423846; }
.work-detail-link { --interaction-ink: #25212b; }
.service-engagement-link { --interaction-ink: #5c4764; }
.home-spatial-head > a { --interaction-ink: #594166; }
.about-invitation a { --interaction-ink: #f0d5ef; }
.breadcrumb a { --interaction-ink: #706672; }
.home-art-link { --interaction-ink: #27232b; }
.art-index-feature > a { --interaction-ink: #28242d; }

/* Existing lines on editorial links are replaced by the shared moving rule.
   Card separators and their original backgrounds remain part of the layout. */
.home-vision-bridge a,
.work-all-link,
.work-detail-link,
.service-engagement-link,
.home-spatial-head > a,
.about-harmony-links a,
.about-philosophy-teaser a,
.about-invitation a,
.home-art-copy .text-link,
.home-art-copy .home-art-cta,
.art-index-copy .text-link,
.art-index-copy .art-index-cta {
  border-bottom-color: transparent !important;
  text-decoration: none !important;
}
.logo:hover { text-decoration: none !important; }
.offer-back-link { text-decoration: none; }
.offer-back-link a { display: inline-block; }
.footer-sitemap a { justify-self: start; }
.footer-contact a { align-self: start; }

/* Eliminate previous image zooms, card lifts, hover tints and decorative rules.
   A card uses its primary label and arrow, exactly like any other text link. */
.service,
.related-card,
.work-more,
.work-item {
  transform: none !important;
  box-shadow: none !important;
  transition: none;
}
.related-card,
.related-card:hover { border-color: #eae0e9; }
.service-support-link,
.service-support-link:hover { background: transparent; transition: none; }
.work-more,
.work-more:hover { background: #eee8f1; }
.line-grid article:hover { background: transparent; }
.method-steps article::before,
.method-steps article:hover::before { width: 0; transition: none; }
.work-media img,
.home-work-media img,
.home-art-media img,
.art-index-media img {
  transform: none !important;
  transition: none !important;
}
.home-art-link .home-art-copy .text-link,
.home-art-link .home-art-copy .home-art-cta,
.home-art-link:hover .home-art-copy .text-link,
.home-art-link:hover .home-art-copy .home-art-cta { color: #594166; }
.art-index-feature > a .text-link,
.art-index-feature > a .art-index-cta,
.art-index-feature > a:hover .text-link,
.art-index-feature > a:hover .art-index-cta { color: #634a6d; }
.service-inquiry-link:hover h3 { color: inherit; }
.service-core :is(h2, h3) a [data-interaction-label] {
  margin-left: 0;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  transition: none;
}

/* Keyboard interaction is visible on every action, including form controls. */
:is([data-interaction="button"], [data-interaction="link"]):focus-visible {
  outline: 2px solid #7b58bb;
  outline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
  [data-interaction="button"]:hover {
    color: var(--interaction-hover-ink) !important;
  }
  [data-interaction="button"]:hover::before { transform: translateY(0); border-radius: 0; }
  [data-interaction="button"]:hover .interaction-button-content { transform: translateY(-1px); }
  [data-interaction="link"]:hover {
    color: var(--interaction-ink, inherit) !important;
    text-decoration: none !important;
  }
  [data-interaction="link"]:hover:not(:has([data-interaction-label]))::after,
  [data-interaction="link"]:hover [data-interaction-label]::after { transform: scaleX(1); }
  :is([data-interaction="button"], [data-interaction="link"]):hover [data-interaction-arrow] {
    transform: translateX(3px) !important;
  }
  [data-interaction="button"]:hover [data-interaction-arrow] { transform: translate(2px, -2px) !important; }
}

@media (hover: none) {
  [data-interaction="button"]:active {
    color: var(--interaction-hover-ink) !important;
  }
  [data-interaction="button"]:active::before { transform: translateY(0); border-radius: 0; }
  [data-interaction="link"]:active:not(:has([data-interaction-label]))::after,
  [data-interaction="link"]:active [data-interaction-label]::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal].reveal,
  .has-motion [data-reveal].reveal.is-visible,
  [data-reading-line] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-interaction],
  [data-interaction="button"]::before,
  .interaction-button-content,
  [data-interaction-arrow],
  [data-interaction-label]::after,
  [data-interaction="link"]::after { transition: none !important; }
  [data-interaction-arrow] { transform: none !important; }
  .interaction-button-content { transform: none !important; }
  :is([data-interaction="button"], [data-interaction="link"]):is(:hover, :focus-visible) [data-interaction-arrow] {
    transform: none !important;
  }
}