/* v15 — the Pauu Route: one motion language across the corporate pages. */

.p5-site {
  --p15-page-progress: 0;
  --p15-path-progress: 0;
  --p15-flow-progress: 0;
  --p15-route: #d75f55;
  --p15-route-soft: rgba(215, 95, 85, 0.16);
  --p15-ink: #202124;
  --p15-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Persistent reading signal. It gives the whole site one recognisable motion motif. */

.p15-page-progress {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.p15-page-progress i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--p15-route);
  box-shadow: 0 0 0.8rem rgba(215, 95, 85, 0.3);
  transform: scaleX(var(--p15-page-progress));
  transform-origin: left center;
  will-change: transform;
}

.p15-route-rail {
  position: fixed;
  z-index: 18;
  top: calc(var(--pauu-admin-offset, 0px) + 50%);
  left: max(1rem, calc((100vw - 1400px) / 2));
  width: 4.2rem;
  height: min(43vh, 24rem);
  display: grid;
  grid-template-columns: 2px 1fr;
  gap: 0.8rem;
  color: #6e777c;
  transform: translateY(-42%);
  pointer-events: none;
}

.p15-route-rail__track {
  position: relative;
  width: 1px;
  height: 100%;
  display: block;
  background: rgba(16, 35, 49, 0.14);
}

.p15-route-rail__track::before,
.p15-route-rail__track::after {
  position: absolute;
  left: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(16, 35, 49, 0.24);
  border-radius: 50%;
  background: #fff;
  content: "";
  transform: translate(-50%, -50%);
}

.p15-route-rail__track::before {
  top: 0;
}

.p15-route-rail__track::after {
  top: 100%;
}

.p15-route-rail__track i {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(var(--p15-route), rgba(215, 95, 85, 0.45));
  box-shadow: 0 0 0.75rem rgba(215, 95, 85, 0.2);
  transform: scaleY(var(--p15-page-progress));
  transform-origin: top center;
}

.p15-route-rail p {
  margin: auto 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.p15-route-rail p span {
  color: var(--p15-route);
  font-family: "Manrope", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

.p15-route-rail p b {
  max-height: 8.5rem;
  overflow: hidden;
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.7;
  writing-mode: vertical-rl;
}

/* Hero choreography and the canvas route signal. */

.p10-hero-stage[data-motion-hero] {
  --p15-light-x: 50%;
  --p15-light-y: 50%;
  --p15-hero-shift-x: 0px;
  --p15-hero-shift-y: 0px;
  --p15-hero-rotate-x: 0deg;
  --p15-hero-rotate-y: 0deg;
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: box-shadow 500ms var(--p15-ease);
}

.p10-hero-stage[data-motion-hero]:hover {
  box-shadow: 0 2.8rem 7.8rem rgba(20, 41, 52, 0.145);
}

.p15-signal-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.9;
  pointer-events: none;
}

.p15-enhanced .p10-hero-copy {
  z-index: 3;
  transform: translateZ(34px);
}

.p15-enhanced .p10-hero-copy > * {
  transition: transform 900ms var(--p15-ease);
}

.p15-enhanced:not(.p15-ready) .p10-hero-copy > * {
  transform: translateY(0.85rem);
}

.p15-enhanced .p10-hero-copy > :nth-child(2) {
  transition-delay: 70ms;
}

.p15-enhanced .p10-hero-copy > :nth-child(3) {
  transition-delay: 130ms;
}

.p15-enhanced .p10-hero-copy > :nth-child(4) {
  transition-delay: 190ms;
}

.p15-enhanced .p10-hero-copy > :nth-child(5) {
  transition-delay: 250ms;
}

.p15-enhanced .p10-hero-visual.is-visible {
  clip-path: inset(0 round clamp(1.6rem, 3vw, 2.8rem));
  transform:
    translate3d(
      var(--p15-hero-shift-x),
      calc(var(--p5-parallax-y, 0px) + var(--p15-hero-shift-y)),
      0
    )
    scale(1.026)
    rotateX(var(--p15-hero-rotate-x))
    rotateY(var(--p15-hero-rotate-y));
  transition:
    clip-path 1100ms var(--p15-ease),
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: 68% 50%;
  will-change: transform;
}

.p15-enhanced:not(.p15-ready) .p10-hero-visual.is-visible {
  clip-path: inset(2.5% 0 2.5% 7% round clamp(1.6rem, 3vw, 2.8rem));
}

/* Evidence and article cards react without turning the page into a 3D demo. */

.p15-enhanced [data-motion-card] {
  --p5-parallax-y: 0px;
  --p15-card-rx: 0deg;
  --p15-card-ry: 0deg;
  --p15-spot-x: 50%;
  --p15-spot-y: 50%;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
}

.p15-enhanced [data-motion-card].is-visible {
  transform:
    translate3d(0, var(--p5-parallax-y), 0)
    perspective(1100px)
    rotateX(var(--p15-card-rx))
    rotateY(var(--p15-card-ry));
  transition:
    transform 280ms cubic-bezier(0.2, 0.72, 0.2, 1),
    box-shadow 320ms ease;
}

.p15-enhanced [data-motion-card]::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--p15-spot-x) var(--p15-spot-y), rgba(255, 255, 255, 0.34), transparent 30%) padding-box,
    radial-gradient(circle at var(--p15-spot-x) var(--p15-spot-y), rgba(215, 95, 85, 0.36), transparent 25%) border-box;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.p15-enhanced [data-motion-card].is-pointer-active::after {
  opacity: 1;
}

.p15-enhanced .p6-proof-card[data-motion-card].is-pointer-active {
  box-shadow: 0 1.8rem 4.5rem rgba(20, 41, 52, 0.13);
}

.p15-enhanced .p6-journal-grid article[data-motion-card] figure img,
.p15-enhanced .p7-start-feature[data-motion-card] figure img {
  transition: transform 800ms var(--p15-ease), filter 500ms ease;
}

.p15-enhanced .p6-journal-grid article[data-motion-card]:hover figure img,
.p15-enhanced .p7-start-feature[data-motion-card]:hover figure img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.015);
}

/* The six-step path fills as the reader actually moves through it. */

.p8-site .p7-curriculum[data-motion-path]::before {
  background: rgba(16, 35, 49, 0.13);
}

.p8-site .p7-curriculum[data-motion-path]::after {
  position: absolute;
  z-index: 0;
  top: 2.25rem;
  bottom: 2.25rem;
  left: 1rem;
  width: 2px;
  background: linear-gradient(var(--p15-route), rgba(215, 95, 85, 0.38));
  box-shadow: 0 0 0.9rem rgba(215, 95, 85, 0.22);
  content: "";
  transform: scaleY(var(--p15-path-progress));
  transform-origin: top center;
  will-change: transform;
}

.p8-site .p7-curriculum[data-motion-path] li {
  position: relative;
  z-index: 1;
}

.p8-site .p7-curriculum[data-motion-path] a > span {
  border-radius: 50%;
  transition:
    color 300ms ease,
    background-color 300ms ease,
    box-shadow 300ms ease,
    transform 420ms var(--p15-ease);
}

.p8-site .p7-curriculum[data-motion-path] li.is-route-passed a > span {
  color: #fff;
  background: var(--p15-route);
  box-shadow: 0 0 0 0.35rem #fff, 0 0 0 0.42rem rgba(215, 95, 85, 0.25);
  transform: scale(1.03);
}

.p8-site .p7-curriculum[data-motion-path] li.is-route-passed h3 {
  color: #182d39;
}

/* X recommendation is a real three-step signal, not three static cards. */

.p10-algorithm-flow[data-motion-flow]::before {
  background: rgba(16, 35, 49, 0.12);
}

.p10-algorithm-flow[data-motion-flow]::after {
  position: absolute;
  z-index: 1;
  top: 2.2rem;
  right: 8%;
  left: 8%;
  height: 2px;
  background: var(--p15-route);
  box-shadow: 0 0 0.8rem rgba(215, 95, 85, 0.28);
  content: "";
  transform: scaleX(var(--p15-flow-progress));
  transform-origin: left center;
  will-change: transform;
}

.p10-algorithm-flow[data-motion-flow] > li > div > span {
  transition:
    color 260ms ease,
    background-color 260ms ease,
    box-shadow 320ms ease,
    transform 420ms var(--p15-ease);
}

.p10-algorithm-flow[data-motion-flow] > li.is-signal-active > div > span {
  color: #fff;
  background: var(--p15-route);
  box-shadow: 0 0 0 0.35rem var(--p10-porcelain), 0 0 1.15rem rgba(215, 95, 85, 0.36);
  transform: scale(1.06);
}

/* The long-form guide behaves like a route map, with one clearly active chapter. */

.p8-guide-site .p7-guide-toc a.is-active {
  color: #172f3d;
  background: #e7f1f2;
  box-shadow: inset 2px 0 var(--p15-route);
  transform: translateX(0.18rem);
}

.p8-guide-site .p7-guide-chapter[data-chapter] {
  transition:
    border-color 420ms ease,
    box-shadow 520ms ease,
    transform 520ms var(--p15-ease);
}

.p8-guide-site .p7-guide-chapter[data-chapter].is-motion-current {
  border-color: rgba(215, 95, 85, 0.26);
  box-shadow: 0 1.5rem 4rem rgba(20, 41, 52, 0.085);
  transform: translateY(-0.2rem);
}

/* Numeric proof becomes visible as a live signal, while preserving the exact final value. */

[data-count-target] {
  display: inline-block;
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}

[data-count-target].is-counting {
  color: var(--p15-route);
}

[data-count-target].is-counted {
  transition: color 500ms ease;
}

/* Primary actions have a small physical response; the normal OS cursor stays intact. */

.p15-enhanced [data-motion-magnetic] {
  --p15-magnet-x: 0px;
  --p15-magnet-y: 0px;
  --p15-magnet-lift: 0px;
  transform: translate3d(
    var(--p15-magnet-x),
    calc(var(--p15-magnet-y) + var(--p15-magnet-lift)),
    0
  );
  transition:
    transform 220ms cubic-bezier(0.2, 0.75, 0.2, 1),
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.p15-enhanced [data-motion-magnetic]:hover,
.p15-enhanced [data-motion-magnetic]:focus-visible {
  --p15-magnet-lift: -2px;
}

.p15-enhanced [data-motion-magnetic]:active {
  --p15-magnet-lift: 1px;
}

.p10-footer-cta[data-motion-cta] figure,
.p12-action-frame[data-motion-cta] figure {
  transition: transform 700ms var(--p15-ease);
  transform-origin: 50% 100%;
}

.p10-footer-cta[data-motion-cta]:hover figure {
  transform: translate3d(0, -0.7rem, 0) rotate(-1deg);
}

.p12-action-frame[data-motion-cta]:hover figure {
  transform: translate3d(0, calc(var(--p5-parallax-y, 0px) - 0.55rem), 0) rotate(1deg);
}

/* Modern CSS handles decorative character entry where supported; JS is not required. */

@supports (animation-timeline: view()) {
  .p15-enhanced .p6-practice-list > li figure img,
  .p15-enhanced .p6-investment-frame > figure img,
  .p15-enhanced .p12-message-intro figure img {
    animation: p15-character-pass linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 43%;
  }
}

@keyframes p15-character-pass {
  from {
    filter: drop-shadow(0 0.6rem 1rem rgba(16, 35, 49, 0.04));
    transform: translateY(1.5rem) rotate(-1.5deg) scale(0.97);
  }
  to {
    filter: drop-shadow(0 1.2rem 1.7rem rgba(16, 35, 49, 0.13));
    transform: translateY(0) rotate(0) scale(1);
  }
}

@media (max-width: 1320px) {
  .p15-route-rail {
    display: none;
  }
}

@media (max-width: 980px) {
  .p15-signal-canvas {
    display: none;
  }

  .p15-enhanced .p10-hero-copy {
    transform: none;
  }

  .p15-enhanced .p10-hero-visual.is-visible {
    clip-path: inset(0 round 1.4rem);
    transform: translate3d(0, var(--p5-parallax-y, 0px), 0) scale(1.01);
  }

  .p10-algorithm-flow[data-motion-flow]::after {
    top: 3rem;
    right: auto;
    bottom: 3rem;
    left: 2.6rem;
    width: 2px;
    height: auto;
    transform: scaleY(var(--p15-flow-progress));
    transform-origin: top center;
  }
}

@media (max-width: 640px) {
  .p15-page-progress {
    height: 2px;
  }

  .p15-enhanced [data-motion-card].is-visible {
    transform: translate3d(0, var(--p5-parallax-y, 0px), 0);
  }

  .p8-guide-site .p7-guide-chapter[data-chapter].is-motion-current {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p15-signal-canvas {
    display: none !important;
  }

  .p15-page-progress i,
  .p15-route-rail__track i,
  .p8-site .p7-curriculum[data-motion-path]::after,
  .p10-algorithm-flow[data-motion-flow]::after {
    transform: none !important;
  }

  .p15-enhanced .p10-hero-copy,
  .p15-enhanced .p10-hero-copy > *,
  .p15-enhanced .p10-hero-visual.is-visible,
  .p15-enhanced [data-motion-card].is-visible,
  .p15-enhanced [data-motion-magnetic],
  .p10-footer-cta[data-motion-cta] figure,
  .p12-action-frame[data-motion-cta] figure,
  .p8-guide-site .p7-guide-chapter[data-chapter].is-motion-current {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}