/* ============================================================
   PRANAV DWIVEDI — scroll motion layer
   Soft reveals, staggered section content, and image parallax.
   Loaded after the page styles so it never changes layout.
   ============================================================ */

@keyframes m-rise {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes m-rise-scale {
  from { opacity: 0; translate: 0 34px; scale: 0.985; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

html.has-motion .m-item {
  opacity: 0;
  translate: 0 30px;
}

html.has-motion .m-item.is-in {
  animation: m-rise 0.88s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--m-i, 0) * 70ms);
}

html.has-motion .m-item--scale.is-in {
  animation-name: m-rise-scale;
  animation-duration: 1s;
}

/* Images drift inside their frames. translate/scale are separate from
   transform, so existing hover transforms keep working. */
.m-parallax { overflow: hidden; }
.m-parallax img {
  translate: 0 var(--m-py, 0px);
  scale: 1.035;
}

.m-drift {
  transform: translate3d(0, var(--m-py, 0px), 0);
  will-change: transform;
}

/* A quiet lime rule that draws itself when a section arrives. */
html.has-motion .pg-topline.m-item.is-in,
html.has-motion .nw-cat.m-item.is-in,
html.has-motion .wk-list-intro.m-item.is-in {
  position: relative;
}
html.has-motion .pg-topline.m-item.is-in::after,
html.has-motion .nw-cat.m-item.is-in::after,
html.has-motion .wk-list-intro.m-item.is-in::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--lime, #d2ff00);
  transform-origin: left;
  animation: m-line 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.18s;
}

@keyframes m-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}




@media (prefers-reduced-motion: reduce) {
  html.has-motion .m-item,
  html.has-motion .m-item.is-in {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
  }
  .m-parallax img {
    translate: none !important;
    scale: none !important;
  }
  .m-drift {
    transform: none !important;
  }
  html.has-motion .pg-topline.m-item.is-in::after,
  html.has-motion .nw-cat.m-item.is-in::after,
  html.has-motion .wk-list-intro.m-item.is-in::after {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   CINEMA LAYER
   Section-specific reveals. Each section is classified in the
   markup with data-motion; the JS only adds the trigger class.
   ============================================================ */

html.has-cinema [data-motion] {
  --m-sx: 0px;
  --m-sy: 34px;
  --m-gap: 55ms;
  position: relative;
  opacity: 0;
  transform: translate3d(var(--m-sx), var(--m-sy), 0);
}
html.has-cinema [data-motion][data-dir="left"] {
  --m-sx: -28px;
  --m-sy: 18px;
}
html.has-cinema [data-motion][data-dir="right"] {
  --m-sx: 28px;
  --m-sy: 18px;
}
html.has-cinema [data-motion][data-dir="up"] {
  --m-sx: 0px;
  --m-sy: 34px;
}

html.has-cinema [data-motion].is-cinema {
  animation: cine-section 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.has-cinema [data-motion="hero"] {
  opacity: 1;
  transform: none;
}
html.has-cinema [data-motion="band"] {
  --m-clip-from: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  clip-path: var(--m-clip-from);
  overflow: hidden;
}
html.has-cinema [data-motion="band"][data-dir="left"] {
  --m-clip-from: inset(0 0 0 100%);
}
html.has-cinema [data-motion="band"][data-dir="up"] {
  --m-clip-from: inset(100% 0 0 0);
}
html.has-cinema [data-motion="band"].is-cinema {
  animation: cine-band 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.has-cinema [data-motion="quote"] {
  --m-clip-from: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  clip-path: var(--m-clip-from);
}
html.has-cinema [data-motion="quote"][data-dir="left"] {
  --m-clip-from: inset(0 0 0 100%);
}
html.has-cinema [data-motion="quote"][data-dir="up"] {
  --m-clip-from: inset(100% 0 0 0);
}
html.has-cinema [data-motion="quote"].is-cinema {
  animation: cine-band 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.has-cinema [data-motion="matrix"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
}
html.has-cinema [data-motion="matrix"].is-cinema {
  animation: cine-matrix-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.has-cinema [data-motion="prose"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 100%);
}
html.has-cinema [data-motion="prose"].is-cinema {
  animation: cine-prose-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Edge rule: every section draws its own hairline. */
html.has-cinema [data-motion]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--lime, #d2ff00);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 3;
  pointer-events: none;
}
html.has-cinema [data-motion].is-cinema::before {
  animation: cine-edge 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}

/* Shared section heading. */
html.has-cinema [data-motion] .pg-head,
html.has-cinema [data-motion] .pg-band__grid > div,
html.has-cinema [data-motion] .wk-list-intro,
html.has-cinema [data-motion] .wk-hero__grid,
html.has-cinema [data-motion] .wk-branch__grid,
html.has-cinema [data-motion] .sg-systems__head,
html.has-cinema [data-motion] .sg-manifesto__grid > div,
html.has-cinema [data-motion] .sg-release__grid > div,
html.has-cinema [data-motion] .err-more,
html.has-cinema [data-motion] .nw-cat,
html.has-cinema [data-motion] .privacy-wrap > h1,
html.has-cinema [data-motion] .privacy-wrap > .pg-lede {
  opacity: 0;
  transform: translate3d(var(--m-head-x, 0), 26px, 0);
}
html.has-cinema [data-motion].is-cinema .pg-head,
html.has-cinema [data-motion].is-cinema .pg-band__grid > div,
html.has-cinema [data-motion].is-cinema .wk-list-intro,
html.has-cinema [data-motion].is-cinema .wk-hero__grid,
html.has-cinema [data-motion].is-cinema .wk-branch__grid,
html.has-cinema [data-motion].is-cinema .sg-systems__head,
html.has-cinema [data-motion].is-cinema .sg-manifesto__grid > div,
html.has-cinema [data-motion].is-cinema .sg-release__grid > div,
html.has-cinema [data-motion].is-cinema .err-more,
html.has-cinema [data-motion].is-cinema .nw-cat,
html.has-cinema [data-motion].is-cinema .privacy-wrap > h1,
html.has-cinema [data-motion].is-cinema .privacy-wrap > .pg-lede {
  animation: cine-head 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}

/* Ledger: rows arrive like entries in a log. */
html.has-cinema [data-motion="ledger"] .pg-ledger__row {
  opacity: 0;
  transform: translate3d(var(--m-row-x, -18px), 14px, 0);
}
html.has-cinema [data-motion="ledger"].is-cinema .pg-ledger__row {
  animation: cine-row 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * var(--m-gap));
}

/* Matrix: cells click into place from their own corners. */
html.has-cinema [data-motion="matrix"] .pg-matrix__cell {
  opacity: 0;
  transform: translate3d(var(--m-x, 0), 24px, 0) rotateX(7deg);
  transform-origin: 50% 100%;
}
html.has-cinema [data-motion="matrix"].is-cinema .pg-matrix__cell {
  animation: cine-cell 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * var(--m-gap));
}

/* Facts: cards settle with a very small rotation. */
html.has-cinema [data-motion="facts"] .pg-fact {
  opacity: 0;
  transform: translate3d(0, 30px, 0) rotate(var(--m-rot, 0deg));
}
html.has-cinema [data-motion="facts"].is-cinema .pg-fact {
  animation: cine-fact 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.08s + var(--i, 0) * var(--m-gap));
}

/* Checks: each line is uncovered left to right. */
html.has-cinema [data-motion="checks"] .pg-checks li {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(var(--m-check-x, -8px));
}
html.has-cinema [data-motion="checks"].is-cinema .pg-checks li {
  animation: cine-check 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * var(--m-gap));
}

/* Timeline: entries step in from the left. */
html.has-cinema [data-motion="timeline"] .pg-timeline li {
  opacity: 0;
  transform: translateX(var(--m-timeline-x, -24px));
}
html.has-cinema [data-motion="timeline"].is-cinema .pg-timeline li {
  animation: cine-timeline 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * var(--m-gap));
}
html.has-cinema [data-motion="timeline"] .pg-timeline__year {
  display: inline-block;
}
html.has-cinema [data-motion="timeline"].is-cinema .pg-timeline__year {
  animation: cine-year 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.14s + var(--i, 0) * var(--m-gap));
}

/* Prose: columns unfold in sequence. */
html.has-cinema [data-motion="prose"] .pg-prose p {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateY(12px);
}
html.has-cinema [data-motion="prose"].is-cinema .pg-prose p {
  animation: cine-prose 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.12s + var(--i, 0) * var(--m-gap));
}

/* Tags: small parts pop into the cloud. */
html.has-cinema [data-motion="tags"] .pg-tag-cloud span {
  opacity: 0;
  transform: scale(0.72) rotate(var(--m-rot, 0deg));
}
html.has-cinema [data-motion="tags"].is-cinema .pg-tag-cloud span {
  animation: cine-tag 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.04s + var(--i, 0) * var(--m-gap));
}

/* Stack: rows alternate direction. */
html.has-cinema [data-motion="stack"] .pg-stack__row {
  opacity: 0;
  transform: translate3d(var(--m-x, 0), 10px, 0);
}
html.has-cinema [data-motion="stack"].is-cinema .pg-stack__row {
  animation: cine-stack 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.08s + var(--i, 0) * var(--m-gap));
}

/* Link cards: a shallow card turn. */
html.has-cinema [data-motion="links"] .pg-link-card {
  opacity: 0;
  transform: perspective(900px) rotateY(var(--m-ry, 0deg)) translateY(18px);
  transform-origin: 50% 80%;
}
html.has-cinema [data-motion="links"].is-cinema .pg-link-card {
  animation: cine-link 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * var(--m-gap));
}

/* Quote: the type is uncovered like a proof. */
html.has-cinema [data-motion="quote"] .pg-quote p {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
html.has-cinema [data-motion="quote"].is-cinema .pg-quote p {
  animation: cine-quote 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
html.has-cinema [data-motion="quote"] .pg-quote cite,
html.has-cinema [data-motion="quote"] .pg-note-line {
  opacity: 0;
  transform: translateY(10px);
}
html.has-cinema [data-motion="quote"].is-cinema .pg-quote cite,
html.has-cinema [data-motion="quote"].is-cinema .pg-note-line {
  animation: cine-head 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* Existing row lists: the long ledgers. */
html.has-cinema [data-motion="rows"] .wk-row,
html.has-cinema [data-motion="rows"] .nw-row,
html.has-cinema [data-motion="rows"] .sg-row,
html.has-cinema [data-motion="rows"] .ct-list li {
  opacity: 0;
  transform: translate3d(var(--m-x, 0), 14px, 0);
}
html.has-cinema [data-motion="rows"].is-cinema .wk-row,
html.has-cinema [data-motion="rows"].is-cinema .nw-row,
html.has-cinema [data-motion="rows"].is-cinema .sg-row,
html.has-cinema [data-motion="rows"].is-cinema .ct-list li {
  animation: cine-row 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.06s + var(--i, 0) * var(--m-gap));
}

/* Privacy blocks: quiet vertical steps. */
html.has-cinema [data-motion="privacy"] .privacy-block {
  opacity: 0;
  transform: translateY(22px);
}
html.has-cinema [data-motion="privacy"].is-cinema .privacy-block {
  animation: cine-head 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.06s + var(--i, 0) * var(--m-gap));
}

/* Hero: the title leads, the aside follows. */
html.has-cinema [data-motion="hero"] .pg-title,
html.has-cinema [data-motion="hero"] .sg-hero__copy,
html.has-cinema [data-motion="hero"] .pg-lede,
html.has-cinema [data-motion="hero"] .pg-hero__aside,
html.has-cinema [data-motion="hero"] .sg-hero__art,
html.has-cinema [data-motion="hero"] .wk-hero__meta,
html.has-cinema [data-motion="hero"] .sg-hero__foot {
  opacity: 0;
  transform: translateY(26px);
}
html.has-cinema [data-motion="hero"].is-cinema .pg-title,
html.has-cinema [data-motion="hero"].is-cinema .sg-hero__copy {
  animation: cine-title 1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
html.has-cinema [data-motion="hero"].is-cinema .pg-lede {
  animation: cine-head 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
html.has-cinema [data-motion="hero"].is-cinema .pg-hero__aside,
html.has-cinema [data-motion="hero"].is-cinema .sg-hero__art,
html.has-cinema [data-motion="hero"].is-cinema .wk-hero__meta,
html.has-cinema [data-motion="hero"].is-cinema .sg-hero__foot {
  animation: cine-aside 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

/* Poster sections: panels and cards use a shallow lift. */
html.has-cinema [data-motion="poster"] .pg-panel,
html.has-cinema [data-motion="poster"] .ct-card,
html.has-cinema [data-motion="poster"] .pg-split,
html.has-cinema [data-motion="poster"] .pg-link-grid {
  opacity: 0;
  transform: translateY(24px);
}
html.has-cinema [data-motion="poster"].is-cinema .pg-panel,
html.has-cinema [data-motion="poster"].is-cinema .ct-card,
html.has-cinema [data-motion="poster"].is-cinema .pg-split,
html.has-cinema [data-motion="poster"].is-cinema .pg-link-grid {
  animation: cine-head 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.08s + var(--i, 0) * var(--m-gap));
}

/* Split sections: the two halves arrive from opposite sides. */
html.has-cinema [data-motion="split"] .sg-principles article,
html.has-cinema [data-motion="split"] .sg-manifesto__grid > div:last-child {
  opacity: 0;
  transform: translateX(var(--m-split-x, 24px));
}
html.has-cinema [data-motion="split"].is-cinema .sg-principles article,
html.has-cinema [data-motion="split"].is-cinema .sg-manifesto__grid > div:last-child {
  animation: cine-head 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.1s + var(--i, 0) * var(--m-gap));
}

/* Band spotlight and grid motion. */
html.has-cinema [data-motion="band"] {
  --mx: 50%;
  --my: 50%;
}
html.has-cinema [data-motion="band"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.18), transparent 32%);
  opacity: 0;
  transition: opacity 0.45s ease;
  mix-blend-mode: soft-light;
}
html.has-cinema [data-motion="band"].is-cinema::after { opacity: 1; }
html.has-cinema [data-motion="band"] .pg-band__grid,
html.has-cinema [data-motion="band"] .sg-release__grid {
  position: relative;
  z-index: 2;
}

/* Hover states that only affect content, never the reveal transform. */
@media (hover: hover) {
  html.has-cinema [data-motion] .pg-ledger__row b,
  html.has-cinema [data-motion] .pg-stack__row b,
  html.has-cinema [data-motion] .pg-fact b,
  html.has-cinema [data-motion] .pg-matrix__cell b {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s;
  }
  html.has-cinema [data-motion] .pg-ledger__row:hover b,
  html.has-cinema [data-motion] .pg-stack__row:hover b,
  html.has-cinema [data-motion] .pg-fact:hover b,
  html.has-cinema [data-motion] .pg-matrix__cell:hover b {
    transform: translateX(5px);
  }
  html.has-cinema [data-motion] .pg-checks li::before {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s;
  }
  html.has-cinema [data-motion] .pg-checks li:hover::before {
    transform: rotate(90deg) scale(1.15);
  }
  html.has-cinema [data-motion] .pg-tag-cloud span {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, color 0.3s;
  }
  html.has-cinema [data-motion] .pg-tag-cloud span:hover {
    transform: translateY(-2px);
    background: var(--lime, #d2ff00);
    color: #080808;
  }
  html.has-cinema [data-motion] .pg-stack__row {
    transition: padding-left 0.35s ease, background 0.35s ease;
  }
  html.has-cinema [data-motion] .pg-stack__row:hover {
    padding-left: 0.6rem;
    background: rgba(242, 240, 233, 0.035);
  }
  html.has-cinema [data-motion] .pg-quote p em {
    transition: letter-spacing 0.5s ease, color 0.4s ease;
  }
  html.has-cinema [data-motion] .pg-quote p:hover em {
    letter-spacing: -0.005em;
  }
}


/* Touch equivalents for the hover states above. */
html.has-cinema [data-motion] .pg-ledger__row.is-touch b,
html.has-cinema [data-motion] .pg-stack__row.is-touch b,
html.has-cinema [data-motion] .pg-fact.is-touch b,
html.has-cinema [data-motion] .pg-matrix__cell.is-touch b {
  transform: translateX(5px);
}
html.has-cinema [data-motion] .pg-checks li.is-touch::before {
  transform: rotate(90deg) scale(1.15);
}
html.has-cinema [data-motion] .pg-tag-cloud span.is-touch {
  transform: translateY(-2px);
  background: var(--lime, #d2ff00);
  color: #080808;
}
html.has-cinema [data-motion] .pg-stack__row.is-touch {
  padding-left: 0.6rem;
  background: rgba(242, 240, 233, 0.035);
}

@keyframes cine-section {
  from { opacity: 0; transform: translate3d(var(--m-sx), var(--m-sy), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cine-head {
  from { opacity: 0; transform: translate3d(var(--m-head-x, 0), 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cine-title {
  from { opacity: 0; transform: translate3d(0, 36px, 0) skewY(1.5deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) skewY(0); }
}
@keyframes cine-aside {
  from { opacity: 0; transform: translate3d(var(--m-aside-x, 18px), 24px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes cine-row {
  from { opacity: 0; transform: translate3d(var(--m-row-x, -18px), 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cine-cell {
  from { opacity: 0; transform: translate3d(var(--m-x, 0), 24px, 0) rotateX(7deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); }
}
@keyframes cine-fact {
  from { opacity: 0; transform: translate3d(0, 30px, 0) rotate(var(--m-rot, 0deg)); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes cine-check {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(var(--m-check-x, -8px)); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}
@keyframes cine-timeline {
  from { opacity: 0; transform: translateX(var(--m-timeline-x, -24px)); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cine-year {
  from { opacity: 0; transform: translateY(8px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cine-prose {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(12px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes cine-tag {
  from { opacity: 0; transform: scale(0.72) rotate(var(--m-rot, 0deg)); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes cine-stack {
  from { opacity: 0; transform: translate3d(var(--m-x, 0), 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cine-link {
  from { opacity: 0; transform: perspective(900px) rotateY(var(--m-ry, 0deg)) translateY(18px); }
  to   { opacity: 1; transform: perspective(900px) rotateY(0) translateY(0); }
}
@keyframes cine-quote {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes cine-band {
  from { clip-path: var(--m-clip-from, inset(0 100% 0 0)); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes cine-matrix-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes cine-prose-in {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes cine-edge {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Chrome 87 has no overflow: clip. Keep every reveal inside the
   mobile viewport by turning horizontal offsets into vertical ones. */
@media (max-width: 760px) {
  html.has-cinema [data-motion] {
    --m-sx: 0px !important;
    --m-head-x: 0px !important;
  }
  html.has-cinema [data-motion] .pg-ledger__row,
  html.has-cinema [data-motion] .pg-checks li,
  html.has-cinema [data-motion] .pg-timeline li,
  html.has-cinema [data-motion] .sg-principles article,
  html.has-cinema [data-motion] .sg-manifesto__grid > div:last-child,
  html.has-cinema [data-motion] .pg-matrix__cell,
  html.has-cinema [data-motion] .pg-stack__row,
  html.has-cinema [data-motion] .wk-row,
  html.has-cinema [data-motion] .nw-row,
  html.has-cinema [data-motion] .sg-row,
  html.has-cinema [data-motion] .ct-list li,
  html.has-cinema [data-motion] .pg-link-card,
  html.has-cinema [data-motion] .pg-hero__aside,
  html.has-cinema [data-motion] .sg-hero__art,
  html.has-cinema [data-motion] .wk-hero__meta,
  html.has-cinema [data-motion] .sg-hero__foot {
    --m-row-x: 0px;
    --m-check-x: 0px;
    --m-timeline-x: 0px;
    --m-split-x: 0px;
    --m-aside-x: 0px;
    --m-x: 0px !important;
    --m-ry: 0deg !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.has-cinema [data-motion],
  html.has-cinema [data-motion] .pg-head,
  html.has-cinema [data-motion] .pg-band__grid > div,
  html.has-cinema [data-motion] .pg-ledger__row,
  html.has-cinema [data-motion] .pg-matrix__cell,
  html.has-cinema [data-motion] .pg-fact,
  html.has-cinema [data-motion] .pg-checks li,
  html.has-cinema [data-motion] .pg-timeline li,
  html.has-cinema [data-motion] .pg-prose p,
  html.has-cinema [data-motion] .pg-tag-cloud span,
  html.has-cinema [data-motion] .pg-stack__row,
  html.has-cinema [data-motion] .pg-link-card,
  html.has-cinema [data-motion] .privacy-block,
  html.has-cinema [data-motion] .pg-title,
  html.has-cinema [data-motion] .pg-lede,
  html.has-cinema [data-motion] .pg-hero__aside,
  html.has-cinema [data-motion] .sg-hero__copy,
  html.has-cinema [data-motion] .sg-hero__art,
  html.has-cinema [data-motion] .pg-panel,
  html.has-cinema [data-motion] .ct-card,
  html.has-cinema [data-motion] .pg-split,
  html.has-cinema [data-motion] .pg-link-grid,
  html.has-cinema [data-motion] .sg-principles article {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
  html.has-cinema [data-motion]::before { animation: none !important; transform: scaleX(1) !important; }
  html.has-cinema [data-motion="band"]::after { display: none !important; }
}

/* ============================================================
   HIGHLIGHTER TEXT REVEALS & AMBIENT LOOP ANIMATIONS
   ============================================================ */

/* 1 · Highlighter sweep on text reveal */
.highlight-reveal {
  position: relative;
  display: inline;
  background-image: linear-gradient(120deg, var(--lime, #d2ff00) 0%, var(--lime, #d2ff00) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 88%;
  color: inherit;
  transition: background-size 0.65s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
  padding: 0 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.highlight-reveal.is-in {
  background-size: 100% 100%;
  color: #080808 !important;
}

/* 2 · Block heading highlighter mask */
.m-highlighter-heading {
  position: relative;
  display: inline-block;
}
.m-highlighter-heading::after {
  content: "";
  position: absolute;
  inset: -2px -6px;
  background: var(--lime, #d2ff00);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  z-index: 2;
}
.m-highlighter-heading.is-in::after {
  animation: highlighterSweep 0.68s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes highlighterSweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ============================================================
   ATHLETIC TAPE REVEAL LAYER (Lando Norris / McLaren Athletic Editorial)
   Physical electric lime tape strips sweep across typography on entry
   and peel away, unveiling razor-sharp typography underneath.
   ============================================================ */

.tape-wrap {
  display: block;
  overflow: visible;
  position: relative;
  max-width: 100%;
}
span.tape-wrap {
  display: inline-block;
}

.tape-line {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible;
  line-height: inherit;
  white-space: normal;
}

/* The physical lime athletic tape strip */
.tape-line::after,
.hero__title .mask::after {
  content: "";
  position: absolute;
  top: -0.06em;
  bottom: -0.06em;
  left: -0.15em;
  right: -0.15em;
  background: var(--lime, #d2ff00);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  z-index: 10;
  border-radius: 1px;
  box-shadow: 0 0 16px rgba(210, 255, 0, 0.45);
}

/* The text under the tape */
.tape-text {
  display: inline-block;
  opacity: 0;
  transform: translateY(3px);
  will-change: opacity, transform;
}

/* Scroll-triggered reveal */
.tape-line.is-in::after,
.tape-wrap.is-in .tape-line::after {
  animation: tapeSweep 0.54s cubic-bezier(0.77, 0, 0.175, 1) both;
  animation-delay: calc(var(--tape-i, 0) * 0.1s);
}

.tape-line.is-in .tape-text,
.tape-wrap.is-in .tape-text {
  animation: tapeTextSnap 0.54s steps(1) both;
  animation-delay: calc(var(--tape-i, 0) * 0.1s);
}

.tape-line.is-in [data-reveal],
.tape-wrap.is-in [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* Hero & Page Header entrance on .is-loaded */
.hero__title .mask {
  position: relative !important;
  overflow: visible !important;
}

.is-loaded .hero__title .mask::after {
  animation: tapeSweep 0.58s cubic-bezier(0.77, 0, 0.175, 1) both;
}
.is-loaded .hero__title .mask:first-child::after {
  animation-delay: 0.22s;
}
.is-loaded .hero__title .mask--right::after {
  animation-delay: 0.36s;
}

.is-loaded .hero__title .mask__i {
  animation: heroTapeTextSnap 0.58s steps(1) both !important;
}
.is-loaded .hero__title .mask:first-child .mask__i {
  animation-delay: 0.22s;
}
.is-loaded .hero__title .mask--right .mask__i {
  animation-delay: 0.36s;
}

.is-loaded .pg-title .tape-line::after,
.is-loaded .ot-hero__title .tape-line::after {
  animation: tapeSweep 0.58s cubic-bezier(0.77, 0, 0.175, 1) both;
  animation-delay: calc(0.2s + var(--tape-i, 0) * 0.12s);
}
.is-loaded .pg-title .tape-text,
.is-loaded .ot-hero__title .tape-text {
  animation: tapeTextSnap 0.58s steps(1) both;
  animation-delay: calc(0.2s + var(--tape-i, 0) * 0.12s);
}

@keyframes tapeSweep {
  0% {
    transform: scaleX(0);
    transform-origin: left center;
  }
  44% {
    transform: scaleX(1.02);
    transform-origin: left center;
  }
  48% {
    transform: scaleX(1.02);
    transform-origin: right center;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right center;
  }
}

@keyframes tapeTextSnap {
  0%, 43% {
    opacity: 0;
    transform: translateY(3px);
  }
  44%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroTapeTextSnap {
  0%, 43% {
    opacity: 0;
  }
  44%, 100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tape-line::after,
  .hero__title .mask::after {
    display: none !important;
  }
  .tape-text {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mask__i {
    transform: none !important;
    animation: none !important;
  }
}

/* 3 · Ambient Loop Animations for static elements */

/* Live pulse dot with radar ripple */
.live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--lime, #d2ff00);
}
.live-pulse__dot {
  position: relative;
  width: 7px;
  height: 7px;
  background: var(--lime, #d2ff00);
  border-radius: 50%;
}
.live-pulse__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--lime, #d2ff00);
  animation: radarRipple 2s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}

@keyframes radarRipple {
  0%   { transform: scale(0.6); opacity: 0.9; }
  60%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Ambient breathing for badges */
.ot-intro__badge,
.hero-tag {
  animation: ambientBadgeBreath 4.5s ease-in-out infinite alternate;
}

@keyframes ambientBadgeBreath {
  0%   { box-shadow: 0 0 0 1px rgba(242, 240, 233, 0.12); }
  50%  { box-shadow: 0 0 16px rgba(210, 255, 0, 0.18), 0 0 0 1px rgba(210, 255, 0, 0.35); }
  100% { box-shadow: 0 0 0 1px rgba(242, 240, 233, 0.12); }
}

/* Kinetic rotating asterisk / crosshair */
.sg-brand__mark,
.partners__track i {
  display: inline-block;
  animation: ambientSpin 18s linear infinite;
  transform-origin: center;
}

@keyframes ambientSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Micro corner ticks loop on cards */
.ot-card, .pg-fact, .stat {
  position: relative;
}
.ot-card::after, .pg-fact::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 4px; height: 4px;
  background: var(--lime, #d2ff00);
  opacity: 0.25;
  border-radius: 50%;
  animation: tickBlink 3.2s ease-in-out infinite alternate;
}

@keyframes tickBlink {
  0%   { opacity: 0.15; transform: scale(0.8); }
  50%  { opacity: 0.85; transform: scale(1.3); }
  100% { opacity: 0.15; transform: scale(0.8); }
}