/* V8.4 long-scroll scene overrides.
   Mobile pages are vertical holographic journeys; desktop keeps the approved V8.3 composition. */

:root {
  --v84-overlay-max: .18;
  --v84-glass-cyan: rgba(137, 216, 236, .64);
  --v84-glass-deep: rgba(36, 143, 183, .38);
  --v84-ink: #052f4f;
}

.scroll-scene {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
}

.holo-surface {
  color: var(--v84-ink);
  border-color: rgba(143, 226, 243, .88);
  background:
    radial-gradient(circle at 28% 16%, rgba(243,254,255,.88), rgba(190,235,246,.74) 40%, var(--v84-glass-cyan) 72%, var(--v84-glass-deep));
  backdrop-filter: blur(9px) saturate(1.25);
}

.screen-heading-copy {
  background: linear-gradient(90deg, rgba(205,241,250,.68), rgba(82,187,218,.32) 72%, transparent);
  box-shadow: 0 10px 30px rgba(3,72,118,.14);
  backdrop-filter: blur(8px) saturate(1.2);
}

.logic-caption,
.data-strip,
.contact-terminal {
  border-color: rgba(90, 196, 222, .70);
  background: rgba(174,226,241,.58);
  box-shadow: inset 0 0 18px rgba(236,252,255,.62), 0 14px 34px rgba(3,72,118,.17);
  backdrop-filter: blur(9px) saturate(1.18);
}

.data-point {
  border-color: rgba(74, 181, 211, .46);
  background: rgba(214, 244, 250, .66);
  box-shadow: inset 0 0 14px rgba(246,255,255,.68);
}

@media (max-width: 767px) {
  .stage {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 174, 204, .52) transparent;
  }

  .stage::-webkit-scrollbar { width: 3px; }
  .stage::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(#a8f3ff, #28a9ca);
  }

  .scroll-scene {
    height: auto;
    min-height: 100%;
    isolation: isolate;
  }

  .scene-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .scene-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(1.08) contrast(1.04);
  }

  .scene-shade,
  .home-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background:
      linear-gradient(180deg, rgba(229,251,255,.02) 0%, rgba(228,250,254,.05) 22%, rgba(218,246,252,.09) 54%, rgba(215,247,253,var(--v84-overlay-max)) 100%),
      linear-gradient(90deg, rgba(175,228,242,.06), transparent 42%, rgba(137,207,230,.05));
  }

  .ambient-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .08;
  }

  .home-frame,
  .stage-frame {
    position: relative;
    z-index: 5;
  }

  .layout-host {
    position: relative;
    inset: auto;
    padding: 16px 10px 140px;
    padding-bottom: 140px;
  }

  .chain-path { min-height: 980px; }
  .convergence-field { min-height: 1040px; }
  .community-orbit { min-height: 1180px; }
  .network-map { min-height: 1100px; }
  .value-routes { min-height: 1120px; }
  .participation-path { min-height: 1180px; }

  .holo-surface {
    color: var(--v84-ink);
    border-color: rgba(133, 224, 243, .92);
    background:
      radial-gradient(circle at 28% 16%, rgba(243,254,255,.86), rgba(190,235,246,.72) 40%, var(--v84-glass-cyan) 72%, var(--v84-glass-deep));
    backdrop-filter: blur(9px) saturate(1.25);
    box-shadow:
      inset 0 0 22px rgba(241,253,255,.72),
      inset 0 -16px 36px rgba(30,142,181,.18),
      0 16px 42px rgba(3,72,118,.22),
      0 0 30px rgba(42,191,224,.32);
  }

  .holo-surface::before { border-color: rgba(53, 174, 207, .62); }
  .module-summary { color: #0a4666; }
  .module-tags i { background: rgba(224,248,252,.62); }

  .screen-heading-copy {
    background: linear-gradient(90deg, rgba(205,241,250,.68), rgba(71,177,211,.32) 72%, transparent);
  }

  .convergence-core,
  .community-core,
  .value-origin {
    background: radial-gradient(circle at 34% 22%, rgba(245,255,255,.92), rgba(137,220,239,.66) 48%, rgba(29,144,187,.38) 72%, transparent 73%);
    box-shadow: inset 0 0 26px rgba(244,255,255,.78), 0 0 44px rgba(38,178,214,.48);
  }

  .logic-caption {
    background: rgba(186, 232, 245, .62);
    color: #074765;
  }

  .data-strip {
    background: rgba(174,226,241,.58);
  }

  .data-point {
    background: rgba(214,244,250,.66);
  }

  .contact-terminal {
    background: rgba(174,226,241,.62);
  }

  /* 01 — an ascending industrial chain, one depth zone at a time */
  .chain-rail {
    left: 50%;
    top: 82px;
    width: 3px;
    height: 730px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, #fff 7%, var(--v83-map-line) 24%, #fff 48%, var(--v83-map-line) 76%, transparent);
  }
  .chain-path .chain-node { width: 43%; }
  .chain-node-1 { left: 0; top: 10px; }
  .chain-node-2 { right: 0; top: 220px; }
  .chain-node-3 { left: 2%; top: 465px; }
  .chain-node-4 { right: 0; top: 705px; }
  .chain-path .logic-caption { bottom: 38px; }

  /* 02 — three drivers descend and converge into the landing window */
  .convergence-field .driver-node { width: 38%; }
  .driver-node-1 { left: 0; top: 18px; }
  .driver-node-2 { left: auto; right: 0; top: 222px; }
  .driver-node-3 { left: 2%; right: auto; top: 426px; }
  .convergence-core {
    left: 50%;
    top: 640px;
    width: 146px;
    transform: translateX(-50%) translateZ(36px);
  }
  .beam { left: 50%; top: 704px; width: 58%; }
  .beam-a { transform: rotate(218deg); }
  .beam-b { transform: rotate(253deg); }
  .beam-c { transform: rotate(292deg); }
  .convergence-field .pain-node {
    left: 5%;
    right: 5%;
    bottom: 38px;
    min-height: 122px;
  }

  /* 03 — a long operating orbit with the data result at the end */
  .orbit-line {
    left: 50%;
    top: 145px;
    width: 78%;
    height: 760px;
    transform: translateX(-50%) rotate(-5deg);
  }
  .community-core {
    left: 50%;
    top: 448px;
    transform: translateX(-50%) translateZ(34px);
  }
  .community-orbit .orbit-node { width: 40%; }
  .orbit-node-1 { left: 0; top: 22px; }
  .orbit-node-2 { right: 0; top: 242px; }
  .orbit-node-3 { left: 0; right: auto; top: 668px; }
  .orbit-node-4 { right: 0; left: auto; top: 864px; }
  .data-strip { bottom: 32px; }

  /* 04 — regional nodes reveal progressively around the Chengdu hub */
  .hub-node { left: 24%; top: 390px; width: 52%; }
  .satellite-node { right: 0; top: 28px; width: 51%; }
  .access-node { left: 0; top: 682px; width: 50%; }
  .expansion-node { right: 0; top: 846px; width: 50%; }
  .satellite-labels { bottom: 34px; }

  /* 05 — four value beams unfold above and below one source */
  .value-origin { left: 0; top: 486px; width: 39%; }
  .route-line { left: 34%; width: 43%; }
  .route-1 .route-line { top: 540px; transform: rotate(-61deg); }
  .route-2 .route-line { top: 550px; transform: rotate(-31deg); }
  .route-3 .route-line { top: 568px; transform: rotate(28deg); }
  .route-4 .route-line { top: 580px; transform: rotate(57deg); }
  .value-node { width: 58%; min-height: 124px; }
  .route-1 .value-node { top: 20px; }
  .route-2 .value-node { top: 258px; right: 1%; }
  .route-3 .value-node { top: 718px; right: 1%; }
  .route-4 .value-node { top: 946px; }

  /* 06 — an actual participation journey instead of overlapping dashboards */
  .steps-node { left: 0; top: 16px; width: 58%; }
  .step-rail {
    left: 0;
    top: 136px;
    width: 100%;
    height: 238px;
    gap: 7px;
  }
  .step-rail span { min-height: 82px; }
  .step-rail span:nth-child(2) { min-height: 132px; }
  .step-rail span:nth-child(3) { min-height: 184px; }
  .step-rail span {
    border-color: rgba(86, 199, 225, .78);
    background: linear-gradient(180deg, rgba(222,247,252,.72), rgba(86,199,225,.52));
    box-shadow: inset 0 0 14px rgba(250,255,255,.62), 0 12px 28px rgba(3,72,118,.18);
  }
  .role-entry { position: static; width: auto; height: auto; }
  .entry-node { left: 0; top: 482px; width: 56%; }
  .roles-node { left: auto; right: 0; top: 648px; width: 56%; }
  .route-node { left: 7%; right: 7%; top: 826px; width: auto; }
  .contact-terminal { left: 0; right: 0; bottom: 36px; }

  .deck-controls {
    box-shadow: inset 0 0 18px rgba(255,255,255,.98), 0 10px 28px rgba(4,68,112,.18), 0 0 0 1px rgba(255,255,255,.62);
  }
}

@media (max-width: 390px) {
  .layout-host { padding-left: 8px; padding-right: 8px; }
  .chain-path .chain-node,
  .convergence-field .driver-node,
  .community-orbit .orbit-node { width: 42%; }
  .module-title { font-size: 12.5px; }
  .module-summary { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage { scroll-behavior: auto; }
}