:root {
  --ease-novaly: cubic-bezier(.2, .75, .25, 1);
  --micro-shift: 3px;
}

/* Animate the surface and its label while keeping the action's hit area still. */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .35s var(--ease-novaly);
}
.button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(ellipse 180px 100px at var(--light-x, 65%) var(--light-y, 50%), #ffffff24, transparent 75%);
  transition: opacity .35s ease;
  pointer-events: none;
}
.button > span:first-child { transition: translate .35s var(--ease-novaly); }
.button:focus-visible::before { opacity: 1; }
.button:active > span:first-child { translate: 0 1px; }
.button--outline:focus-visible { background: var(--ink); color: #fff; }
.button--bright:hover { background: #f8d26a; }

.company-row,
.complement-grid article,
.related-grid article,
.domains article {
  isolation: isolate;
  position: relative;
}
:is(.company-row, .complement-grid article, .related-grid article, .domains article)::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -1px -12px;
  border-radius: 8px;
  background: radial-gradient(ellipse 400px 220px at var(--light-x, 45%) var(--light-y, 50%), #d8c47329, transparent 78%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
:is(.company-row, .complement-grid article, .related-grid article, .domains article)::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), #bca03d, transparent);
  transition: transform .55s var(--ease-novaly);
  pointer-events: none;
}
:is(.company-row, .complement-grid article, .related-grid article, .domains article):focus-within::before { opacity: 1; }
:is(.company-row, .complement-grid article, .related-grid article, .domains article):focus-within::after { transform: scaleX(1); }
.row-title { display: inline-block; transition: translate .4s var(--ease-novaly); }
.row-logo .logo, .related-logo img { transition: scale .45s var(--ease-novaly); }
.company-row:focus-within .row-title { translate: var(--micro-shift) 0; }
.company-row:focus-within .row-logo .logo { scale: 1.025; }

.text-links a > span:first-child { transition: translate .3s var(--ease-novaly); }
.text-links a:focus-visible > span:first-child { translate: var(--micro-shift) 0; }
.photo figcaption::before { width: 30px; scale: .5 1; transform-origin: left; transition: scale .6s var(--ease-novaly); }
.photo:focus-within figcaption::before { scale: 1 1; }
.filters button {
  position: relative;
  transition: background .24s ease, color .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.filters button[aria-pressed='true'] { box-shadow: 0 3px 10px #151b151a; }
.filters button:active { box-shadow: inset 0 2px 4px #0002; }
.demo-panel :is(select, textarea) {
  transition: background .25s ease, border-color .25s ease, box-shadow .3s ease;
}
.demo-panel :is(select, textarea):focus-visible {
  border-color: var(--accent);
  background: #fffffc;
  box-shadow: 0 0 0 5px #38632c12;
}
.demo-panel label:has(+ :is(select, textarea):focus-visible) { color: var(--accent); }
.demo-result { overflow: hidden; }
.site-footer nav a {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: left calc(100% - 8px);
  background-repeat: no-repeat;
  transition: background-size .35s var(--ease-novaly), color .25s ease;
}
.site-footer nav a:focus-visible { background-size: 100% 1px; color: #fff4c9; }
.breadcrumb a { transition: color .25s ease, text-decoration-color .25s ease; }
.breadcrumb a:hover { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .button:hover::before { opacity: 1; }
  .button:hover > span:first-child { translate: calc(-1 * var(--micro-shift)) 0; }
  :is(.company-row, .complement-grid article, .related-grid article, .domains article):hover::before { opacity: 1; }
  :is(.company-row, .complement-grid article, .related-grid article, .domains article):hover::after { transform: scaleX(1); }
  .company-row:hover .row-title { translate: var(--micro-shift) 0; }
  .company-row:hover .row-logo .logo, .related-grid article:hover .related-logo img { scale: 1.025; }
  .text-links a:hover > span:first-child { translate: var(--micro-shift) 0; }
  .photo:hover figcaption::before { scale: 1 1; }
  .site-footer nav a:hover { background-size: 100% 1px; color: #fff4c9; text-decoration: none; }
}

/* Native, same-origin page changes; regular navigation remains the fallback. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: novaly-navigation; }
::view-transition-group(root) { animation-duration: .24s; }
::view-transition-old(root) { animation: novaly-page-out .18s ease-out both; }
::view-transition-new(root) { animation: novaly-page-in .24s ease-out both; }
::view-transition-group(novaly-navigation) { animation-duration: 0s; }
::view-transition-old(novaly-navigation) { display: none; }
::view-transition-new(novaly-navigation) { animation: none; }
@keyframes novaly-page-out { to { opacity: 0; } }
@keyframes novaly-page-in { from { opacity: 0; } }

html[data-motion='reduced'] { --micro-shift: 0px; }
html[data-motion='reduced'] :is(.row-logo .logo, .related-logo img) { scale: 1 !important; }
html[data-motion='reduced'] .button:active > span:first-child { translate: none; }
html[data-motion='reduced']::view-transition-group(*),
html[data-motion='reduced']::view-transition-old(*),
html[data-motion='reduced']::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root { --micro-shift: 0px; }
  :is(.row-logo .logo, .related-logo img) { scale: 1 !important; }
  .button:active > span:first-child { translate: none; }
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (forced-colors: active) {
  .button::before,
  :is(.company-row, .complement-grid article, .related-grid article, .domains article)::before,
  :is(.company-row, .complement-grid article, .related-grid article, .domains article)::after { content: none; }
  .site-footer nav a { background-image: none; }
  .site-footer nav a:hover { text-decoration: underline; }
}