@import url("../css/fonts.css");

:root {
    --page-bg: #f6f8fc;
    --page-bg-deep: #eaf0f8;
    --page-ink: #1f2937;
    --stage-scale: 0.94;
    --stack-scale: 0.94;
    --stage-max-scale: 1;
    --stage-scale-boost: 1.3;
    --base-gap: 126px;
    --layer-stair-step: 88px;
    --active-layer-shift-y: 88px;
    --enter-duration: 780ms;
    --enter-initial-delay: 260ms;
    --enter-stagger: 180ms;
    --glow-strength: 1;
    --stack-width: 140.5px;
    --stack-height: 1038px;
    --detail-panel-width: clamp(340px, 24vw, 424px);
    --detail-panel-min-height: 192px;
    --detail-panel-right-inset: clamp(28px, 4vw, 64px);
    --detail-panel-safe-top: 72px;
    --detail-panel-safe-bottom: 72px;
    --detail-panel-radius: 24px;
    --detail-flow-duration: 1180ms;
    --detail-panel-move-duration: 260ms;
    --layer-float-distance: 5px;
    --layer-float-duration: 4600ms;
    --mobile-card-max-width: 720px;
    --mobile-card-gap: 18px;
    --mobile-card-enter-duration: 720ms;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  
  body {
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 35%, rgba(102, 125, 255, 0.08), transparent 28%),
      linear-gradient(180deg, #fbfcfe 0%, var(--page-bg) 48%, var(--page-bg-deep) 100%);
    color: var(--page-ink);
    font-family: "Alibaba PuHuiTi", -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  button,
  img {
    -webkit-user-select: none;
    user-select: none;
  }
  
  .scene {
    position: relative;
    width: 100%;
    height: 100%;
    isolation: isolate;
    overflow: hidden;
    margin: 0 auto;
    background-color: #fff;
  }
  
  .scene::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  
  .scene::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
      url("./ba-grid.svg") center / cover no-repeat;
    opacity: 0;
    filter: saturate(0.85) contrast(0.92) brightness(1.02);
    transform: scale(1.04);
    transition: opacity 1200ms ease, transform 1400ms ease;
  }
  
  .scene[data-ready="true"]::before {
    opacity: 0.18;
    transform: scale(1);
  }
  
  .scene:not([data-render-stage="enhanced"])::before {
    filter: none;
  }
  
  .scene__content {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .stack-shell {
    position: absolute;
    left: 30%;
    top: 52%;
    width: var(--stack-width);
    height: var(--stack-height);
    transform: translate(-50%, -50%);
    transform-origin: center center;
    transition:
      width 420ms cubic-bezier(0.22, 1, 0.36, 1),
      height 420ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
    /* contain: layout paint; */
  }
  
  .detail-layer {
    --detail-accent: rgba(80, 113, 255, 0.86);
    --detail-accent-soft: rgba(88, 118, 255, 0.18);
    position: absolute;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    /* contain: layout paint; */
  }
  
  .detail-connector {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }
  
  .detail-connector__base,
  .detail-connector__flow {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
  }
  
  .detail-connector__base {
    stroke: color-mix(in srgb, var(--detail-accent) 72%, rgba(255, 255, 255, 0.65));
    stroke-width: 2;
    stroke-dasharray: 8 12;
    transition: opacity 160ms ease;
  }
  
  .detail-connector__flow {
    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 2.6;
    stroke-dasharray: 14 16;
    filter:
      drop-shadow(0 0 6px rgba(255, 255, 255, 0.42))
      drop-shadow(0 0 10px var(--detail-accent-soft));
    transition: opacity 160ms ease;
  }
  
  .detail-layer[data-detail-state="connecting"] .detail-connector__flow,
  .detail-layer[data-detail-state="revealing"] .detail-connector__flow,
  .detail-layer[data-detail-state="visible"] .detail-connector__flow,
  .detail-layer[data-detail-state="switching"] .detail-connector__flow,
  .detail-layer[data-detail-state="collapsing"] .detail-connector__flow,
  .detail-layer[data-detail-state="retracting"] .detail-connector__flow {
    animation: detail-flow var(--detail-flow-duration) linear infinite;
  }
  
  .detail-layer[data-detail-state="switching"] .detail-connector__base,
  .detail-layer[data-detail-state="switching"] .detail-connector__flow {
    transition-duration: 80ms;
  }
  
  .detail-panel {
    --detail-panel-duration: 420ms;
    position: absolute;
    top: 50%;
    right: var(--detail-panel-right-inset);
    width: var(--detail-panel-width);
   /** min-height: var(--detail-panel-min-height);
    max-height: calc(100vh - var(--detail-panel-safe-top) - var(--detail-panel-safe-bottom));**/
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--detail-accent) 28%, rgba(220, 228, 242, 0.82));
    border-radius: var(--detail-panel-radius);
    background:
      radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--detail-accent-soft) 120%, rgba(255, 255, 255, 0.4)), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 249, 255, 0.94));
    box-shadow:
      0 34px 78px rgba(123, 140, 174, 0.24),
      0 18px 38px rgba(140, 156, 186, 0.16),
      0 2px 10px rgba(160, 176, 206, 0.1);
    overflow: hidden;
    opacity: 0;
    clip-path: inset(0 50% 0 50% round var(--detail-panel-radius));
    transform: translateY(-50%) scaleX(0.18) scaleY(0.92);
    transform-origin: center center;
    filter: blur(14px);
    transition:
      top var(--detail-panel-move-duration) cubic-bezier(0.22, 1, 0.36, 1),
      clip-path var(--detail-panel-duration) cubic-bezier(0.2, 0.84, 0.24, 1),
      opacity var(--detail-panel-duration) ease,
      transform var(--detail-panel-duration) cubic-bezier(0.2, 0.84, 0.24, 1),
      filter var(--detail-panel-duration) ease;
    pointer-events: auto;
    /* contain: layout paint; */
  }
  
  .detail-layer[data-detail-state="revealing"] .detail-panel,
  .detail-layer[data-detail-state="visible"] .detail-panel {
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--detail-panel-radius));
    transform: translateY(-50%) scaleX(1) scaleY(1);
    filter: blur(0);
  }

  .detail-panel__page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 0;
  }

  .detail-panel__page[hidden] {
    display: none !important;
  }
  
  .detail-panel__eyebrow {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.22em;
    color: rgba(74, 85, 104, 0.58);
  }
  
  .detail-panel__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 600;
    color: #182230;
  }
  
  .detail-panel__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .detail-panel__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  
  .detail-panel__tag {
    /* padding: 6px 10px; */
    /* border-radius: 999px; */
    /* background: color-mix(in srgb, var(--detail-accent-soft) 86%, rgba(255, 255, 255, 0.82)); */
    /* border: 1px solid color-mix(in srgb, var(--detail-accent) 18%, rgba(223, 228, 240, 0.88)); */
    color: color-mix(in srgb, var(--detail-accent) 56%, #2f3d55);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .detail-panel__entries {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: min(100%, 220px);
  }

  .detail-panel__tag-list[hidden],
  .detail-panel__tag[hidden],
  .detail-panel__entries[hidden],
  .detail-panel__entry[hidden] {
    display: none !important;
  }

  .detail-panel__tags[data-entry-count="2"] .detail-panel__entries {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-panel__entry {
    display: inline-flex;
    align-items: center;
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--detail-accent) 18%, rgba(223, 228, 240, 0.92));
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94)),
      color-mix(in srgb, var(--detail-accent-soft) 74%, rgba(255, 255, 255, 0.66));
    color: color-mix(in srgb, var(--detail-accent) 72%, #24344a);
    font: inherit;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 8px 14px;
    min-height: 34px;
    width: 100%;
    justify-content: center;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 8px 18px rgba(121, 138, 168, 0.12);
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      filter 180ms ease;
  }

  .detail-panel__entry:hover,
  .detail-panel__entry:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--detail-accent) 30%, rgba(223, 228, 240, 0.92));
    color: color-mix(in srgb, var(--detail-accent) 82%, #1c2b3f);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 12px 24px color-mix(in srgb, var(--detail-accent-soft) 18%, rgba(121, 138, 168, 0.2));
    filter: saturate(1.04);
  }

  .detail-panel__entry:focus-visible {
    outline: none;
  }
  
  .detail-panel__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
  }
  
  .detail-panel__summary {
    margin: 0;
    font-size: 12px;
    line-height: 1.52;
    color: rgba(36, 52, 74, 0.82);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .detail-panel__summary-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.32;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: rgba(26, 39, 58, 0.94);
  }

  .detail-panel__summary-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .detail-panel__summary-content p {
    position: relative;
    margin: 0;
    padding-left: 12px;
    line-height: 1.42;
  }

  .detail-panel__summary-content p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.56em;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--detail-accent) 54%, #5e7090);
  }
  
  .detail-panel__media {
    /* position: relative;
    margin: 0;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--detail-accent) 16%, rgba(217, 225, 239, 0.92));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(243, 247, 255, 0.94)),
      radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--detail-accent-soft) 95%, rgba(255, 255, 255, 0.2)), transparent 52%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      0 16px 32px rgba(124, 141, 174, 0.14);
    overflow: hidden; */
  }
  
  .detail-panel__media[hidden] {
    display: none;
  }
  
  .detail-panel__image {
    /* display: block;
    width: 100%;
    height: auto;
    object-fit: contain; */
  }
  
  .mobile-detail-list {
    display: none;
  }
  
  .mobile-detail-card {
    --mobile-card-accent: rgba(80, 113, 255, 0.86);
    --mobile-card-accent-soft: rgba(88, 118, 255, 0.18);
    position: relative;
    width: min(100%, var(--mobile-card-max-width));
    padding: 22px 20px 20px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--mobile-card-accent) 22%, rgba(219, 227, 240, 0.92));
    background:
      radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--mobile-card-accent-soft) 115%, rgba(255, 255, 255, 0.42)), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 255, 0.96));
    box-shadow:
      0 22px 52px rgba(126, 143, 176, 0.2),
      0 10px 24px rgba(140, 156, 186, 0.12);
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(0.965);
    transition:
      opacity var(--mobile-card-enter-duration) cubic-bezier(0.22, 1, 0.36, 1),
      transform var(--mobile-card-enter-duration) cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 260ms ease,
      border-color 260ms ease;
    transition-delay: var(--card-delay, 0ms);
    /* contain: layout paint; */
  }
  
  .mobile-detail-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--mobile-card-accent), color-mix(in srgb, var(--mobile-card-accent) 36%, #ffffff));
    opacity: 0.92;
  }
  
  .mobile-detail-card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  
  .mobile-detail-card__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.22em;
    color: rgba(74, 85, 104, 0.6);
  }
  
  .mobile-detail-card__title {
    margin: 0;
    font-size: clamp(26px, 6.2vw, 34px);
    line-height: 1.05;
    font-weight: 600;
    color: #182230;
  }
  
  .mobile-detail-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }
  
  .mobile-detail-card__tag {
    padding: 6px 11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mobile-card-accent-soft) 82%, rgba(255, 255, 255, 0.82));
    border: 1px solid color-mix(in srgb, var(--mobile-card-accent) 18%, rgba(223, 228, 240, 0.88));
    color: color-mix(in srgb, var(--mobile-card-accent) 58%, #2f3d55);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.04em;
  }
  
  .mobile-detail-card__summary {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(36, 52, 74, 0.82);
  }
  
  .stack {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* transform-style: preserve-3d; */
  }
  
  .stack-hitmap {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: auto;
  }
  
  .hotspot {
    --hotspot-polygon: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    position: absolute;
    inset: 0;
    padding: 0;
    margin: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.001);
    opacity: 0;
    cursor: pointer;
    clip-path: var(--hotspot-polygon);
    -webkit-clip-path: var(--hotspot-polygon);
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  .hotspot:focus-visible {
    outline: none;
  }
  
  .layer {
    --layer-x: 0px;
    --layer-y: 0px;
    --layer-scale: 1;
    --layer-opacity: 1;
    --glow-opacity: 0;
    --layer-enter-x: 0px;
    --layer-enter-y: 96px;
    --layer-enter-scale: 0.94;
    --layer-enter-opacity: 0;
    --asset-ratio: 0.633333;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: calc(var(--stack-width) * var(--asset-ratio));
    opacity: var(--layer-enter-opacity);
    transform: translate3d(calc(-50% + var(--layer-x) + var(--layer-enter-x)), calc(var(--layer-y) + var(--layer-enter-y)), 0) scale(var(--layer-enter-scale));
    transform-origin: center bottom;
    filter: var(--layer-filter, saturate(0.99) brightness(1) drop-shadow(0 16px 24px rgba(109, 127, 160, 0.08)));
    transition:
      transform var(--enter-duration) cubic-bezier(0.22, 1, 0.36, 1),
      opacity 420ms ease,
      filter 280ms ease;
    will-change: auto;
    outline: none;
    backface-visibility: hidden;
    pointer-events: none;
    /* contain: layout paint; */
  }
  
  .layer::before {
    content: "";
    position: absolute;
    left: 17%;
    right: 17%;
    top: 14%;
    bottom: 8%;
    background: radial-gradient(circle at center, var(--glow-color, rgba(76, 104, 255, 0.3)) 0%, rgba(76, 104, 255, 0.14) 28%, rgba(76, 104, 255, 0) 70%);
    opacity: calc(var(--glow-opacity) * var(--glow-strength));
    filter: blur(26px);
    transform: translateY(8px) scale(0.92);
    transition: opacity 280ms ease;
    pointer-events: none;
  }
  
  .layer-media {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: auto;
  }
  
  .scene[data-render-stage="enhanced"][data-motion-phase="idle"] .layer .layer-media {
    animation: layer-media-float var(--layer-float-duration, 4600ms) ease-in-out infinite;
    animation-delay: var(--layer-float-delay, 0ms);
  }
  
  .layer-base-image,
  .layer-extra-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: var(--image-filter, opacity(1)) var(--layer-image-custom-filter, );
    transition: filter 280ms ease, opacity 280ms ease;
  }
  
  .layer-base-image {
    z-index: 1;
  }
  
  .layer-extra-image {
    z-index: 2;
    mix-blend-mode: var(--layer-extra-image-blend-mode, normal);
    transform: scale(var(--layer-image-scale, 1));
    transform-origin: center center;
    transition: transform 280ms ease, filter 280ms ease, opacity 280ms ease;
  }

  .layer-media[data-deferred-ready="false"] .layer-extra-image,
  .layer-media[data-deferred-ready="false"] .layer-overlay-panel {
    opacity: 0 !important;
    visibility: hidden;
  }
  
  .layer-overlay-panel {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 280ms ease;
  }
  
  .layer-overlay-anchor {
    --overlay-hover-lift: -8px;
    --overlay-hover-scale: 1.032;
    position: absolute;
    display: block;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
  }
  
  .layer-overlay-anchor::before,
  .layer-overlay-anchor::after {
    content: "";
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  .layer-overlay-anchor::before {
    background:
      radial-gradient(circle at center, rgba(255, 255, 255, 0.96) 0%, rgba(146, 172, 255, 0.38) 28%, rgba(116, 145, 255, 0.12) 48%, rgba(116, 145, 255, 0) 74%);
    filter: blur(8px);
    transform: scale(0.84);
  }
  
  .layer-overlay-anchor::after {
    inset: -22%;
    background:
      conic-gradient(from 210deg, rgba(113, 141, 255, 0) 0deg, rgba(113, 141, 255, 0.08) 110deg, rgba(255, 255, 255, 0.85) 156deg, rgba(113, 141, 255, 0.05) 210deg, rgba(113, 141, 255, 0) 360deg);
    filter: blur(10px);
    transform: scale(0.8) rotate(-8deg);
  }
  
  .layer-overlay-item {
    --overlay-drift-distance: 2px;
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    opacity: 0.92;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    will-change: auto;
    transition:
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease,
      filter 260ms ease;
  }
  
  .scene[data-render-stage="enhanced"] .layer {
    will-change: transform, opacity, filter;
  }
  
  .scene[data-render-stage="enhanced"][data-motion-phase="idle"] .layer-media {
    will-change: transform;
  }
  
  .scene[data-render-stage="enhanced"] .layer.is-active .layer-overlay-item,
  .scene[data-render-stage="enhanced"] .layer.is-active .layer-overlay-anchor.is-hovered .layer-overlay-item {
    will-change: transform, opacity, filter;
  }
  
  .scene:not([data-render-stage="enhanced"]) .layer {
    filter: none !important;
  }
  
  .scene:not([data-render-stage="enhanced"]) .layer::before {
    opacity: 0 !important;
  }
  
  .scene:not([data-render-stage="enhanced"]) .layer-base-image,
  .scene:not([data-render-stage="enhanced"]) .layer-extra-image,
  .scene:not([data-render-stage="enhanced"]) .layer-overlay-item {
    filter: none !important;
  }
  
  .scene:not([data-render-stage="enhanced"]) .layer-media,
  .scene:not([data-render-stage="enhanced"]) .layer-overlay-item,
  .scene:not([data-render-stage="enhanced"]) .layer-overlay-anchor::before,
  .scene:not([data-render-stage="enhanced"]) .layer-overlay-anchor::after {
    animation: none !important;
  }
  
  .layer-overlay-panel--ontology .layer-overlay-item:first-child {
    filter: drop-shadow(0 12px 22px rgba(62, 96, 171, 0.12));
  }
  
  .layer-overlay-panel--ontology .layer-overlay-item:last-child {
    filter: drop-shadow(0 10px 18px rgba(55, 89, 152, 0.1));
  }
  
  .layer.is-active .layer-overlay-item {
    cursor: default;
    animation:
      overlay-item-idle var(--overlay-idle-duration, 6200ms) ease-in-out infinite,
      overlay-item-glimmer var(--overlay-glimmer-duration, 4600ms) ease-in-out infinite;
  }
  
  .layer.is-active .layer-overlay-anchor.is-hovered::before,
  .layer.is-active .layer-overlay-anchor.is-hovered::after {
    opacity: 1;
  }
  
  .layer.is-active .layer-overlay-anchor.is-hovered::before {
    transform: scale(1);
    animation: overlay-anchor-pulse 1680ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
  }
  
  .layer.is-active .layer-overlay-anchor.is-hovered::after {
    transform: scale(1.02) rotate(0deg);
    animation: overlay-anchor-scan 1880ms linear infinite;
  }
  
  .layer.is-active .layer-overlay-anchor.is-hovered .layer-overlay-item {
    --overlay-drift-distance: 3px;
    opacity: 1;
    animation:
      overlay-item-hover-orbit var(--overlay-hover-duration, 3200ms) cubic-bezier(0.22, 1, 0.36, 1) infinite,
      overlay-item-hover-pulse var(--overlay-pulse-duration, 2200ms) ease-in-out infinite;
    filter:
      brightness(1.06)
      saturate(1.05)
      drop-shadow(0 10px 18px rgba(95, 126, 255, 0.2))
      drop-shadow(0 0 16px rgba(121, 152, 255, 0.26));
  }
  
  .scene[data-active-layer]:not([data-active-layer=""]) .layer:not(.is-active) .layer-overlay-item {
    opacity: 0.78;
  }
  
  .scene[data-ready="true"] .layer {
    opacity: var(--layer-opacity);
    transform: translate3d(calc(-50% + var(--layer-x)), var(--layer-y), 0) scale(var(--layer-scale));
  }
  
  .scene[data-active-layer]:not([data-active-layer=""]) .layer:not(.is-active) {
    transition-timing-function: cubic-bezier(0.2, 0.85, 0.28, 1);
  }
  
  .layer.is-active {
    filter: var(--layer-filter, brightness(1.03) saturate(1.03) drop-shadow(0 18px 28px rgba(109, 127, 160, 0.12)));
  }
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  @media (max-width: 1024px) {
    .scene::before {
      opacity: 0.15;
    }
  
    .detail-panel {
      width: min(var(--detail-panel-width), 340px);
      min-height: 176px;
      padding: 18px 18px 16px;
    }
  
    .detail-panel__body {
      gap: 12px;
    }
  }
  
  @media (max-width: 900px) {
    html,
    body {
      height: auto;
      min-height: 100%;
    }
  
    body {
      overflow-x: hidden;
      overflow-y: auto;
    }
  
    .scene {
      height: auto;
      min-height: 100dvh;
      overflow: visible;
    }
  
    .scene::before {
      opacity: 0.22;
    }
  
    .scene__content {
      min-height: 100dvh;
      padding: 28px 16px 32px;
    }
  
    .stack-shell,
    .detail-layer {
      display: none !important;
    }
  
    .mobile-detail-list {
      display: grid;
      justify-items: center;
      gap: var(--mobile-card-gap);
      width: 100%;
      max-width: calc(var(--mobile-card-max-width) + 16px);
      margin: 0 auto;
    }
  
    .mobile-detail-card {
      padding: 22px 18px 18px;
      border-radius: 24px;
      content-visibility: auto;
      contain-intrinsic-size: 0 360px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    :root {
      --glow-strength: 0.68;
      --detail-flow-duration: 1600ms;
      --mobile-card-enter-duration: 220ms;
    }
  
    .scene::before,
    .stack-shell,
    .layer,
    .layer-media,
    .layer::before,
    .layer img,
    .hotspot,
    .detail-panel,
    .detail-connector__base,
    .detail-connector__flow {
      transition-duration: 180ms !important;
      transition-delay: 0ms !important;
      animation: none !important;
    }
  
    .layer {
      transform: translate3d(calc(-50% + var(--layer-x)), var(--layer-y), 0) scale(var(--layer-scale));
    }
  
    .layer-media {
      transform: translate3d(0, 0, 0);
      animation: none !important;
    }
  
    .layer-overlay-item {
      transform: translate3d(0, -1px, 0);
      opacity: 0.94;
      pointer-events: none;
      animation: none !important;
    }
  
    .layer-overlay-anchor::before,
    .layer-overlay-anchor::after {
      animation: none !important;
      opacity: 0.18;
    }
  
    .mobile-detail-card {
      opacity: 1;
      transform: none;
      transition-delay: 0ms;
    }
  }
  
  @keyframes detail-flow {
    to {
      stroke-dashoffset: -60;
    }
  }
  
  @keyframes layer-media-float {
    0%,
    100% {
      transform: translate3d(0, calc(var(--layer-float-distance, 5px) * 0.55), 0);
    }
  
    50% {
      transform: translate3d(0, calc(var(--layer-float-distance, 5px) * -1), 0);
    }
  }
  
  @keyframes overlay-item-idle {
    0%,
    100% {
      transform: translate3d(-1px, 0, 0) scale(1);
    }
  
    50% {
      transform: translate3d(1px, -2px, 0) scale(1.01);
    }
  }
  
  @keyframes overlay-item-glimmer {
    0%,
    100% {
      filter: brightness(0.985) saturate(0.98);
    }
  
    50% {
      filter: brightness(1.025) saturate(1.02);
    }
  }
  
  @keyframes overlay-item-hover-orbit {
    0%,
    100% {
      transform: translate3d(calc(var(--overlay-drift-distance) * -0.55), calc(var(--overlay-hover-lift) * 0.72), 0) scale(var(--overlay-hover-scale));
    }
  
    35% {
      transform: translate3d(var(--overlay-drift-distance), var(--overlay-hover-lift), 0) scale(calc(var(--overlay-hover-scale) + 0.008));
    }
  
    68% {
      transform: translate3d(calc(var(--overlay-drift-distance) * -0.15), calc(var(--overlay-hover-lift) * 0.84), 0) scale(var(--overlay-hover-scale));
    }
  }
  
  @keyframes overlay-item-hover-pulse {
    0%,
    100% {
      opacity: 0.94;
    }
  
    45% {
      opacity: 1;
    }
  
    60% {
      opacity: 0.985;
    }
  }
  
  @keyframes overlay-anchor-pulse {
    0%,
    100% {
      opacity: 0.52;
      transform: scale(0.92);
    }
  
    50% {
      opacity: 0.95;
      transform: scale(1.08);
    }
  }
  
  @keyframes overlay-anchor-scan {
    0% {
      opacity: 0.12;
      transform: scale(0.92) rotate(-14deg);
    }
  
    30% {
      opacity: 0.82;
    }
  
    100% {
      opacity: 0.12;
      transform: scale(1.08) rotate(346deg);
    }
  }