/*
 * Light-surface motion repair.
 * Restores the package instruments and showcase reveal after the chapter
 * palette inversion while keeping the underlying interaction logic intact.
 */

.home-page {
  --light-motion-spring: linear(
    0, .009, .035 2.1%, .141 4.4%, .723 12.9%,
    .938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26%,
    1.079 30.3%, 1.049 36%, 1.024 42.6%, 1.011 50.3%,
    1.004 59.2%, 1.001 69.3%, 1
  );
  --light-motion-snap: cubic-bezier(.22, 1, .36, 1);
  --light-motion-ambient: cubic-bezier(.65, 0, .35, 1);
}

/* Give the hero cutout the physical presence of a printed sticker. */
.home-page .hero-mascot--static .hero-static {
  top: auto;
  bottom: -12px;
  transform-origin: 52% 78%;
  filter:
    drop-shadow(0 0 1px rgba(244, 238, 228, .88))
    drop-shadow(0 0 7px rgba(245, 165, 36, .16))
    drop-shadow(0 34px 54px rgba(0, 0, 0, .32));
  animation: hero-sticker-orbit 9.6s var(--light-motion-ambient) infinite;
  transition: filter 420ms var(--light-motion-snap);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .home-page .hero-mascot--static:hover .hero-static {
    animation-play-state: paused;
    filter:
      drop-shadow(0 0 1.5px rgba(255, 247, 229, .96))
      drop-shadow(0 0 13px rgba(245, 165, 36, .3))
      drop-shadow(0 38px 62px rgba(0, 0, 0, .38));
  }
}

@keyframes hero-sticker-orbit {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(-.12deg); }
  27% { transform: translate3d(1px, -1px, 0) rotate(.08deg); }
  58% { transform: translate3d(-1px, -4px, 0) rotate(-.05deg); }
  81% { transform: translate3d(1px, 0, 0) rotate(.12deg); }
}

/* Light surfaces need darker signal colours than their former glow palette. */
.home-page .pricing-section .orbit-plan { --title-light: #c45420; }
.home-page .pricing-section .parsec-plan { --title-light: #70458f; }
.home-page .pricing-section .lightspeed-plan { --title-light: #16788a; }

.home-page .pricing-grid .price-plan {
  transition:
    transform 420ms var(--light-motion-snap),
    border-color 320ms var(--light-motion-snap),
    background-color 320ms var(--light-motion-snap),
    box-shadow 420ms var(--light-motion-snap);
}

.home-page .pricing-grid .price-plan::before {
  background: linear-gradient(90deg, var(--title-light), var(--title-light)) 0 0 / 24% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 620ms var(--light-motion-spring),
    background-size 380ms var(--light-motion-snap),
    opacity 220ms var(--light-motion-snap),
    filter 260ms var(--light-motion-snap);
}

.home-page .pricing-grid .price-plan.is-visible::before {
  transform: scaleX(1);
  transition-delay: var(--sequence-delay, 0ms), 0ms, 0ms;
}

@media (hover: hover) {
  .home-page .pricing-grid .price-plan:is(:hover, :focus-within) {
    transform: none;
    border-color: color-mix(in srgb, var(--title-light) 48%, var(--pricing-card-line));
    background: color-mix(in srgb, var(--pricing-card) 96%, var(--title-light)) !important;
    box-shadow: none;
  }

  .home-page .pricing-grid .price-plan:is(:hover, :focus-within)::before {
    background-size: 100% 100%;
    opacity: .9;
    filter: none;
  }
}

/* Each package name sits at the centre of its own animated emblem. */
.home-page .pricing-grid .plan-title {
  min-height: 108px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  justify-content: stretch;
  transform: none !important;
}

.home-page .pricing-grid .price-plan h3 {
  position: relative;
  z-index: 3;
  width: 100%;
  justify-self: stretch;
  text-align: center;
  text-shadow:
    0 0 9px var(--pricing-card),
    0 0 18px var(--pricing-card),
    0 0 28px var(--pricing-card);
  transition: color 280ms var(--light-motion-snap);
}

.home-page .pricing-grid .plan-title > :is(.orbit-system, .math-cloud, .speed-lines) {
  z-index: 1;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  height: 88px;
  opacity: .38 !important;
  filter: saturate(.82);
  transform: translate3d(-50%, -50%, 0) !important;
  transition: opacity 320ms var(--light-motion-snap), filter 320ms var(--light-motion-snap);
}

.home-page .pricing-grid .plan-title > .orbit-system {
  width: min(250px, 92%);
  transform: translate3d(-50%, -50%, 0) rotate(-7deg) !important;
}

.home-page .pricing-grid .plan-title > .math-cloud {
  width: min(260px, 94%);
}

.home-page .pricing-grid .plan-title > .speed-lines {
  width: min(276px, 96%);
}

.home-page .pricing-grid .orbit-system {
  transform: translate3d(-50%, -50%, 0) rotate(-7deg) !important;
}

@media (hover: hover) {
  .home-page .pricing-grid .price-plan:is(:hover, :focus-within) h3 {
    transform: none;
  }

  .home-page .pricing-grid .price-plan:is(:hover, :focus-within) .plan-title > :is(.orbit-system, .math-cloud, .speed-lines) {
    opacity: .56 !important;
    filter: saturate(1);
  }

  .home-page .pricing-grid .parsec-plan:is(:hover, :focus-within) .math-cloud i {
    translate: none;
    text-shadow: 0 0 8px color-mix(in srgb, var(--title-light) 18%, transparent);
  }

  .home-page .pricing-grid .lightspeed-plan:is(:hover, :focus-within) .speed-lines {
    filter: saturate(1);
  }
}

.home-page .pricing-grid .orbit-system i {
  border-color: color-mix(in srgb, var(--title-light) 74%, transparent);
}

.home-page .pricing-grid .orbit-system i:nth-child(2) {
  border-color: transparent var(--title-light);
}

.home-page .pricing-grid .orbit-system b {
  opacity: 1 !important;
  background: var(--title-light);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--title-light) 24%, transparent),
    0 0 9px color-mix(in srgb, var(--title-light) 52%, transparent);
}

.home-page .pricing-grid .orbit-system b::before {
  background: linear-gradient(90deg, transparent, var(--title-light));
}

.home-page .pricing-grid .math-cloud i {
  color: var(--title-light);
  top: 50%;
  opacity: .78;
  text-shadow: 0 0 8px color-mix(in srgb, var(--title-light) 20%, transparent);
}

.home-page .pricing-grid .speed-lines::before,
.home-page .pricing-grid .speed-lines::after {
  border-color: var(--title-light);
  opacity: .7;
}

.home-page .pricing-grid .speed-lines i {
  opacity: .68 !important;
  background: linear-gradient(
    90deg,
    transparent 0,
    var(--title-light) 22%,
    #cc6437 52%,
    var(--title-light) 78%,
    transparent 100%
  );
}

/* The three cards broadcast different capabilities, but share one calm tempo. */
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .pricing-section.ambient-active .orbit-plan.is-visible .orbit-system i:first-child {
    animation: light-orbit-track 12s linear infinite !important;
    will-change: transform;
  }

  .motion-ready .pricing-section.ambient-active .orbit-plan.is-visible .orbit-system b {
    animation: light-orbit-beacon 6.4s linear infinite !important;
    will-change: transform;
  }

  .motion-ready .pricing-section.ambient-active .parsec-plan.is-visible .math-cloud i {
    animation: light-parsec-coordinate 6.4s linear infinite !important;
    will-change: transform, opacity;
  }

  .motion-ready .pricing-section.ambient-active .parsec-plan.is-visible .math-cloud i:nth-child(1) { animation-delay: 0s !important; }
  .motion-ready .pricing-section.ambient-active .parsec-plan.is-visible .math-cloud i:nth-child(2) { animation-delay: -1.6s !important; }
  .motion-ready .pricing-section.ambient-active .parsec-plan.is-visible .math-cloud i:nth-child(3) { animation-delay: -3.2s !important; }
  .motion-ready .pricing-section.ambient-active .parsec-plan.is-visible .math-cloud i:nth-child(4) { animation-delay: -4.8s !important; }

  .motion-ready .pricing-section.ambient-active .lightspeed-plan.is-visible .speed-lines i {
    animation: light-speed-pulse 3.6s var(--light-motion-ambient) infinite !important;
    animation-delay: calc(var(--fx-delay, 0ms) * -4) !important;
    will-change: transform;
  }
}

@keyframes light-orbit-track {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes light-orbit-beacon {
  0% { offset-distance: 0%; transform: scale(.82); }
  42% { transform: scale(1.22); }
  72% { transform: scale(.94); }
  100% { offset-distance: 100%; transform: scale(.82); }
}

@keyframes light-parsec-coordinate {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--float-x) * -.4), 6px, 0) rotate(-1deg) scale(.92);
  }
  18% { opacity: .72; }
  52% {
    opacity: 1;
    transform: translate3d(0, -8px, 0) rotate(.35deg) scale(1.06);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--float-x), -26px, 0) rotate(var(--float-rotate)) scale(.98);
  }
}

@keyframes light-speed-pulse {
  0% { transform: translate3d(-24px, 0, 0) scaleX(.46); }
  30% { transform: translate3d(-4px, 0, 0) scaleX(1.05); }
  68% { transform: translate3d(14px, 0, 0) scaleX(.78); }
  100% { transform: translate3d(30px, 0, 0) scaleX(.5); }
}

/* Restore the showcase's spatial reveal on its new paper chapter. */
.motion-ready .work-section .project-stage,
.motion-ready .work-section .project-details {
  transition:
    opacity 680ms var(--light-motion-spring),
    transform 680ms var(--light-motion-spring) !important;
}

.motion-ready .work-section:not(.motion-entered) .project-stage {
  opacity: 0 !important;
  transform: translate3d(0, 18px, 0) scale(.992) !important;
}

.motion-ready .work-section:not(.motion-entered) .project-details {
  opacity: 0 !important;
  transform: translate3d(-20px, 0, 0) !important;
}

.motion-ready .work-section.motion-entered .project-stage,
.motion-ready .work-section.motion-entered .project-details {
  opacity: 1 !important;
  transform: none !important;
}

.motion-ready .work-section.motion-entered .project-details {
  transition-delay: 110ms !important;
}

@media (max-width: 980px) {
  .motion-ready .work-section:not(.motion-entered) .project-details {
    transform: translate3d(0, 14px, 0) !important;
  }
}

@media (max-width: 420px) {
  .home-page .pricing-grid .plan-title {
    min-height: 102px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-mascot--static .hero-static {
    animation: none !important;
    transform: none !important;
    transition: filter 180ms var(--light-motion-snap);
    will-change: auto;
  }

  .home-page .pricing-grid .math-cloud i {
    opacity: .78;
  }

  .home-page .pricing-grid .price-plan::before {
    transform: scaleX(1);
    transition: none;
  }

  .home-page .pricing-section :is(
    .orbit-system,
    .orbit-system *,
    .math-cloud,
    .math-cloud *,
    .speed-lines,
    .speed-lines *
  ) {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .home-page .pricing-grid .plan-title > :is(.orbit-system, .math-cloud, .speed-lines) {
    transform: translate3d(-50%, -50%, 0) !important;
  }

  .home-page .pricing-grid .orbit-system {
    transform: translate3d(-50%, -50%, 0) rotate(-7deg) !important;
  }

  .home-page .work-section :is(.project-stage, .project-details) {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 180ms var(--light-motion-snap) !important;
  }
}