/*
 * Allodial motion layer
 * Loaded after styles.css. Every animated state is opt-in via .motion-ready,
 * so content remains fully visible if JavaScript is unavailable.
 */

:root {
  --fx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fx-ease-soft: cubic-bezier(0.22, 0.68, 0, 1);
}

.motion-ready body {
  --fx-progress: 0;
}

.motion-progress {
  position: fixed;
  z-index: 110;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--fx-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #806019, #d5ab4e 72%, #e7c876);
  box-shadow: 0 0 18px rgba(181, 138, 42, 0.24);
  will-change: transform;
}

/* Cinematic sequences ---------------------------------------------------- */

.motion-ready .fx-sequence .fx-item {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, clamp(14px, 2vw, 28px), 0);
  transition:
    opacity 760ms var(--fx-ease-out),
    filter 760ms var(--fx-ease-out),
    transform 920ms var(--fx-ease-out);
  transition-delay: calc(var(--fx-index, 0) * 72ms + 40ms);
  will-change: opacity, filter, transform;
}

.motion-ready .fx-sequence.fx-in .fx-item {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

.motion-ready .hero-content.fx-sequence .fx-item {
  transform: translate3d(0, 22px, 0) scale(0.992);
  transition-duration: 900ms, 900ms, 1080ms;
  transition-delay: calc(var(--fx-index, 0) * 105ms + 100ms);
}

.motion-ready .hero-content.fx-sequence.fx-in .fx-item {
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-ready .hero-ledger.fx-sequence .fx-item {
  filter: none;
  transform: translate3d(0, 12px, 0);
  transition-delay: calc(var(--fx-index, 0) * 70ms + 520ms);
}

.motion-ready .hero-ledger.fx-sequence.fx-in .fx-item {
  transform: translate3d(0, 0, 0);
}

.motion-ready .chapter-label.fx-item {
  filter: none;
  transform: translate3d(-12px, 0, 0);
}

.motion-ready .fx-sequence.fx-in .chapter-label.fx-item {
  transform: translate3d(0, 0, 0);
}

.motion-ready .corridor-dossier.fx-sequence .record-card.fx-item,
.motion-ready .process-rail.fx-sequence article.fx-item,
.motion-ready .model-principles.fx-sequence article.fx-item,
.motion-ready .metric-ledger.fx-sequence article.fx-item,
.motion-ready .dispatch-ledger.fx-sequence article.fx-item,
.motion-ready .product-library.fx-sequence .product-frame.fx-item {
  filter: none;
  transform: translate3d(0, 20px, 0) scale(0.992);
}

.motion-ready .corridor-dossier.fx-sequence.fx-in .record-card.fx-item,
.motion-ready .process-rail.fx-sequence.fx-in article.fx-item,
.motion-ready .model-principles.fx-sequence.fx-in article.fx-item,
.motion-ready .metric-ledger.fx-sequence.fx-in article.fx-item,
.motion-ready .dispatch-ledger.fx-sequence.fx-in article.fx-item,
.motion-ready .product-library.fx-sequence.fx-in .product-frame.fx-item {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Scroll-linked depth ---------------------------------------------------- */

.motion-ready .hero-land {
  inset: auto auto 0 50%;
  filter: none;
  transform: translate3d(-50%, var(--fx-hero-land-y, 0px), 0);
  transform-origin: 50% 100%;
  will-change: transform;
}

.motion-ready .hero-veil {
  opacity: var(--fx-hero-veil-opacity, 1);
  will-change: opacity;
}

.motion-ready .hero-route {
  transform: translate3d(0, var(--fx-hero-route-y, 0px), 0);
  will-change: transform;
}

.motion-ready .hero-content {
  transform: translate3d(0, var(--fx-hero-copy-y, 0px), 0);
  will-change: transform;
}

.motion-ready .hero-ledger {
  transform: translate3d(0, var(--fx-hero-ledger-y, 0px), 0);
  will-change: transform;
}

.motion-ready .fx-depth-image {
  transform: translate3d(0, var(--fx-image-y, 0px), 0) scale(1.045);
  scale: 1;
  transition: scale 700ms var(--fx-ease-out);
  will-change: transform, scale;
}

.motion-ready .product-frame:hover .product-viewport img.fx-depth-image {
  transform: translate3d(0, var(--fx-image-y, 0px), 0) scale(1.045);
  scale: 1.012;
}

.motion-ready .closing-map {
  inset: -4%;
  transform: translate3d(0, var(--fx-closing-map-y, 0px), 0) scale(1.07);
  transform-origin: 50% 20%;
  will-change: transform;
}

.motion-ready .fx-depth-panel {
  transform: translate3d(0, var(--fx-panel-y, 0px), 0) scale(1.008);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Route and evidence details -------------------------------------------- */

.motion-ready .route-draw .route-line,
.motion-ready .route-draw .spine-line path,
.motion-ready .route-draw.spine-line path {
  transition-duration: 1.8s;
  transition-timing-function: var(--fx-ease-soft);
}

.motion-ready .route-draw circle,
.motion-ready .route-draw .junctions circle {
  opacity: 0;
  transform: scale(0.35);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 420ms ease,
    transform 680ms var(--fx-ease-out);
}

.motion-ready .route-draw.route-visible circle,
.motion-ready .route-draw.route-visible .junctions circle {
  opacity: 1;
  transform: scale(1);
}

.motion-ready .route-draw.route-visible circle:nth-of-type(1) { transition-delay: 540ms; }
.motion-ready .route-draw.route-visible circle:nth-of-type(2) { transition-delay: 760ms; }
.motion-ready .route-draw.route-visible circle:nth-of-type(3) { transition-delay: 980ms; }

.motion-ready .cadastral-map.route-visible .focus-parcel {
  animation: fx-parcel-breathe 3.8s ease-in-out 1.2s infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.motion-ready .verified-dot,
.motion-ready .dossier-state > span,
.motion-ready .live-dot::before {
  animation: fx-status-pulse 3s ease-out infinite;
}

@keyframes fx-parcel-breathe {
  0%, 100% { fill: rgba(238, 226, 189, 0.7); filter: drop-shadow(0 0 0 rgba(181, 138, 42, 0)); }
  50% { fill: rgba(238, 226, 189, 0.92); filter: drop-shadow(0 0 8px rgba(181, 138, 42, 0.28)); }
}

@keyframes fx-status-pulse {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(78, 122, 84, 0.22); }
  78% { box-shadow: 0 0 0 7px rgba(78, 122, 84, 0); }
}

/* Pointer-fine microinteractions ---------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .motion-ready .fx-magnetic {
    transform: translate3d(var(--fx-magnetic-x, 0px), var(--fx-magnetic-y, 0px), 0);
    transition:
      color 180ms ease,
      background-color 180ms ease,
      border-color 180ms ease,
      box-shadow 320ms ease,
      transform 500ms var(--fx-ease-out);
    will-change: transform;
  }

  .motion-ready .fx-magnetic.fx-magnetic-active {
    transition-duration: 180ms;
  }

  .motion-ready .fx-sequence.fx-in .fx-item.fx-magnetic {
    transform: translate3d(var(--fx-magnetic-x, 0px), var(--fx-magnetic-y, 0px), 0);
  }

  .motion-ready .button-dark.fx-magnetic:hover {
    box-shadow: 0 12px 32px rgba(26, 54, 54, 0.18);
  }

  .motion-ready .button-gold.fx-magnetic:hover {
    box-shadow: 0 12px 32px rgba(213, 171, 78, 0.2);
  }
}

@media (max-width: 720px) {
  .motion-progress {
    height: 1px;
  }

  .motion-ready .hero-land {
    inset: auto auto 0 56%;
    transform: translate3d(-50%, var(--fx-hero-land-y, 0px), 0);
  }

  .motion-ready .fx-sequence .fx-item {
    filter: none;
    transform: translate3d(0, 16px, 0);
    transition-duration: 620ms, 620ms, 760ms;
    transition-delay: calc(var(--fx-index, 0) * 52ms + 20ms);
  }

  .motion-ready .fx-sequence.fx-in .fx-item,
  .motion-ready .hero-content.fx-sequence.fx-in .fx-item {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .motion-ready .fx-depth-image {
    transform: translate3d(0, var(--fx-image-y, 0px), 0) scale(1.025);
  }

}

@media (prefers-reduced-motion: reduce) {
  .motion-progress {
    display: none;
  }

  .motion-ready .fx-sequence .fx-item,
  .motion-ready .fx-sequence.fx-in .fx-item,
  .motion-ready .hero-content.fx-sequence .fx-item,
  .motion-ready .hero-content.fx-sequence.fx-in .fx-item {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .motion-ready .hero-route,
  .motion-ready .hero-content,
  .motion-ready .hero-ledger,
  .motion-ready .closing-map,
  .motion-ready .fx-depth-image,
  .motion-ready .fx-depth-panel,
  .motion-ready .product-frame:hover .product-viewport img.fx-depth-image,
  .motion-ready .fx-magnetic {
    transform: none;
    scale: 1;
    transition: none;
  }

  .motion-ready .hero-land {
    transform: translateX(-50%);
  }

  .motion-ready .cadastral-map.route-visible .focus-parcel,
  .motion-ready .verified-dot,
  .motion-ready .dossier-state > span,
  .motion-ready .live-dot::before {
    animation: none;
  }

  .state-marquee-track {
    animation: none;
    transform: none;
  }

  .state-marquee {
    overflow-x: auto;
    scrollbar-color: #b58a2a #f5f2e9;
    scrollbar-width: thin;
  }

  .state-marquee::before,
  .state-marquee::after,
  .state-marquee-track > ul[aria-hidden="true"] {
    display: none;
  }
}