/* Purposeful motion: feedback, chapter entrances and continuity between documents. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}
.edition-p0 { --ease: var(--ease-out); }

/* Native navigation retains real URLs, fragments, browser history and modified clicks. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 420ms; }
::view-transition-old(root) { animation: document-out 220ms var(--ease-out) both; }
::view-transition-new(root) { animation: document-in 420ms var(--ease-in-out) both; }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
@keyframes document-out { to { opacity: 0; } }
@keyframes document-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
.page-curtain { display: none; }
.works-page .works-main { animation: none; }

/* Readable before JS; selected marketing chapters enter once after enhancement. */
.reveal, .has-js .reveal, .edition-p0 .reveal { opacity: 1; transform: none; transition: none; }
.has-js .motion-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 450ms var(--ease-out) var(--motion-delay, 0ms),
    transform 650ms var(--ease-out) var(--motion-delay, 0ms);
}
.has-js .motion-reveal.is-visible { opacity: 1; transform: none; }
.has-js .motion-reveal:focus-within { opacity: 1; transform: none; transition: none; }
.has-js .motion-heading {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 480ms var(--ease-out) var(--motion-delay, 0ms),
    transform 720ms var(--ease-out) var(--motion-delay, 0ms);
}
.has-js .motion-heading.is-visible { opacity: 1; transform: none; }
.has-js .motion-wipe {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition:
    opacity 520ms var(--ease-out) var(--motion-delay, 0ms),
    transform 800ms var(--ease-out) var(--motion-delay, 0ms);
}
.has-js .motion-wipe.is-visible { opacity: 1; transform: none; }

/* The first screen is a composed entrance, not a set of unrelated fades. */
.has-js .hero-topline { animation: hero-copy-in 500ms var(--ease-out) both; }
.has-js .launch-intro { animation: hero-copy-in 650ms 120ms var(--ease-out) both; }
.has-js .launch-offer { animation: hero-copy-in 650ms 180ms var(--ease-out) both; }
.has-js .action-row { animation: hero-copy-in 650ms 240ms var(--ease-out) both; }
.has-js .offer-note { animation: hero-copy-in 650ms 300ms var(--ease-out) both; }
.has-js .hero-baseline { animation: hero-copy-in 650ms 420ms var(--ease-out) both; }
.launch-copy .title-line > span { animation-duration: 850ms; animation-timing-function: var(--ease-out); }
.launch-copy .title-line:nth-child(2) > span { animation-delay: 70ms; }
.poster-outline { animation: poster-outline-in 700ms 120ms var(--ease-out) both; }
.launch-poster {
  transform-origin: 50% 45%;
  animation: poster-scene-in 900ms 80ms var(--ease-out) both;
  transition: none;
}
.poster-stamp { animation-duration: 750ms; animation-delay: 420ms; animation-timing-function: var(--ease-out); }
.poster-registration { animation: hero-copy-in 600ms 520ms var(--ease-out) both; }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes poster-outline-in { from { opacity: 0; transform: rotate(-1deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes poster-scene-in { from { opacity: 0; transform: translateY(7%) rotate(-9deg) scale(.97); } to { opacity: 1; transform: rotate(-5deg); } }

.poster-stage::after {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 13rem at var(--light-x, 50%) var(--light-y, 50%), rgba(223,255,31,.2), transparent 68%);
  mix-blend-mode: screen;
  transition: opacity 200ms ease;
}
.poster-stage.has-pointer-light::after { opacity: 1; }
.poster-image { transform: scale(1.04); }
.poster-stage.has-pointer-light .launch-poster,
.poster-stage.has-pointer-light .poster-outline,
.poster-stage.has-pointer-light .poster-image,
.poster-stage.has-pointer-light .poster-number,
.poster-stage.has-pointer-light .poster-label,
.poster-stage.has-pointer-light .poster-stamp,
.poster-stage.has-pointer-light .poster-registration { will-change: transform; }
.page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  background: var(--acid, #dfff1f);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

/* Reset the archive's ungated hover movement before adding precise pointer feedback. */
.cta:hover, .button:hover { transform: none; }
.cta:hover { box-shadow: none; }
.cta:hover span, .text-link:hover span, .case-card:hover .case-open span,
.case-card:focus-visible .case-open span { transform: none; }
.product-cta:hover { padding: 1rem 1.15rem; background: transparent; }
.project-preview:hover img, .case-card:hover .case-visual img { transform: none; }
.project-preview:hover img { filter: saturate(.65); }
.project-preview:hover .project-arrow { background: var(--paper); transform: none; }
.site-header nav a:hover, .header-link:hover { opacity: 1; }

.cta, .button, .menu-toggle {
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.cta span, .text-link span, .header-link span, .product-cta > span,
.project-arrow, .case-open span, .menu-toggle span {
  transition: transform 200ms var(--ease-out);
}
.product-cta { padding: 1rem 1.15rem; transition: background-color 160ms ease, color 160ms ease; }
.project-photo img, .case-visual img { transition: transform 600ms var(--ease-out); }
.site-header nav a, .header-link, .offer-note, footer a:not(.wordmark) {
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: color 160ms ease;
}
.site-header nav a.active, .site-header nav a[aria-current="page"] { text-decoration: underline; }
.cta:active, .button:active, .menu-toggle:active { transform: scale(.97); }
.product-cta:active { background: var(--acid); }
.faq-list details.is-animating { transition: height 200ms var(--ease-out); }
.faq-list summary { transition: color 160ms ease; }
.faq-list summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.mobile-contact { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .cta:hover, .button:hover { transform: translateY(-2px); }
  .cta-acid:hover, .button-acid:hover { background-color: #eaff79; }
  .cta-dark:hover { background-color: #292923; }
  .cta:hover span, .text-link:hover span, .header-link:hover span,
  .product-cta:hover > span, .case-card:hover .case-open span { transform: translate(3px, -3px); }
  .cta:active, .button:active, .menu-toggle:active { transform: scale(.97); }
  .product-cta:hover { background: var(--acid); }
  .project-preview:hover img, .case-card:hover .case-visual img { transform: scale(1.035); }
  .project-preview:hover .project-arrow { background: var(--acid); transform: translate(2px, -2px); }
  .site-header nav a:hover, .offer-note:hover, footer a:not(.wordmark):hover { text-decoration: underline; }
  .faq-list summary:hover { color: #a32c10; }
  .menu-toggle:hover { color: var(--orange); }
}

@media (max-width: 760px) {
  .has-js .site-header nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s 200ms;
  }
  .has-js .site-header.is-menu-open nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .project-preview.motion-reveal { --motion-delay: 0ms !important; }
  .poster-stage::after { display: none; }
}

html[data-input="keyboard"] { scroll-behavior: auto; }
html[data-input="keyboard"] .cta,
html[data-input="keyboard"] .button,
html[data-input="keyboard"] .menu-toggle,
html[data-input="keyboard"] .menu-toggle span,
html[data-input="keyboard"] .site-header nav,
html[data-input="keyboard"] .motion-reveal { transition: none; }
html[data-input="keyboard"] .cta:active,
html[data-input="keyboard"] .button:active,
html[data-input="keyboard"] .menu-toggle:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .has-js .motion-reveal, .has-js .motion-heading, .has-js .motion-wipe { opacity: 1; clip-path: none; transform: none; transition: none; }
  .launch-poster { transform: rotate(-5deg); }
  .poster-stage::after { display: none; }
  .page-progress { will-change: auto; }
  .cta:hover, .button:hover, .cta:active, .button:active, .menu-toggle:active,
  .cta:hover span, .text-link:hover span, .header-link:hover span, .product-cta:hover > span,
  .project-preview:hover img, .case-card:hover .case-visual img,
  .project-preview:hover .project-arrow, .case-card:hover .case-open span { transform: none; }
  .mobile-contact.is-hidden, .has-js .site-header nav { transform: none; }
}