/* Anticode motion: the site-wide layer, linked right after base.css on every page.
   - Springs that overshoot and settle (linear() curves), flat buttons that shrink a little when pressed and spring
     back, cards that lift and light up under the pointer, menus and toasts that
     spring open.
   - Pages hand over to each other: the old one sinks back and blurs while the new one rises in, and the Anticode
     mark glides from one page's header to the next (cross-document view transitions).
   - Content pages (body.site: guides, examples, pricing, status and the business pages) bring their first screen
     in in order, reveal the rest as it's scrolled to, and draw a reading line along the top.
   - Only transforms, opacity, filter and shadows animate, all from CSS: nothing follows the pointer.
   - Reduced motion: base.css cuts every animation and transition to nothing, and pages change in place. */

@property --spot { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  /* --spring overshoots and settles; --spring-soft barely overshoots */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --t-spring: 640ms;
  /* the glow under a hovered card */
  --glow: color-mix(in srgb, var(--pen) 42%, transparent);
  /* a pressable's transitions: colours quick, shadows eased, movement on a spring */
  --press-props: background-color, color, box-shadow, opacity, filter, translate, scale, transform, outline-offset;
  --press-times: var(--t-1), var(--t-1), 300ms, var(--t-1), var(--t-1), var(--t-spring), var(--t-spring), var(--t-spring), 360ms;
  --press-curves: var(--ease), var(--ease), var(--ease-reveal), var(--ease), var(--ease), var(--spring), var(--spring), var(--spring), var(--spring);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --glow: color-mix(in srgb, var(--pen) 30%, transparent); } }
:root[data-theme="light"] { --glow: color-mix(in srgb, var(--pen) 30%, transparent); }

/* ---------------- pages hand over to each other ---------------- */
@view-transition { navigation: auto; types: ac-page; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* the mark stays in view: it glides from one page's header to the next */
:is(.tp-brand, .sh-brand, .auth-brand, .cms .brand) img, .side-brand .mark { view-transition-name: ac-brand; }
html:active-view-transition-type(ac-page)::view-transition-old(root) { animation: ac-page-out 300ms cubic-bezier(0.4, 0, 1, 1) both; }
html:active-view-transition-type(ac-page)::view-transition-new(root) { animation: ac-page-in 720ms var(--ease-reveal) 70ms both; }
html:active-view-transition-type(ac-page)::view-transition-group(ac-brand) { animation-duration: 720ms; animation-timing-function: var(--spring-soft); }
@keyframes ac-page-out { to { opacity: 0; scale: 0.955; filter: blur(8px); } }
@keyframes ac-page-in { from { opacity: 0; scale: 1.04; translate: 0 18px; filter: blur(12px); } }

/* ---------------- buttons: flat, press and spring back ---------------- */
/* Buttons stay flat: they never rise, sink, glow, shine or cast a shadow. Hover only changes the colour
   (base.css; quiet buttons also draw a grey hairline ring); a press shrinks the button slightly and springs back.
   (where a component positions or clips its own button, its rules win: these have no specificity) */
:where(.btn, .send-btn, .insp-btn, .icon-btn) { position: relative; isolation: isolate; overflow: clip; overflow-clip-margin: 1px; }
.btn, .send-btn, .insp-btn { transition-property: var(--press-props); transition-duration: var(--press-times); transition-timing-function: var(--press-curves); }
.btn[data-magnetic] { transition-property: var(--press-props); transition-duration: var(--press-times); transition-timing-function: var(--press-curves); }
.btn:not(:disabled, [aria-disabled="true"]):active { scale: 0.97; transition-duration: 90ms; transition-timing-function: var(--ease); }
.btn:focus-visible { outline-offset: 4px; }
:is(.btn-quiet, .btn-dark):not(:disabled, [aria-disabled="true"]):hover { box-shadow: inset 0 0 0 1px var(--line-2); }
/* icons inside buttons answer the hover too */
:is(.btn-icon, .icon-btn) > svg:not(.chev) { transition: scale 520ms var(--spring), rotate 520ms var(--spring); }
:is(.btn-icon, .icon-btn):not(:disabled):hover > svg:not(.chev) { scale: 1.14; rotate: -6deg; }
:is(.btn-icon, .icon-btn):not(:disabled):active > svg:not(.chev) { scale: 0.88; rotate: 0deg; transition-duration: 90ms; }
body .icon-btn { transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease), opacity 150ms var(--ease), scale var(--t-spring) var(--spring); }
body .icon-btn:not(:disabled):active { scale: 0.9; transition-duration: 90ms; }

/* chips, tabs and segmented controls press in and spring back */
:is(.chip span, .seg button, .mob-tabs button, .tabs [role="tab"], .cms-tabs [role="tab"]) { transition-property: background-color, color, box-shadow, opacity, scale; transition-duration: var(--t-1), var(--t-1), var(--t-1), var(--t-1), var(--t-spring); transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), var(--spring); }
:is(.chip:active span, .seg button:active, .mob-tabs button:active, .tabs [role="tab"]:active, .cms-tabs [role="tab"]:active) { scale: 0.93; transition-duration: 90ms; }

/* fields: focus arrives eased (component styles decide what it looks like) */
:where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) { transition: box-shadow 260ms var(--ease-reveal), border-color 200ms var(--ease), background-color 200ms var(--ease); }

/* ---------------- menus, dialogs and toasts spring open ---------------- */
.menu.pop:not(.is-open) { transform: translateY(-6px) scale(0.92); }
.menu.pop.is-open { transition: opacity 200ms var(--ease-reveal), transform 560ms var(--spring-soft), visibility 0s; }
.menu.pop button, #more-menu > :is(button, a) { transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease), translate 420ms var(--spring); }
.menu.pop button:hover, #more-menu > :is(button, a):hover { translate: 3px 0; }
.toast:not([hidden]) { animation: ac-toast 640ms var(--spring) both; }
@keyframes ac-toast { from { opacity: 0; transform: translateY(22px) scale(0.84); } }

/* ---------------- cards lift and light up on hover ---------------- */
.dash .card { transition: translate var(--t-spring) var(--spring); }
.dash .cards:not([data-layout="list"]) .card:hover { translate: 0 -5px; }
.dash .card-thumb { transition: box-shadow 320ms var(--ease-reveal), scale var(--t-spring) var(--spring); }
.dash .cards:not([data-layout="list"]) .card:hover .card-thumb { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pen) 30%, transparent), 0 26px 48px -26px rgba(0, 0, 0, 0.8), 0 10px 40px -20px var(--glow); }
html .tile { transition-property: background-color, color, box-shadow, opacity, scale, translate, --spot; transition-duration: var(--t-1), var(--t-1), 320ms, var(--t-1), var(--t-1), var(--t-spring), 360ms; transition-timing-function: var(--ease), var(--ease), var(--ease-reveal), var(--ease), var(--ease), var(--spring), var(--ease);
  background-image: radial-gradient(560px circle at 50% 0%, color-mix(in srgb, var(--pen) var(--spot), transparent), transparent 64%); }
html .tile:hover { --spot: 16%; translate: 0 -5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--pen) 22%, transparent), 0 30px 60px -30px rgba(0, 0, 0, 0.85); }
:is(.mk-row, .cms-project, .cms-coll) { transition: background-color var(--t-1) var(--ease), translate var(--t-spring) var(--spring), box-shadow 320ms var(--ease-reveal); }
:is(.mk-row, .cms-project, .cms-coll):hover { translate: 0 -2px; box-shadow: 0 16px 36px -22px rgba(0, 0, 0, 0.7); }
.site :is(.cards, .related) a { transition: translate var(--t-spring) var(--spring), box-shadow 320ms var(--ease-reveal), border-color var(--t-1) var(--ease), --spot 360ms var(--ease);
  background: radial-gradient(520px circle at 30% 0%, color-mix(in srgb, var(--pen) var(--spot), transparent), transparent 62%) var(--surface); }
.site :is(.cards, .related) a:hover { --spot: 15%; translate: 0 -5px; border-color: color-mix(in srgb, var(--pen) 34%, var(--line)); box-shadow: 0 26px 50px -28px rgba(0, 0, 0, 0.75); }
.site :is(.cards, .related) a:active { translate: 0 -2px; scale: 0.985; }
.site .pr-plan { transition: --spot 420ms var(--ease); background: radial-gradient(640px circle at 50% 0%, color-mix(in srgb, var(--pen) var(--spot), transparent), transparent 70%); }
.site .pr-plan:hover { --spot: 11%; }

/* ---------------- links draw their underline ---------------- */
:is(.tp-nav, .sh-nav, .tp-foot nav, .sf nav, .foot-nav, .auth-foot) a { background: linear-gradient(currentColor 0 0) 0 100% / 0% 1px no-repeat; transition: background-size 420ms var(--ease-reveal), color var(--t-1) var(--ease); }
:is(.tp-nav, .sh-nav, .tp-foot nav, .sf nav, .foot-nav, .auth-foot) a:is(:hover, :focus-visible) { background-size: 100% 1px; }
:is(.tp-brand, .sh-brand) img { transition: rotate 700ms var(--spring), scale 700ms var(--spring); }
:is(.tp-brand, .sh-brand):hover img { rotate: -12deg; scale: 1.12; }

/* ---------------- content pages: the first screen in order, the rest as it's reached ---------------- */
html:has(> body.site) { scroll-behavior: smooth; }
@keyframes ac-enter { from { opacity: 0; translate: 0 30px; } }
@keyframes ac-enter-blur { from { opacity: 0; translate: 0 24px; filter: blur(10px); } }
@keyframes ac-reveal { from { opacity: 0; translate: 0 42px; scale: 0.97; } }
/* the page's opening blocks arrive one after another; headings come out of a blur */
.site :is(.tp-page, .page) > :nth-child(-n + 3):not(.art, .lg) { animation: ac-enter 860ms var(--ease-reveal) both; animation-delay: calc(80ms + var(--n, 0) * 110ms); }
.site :is(.tp-page, .page) > :nth-child(2) { --n: 1; }
.site :is(.tp-page, .page) > :nth-child(3) { --n: 2; }
.site :is(.tp-page, .page) > :nth-child(-n + 3):is(.tp-head, .art-head) { animation-name: ac-enter-blur; }
/* long text: its first blocks come with the page */
.site :is(.art, .lg) > :nth-child(-n + 4) { animation: ac-enter 860ms var(--ease-reveal) both; animation-delay: calc(160ms + var(--n, 0) * 80ms); }
.site :is(.art, .lg) > :nth-child(2) { --n: 1; }
.site :is(.art, .lg) > :nth-child(3) { --n: 2; }
.site :is(.art, .lg) > :nth-child(4) { --n: 3; }
@supports (animation-timeline: view()) {
  /* everything further down rises in as it's scrolled to */
  .site :is(.tp-page, .page) > :nth-child(n + 4), .site :is(.art, .lg) > :nth-child(n + 5), .site :is(.cards > li, .st-list > li) {
    animation: ac-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
}
@supports (animation-timeline: scroll()) {
  /* the reading line along the top, and the header settling onto the page once it scrolls */
  .site::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 300; height: 2px; pointer-events: none; transform-origin: 0 50%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--pen) 40%, transparent), var(--pen)); animation: ac-read linear both; animation-timeline: scroll(root); }
  @keyframes ac-read { from { scale: 0 1; } }
  .site :is(.sh, .tp-bar) { animation: ac-bar linear both; animation-timeline: scroll(root); animation-range: 0px 180px; }
  @keyframes ac-bar { to { box-shadow: 0 1px 0 var(--line), 0 18px 40px -26px rgba(0, 0, 0, 0.75); } }
}
@media print { .site *, .site::before { animation: none !important; } }