/* Research Theatre
   Component-specific motion for speaking hubs and keynote detail pages.
   Motion is progressive enhancement: without JS every authored element remains visible. */

:root {
  --motion-fast: 180ms;
  --motion-ui: 280ms;
  --motion-reveal: 560ms;
  --motion-feature: 850ms;
  --motion-stagger: 55ms;
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-ui: cubic-bezier(.2, .8, .2, 1);
  --motion-coral: var(--keynote-coral, var(--coral, #E8614D));
  --motion-violet: var(--keynote-violet, #7C6CF2);
  --motion-teal: var(--keynote-teal, #28D7BF);
}

/* Morphing navigation -------------------------------------------------- */

.nav {
  isolation: isolate;
  transition:
    padding var(--motion-ui) var(--motion-ease-ui),
    background-color var(--motion-ui) var(--motion-ease-ui),
    box-shadow var(--motion-ui) var(--motion-ease-ui),
    backdrop-filter var(--motion-ui) var(--motion-ease-ui);
}

html.motion-ready .nav[data-motion-scrolled="true"] {
  background-color: rgba(9, 11, 22, .88);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .24);
  backdrop-filter: blur(18px) saturate(1.25);
}

.motion-nav-pill {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: var(--pill-w, 0);
  height: var(--pill-h, 0);
  border: 1px solid rgba(124, 108, 242, .28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 108, 242, .18), rgba(232, 97, 77, .08));
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--pill-x, 0), var(--pill-y, 0), 0);
  transition:
    width var(--motion-ui) var(--motion-ease-out),
    height var(--motion-ui) var(--motion-ease-out),
    transform var(--motion-ui) var(--motion-ease-out),
    opacity var(--motion-fast) ease;
}

.motion-nav-pill[data-visible="true"] { opacity: 1; }

html.motion-ready .nav__links,
html.motion-ready .nav__links a {
  position: relative;
  z-index: 1;
}

/* Masked stage opening ------------------------------------------------- */

html.motion-ready [data-motion-effect="hero-stage"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --motion-x: 72%;
  --motion-y: 24%;
}

html.motion-ready [data-motion-effect="hero-stage"]::before {
  position: absolute;
  z-index: -1;
  top: -28%;
  left: 44%;
  width: min(68vw, 860px);
  aspect-ratio: 1;
  border-radius: 44% 56% 63% 37%;
  background:
    radial-gradient(circle at var(--motion-x) var(--motion-y), rgba(232, 97, 77, .25), transparent 28%),
    radial-gradient(circle at 32% 64%, rgba(124, 108, 242, .28), transparent 48%);
  content: "";
  filter: blur(18px);
  opacity: .62;
  pointer-events: none;
  transform: translate3d(-2%, 0, 0) rotate(-4deg);
}

html.motion-ready [data-motion-effect="hero-stage"][data-motion-active="true"]::before {
  animation: motion-ambient-field 16s ease-in-out infinite alternate;
}

html.motion-ready [data-motion-effect="hero-stage"] [data-motion-item] {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 18px, 0);
}

html.motion-ready [data-motion-effect="hero-stage"] :is(h1, .hero__title)[data-motion-item] {
  clip-path: inset(0 0 100% 0);
  filter: none;
  transform: translate3d(0, 42px, 0);
}

html.motion-ready [data-motion-effect="hero-stage"][data-motion-state="visible"] [data-motion-item] {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--motion-reveal) var(--motion-ease-out),
    filter var(--motion-reveal) var(--motion-ease-out),
    clip-path var(--motion-feature) var(--motion-ease-out),
    transform var(--motion-feature) var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 72ms);
}

body[data-motion-page="keynote"] [data-motion-effect="hero-stage"] h1 {
  position: relative;
}

body[data-motion-page="keynote"] [data-motion-effect="hero-stage"] h1::after {
  position: absolute;
  z-index: -1;
  right: -5%;
  bottom: -.18em;
  left: -3%;
  height: .28em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 108, 242, .34), rgba(232, 97, 77, .22));
  content: "";
  opacity: 0;
  transform: scaleX(.3);
  transform-origin: left;
}

body[data-motion-page="keynote"] [data-motion-effect="hero-stage"][data-motion-state="visible"] h1::after {
  opacity: 1;
  transform: scaleX(1);
  transition: opacity 500ms ease 360ms, transform 900ms var(--motion-ease-out) 360ms;
}

@keyframes motion-ambient-field {
  from { transform: translate3d(-2%, 0, 0) rotate(-4deg) scale(.96); }
  to { transform: translate3d(4%, 3%, 0) rotate(4deg) scale(1.05); }
}

/* Exact numbers -------------------------------------------------------- */

html.motion-ready [data-motion-effect="stat-settle"] {
  perspective: 1000px;
}

html.motion-ready [data-motion-effect="stat-settle"] > [data-motion-item] {
  position: relative;
  opacity: 0;
  filter: saturate(.55);
  transform: translate3d(0, 22px, 0) rotateX(4deg) scale(.97);
  transform-origin: center bottom;
}

html.motion-ready [data-motion-effect="stat-settle"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 380ms ease,
    filter 700ms ease,
    transform 760ms var(--motion-ease-out),
    box-shadow 900ms ease;
  transition-delay: calc(var(--motion-order, 0) * 55ms);
}

html.motion-ready [data-motion-effect="stat-settle"][data-motion-state="visible"] > [data-motion-item]:nth-child(3n + 1) {
  box-shadow: -10px 12px 34px rgba(124, 108, 242, .09);
}

html.motion-ready [data-motion-effect="stat-settle"][data-motion-state="visible"] > [data-motion-item]:nth-child(3n + 2) {
  box-shadow: 0 14px 36px rgba(232, 97, 77, .08);
}

html.motion-ready [data-motion-effect="stat-settle"][data-motion-state="visible"] > [data-motion-item]:nth-child(3n) {
  box-shadow: 10px 12px 34px rgba(40, 215, 191, .07);
}

html.motion-ready [data-motion-number] {
  opacity: 0;
  filter: blur(8px);
  transform: translate3d(0, .65em, 0) scale(.94);
}

html.motion-ready [data-motion-number][data-motion-state="visible"],
html.motion-ready [data-motion-state="visible"] [data-motion-number] {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 420ms var(--motion-ease-out),
    filter 620ms var(--motion-ease-out),
    transform 620ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-number-order, 0) * 70ms);
}

/* Hub card collections: stable variety plus one delegated spotlight ---- */

html.motion-ready [data-motion-effect="card-collection"] {
  perspective: 1200px;
}

html.motion-ready [data-motion-effect="card-collection"] > [data-motion-item] {
  position: relative;
  isolation: isolate;
  opacity: 0;
  transition:
    opacity var(--motion-reveal) var(--motion-ease-out),
    clip-path var(--motion-feature) var(--motion-ease-out),
    transform var(--motion-feature) var(--motion-ease-out),
    box-shadow var(--motion-ui) var(--motion-ease-ui);
  transition-delay: calc(var(--motion-order, 0) * var(--motion-stagger));
}

html.motion-ready [data-motion-effect="card-collection"] > [data-motion-variant="mask-left"] {
  clip-path: inset(0 100% 0 0 round 16px);
  transform: translate3d(-18px, 0, 0);
}

html.motion-ready [data-motion-effect="card-collection"] > [data-motion-variant="rise-scale"] {
  transform: translate3d(0, 24px, 0) scale(.975);
}

html.motion-ready [data-motion-effect="card-collection"] > [data-motion-variant="perspective-lift"] {
  transform: rotateX(5deg) translate3d(0, 20px, 0);
  transform-origin: center bottom;
}

html.motion-ready [data-motion-effect="card-collection"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 16px);
  transform: none;
}

html.motion-ready [data-motion-effect="card-collection"] > [data-motion-surface]::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--motion-x, 50%) var(--motion-y, 50%), rgba(124, 108, 242, .2), transparent 48%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-ui) ease;
}

/* Proof cards arrive as a compact stage cue. */
html.motion-ready [data-motion-effect="proof-cards"] > [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.96);
}

html.motion-ready [data-motion-effect="proof-cards"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 660ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 90ms);
}

/* Outcomes: three physical cue cards from three directions. */
html.motion-ready [data-motion-effect="cue-cards"] > [data-motion-item] {
  opacity: 0;
  transform: translate3d(var(--cue-x, 0), 24px, 0) rotate(var(--cue-r, 0deg));
  transform-origin: center bottom;
}

html.motion-ready [data-motion-effect="cue-cards"] > [data-motion-item]:nth-child(1) { --cue-x: -28px; --cue-r: -3deg; }
html.motion-ready [data-motion-effect="cue-cards"] > [data-motion-item]:nth-child(2) { --cue-x: 0; --cue-r: 1deg; }
html.motion-ready [data-motion-effect="cue-cards"] > [data-motion-item]:nth-child(3) { --cue-x: 28px; --cue-r: 3deg; }

html.motion-ready [data-motion-effect="cue-cards"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 440ms ease, transform 760ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 100ms);
}

/* Takeaway framework: violet bento bloom, deliberately no connector. */
html.motion-ready .takeback-grid[data-motion-effect="framework-cells"] > [data-motion-item] {
  opacity: 0;
  background-image: radial-gradient(circle at 12% 8%, rgba(124, 108, 242, .2), transparent 48%);
  transform: scale(.9) translate3d(0, 18px, 0);
}

html.motion-ready .takeback-grid[data-motion-effect="framework-cells"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 720ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 110ms);
}

/* Local narrative timeline: the only structural line in the experience. */
html.motion-ready [data-motion-effect="local-timeline"] {
  position: relative;
  isolation: isolate;
}

html.motion-ready [data-motion-effect="local-timeline"]::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 8%;
  left: 8%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(124, 108, 242, .25), var(--motion-violet), rgba(232, 97, 77, .5));
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}

html.motion-ready [data-motion-effect="local-timeline"] > [data-motion-item] {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.94);
}

html.motion-ready [data-motion-effect="local-timeline"][data-motion-state="visible"]::before {
  opacity: 1;
  transform: scaleX(1);
  transition: opacity 220ms ease, transform 780ms var(--motion-ease-out);
}

html.motion-ready [data-motion-effect="local-timeline"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 340ms ease, transform 600ms var(--motion-ease-out);
  transition-delay: calc(260ms + var(--motion-order, 0) * 120ms);
}

/* Research protocol and comparisons use their own directional grammar. */
html.motion-ready [data-motion-effect="research-protocol"] > [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

html.motion-ready [data-motion-effect="research-protocol"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 680ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 120ms);
}

html.motion-ready [data-motion-effect="comparison"] > [data-motion-item] {
  opacity: 0;
  transform: translate3d(-26px, 0, 0);
}

html.motion-ready [data-motion-effect="comparison"] > [data-motion-item]:nth-child(even) {
  transform: translate3d(26px, 0, 0);
}

html.motion-ready [data-motion-effect="comparison"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 440ms ease, transform 720ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 130ms);
}

/* Slide deck: stacked entrance, fanned settle, focusable interaction. */
html.motion-ready [data-motion-effect="slide-deck"] {
  position: relative;
  perspective: 1500px;
}

html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview {
  opacity: 0;
  transform-origin: 50% 85%;
  transition:
    opacity 420ms ease,
    transform var(--motion-feature) var(--motion-ease-out),
    filter var(--motion-ui) ease;
  transition-delay: calc(var(--motion-order, 0) * 110ms);
}

html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview:nth-child(1) {
  transform: translate3d(22%, 40px, -70px) rotate(-5deg);
}
html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview:nth-child(2) {
  transform: translate3d(-30%, 54px, -110px) rotate(7deg);
}
html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview:nth-child(3) {
  transform: translate3d(-34%, 64px, -150px) rotate(-8deg);
}

html.motion-ready [data-motion-effect="slide-deck"][data-motion-state="visible"] > .slide-preview {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0);
}

html.motion-ready .slide-preview:nth-child(n + 2) .slide-art {
  justify-content: flex-start;
  gap: clamp(.24rem, .55vw, .42rem);
  padding: clamp(.7rem, 1.15vw, 1.05rem) !important;
}

html.motion-ready .slide-preview:nth-child(n + 2) .slide-art strong {
  font-size: clamp(.95rem, 1.75vw, 1.6rem);
}

html.motion-ready .slide-preview:nth-child(n + 2) .slide-art > span {
  font-size: clamp(.56rem, .72vw, .7rem);
  line-height: 1.32;
}

.motion-deck-dots {
  display: none;
}

/* Research panels close inward, without perimeter drawing. */
html.motion-ready [data-motion-effect="research-panel"] {
  overflow: hidden;
}

html.motion-ready [data-motion-effect="research-panel"] > [data-motion-item] {
  opacity: 0;
  filter: saturate(.65) blur(5px);
  transform: translate3d(-18px, 0, 0);
}

html.motion-ready [data-motion-effect="research-panel"] > [data-motion-item]:nth-child(even) {
  transform: translate3d(18px, 0, 0);
}

html.motion-ready [data-motion-effect="research-panel"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  filter: none;
  transform: none;
  transition: opacity 480ms ease, filter 760ms ease, transform 760ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 90ms);
}

html.motion-ready .research-foundation :is(.claim-scope, .claim-boundary),
html.motion-ready .slide-preview__caption :is(.claim-scope, .claim-boundary) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 8px;
  padding: .42rem .58rem;
  overflow-wrap: anywhere;
}

html.motion-ready .claim-scope { background: rgba(124, 108, 242, .075); }
html.motion-ready .claim-boundary { background: rgba(255, 255, 255, .045); }

html.motion-ready :is(.research-foundation, .slide-preview__caption) a {
  transition: color var(--motion-fast) ease, text-shadow var(--motion-fast) ease;
}

/* Aperture media reveal. */
html.motion-ready [data-motion-effect="aperture-media"] {
  opacity: 0;
  clip-path: inset(4% 7% round 28px);
  transform: scale(.96);
}

html.motion-ready [data-motion-effect="aperture-media"] :is(img, video, iframe) {
  transform: scale(1.08);
  transition: transform 1100ms var(--motion-ease-out);
}

html.motion-ready [data-motion-effect="aperture-media"][data-motion-state="visible"] {
  opacity: 1;
  clip-path: inset(0 round 16px);
  transform: none;
  transition: opacity 400ms ease, clip-path 980ms var(--motion-ease-out), transform 980ms var(--motion-ease-out);
}

html.motion-ready [data-motion-effect="aperture-media"][data-motion-state="visible"] :is(img, video, iframe) {
  transform: scale(1);
}

/* Secondary modules have quieter, distinct entries. */
html.motion-ready :is([data-motion-effect="profile-card"], [data-motion-effect="event-list"], [data-motion-effect="logo-field"]) > [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

html.motion-ready :is([data-motion-effect="profile-card"], [data-motion-effect="event-list"], [data-motion-effect="logo-field"])[data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 380ms ease, transform 620ms var(--motion-ease-out);
  transition-delay: calc(var(--motion-order, 0) * 65ms);
}

html.motion-ready [data-motion-effect="paper-links"] > [data-motion-item] {
  opacity: 0;
  transform: translate3d(calc(var(--motion-order, 0) * -4px), 12px, 0) rotate(calc((var(--motion-order, 0) - 1) * 1deg));
}

html.motion-ready [data-motion-effect="paper-links"][data-motion-state="visible"] > [data-motion-item] {
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease, transform 620ms var(--motion-ease-out), background-color var(--motion-fast) ease;
  transition-delay: calc(var(--motion-order, 0) * 80ms);
}

/* Booking decision: coral energy stays local to the CTA. */
html.motion-ready [data-motion-effect="decision-spotlight"] {
  position: relative;
  isolation: isolate;
  opacity: 0;
  overflow: hidden;
  transform: translate3d(0, 20px, 0) scale(.98);
}

html.motion-ready [data-motion-effect="decision-spotlight"]::before {
  position: absolute;
  z-index: -1;
  inset: -35%;
  background: radial-gradient(circle at var(--motion-x, 50%) var(--motion-y, 50%), rgba(232, 97, 77, .24), transparent 32%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
}

html.motion-ready [data-motion-effect="decision-spotlight"][data-motion-state="visible"] {
  opacity: 1;
  transform: none;
  transition: opacity 480ms ease, transform 760ms var(--motion-ease-out);
}

html.motion-ready [data-motion-effect="decision-spotlight"][data-motion-state="visible"]::before {
  opacity: 1;
}

html.motion-ready [data-motion-effect="decision-spotlight"] :is(.final-invite-link, .btn--primary, .primary-invite-cta) {
  position: relative;
  overflow: hidden;
  transition: transform var(--motion-fast) var(--motion-ease-ui), box-shadow var(--motion-fast) ease;
}

html.motion-ready [data-motion-effect="decision-spotlight"] :is(.final-invite-link, .btn--primary, .primary-invite-cta)::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .34) 48%, transparent 72%);
  content: "";
  pointer-events: none;
  transform: translate3d(-130%, 0, 0);
}

/* FAQ acknowledges only the state the reader changed. */
html.motion-ready .faq summary::after {
  display: inline-block;
  margin-left: .55rem;
  content: "+";
  transition: transform var(--motion-ui) var(--motion-ease-out);
}

html.motion-ready .faq details[open] summary::after { transform: rotate(45deg); }

/* Pointer-only enhancements ------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html.motion-ready [data-motion-effect="card-collection"] > [data-motion-surface]:is(:hover, :focus-within)::before {
    opacity: 1;
  }

  html.motion-ready [data-motion-effect="card-collection"] > [data-motion-surface]:is(:hover, :focus-within) {
    z-index: 2;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
    transform: perspective(1000px) rotateX(var(--motion-rx, 0deg)) rotateY(var(--motion-ry, 0deg)) translate3d(0, -6px, 0);
  }

  html.motion-ready [data-motion-effect="slide-deck"]:has(.slide-preview:hover) .slide-preview:not(:hover),
  html.motion-ready [data-motion-effect="slide-deck"]:has(.slide-preview:focus-within) .slide-preview:not(:focus-within) {
    opacity: .7;
    filter: saturate(.72);
    transform: scale(.94) rotate(var(--neighbor-rotate, -2deg));
  }

  html.motion-ready [data-motion-effect="slide-deck"] .slide-preview:is(:hover, :focus-within) {
    z-index: 3;
    transform: perspective(1100px) rotateX(var(--motion-rx, 0deg)) rotateY(var(--motion-ry, 0deg)) translate3d(0, -10px, 20px);
  }

  html.motion-ready [data-motion-effect="aperture-media"] {
    transform: perspective(1100px) rotateX(var(--motion-rx, 0deg)) rotateY(var(--motion-ry, 0deg));
  }

  html.motion-ready :is(.research-foundation, .slide-preview__caption) a:is(:hover, :focus-visible) {
    color: var(--motion-teal);
    text-shadow: 0 0 18px rgba(40, 215, 191, .35);
  }

  html.motion-ready [data-motion-effect="paper-links"] > [data-motion-item]:is(:hover, :focus-visible) {
    transform: translate3d(0, -5px, 0) rotate(0);
  }

  html.motion-ready [data-motion-effect="decision-spotlight"] :is(.final-invite-link, .btn--primary, .primary-invite-cta):is(:hover, :focus-visible) {
    transform: translate3d(2px, -2px, 0);
    box-shadow: 0 14px 38px rgba(232, 97, 77, .28);
  }

  html.motion-ready [data-motion-effect="decision-spotlight"] :is(.final-invite-link, .btn--primary, .primary-invite-cta):is(:hover, :focus-visible)::after {
    transform: translate3d(130%, 0, 0);
    transition: transform 720ms var(--motion-ease-out);
  }
}

/* Responsive disclosure navigation and mobile-safe motion ------------- */
.nav__toggle {
  display: none;
  width: auto;
  min-width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border2, rgba(255, 255, 255, .13));
  border-radius: 10px;
  background: rgba(124, 108, 242, .07);
  color: var(--text, #fff);
  cursor: pointer;
}

.nav__toggle-lines,
.nav__toggle-lines::before,
.nav__toggle-lines::after {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform var(--motion-ui) var(--motion-ease-out);
}

.nav__toggle-lines { position: relative; }
.nav__toggle-lines::before,
.nav__toggle-lines::after { position: absolute; top: 0; left: 0; }
.nav__toggle-lines::before { transform: translate3d(0, -6px, 0); }
.nav__toggle-lines::after { transform: translate3d(0, 6px, 0); }

@media (max-width: 768px) {
  html.motion-ready[data-menu-open="true"],
  html.motion-ready[data-menu-open="true"] body {
    overflow: hidden;
  }

  .nav {
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .75rem;
    /* Backdrop filters create a containing block for fixed descendants. */
    backdrop-filter: none;
  }

  html.motion-ready .nav[data-motion-scrolled="true"] { backdrop-filter: none; }

  .nav__logo { flex: 1 1 auto; justify-content: flex-start; }
  .lang-switch { flex: 0 0 auto; margin-right: 0; }
  .motion-nav-pill { display: none; }

  .nav > .btn {
    flex: 1 0 100%;
    width: 100%;
    order: 3;
  }

  .footer__inner,
  .footer__links { max-width: 100%; min-width: 0; }
  .footer__links { flex-wrap: wrap; padding-left: 0; }
  .footer__links li { min-width: 0; }
  .footer__links a { max-width: 100%; white-space: normal; }

  html:not(.motion-ready) .nav__links {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 0;
    order: 4;
  }
  html:not(.motion-ready) .nav__links li { flex: 1 1 50%; }
  html:not(.motion-ready) .nav__links a { width: 100%; justify-content: flex-start; }

  html.motion-ready .nav { overflow: visible; }
  html.motion-ready .nav__toggle { display: inline-flex; flex: 0 0 auto; }

  html.motion-ready .nav__links {
    position: fixed;
    z-index: -1;
    top: var(--motion-nav-bottom, 104px);
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    min-height: 0;
    align-content: center;
    gap: .2rem;
    padding: clamp(1.25rem, 7vw, 2.5rem);
    overflow-y: auto;
    border: 1px solid var(--border2, rgba(255, 255, 255, .13));
    border-top: 0;
    background:
      radial-gradient(circle at 85% 8%, rgba(232, 97, 77, .17), transparent 30%),
      radial-gradient(circle at 12% 78%, rgba(124, 108, 242, .22), transparent 36%),
      rgba(9, 11, 22, .985);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
  }

  html.motion-ready .nav__links a {
    justify-content: flex-start;
    min-height: 54px;
    padding: .65rem 1rem;
    font-size: clamp(1.05rem, 5vw, 1.35rem);
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
    transition: opacity 320ms ease, transform 520ms var(--motion-ease-out), color var(--motion-fast) ease;
    transition-delay: calc(100ms + var(--motion-order, 0) * 45ms);
  }

  html.motion-ready[data-menu-open="true"] .nav__links {
    z-index: 20;
    opacity: 1;
    pointer-events: auto;
  }
  html.motion-ready[data-menu-open="true"] .nav__links a { opacity: 1; transform: none; }
  html.motion-ready[data-menu-open="true"] .nav__toggle-lines { background: transparent; }
  html.motion-ready[data-menu-open="true"] .nav__toggle-lines::before { transform: rotate(45deg); }
  html.motion-ready[data-menu-open="true"] .nav__toggle-lines::after { transform: rotate(-45deg); }

  html.motion-ready [data-motion-effect="local-timeline"]::before {
    top: 8%;
    bottom: 8%;
    left: 22px;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }
  html.motion-ready [data-motion-effect="local-timeline"][data-motion-state="visible"]::before { transform: scaleY(1); }

  html.motion-ready [data-motion-effect="slide-deck"] {
    display: grid;
    grid-template-columns: none;
    grid-template-areas: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 335px);
    justify-content: start;
    gap: 14px;
    padding: 0 max(0px, calc((100% - min(86vw, 335px)) / 2)) .35rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: max(0px, calc((100% - min(86vw, 335px)) / 2));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html.motion-ready [data-motion-effect="slide-deck"]::-webkit-scrollbar { display: none; }
  html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview,
  html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview:nth-child(1),
  html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview:nth-child(2),
  html.motion-ready [data-motion-effect="slide-deck"] > .slide-preview:nth-child(3),
  html.motion-ready [data-motion-effect="slide-deck"][data-motion-state="visible"] > .slide-preview {
    grid-area: auto;
    width: auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: none;
  }
  .motion-deck-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: .8rem;
  }
  .motion-deck-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transition: width var(--motion-ui) var(--motion-ease-out), background-color var(--motion-ui) ease;
  }
  .motion-deck-dots span[data-active="true"] { width: 22px; border-radius: 99px; background: var(--motion-violet); }

  html.motion-ready [data-motion-effect="card-collection"] > [data-motion-item],
  html.motion-ready [data-motion-effect="cue-cards"] > [data-motion-item],
  html.motion-ready [data-motion-effect="comparison"] > [data-motion-item],
  html.motion-ready [data-motion-effect="aperture-media"],
  html.motion-ready [data-motion-effect="decision-spotlight"] {
    transform: translate3d(0, 18px, 0);
  }
  html.motion-ready [data-motion-effect="cue-cards"] > [data-motion-item]:nth-child(n) {
    --cue-x: 0;
    --cue-r: 0deg;
  }
  html.motion-ready [data-motion-effect="comparison"] > [data-motion-item]:nth-child(even) {
    transform: translate3d(0, 18px, 0);
  }
  html.motion-ready [data-motion-effect="card-collection"][data-motion-state="visible"] > [data-motion-item],
  html.motion-ready [data-motion-effect="cue-cards"][data-motion-state="visible"] > [data-motion-item],
  html.motion-ready [data-motion-effect="comparison"][data-motion-state="visible"] > [data-motion-item],
  html.motion-ready [data-motion-effect="aperture-media"][data-motion-state="visible"],
  html.motion-ready [data-motion-effect="decision-spotlight"][data-motion-state="visible"] {
    transform: none;
  }
}

@media (max-width: 520px) {
  html.motion-ready .talk-card__details div {
    grid-template-columns: 1fr;
    gap: .18rem;
  }

  html.motion-ready [data-motion-effect="decision-spotlight"] > .eyebrow {
    color: var(--motion-coral);
  }
}

/* Reduced motion and deterministic degraded states -------------------- */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-motion-effect]::before,
  body[data-motion-page="keynote"] [data-motion-effect="hero-stage"] h1::after { animation: none !important; }
}

html[data-motion-mode="reduced"] [data-motion-effect],
html[data-motion-mode="reduced"] [data-motion-effect]::before,
html[data-motion-mode="reduced"] [data-motion-effect]::after,
html[data-motion-mode="reduced"] [data-motion-item],
html[data-motion-mode="reduced"] [data-motion-item]::before,
html[data-motion-mode="reduced"] [data-motion-item]::after,
html[data-motion-mode="reduced"] [data-motion-number],
html[data-motion-mode="reduced"] .nav__links,
html[data-motion-mode="reduced"] .nav__links a,
html[data-motion-mode="reduced"] .motion-nav-pill,
html[data-motion-mode="reduced"] .motion-deck-dots span,
html[data-motion-mode="reduced"] .faq summary::after {
  animation: none !important;
  transition: none !important;
}

html[data-motion-mode="reduced"] [data-motion-effect],
html[data-motion-mode="reduced"] [data-motion-item],
html[data-motion-mode="reduced"] [data-motion-number] {
  opacity: 1 !important;
  filter: none !important;
  clip-path: none !important;
  transform: none !important;
}

html[data-motion-mode="reduced"] [data-motion-effect="local-timeline"]::before,
html[data-motion-mode="reduced"] [data-motion-effect="hero-stage"]::before,
html[data-motion-mode="reduced"] [data-motion-effect="decision-spotlight"]::before {
  opacity: 0 !important;
}