:root {
  --motion-arrive: cubic-bezier(.16, 1, .3, 1);
  --motion-state: cubic-bezier(.23, 1, .32, 1);
}

/* The headline remains real, selectable HTML when scripting is unavailable. */
.cinema h1 { animation: none; }
.motion-line { display: block; overflow: clip; padding-block: .06em; margin-block: -.06em; }
.motion-line > span { display: block; }
.motion-line-emphasis { color: #c5dcf8; }
.cinema-content > .intro, .cinema-content > .actions, .cinema-content > .fine { opacity: 1; }

.reading-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background: #a9cfff;
  transform: scaleX(0);
  transform-origin: left center;
}
header { transition: background-color 180ms ease; }
header.motion-scrolled { background-color: #07111d; }
.links a { position: relative; }
.links a::after {
  content: "";
  position: absolute;
  inset: auto 0 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--motion-state);
}
.links a[aria-current="location"]::after { transform: scaleX(1); }
.btn {
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, transform 140ms var(--motion-state);
}
.btn:active { transform: scale(.975); }
.btn:focus-visible:active { transform: none; }
.operation-list a {
  transition: color 180ms ease, background-color 180ms ease;
}
.operation-list a > span { transition: transform 220ms var(--motion-state); }
.operation-list a[data-selected] { color: #1559d6; }
.operation-list a[data-selected] small { color: #254e83; }
.contact select { transition: border-color 150ms ease, background-color 150ms ease; }
.contact select:focus { border-color: #a9cfff; background-color: #1b3856; }
.faq summary { display: flex; gap: 22px; justify-content: space-between; align-items: center; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 200ms var(--motion-state);
  margin-right: 5px;
}
.faq details[open] > summary::after { transform: rotate(225deg); }
.faq summary:focus-visible::after { transition: none; }
.faq-answer > p { margin-block: 12px 0; padding-bottom: 4px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.975); }
  .operation-list a:hover > span:first-child { transform: translateX(5px); }
  .operation-list a:hover > span:last-child { transform: translate(3px, -3px); }
  .links a:hover::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .cinema-image { animation: motion-camera 4.6s var(--motion-arrive) both; }
  .motion-line > span {
    animation: motion-title 760ms var(--motion-arrive) both;
    animation-delay: calc(var(--line-index, 0) * 85ms);
  }
  .cinema-content > .intro { animation: motion-support 620ms var(--motion-arrive) 170ms both; }
  .cinema-content > .actions { animation: motion-support 580ms var(--motion-arrive) 240ms both; }
  .cinema-content > .fine { animation: motion-support 500ms var(--motion-arrive) 290ms both; }
}
@keyframes motion-title {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes motion-support {
  from { opacity: .4; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes motion-camera {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-line { overflow: visible; }
  .motion-line > span, .cinema-image, .cinema-content > .intro,
  .cinema-content > .actions, .cinema-content > .fine {
    animation: none !important;
    transform: none;
    opacity: 1;
  }
  .btn:active { transform: none; }
  header, .btn, .links a::after, .operation-list a,
  .operation-list a > span, .faq summary::after, .contact select {
    transition: background-color 100ms linear, color 100ms linear;
  }
}