/* Shared motion for the three standalone sample sites. Content stays visible without JS. */
html { scroll-behavior: smooth; }
body {
  --motion-accent: #3fa9f5;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
body[data-motion-theme="recruit"] { --motion-accent: #1f7a4a; }
body[data-motion-theme="gas"] { --motion-accent: #8a3b1f; }
section[id] { scroll-margin-top: 24px; }

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  inset: auto 12px 5px;
  height: 2px;
  background: var(--motion-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--motion-ease);
}
.nav-link:focus-visible::after { transform: scaleX(1); }
main a, main button, .menu-btn {
  transition: translate .25s var(--motion-ease), box-shadow .25s ease,
    background-color .25s ease, color .25s ease;
}
main a span[aria-hidden="true"] {
  display: inline-block;
  transition: transform .3s var(--motion-ease);
}
main a:focus-visible span[aria-hidden="true"] { transform: translateX(5px); }
main a:active, main button:active { translate: 0 1px; }

.hero-photo { overflow: hidden; }
/* The gas sample's offset picture frame extends outside the figure. */
[data-motion-theme="gas"] .hero-photo { overflow: visible; }
[data-motion-theme="denki"] .h1 span:last-child {
  width: fit-content;
  padding-bottom: 4px;
  background: linear-gradient(#3fa9f5, #3fa9f5) left bottom / 100% 5px no-repeat;
}
[data-motion-theme="denki"] .hero-copy.is-entered .h1 span:last-child {
  animation: sample-underline .8s .55s var(--motion-ease) both;
}
@keyframes sample-underline {
  from { background-size: 0% 5px; }
  to { background-size: 100% 5px; }
}

#works li > div:first-child, #voice li > div:first-child { overflow: hidden; }
#works li img, #voice li img {
  transition: transform .7s var(--motion-ease);
}
#works li, #voice li, #jobs li, .numbers li {
  transition: translate .35s var(--motion-ease), box-shadow .35s ease;
}
.file-drop { transition: border-color .25s ease, background-color .25s ease; }
.file-drop svg { transition: transform .35s var(--motion-ease); }
.file-drop:focus-within {
  border-color: #8a3b1f !important;
  background-color: #f3ebdd !important;
}
.file-drop:focus-within svg { transform: translateY(-4px); }
input, select, textarea { transition: box-shadow .25s ease; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--motion-accent) 12%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after { transform: scaleX(1); }
  main a:hover span[aria-hidden="true"] { transform: translateX(5px); }
  main a[style*="min-height: 5"]:hover,
  main a[style*="min-height: 6"]:hover, main button:hover {
    translate: 0 -3px;
    box-shadow: 0 10px 24px rgb(0 0 0 / .16);
  }
  #works li:hover, #voice li:hover, #jobs li:hover, .numbers li:hover {
    translate: 0 -6px;
    box-shadow: 0 16px 32px rgb(0 0 0 / .1);
  }
  #works li:hover img, #voice li:hover img { transform: scale(1.045); }
  .file-drop:hover {
    border-color: #8a3b1f !important;
    background-color: #f3ebdd !important;
  }
  .file-drop:hover svg { transform: translateY(-4px); }
}
/* Do not hide pending content for printing, keyboard navigation or reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .motion-pending { opacity: 0; }
  .motion-pending:focus-within { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  main a, main button, #works li, #voice li, #jobs li, .numbers li { translate: none !important; }
  #works li img, #voice li img, .file-drop svg { transform: none !important; }
}
@media print {
  .motion-pending { opacity: 1 !important; }
}