/* Content is visible by default. Only finite Web Animations hide entering items. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-accent: var(--accent, var(--signal, var(--rose, currentColor)));
}
.screen:not([hidden]) { animation: none; }
.motion-clip {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: .16em;
  vertical-align: bottom;
}
.motion-word { display: inline-block; transform-origin: 0 100%; }

.motion-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font: 12px/1.4 system-ui, sans-serif;
}
.motion-controls button {
  font: inherit; color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 3px;
  padding: 7px 11px; cursor: pointer;
}
.motion-controls label { display: flex; align-items: center; gap: 6px; }
.motion-controls button:disabled { opacity: .45; cursor: default; }
.motion-controls :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.spec .motion-controls { padding: 0 var(--gut) 12px; max-width: var(--page); margin: auto; }
.motion-emblem { width: 60px; height: 60px; display: block; margin: 0 0 26px; color: var(--motion-accent); }
.motion-emblem svg { width: 100%; height: 100%; overflow: visible; }
.motion-emblem circle { opacity: .3; }
.motion-emblem path { transform-origin: center; }
.motion-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 100;
  background: var(--motion-accent); transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
html[data-suite=blueprint] .motion-emblem { border-radius: 0; }
html[data-suite=confetti] .motion-emblem { rotate: -8deg; }
:is(.cta,.btn,.wl-button) {
  transition: transform 240ms var(--motion-ease), translate 240ms var(--motion-ease),
    background 240ms var(--motion-ease), color 240ms var(--motion-ease),
    box-shadow 240ms var(--motion-ease);
}
:is(.cta,.btn,.wl-button) > span[aria-hidden=true] {
  display: inline-block; transition: transform 300ms var(--motion-ease);
}
:is(.cta,.btn,.wl-button):active { translate: 0 2px; }
:is(.cta,.btn,.wl-button):hover > span[aria-hidden=true] { transform: translate(3px,-3px); }
:is(.offer,.rows li) { transition: background 300ms var(--motion-ease); }
:is(.capture,.wl-form) { transition: box-shadow 300ms var(--motion-ease); }
:is(.capture,.wl-form) input, .capture textarea {
  transition: border-color 240ms var(--motion-ease), background 240ms var(--motion-ease);
  accent-color: var(--motion-accent);
}
:is(.capture,.wl-form) input:focus, .capture textarea:focus { border-color: var(--motion-accent); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font: 400 24px/1 var(--body); transition: rotate 260ms var(--motion-ease); }
details[open] summary::after { rotate: 45deg; }
.art > :not(.art-caption) {
  translate: calc(var(--scene-x, 0px) * var(--depth, 1)) calc((var(--scene-y, 0px) + var(--scene-scroll, 0px)) * var(--depth, 1));
  transition: translate 700ms var(--motion-ease);
}
.art .sun, .art .plinth { --depth: -.35; }
.art .s2, .art .n2 { --depth: .65; }
.art .s3, .art .seal, .art .doodle { --depth: 1.3; }
@media (hover: hover) and (pointer: fine) {
  .offer:hover, .rows li:hover { background: color-mix(in srgb, currentColor 4%, transparent); }
  .nav-link, .text-link, .secondary { text-decoration-thickness: 1px; transition: text-underline-offset 220ms var(--motion-ease); }
  .nav-link:hover, .text-link:hover, .secondary:hover { text-underline-offset: 9px; }
  .wl-button:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .art > :not(.art-caption) { translate: none !important; }
  .motion-progress { display: none; }
}
html[data-suite-motion=off] { scroll-behavior: auto; }
html[data-suite-motion=off] *, html[data-suite-motion=off] *::before,
html[data-suite-motion=off] *::after { animation: none !important; transition: none !important; }
html[data-suite-motion=off] .art > :not(.art-caption) { translate: none !important; }
html[data-suite-motion=off] .motion-progress { display: none; }
html[data-suite-motion=off] :is(.cta,.btn,.wl-button):hover,
html[data-suite-motion=off] :is(.cta,.btn,.wl-button):active { transform: none; translate: none; }
/* Anton's tall capitals need room once each word has its own reveal mask. */
html[data-suite=blueprint] .motion-heading { line-height: 1.02; }

/* Each family now has a different headline technique, not a timing preset. */
.motion-line { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.motion-line-inner { display: block; }
.motion-rule { display: block; height: 1px; background: currentColor; width: min(100%, 240px); margin: 22px 0; transform-origin: left; opacity: .6; }
.motion-signature { font-size: 10px; letter-spacing: .04em; opacity: .75; }
html[data-suite=confetti] .motion-clip { overflow: visible; }
html[data-suite=grove] .stem { transform-origin: bottom center; }
html[data-suite=atelier] .motion-progress, html[data-suite=grove] .motion-progress, html[data-suite=harbor] .motion-progress { display: none; }
/* Rotating posters and assembling words stay within their page during entrance. */
.screen { overflow-x: clip; }