/* =========================================================
   NETWORK+ · INTEGRATED FILM EXPERIENCE
   Scene 1 → V25 Network → Partner response → normal website
========================================================= */

.np-film {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  color: #f8fbff;
  background:
    radial-gradient(ellipse at 65% 46%, rgba(50, 151, 199, 0.14), transparent 34%),
    radial-gradient(ellipse at 86% 8%, rgba(23, 61, 116, 0.18), transparent 34%),
    radial-gradient(ellipse at 19% 91%, rgba(13, 31, 83, 0.22), transparent 42%),
    linear-gradient(138deg, #061225 0%, #07162c 52%, #030a17 100%);
  isolation: isolate;
}

.np-film::after {
  position: absolute;
  inset: 0;
  z-index: 30;
  content: "";
  pointer-events: none;
  box-shadow:
    inset 0 0 190px rgba(0, 0, 0, 0.42),
    inset 0 -105px 150px rgba(2, 7, 18, 0.34),
    inset 0 70px 120px rgba(2, 7, 18, 0.16);
}

.np-film__stage,
.np-film__ambient,
.np-film__grain,
.np-film__vignette,
.np-film__visual,
.np-scene-one-svg,
.np-partner-svg {
  position: absolute;
  inset: 0;
}

.np-film__stage { z-index: 2; overflow: hidden; }
.np-film__ambient,
.np-film__grain,
.np-film__vignette { pointer-events: none; }

.np-film__ambient {
  z-index: 0;
  background:
    radial-gradient(circle at 65% 48%, rgba(83, 203, 241, 0.05), transparent 24%),
    radial-gradient(circle at 65% 48%, transparent 0 34%, rgba(50, 148, 196, 0.022) 34.3%, transparent 35.2%),
    radial-gradient(circle at 74% 53%, rgba(7, 33, 76, 0.16), transparent 58%);
}

.np-film__grain {
  z-index: 1;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.44'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.np-film__vignette {
  z-index: 20;
  background:
    radial-gradient(ellipse at 66% 49%, transparent 35%, rgba(2, 7, 18, 0.12) 68%, rgba(2, 7, 18, 0.46) 100%),
    linear-gradient(90deg, rgba(3, 10, 24, 0.16), transparent 24%, transparent 80%, rgba(3, 10, 24, 0.22));
}

.np-film__visual { z-index: 4; }
.np-scene-one-svg,
.np-partner-svg {
  z-index: 5;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}
.np-partner-svg { z-index: 8; opacity: 0; }

/* Copy -------------------------------------------------------------- */
.np-film__copy {
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}

.np-film-copy {
  position: absolute;
  top: 50%;
  left: clamp(28px, 4.1vw, 72px);
  display: flex;
  width: min(530px, 36.5vw);
  min-height: 420px;
  flex-direction: column;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  translate: 0 -44%;
  transition: opacity 480ms ease, transform 620ms cubic-bezier(.22,1,.36,1);
}

.np-film-copy.is-current {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.np-film-copy--network {
  top: clamp(104px, 12vh, 132px);
  width: min(410px, 31vw);
  min-height: 0;
  justify-content: flex-start;
  translate: 0 0;
}

.np-film-copy--result {
  top: clamp(92px, 10vh, 114px);
  right: clamp(34px, 3.5vw, 62px);
  left: auto;
  width: min(430px, 31vw);
  min-height: 0;
  justify-content: flex-start;
  translate: 0 0;
}

.np-film-copy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: #8fe7ff;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.np-film-copy__eyebrow::before {
  width: 28px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(143, 231, 255, 0.9));
  box-shadow: 0 0 8px rgba(102, 215, 250, 0.28);
}

.np-film-copy h1,
.np-film-copy h2 {
  max-width: 455px;
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 3.55vw, 56px);
  font-weight: 755;
  line-height: 1.01;
  letter-spacing: -0.058em;
  text-wrap: balance;
}

.np-film-copy--network h2,
.np-film-copy--result h2 {
  font-size: clamp(34px, 2.8vw, 46px);
  line-height: 1.02;
}

.np-film-copy p {
  max-width: 365px;
  margin-top: 24px;
  color: rgba(214, 230, 243, 0.70);
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.70;
}

.np-film-copy__rule {
  display: block;
  width: min(290px, 78%);
  height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, rgba(125, 226, 255, 0.62), transparent);
}

/* Scroll hint ------------------------------------------------------- */
.np-film__hint {
  position: absolute;
  z-index: 28;
  right: 0;
  bottom: clamp(22px, 3vh, 36px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(190, 218, 233, 0.52);
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 260ms ease, color 260ms ease;
}
.np-film__hint.is-running { opacity: 0; }
.np-film__hint-icon {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 27px;
  border: 1px solid rgba(157, 226, 250, 0.32);
  border-radius: 999px;
}
.np-film__hint-icon::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 999px;
  content: "";
  background: #a8eeff;
  box-shadow: 0 0 8px rgba(111, 221, 255, 0.62);
  transform: translateX(-50%);
  animation: np-wheel 1.9s ease-in-out infinite;
}
@keyframes np-wheel {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.24; }
  40% { transform: translate(-50%, 7px); opacity: 0.90; }
  70% { transform: translate(-50%, 7px); opacity: 0; }
}

/* Scene 1 SVG ------------------------------------------------------- */
.np-s1-line {
  fill: none;
  stroke: rgba(112, 214, 246, 0.46);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.np-s1-node { filter: url(#np-s1-node-glow); }
.np-s1-node__halo { fill: rgba(83, 198, 235, 0.09); }
.np-s1-node__ring { fill: rgba(51, 149, 193, 0.045); stroke: rgba(115, 222, 251, 0.50); stroke-width: 0.95; vector-effect: non-scaling-stroke; }
.np-s1-node__core { fill: #ecfbff; stroke: rgba(255,255,255,0.86); stroke-width: 0.65; vector-effect: non-scaling-stroke; }
.np-s1-label { fill: rgba(244, 251, 255, 0.96); font-size: 15px; font-weight: 730; letter-spacing: 0.08em; }
.np-s1-core-field { fill: rgba(31, 105, 147, 0.07); }
.np-s1-core-orbit { fill: none; stroke: rgba(103, 210, 244, 0.20); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.np-s1-core-disc { fill: rgba(4, 18, 35, 0.985); stroke: rgba(105, 215, 246, 0.54); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.np-s1-core-title { fill: #fff; font-size: 40px; font-weight: 760; letter-spacing: -0.052em; }
.np-s1-core-plus { fill: #6ed8f4; }

/* Partner scene ----------------------------------------------------- */
.np-partner-path,
.np-partner-active {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.np-partner-path { stroke: rgba(91, 185, 218, 0.31); stroke-width: 1.10; }
.np-partner-active { stroke: rgba(181, 241, 255, 0.92); stroke-width: 2.0; filter: url(#np-partner-glow); }
.np-partner-node { filter: url(#np-partner-glow); }
.np-partner-node__halo { fill: rgba(93, 207, 242, 0.07); }
.np-partner-node__diamond { fill: rgba(8, 31, 54, 0.92); stroke: rgba(128, 225, 252, 0.66); stroke-width: 1.0; vector-effect: non-scaling-stroke; }
.np-partner-node__core { fill: #dff8ff; }
.np-partner-label__title { fill: rgba(244, 251, 255, 0.96); font-size: 14px; font-weight: 760; letter-spacing: 0.08em; }
.np-partner-label__sub { fill: rgba(190, 225, 238, 0.58); font-size: 10px; font-weight: 520; }
.np-partner-impulse { fill: #f6fdff; filter: url(#np-partner-glow); }

/* Mobile fallback --------------------------------------------------- */
.np-film-mobile { display: none; }

@media (max-width: 1100px) {
  .np-film-copy { width: min(440px, 38vw); }
  .np-film-copy h1 { font-size: clamp(38px, 4.3vw, 48px); }
  .np-film-copy--result { width: min(360px, 33vw); }
}

@media (max-width: 899px) {
  .np-film {
    height: auto;
    min-height: 0;
    padding: 118px 0 72px;
    overflow: visible;
  }
  .np-film__stage { display: none; }
  .np-film-mobile {
    position: relative;
    z-index: 4;
    display: block;
    width: min(calc(100% - 36px), 720px);
    margin-inline: auto;
  }
  .np-film-mobile__intro h1 {
    margin-top: 22px;
    font-size: clamp(34px, 9.4vw, 48px);
    line-height: 1.00;
    overflow-wrap: normal;
    word-break: normal;
    letter-spacing: -0.06em;
  }
  .np-film-mobile__intro > p:last-child {
    max-width: 34rem;
    margin-top: 24px;
    color: var(--np-muted);
    font-size: 17px;
  }
  .np-film-mobile__network {
    height: min(78vw, 560px);
    margin: 40px -18px 16px;
  }
  .np-film-mobile__svg { width: 100%; height: 100%; }
  .np-film-mobile__steps { display: grid; gap: 12px; }
  .np-film-mobile__steps article {
    padding: 24px;
    border: 1px solid rgba(126, 219, 250, 0.13);
    border-radius: 20px;
    background: rgba(255,255,255,0.025);
  }
  .np-film-mobile__steps small {
    color: #86ddf8;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .np-film-mobile__steps h2 {
    margin-top: 10px;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.035em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-film-copy,
  .np-network-wrap,
  .np-partner-svg { transition: none !important; }
}

/* ==========================================================
   NETWORK+ HYBRID V26 – visual bridge back to original project
   ========================================================== */
.np-film__copy .np-film-copy__eyebrow{letter-spacing:.22em;text-transform:uppercase}
.np-film-copy--story h1{max-width:600px}
.hybrid-build-note{position:absolute;left:18px;bottom:18px;z-index:50;font:600 9px/1.2 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(170,220,240,.45);pointer-events:none}
.np-film__visual{background:radial-gradient(circle at 68% 48%,rgba(80,184,228,.075),transparent 55%)}

/* Scene 3 – demand aggregation ------------------------------------------------ */
.np-demand-path,
.np-demand-active,
.np-demand-trunk,
.np-demand-trunk-active,
.np-demand-bus {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.np-demand-path { stroke: rgba(87, 180, 215, 0.25); stroke-width: 1.0; }
.np-demand-active { stroke: rgba(180, 240, 255, 0.86); stroke-width: 1.65; filter: url(#np-partner-glow); }
.np-demand-trunk { stroke: rgba(92, 193, 227, 0.42); stroke-width: 1.2; }
.np-demand-trunk-active { stroke: rgba(193, 246, 255, 0.94); stroke-width: 2.0; filter: url(#np-partner-glow); }
.np-demand-bus { stroke: rgba(91, 185, 218, 0.34); stroke-width: 1.05; }
.np-demand-hub { filter: url(#np-partner-glow); }
.np-demand-hub__halo { fill: rgba(93, 207, 242, 0.08); }
.np-demand-hub__ring { fill: rgba(7, 25, 44, 0.92); stroke: rgba(128, 225, 252, 0.72); stroke-width: 1.05; vector-effect: non-scaling-stroke; }
.np-demand-hub__core { fill: #e8fbff; }
.np-demand-hub__title { fill: rgba(244, 251, 255, 0.94); font-size: 10px; font-weight: 760; letter-spacing: 0.12em; }
.np-demand-hub__sub { fill: rgba(190, 225, 238, 0.58); font-size: 9px; font-weight: 540; letter-spacing: 0.02em; }


/* ==========================================================
   MOBILE FINAL — native scrolling, no scene/input lock
========================================================== */
@media (max-width: 899px) {
  html { overflow-x: hidden; overscroll-behavior-y: auto; }
  body { overflow-x: hidden; overflow-y: auto; touch-action: pan-y pinch-zoom; }
  .np-film { min-height: 0 !important; height: auto !important; padding: 92px 0 48px !important; overflow: visible !important; }
  .np-film__stage { display: none !important; }
  .np-film-mobile { display: block !important; position: relative; width: min(calc(100% - 32px), 680px); margin: 0 auto; }
  .np-film-mobile__intro { position: relative; z-index: 2; }
  .np-film-mobile__intro h1 { margin: 16px 0 0; max-width: 11ch; color: #fff; font-size: clamp(40px, 11vw, 58px); line-height: .98; letter-spacing: -.065em; }
  .np-film-mobile__intro h1 span { color: #50B8E4; }
  .np-film-mobile__intro p { margin: 22px 0 0; max-width: 35rem; color: rgba(235,245,252,.68); font-size: 16px; line-height: 1.7; }
  .np-film-mobile__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .np-film-mobile__actions a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 17px; border: 1px solid rgba(143,231,255,.22); border-radius: 999px; color: #eef8ff; background: rgba(255,255,255,.035); text-decoration: none; font-size: 13px; font-weight: 800; }
  .np-film-mobile__actions a:first-child { color: #061225; background: #50B8E4; border-color: #50B8E4; }
  .np-film-mobile__network { height: min(86vw, 520px); min-height: 330px; margin: 26px -16px 20px; }
  .np-film-mobile__svg { display: block; width: 100%; height: 100%; }
  .np-film-mobile__steps { display: grid; gap: 10px; }
  .np-film-mobile__steps article { padding: 20px; border: 1px solid rgba(126,219,250,.13); border-radius: 18px; background: rgba(255,255,255,.025); }
  .np-film-mobile__steps small { color: #86ddf8; font-size: 9px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
  .np-film-mobile__steps h2 { margin: 9px 0 0; color: #fff; font-size: 19px; line-height: 1.28; letter-spacing: -.035em; }
}