/* Motion: short, quiet feedback when screens, panels and menus appear and when controls are
   hovered or pressed. Movement uses only the individual `translate` and `scale` properties, so it
   never replaces a component's own `transform`. Reduced motion (the system setting or
   Zobrazenie → Obmedziť animácie) turns all of it off at the end of this file. */
:root {
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --motion-slow: 280ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes tessera-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes tessera-rise-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes tessera-drop-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}
@keyframes tessera-enter-from-right {
  from {
    opacity: 0;
    translate: 16px 0;
  }
}
@keyframes tessera-enter-from-left {
  from {
    opacity: 0;
    translate: -12px 0;
  }
}

/* Screens: the document list and the editor fade in as they take over, the page settles last.
   Each plays when its element stops being display: none (home-open, [hidden]). */
#workspaceHome,
.appbar,
.formatbar,
.workspace {
  animation: tessera-fade-in var(--motion-base) var(--motion-ease) backwards;
}
#paper {
  animation: tessera-rise-in var(--motion-slow) var(--motion-ease) 60ms backwards;
}

/* Side panels slide in from the edge they are attached to. */
.inspector,
.studio-shell dialog.help-dialog[open] {
  animation: tessera-enter-from-right var(--motion-slow) var(--motion-ease) backwards;
}
.studio-outline,
#pageNavigator {
  animation: tessera-enter-from-left var(--motion-base) var(--motion-ease) backwards;
}
.inspectorview {
  animation: tessera-fade-in var(--motion-fast) var(--motion-ease) backwards;
}

/* Menus and popovers drop in from their trigger. */
.filemenu[open] > .menupopup,
.homesortmenu[open] > .homesorting,
.selectpopup,
.colorpopover,
.slashmenu,
#insertPopover,
#fieldPopover,
#usedFieldsList,
.help-topic[open] > ol {
  animation: tessera-drop-in var(--motion-fast) var(--motion-ease) backwards;
}
.filemenu > summary svg {
  transition: rotate var(--motion-base) var(--motion-ease);
}
.filemenu[open] > summary svg {
  rotate: 180deg;
}

dialog[open] {
  animation: tessera-rise-in var(--motion-base) var(--motion-ease) backwards;
}
dialog[open]::backdrop {
  animation: tessera-fade-in var(--motion-base) ease-out backwards;
}

#toast {
  translate: 0 8px;
  transition:
    opacity var(--motion-base) var(--motion-ease),
    translate var(--motion-base) var(--motion-ease);
}
#toast.show {
  translate: none;
}

/* Hover and press. The second selector matches design.css, which otherwise narrows the
   transition to background and color while the pointer is over a button. */
button,
button:hover:not(:disabled),
summary {
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    scale var(--motion-fast) var(--motion-ease),
    translate var(--motion-base) var(--motion-ease);
}
:is(button, summary):active:not(:disabled, [aria-disabled='true']) {
  scale: 0.97;
}
/* Full-width rows would visibly shrink at the edges; they answer with their background only. */
:is(
    .menupopup,
    .homesorting,
    .selectpopup,
    .slashmenu,
    #fields,
    #outline,
    #documentSearchResults,
    .usedfields,
    .checkextras,
    .scenariolist,
    .help-topic
  )
  :is(button, summary):active {
  scale: none;
}
.hometemplate:active:not(:disabled) {
  scale: 0.985;
}
.studio-shell .hometemplate .homepaper,
.guardcard .guardillustration,
.homeback svg {
  transition:
    border-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    translate var(--motion-base) var(--motion-ease);
}
@media (hover: hover) {
  .studio-shell .hometemplate:hover .homepaper {
    translate: 0 -3px;
    border-color: color-mix(in srgb, var(--ink) 20%, var(--line));
    box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--ink) 35%, transparent);
  }
  .guardcard:hover .guardillustration {
    translate: 0 -3px;
  }
  .homeback:hover svg {
    translate: -2px 0;
  }
}

/* Reduced motion: nothing fades, slides or scales; menus and panels simply appear. The
   attribute is set by main.js (and the inline scripts in the HTML pages) from Zobrazenie.
   Animations end at once instead of being removed: removing and restoring a name would replay
   every screen's entrance when the choice is switched back off. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    translate: none !important;
    scale: none !important;
    scroll-behavior: auto !important;
  }
}
:root[data-motion='reduce'] *,
:root[data-motion='reduce'] *::before,
:root[data-motion='reduce'] *::after,
:root[data-motion='reduce'] ::backdrop {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
  translate: none !important;
  scale: none !important;
  scroll-behavior: auto !important;
}