/* ============================================================
   顾瑶工作室 · 网站群
   Dark night-sky theme with liquid-glass surfaces.
   The #journey section borrows the HyperOS "continuity" pattern:
   large cards pin in place while the next one slides over them,
   and covered cards gently scale down and dim like a deck.
   ============================================================ */

:root {
  --ink: #f4f7ff;
  --muted: #9ba8c6;
  --line: rgba(178, 202, 255, 0.13);
  --cyan: #59dfff;
  --pink: #bf78ff;
  --card-top: clamp(84px, 11vh, 112px);
  --stack-step: 7px;
}

* { box-sizing: border-box; }

/* overflow-x must be clip, and it must be !important: the external
   api.mcylyr.cn loader script sets inline overflowX:"hidden" on html/body
   at DOMContentLoaded. A hidden/auto overflow on body turns it into its own
   scroll container once html scrolls, which silently breaks position:sticky
   for the whole card deck. Author !important beats that inline style, and
   clip never creates a scroll container. */
html { overflow-y: scroll; overflow-x: clip !important; scrollbar-width: auto; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip !important;
  color: var(--ink);
  background: #050817;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

a { color: inherit; text-decoration: none; }

/* ---------- background ---------- */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(37, 94, 198, 0.28), transparent 34rem),
    radial-gradient(circle at 88% 38%, rgba(101, 48, 155, 0.19), transparent 38rem),
    linear-gradient(180deg, #081127 0%, #050817 42%, #030611 100%);
}

.aurora .orb { transform: translateY(calc(0px - var(--scroll-y, 0px))); }

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.54;
  mix-blend-mode: screen;
  animation: drift 14s ease-in-out infinite alternate;
}

.orb.one { top: 9vh; left: -13vw; width: 38vw; height: 38vw; background: radial-gradient(circle, rgba(50, 115, 255, 0.34), transparent 67%); }
.orb.two { top: 26vh; right: -10vw; width: 35vw; height: 35vw; background: radial-gradient(circle, rgba(150, 69, 224, 0.26), transparent 67%); animation-delay: -6s; }
.orb.three { bottom: -17vw; left: 36vw; width: 30vw; height: 30vw; background: radial-gradient(circle, rgba(30, 196, 211, 0.2), transparent 67%); animation-delay: -9s; }

.grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.28;
  pointer-events: none;
  background-image: linear-gradient(rgba(137, 172, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 172, 255, 0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

main { width: min(1240px, calc(100% - 56px)); margin: 0 auto; }

/* ---------- shared glass pieces ---------- */

.eyebrow,
.button.secondary,
.site,
.note,
.signal-constellation,
.constellation-node,
.back-to-top,
.journey-now,
.act-head {
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(205, 229, 255, 0.2);
  border-radius: 99px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 44%, rgba(105, 155, 255, 0.07)),
    rgba(10, 21, 48, 0.42);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 12px 34px rgba(0, 0, 0, 0.12);
  color: #b6c5e6;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}

.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #72f3c3; box-shadow: 0 0 13px #72f3c3; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  min-height: 100svh;
  padding: 64px 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100%, 1080px);
  max-width: 1080px;
  animation: hero-enter 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

h1 {
  margin: 24px 0;
  font-size: clamp(3.7rem, 7.25vw, 7rem);
  font-weight: 660;
  line-height: 0.96;
  letter-spacing: -0.07em;
}

h1 span { color: transparent; background-image: linear-gradient(105deg, #f7f9ff 4%, #64d8ff 48%, #aa7cff 92%); background-clip: text; }
.hero h1 span { background-size: 180% 180%; animation: gradient-shift 7s ease infinite; }

.hero h1 .hero-line,
.hero .lead .hero-line { display: block; white-space: nowrap; }
.hero h1 .hero-line + .hero-line { margin-top: 0.04em; }

.lead { max-width: 1080px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.85; }
.hero .lead .hero-line + .hero-line { margin-top: 0.12em; }

.actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid rgba(183, 210, 255, 0.14);
  border-radius: 14px;
  font-weight: 650;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.button.primary {
  border-color: rgba(125, 205, 255, 0.24);
  color: #07101f;
  background: linear-gradient(110deg, #74e8ff, #9b8cff);
  box-shadow: 0 15px 38px rgba(67, 135, 255, 0.24);
}

.button.secondary {
  color: #edf4ff;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025) 52%, rgba(111, 97, 255, 0.08)),
    rgba(11, 23, 52, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 15px 36px rgba(0, 0, 0, 0.16);
}

.button:hover { transform: translateY(-2px); }

.scroll-cue {
  position: absolute;
  z-index: 1;
  bottom: 28px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #8c9ab8;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  transform: translateX(-50%);
  transition: color 0.25s ease;
}

.scroll-cue:hover { color: var(--cyan); }

.scroll-cue i {
  width: 19px;
  height: 19px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-down 1.8s ease-in-out infinite;
}

.particle-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.particle-field i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan), 0 0 34px var(--pink);
  animation: particle-float 5.5s ease-in-out var(--delay) infinite;
}

/* ---------- journey: sticky card deck (HyperOS style) ---------- */

.journey {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(520px, 1.28fr);
  align-items: start;
  gap: clamp(54px, 8vw, 128px);
  padding: 110px 0 40px;
}

.journey-side { position: sticky; top: clamp(96px, 14vh, 140px); }

.journey-side h2 {
  max-width: 360px;
  margin: 16px 0 0;
  font-size: clamp(2.25rem, 4.2vw, 4.15rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.journey-side p { max-width: 320px; margin: 25px 0 0; color: var(--muted); line-height: 1.8; }

.journey-side::after {
  display: block;
  width: min(220px, 72%);
  height: 1px;
  margin-top: 34px;
  content: "";
  background: linear-gradient(90deg, var(--cyan), rgba(101, 233, 255, 0));
  box-shadow: 0 0 18px rgba(101, 233, 255, 0.28);
}

.journey-now {
  --journey-p: 0.1;
  display: grid;
  gap: 10px;
  width: min(300px, 100%);
  margin-top: 30px;
  padding: 20px;
  border: 1px solid rgba(205, 229, 255, 0.17);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(101, 155, 255, 0.14), transparent 42%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 55%),
    rgba(8, 18, 42, 0.55);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 24px 55px rgba(0, 0, 0, 0.26);
}

.journey-now-caption { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.14em; }

.journey-now-act { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }

.journey-bar { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(178, 202, 255, 0.16); }
.journey-bar i {
  display: block;
  width: calc(var(--journey-p) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 14px rgba(101, 233, 255, 0.5);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.journey-now-station { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.journey-track { position: relative; min-width: 0; padding-bottom: 16vh; counter-reset: station; }

/* Act interludes are part of the deck too: each banner pins at the same
   offset as the card that follows it, so the arriving card folds the banner
   into the stack instead of letting it fly past the top of the viewport. */
.act-head {
  --stack-index: 0;
  --scene-color: var(--cyan);
  position: sticky;
  top: calc(var(--card-top) + var(--stack-index, 0) * var(--stack-step));
  margin: clamp(70px, 13vh, 130px) 0 clamp(56px, 11vh, 110px);
  padding: 26px 28px;
  border: 1px solid rgba(198, 222, 255, 0.15);
  border-radius: 20px;
  background:
    radial-gradient(300px circle at var(--pointer-x, 50%) var(--pointer-y, -30%), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 44%, transparent 68%),
    radial-gradient(circle at 0% 0%, rgba(101, 233, 255, 0.1), transparent 46%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 52%),
    rgba(8, 18, 42, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 -1px rgba(137, 179, 255, 0.05), 0 20px 48px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(1.08);
  backdrop-filter: blur(18px) saturate(170%) brightness(1.08);
  transform-origin: 50% 14%;
  transform: scale(calc(1 - var(--buried, 0) * 0.05));
  filter: brightness(calc(1 - var(--buried, 0) * 0.42)) saturate(calc(1 - var(--buried, 0) * 0.18));
  will-change: transform, filter;
}

.act-head::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  padding: 1.2px;
  background: radial-gradient(240px circle at var(--pointer-x, 50%) var(--pointer-y, -30%), color-mix(in srgb, var(--scene-color) 82%, white), rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.04) 70%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Banners continue the deck offsets: each pins exactly where the next card
   pins, so the card fully covers it when both are pinned (journey-track
   children order: heads at 1/4/7/11, cards at 2,3,5,6,8,9,10,12,13,14). */
.act-head:nth-child(1) { --stack-index: 0; margin-top: 0; }
.act-head:nth-child(4) { --stack-index: 2; }
.act-head:nth-child(7) { --stack-index: 4; }
.act-head:nth-child(11) { --stack-index: 7; }

.act-eyebrow {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid rgba(101, 233, 255, 0.32);
  border-radius: 99px;
  background: rgba(101, 233, 255, 0.09);
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.act-head p {
  margin: 14px 0 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.5;
}

/* The deck cards: sticky at the shared deck top plus a small per-card offset
   so each pinned card peeks a few pixels above the next one. As the next card
   rises over a pinned one, --buried (set by JS) scales it down and dims it
   behind the deck. The liquid-glass skin carries a specular highlight that
   tracks the pointer via --pointer-x/--pointer-y (set by JS). */
.site {
  --scene-color: var(--glow);
  position: sticky;
  top: calc(var(--card-top) + var(--stack-index, 0) * var(--stack-step));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: clamp(218px, 30vh, 288px);
  padding: clamp(24px, 3vw, 34px);
  margin-bottom: clamp(110px, 22vh, 210px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--scene-color) 24%, rgba(218, 235, 255, 0.18));
  border-radius: 26px;
  background:
    radial-gradient(340px circle at var(--pointer-x, 50%) var(--pointer-y, -30%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 42%, transparent 68%),
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--scene-color) 15%, transparent), transparent 36%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.018) 45%, rgba(91, 121, 208, 0.055)),
    rgba(7, 16, 38, 0.59);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    inset 0 -1px rgba(137, 179, 255, 0.05),
    0 22px 55px rgba(0, 0, 0, 0.3),
    0 0 36px color-mix(in srgb, var(--scene-color) 6%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(175%) brightness(1.1);
  backdrop-filter: blur(18px) saturate(175%) brightness(1.1);
  counter-increment: station;
  transform-origin: 50% 14%;
  transform: scale(calc(1 - var(--buried, 0) * 0.05));
  filter: brightness(calc(1 - var(--buried, 0) * 0.42)) saturate(calc(1 - var(--buried, 0) * 0.18));
  will-change: transform, filter;
  transition: border-color 0.28s ease, box-shadow 0.28s ease;
}

/* Continuous deck offsets (act interludes sit at nth-child 1/4/7/11). */
.site:nth-child(2) { --stack-index: 0; }
.site:nth-child(3) { --stack-index: 1; }
.site:nth-child(5) { --stack-index: 2; }
.site:nth-child(6) { --stack-index: 3; }
.site:nth-child(8) { --stack-index: 4; }
.site:nth-child(9) { --stack-index: 5; }
.site:nth-child(10) { --stack-index: 6; }
.site:nth-child(12) { --stack-index: 7; }
.site:nth-child(13) { --stack-index: 8; }
.site:nth-child(14) { --stack-index: 9; }

/* Liquid-glass edge light: a 1px ring masked out of a radial gradient that
   sits under the pointer, so the border glows where the cursor is. */
.site::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  padding: 1.2px;
  background: radial-gradient(260px circle at var(--pointer-x, 50%) var(--pointer-y, -30%), color-mix(in srgb, var(--scene-color) 78%, white), rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.04) 70%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.site::after {
  position: absolute;
  right: -14px;
  bottom: -40px;
  content: counter(station, decimal-leading-zero);
  color: color-mix(in srgb, var(--scene-color) 11%, transparent);
  font-size: 7.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.09em;
  pointer-events: none;
}

.site:hover, .site:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--scene-color) 58%, white);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 26px 60px rgba(0, 0, 0, 0.36),
    0 0 44px color-mix(in srgb, var(--scene-color) 14%, transparent);
}

.site-head { position: relative; display: flex; align-items: center; gap: 18px; }

.site-icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--glow) 38%, rgba(255, 255, 255, 0.55));
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.025)),
    color-mix(in srgb, var(--glow) 12%, rgba(7, 16, 38, 0.76));
  color: #f3f7ff;
  font-size: 1.15rem;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 10px 26px color-mix(in srgb, var(--glow) 15%, transparent);
  transition: transform 0.28s ease;
}

.site-kicker {
  display: block;
  color: var(--scene-color);
  font-size: 0.66rem;
  font-weight: 720;
  letter-spacing: 0.16em;
}

.site h3 {
  margin: 5px 0 0;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.site-count {
  margin-left: auto;
  align-self: flex-start;
  color: rgba(155, 168, 198, 0.75);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.site-count b {
  color: var(--scene-color);
  font-size: 1.45rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.site-copy { position: relative; max-width: 56ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.8; }

.go {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: rgba(233, 242, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.go span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--glow) 42%, transparent);
  border-radius: 50%;
  color: var(--glow);
  transition: transform 0.25s ease, background 0.25s ease;
}

.site:hover .site-icon, .site:focus-visible .site-icon { transform: rotate(-5deg) scale(1.05); }
.site:hover .go span, .site:focus-visible .go span { background: color-mix(in srgb, var(--glow) 13%, transparent); transform: translate(2px, -2px); }

/* ---------- reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(38px) scale(0.98);
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0ms), transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0ms);
}

.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Note: .site / .act-head reveal transforms are overridden by the deck
   transform above; fade-in still applies, so the deck var-driven transform
   stays intact. */
.site.reveal, .act-head.reveal { transform: scale(calc(1 - var(--buried, 0) * 0.05)); }
.site.reveal.is-visible, .act-head.reveal.is-visible { transform: scale(calc(1 - var(--buried, 0) * 0.05)); }

/* ---------- signal section ---------- */

.signal-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  isolation: isolate;
  gap: clamp(56px, 9vw, 150px);
  min-height: 100svh;
  padding: clamp(100px, 13vh, 170px) max(7vw, 30px);
  margin: 120px calc(50% - 50vw) 0;
  overflow: hidden;
  background: radial-gradient(circle at 84% 45%, rgba(84, 152, 255, 0.16), transparent 30%), radial-gradient(circle at 14% 72%, rgba(159, 80, 220, 0.1), transparent 28%), rgba(5, 10, 26, 0.76);
}

.signal-section::before, .signal-section::after {
  position: absolute;
  z-index: -1;
  width: 46vw;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.15;
  pointer-events: none;
}

.signal-section::before { top: -24%; left: -14%; background: radial-gradient(circle, #a562ff, transparent 67%); }
.signal-section::after { right: -12%; bottom: -30%; background: radial-gradient(circle, #28d9ec, transparent 66%); }

.signal-copy { max-width: 580px; justify-self: end; }
.signal-copy h2 { margin: 21px 0; font-size: clamp(3rem, 6.1vw, 5.5rem); font-weight: 650; line-height: 1.02; letter-spacing: -0.065em; }
.signal-copy p { max-width: 560px; color: var(--muted); font-size: 1.12rem; line-height: 1.9; }

.signal-constellation {
  position: relative;
  width: min(500px, 42vw);
  aspect-ratio: 1;
  justify-self: start;
  border: 1px solid rgba(174, 208, 255, 0.15);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.12), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(104, 91, 255, 0.2), transparent 32%),
    radial-gradient(circle at 70% 28%, rgba(67, 175, 255, 0.2), transparent 24%),
    rgba(8, 19, 45, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.13), inset 0 0 70px rgba(72, 105, 170, 0.1), 0 40px 100px rgba(0, 0, 0, 0.28);
  animation: constellation-breathe 8s ease-in-out infinite;
}

.constellation-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;
  height: 1px;
  transform-origin: left;
  background: linear-gradient(90deg, rgba(91, 212, 255, 0.65), transparent);
  animation: line-pulse 2.8s ease-in-out infinite;
}

.line-one { --angle: -42deg; transform: rotate(var(--angle)); }
.line-two { --angle: 38deg; transform: rotate(var(--angle)); animation-delay: -1s; }
.line-three { --angle: 152deg; transform: rotate(var(--angle)); animation-delay: -2s; }

.constellation-node {
  position: absolute;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(184, 216, 255, 0.16);
  border-radius: 22px;
  color: #e5efff;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)), rgba(10, 23, 52, 0.66);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 14px 34px rgba(0, 0, 0, 0.26);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  animation: node-orbit 5s ease-in-out infinite;
}

.node-core {
  top: calc(50% - 38px);
  left: calc(50% - 38px);
  width: 76px;
  height: 76px;
  border-radius: 27px;
  color: #071020;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), transparent 36%), linear-gradient(145deg, #6be7ff, #a184ff);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.36), 0 0 50px rgba(84, 160, 255, 0.18);
  font-size: 0.9rem;
  animation: core-pulse 2.4s ease-in-out infinite;
}

.node-one { top: 5%; right: 18%; }
.node-two { right: 2%; bottom: 24%; animation-delay: -1.5s; }
.node-three { bottom: 8%; left: 15%; animation-delay: -2.5s; }
.node-four { top: 24%; left: 1%; animation-delay: -3.5s; }

/* ---------- studio notes ---------- */

.studio-notes {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  min-height: 100svh;
  padding: clamp(90px, 12vh, 150px) 0;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  background: radial-gradient(circle at 14% 72%, rgba(66, 160, 255, 0.14), transparent 27%), radial-gradient(circle at 86% 26%, rgba(166, 102, 255, 0.14), transparent 26%), rgba(4, 8, 21, 0.76);
}

.studio-notes::before {
  position: absolute;
  z-index: -1;
  top: 17%;
  left: 50%;
  width: min(860px, 72vw);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(102, 193, 255, 0.3), transparent);
  box-shadow: 0 0 70px 22px rgba(104, 166, 255, 0.08);
  transform: translateX(-50%);
}

.studio-notes .intro, .note-grid { width: min(1240px, calc(100% - 56px)); margin-right: auto; margin-left: auto; }

.intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 clamp(42px, 7vh, 78px); }
.intro h2 { font-size: clamp(3rem, 6.1vw, 5.5rem); font-weight: 650; line-height: 1.02; letter-spacing: -0.065em; }
.intro p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.7; }

.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.note {
  position: relative;
  min-height: 390px;
  padding: 38px;
  overflow: hidden;
  border: 1px solid rgba(198, 222, 255, 0.17);
  border-radius: 34px;
  background:
    radial-gradient(circle at var(--pointer-x, 78%) var(--pointer-y, 18%), rgba(111, 170, 255, 0.2), transparent 29%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.018) 48%, rgba(153, 95, 255, 0.045)),
    rgba(7, 16, 38, 0.54);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 26px 68px rgba(0, 0, 0, 0.27);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.note::before {
  position: absolute;
  top: -90px;
  right: -70px;
  width: 220px;
  height: 220px;
  content: "";
  border-radius: 50%;
  background: var(--note-glow);
  filter: blur(25px);
  opacity: 0.16;
}

.note-creation { --note-glow: #9f7dff; }
.note-play { --note-glow: #61e9d0; transform: translateY(42px); }
.note-flow { --note-glow: #ff9ccf; }

.note:hover, .note.is-tilting { border-color: rgba(164, 210, 255, 0.28); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.38); }
.note:hover { transform: translateY(-10px) rotate(-1deg); }
.note-play:hover { transform: translateY(30px) rotate(1deg); }
.note.is-tilting { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-12px) scale(1.02); }

.note-index { color: #8291af; font-size: 0.8rem; letter-spacing: 0.12em; }

.note-symbol {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 54px 0 24px;
  place-items: center;
  border: 1px solid rgba(174, 211, 255, 0.14);
  border-radius: 18px;
  color: #70dfff;
  background: rgba(60, 126, 241, 0.12);
  font-size: 1.55rem;
}

.note h3 { margin: 0 0 12px; color: #f2f6ff; font-size: 1.65rem; }
.note p { max-width: 285px; margin: 0; color: var(--muted); line-height: 1.75; }

/* ---------- closing ---------- */

.closing {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  min-height: 100svh;
  padding: clamp(110px, 16vh, 190px) 30px;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  border-block: 1px solid rgba(178, 208, 255, 0.12);
  background: radial-gradient(circle at 50% 80%, rgba(89, 157, 255, 0.2), transparent 34%), radial-gradient(circle at 70% 32%, rgba(153, 75, 214, 0.13), transparent 26%), linear-gradient(180deg, #070d20, #030611);
  text-align: center;
}

.closing::before, .closing::after {
  position: absolute;
  z-index: 0;
  content: "";
  border: 1px solid rgba(176, 208, 255, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.closing::before { width: min(70vw, 900px); aspect-ratio: 1; }
.closing::after { width: min(48vw, 620px); aspect-ratio: 1; }

.closing-glow {
  position: absolute;
  width: 58vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 91, 255, 0.24), rgba(72, 169, 255, 0.12) 36%, transparent 70%);
  filter: blur(12px);
  animation: glow-wave 7s ease-in-out infinite;
}

.closing > *:not(.closing-glow) { position: relative; z-index: 1; }
.closing h2 { max-width: 1040px; margin: 24px 0 18px; font-size: clamp(3rem, 6vw, 6rem); font-weight: 650; line-height: 0.98; letter-spacing: -0.07em; }
.closing h2 span { color: transparent; background-image: linear-gradient(90deg, #60dcff, #9a7dff 55%, #df78ca); background-clip: text; }
.closing p { max-width: 510px; margin: 0 0 30px; color: var(--muted); line-height: 1.8; }

/* ---------- marquee & back-to-top ---------- */

.marquee {
  padding: 17px 0;
  margin: 76px 0 28px;
  overflow: hidden;
  border-block: 1px solid rgba(178, 208, 255, 0.12);
  color: rgba(190, 207, 238, 0.45);
  white-space: nowrap;
}

.marquee div { display: inline-block; font-weight: 650; letter-spacing: 0.06em; animation: slide 26s linear infinite; }
.marquee em { padding: 0 26px; color: #65dfff; font-style: normal; }

.back-to-top {
  position: fixed;
  right: clamp(18px, 3vw, 38px);
  bottom: clamp(18px, 3vw, 38px);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border: 1px solid rgba(206, 231, 255, 0.25);
  border-radius: 999px;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.025) 58%, rgba(94, 106, 255, 0.1)),
    rgba(6, 16, 38, 0.62);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 18px 45px rgba(0, 0, 0, 0.32), 0 0 24px rgba(83, 194, 255, 0.08);
  color: #edf5ff;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.back-to-top > span:first-child { color: #65dfff; font-size: 1rem; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--cyan); transform: translateY(-3px); }
.back-to-top:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- injected header / footer support ---------- */

.site-footer {
  border-top: 1px solid rgba(178, 208, 255, 0.1);
  background: radial-gradient(circle at 50% 0, rgba(76, 117, 188, 0.12), transparent 38%), rgba(3, 7, 18, 0.94);
}

.footer-title { color: #f1f6ff; }
.footer-copy { color: #8e9bb8; }
.footer-link { border-color: rgba(177, 207, 255, 0.12); color: #cbd8f0; background: rgba(17, 28, 57, 0.56); }
.footer-copyline { color: #75829e; }
.footer-meta a { color: #9aa8c4; }

/* ---------- keyframes ---------- */

@keyframes hero-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes drift { from { transform: translateY(calc(0px - var(--scroll-y, 0px))); } to { transform: translate(7vw, calc(-5vh - var(--scroll-y, 0px))) scale(1.13); } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes scroll-down { 0%, 100% { opacity: 0.35; transform: rotate(45deg) translate(-3px, -3px); } 50% { opacity: 1; transform: rotate(45deg) translate(3px, 3px); } }
@keyframes particle-float { 0%, 100% { opacity: 0.22; transform: translate3d(0, 0, 0) scale(0.8); } 50% { opacity: 0.95; transform: translate3d(16px, -32px, 0) scale(1.28); } }
@keyframes constellation-breathe { 50% { transform: scale(1.06) rotate(3deg); box-shadow: 0 0 120px rgba(111, 142, 255, 0.36); } }
@keyframes node-orbit { 50% { transform: translateY(-12px) scale(1.08); } }
@keyframes core-pulse { 50% { transform: scale(1.16); box-shadow: 0 0 46px rgba(255, 143, 200, 0.58); } }
@keyframes line-pulse { 50% { opacity: 0.25; transform: rotate(var(--angle)) scaleX(0.76); } }
@keyframes glow-wave { 50% { transform: scale(1.18); opacity: 0.58; } }
@keyframes scene-halo-left { 50% { transform: translate(10vw, 8vh) scale(1.14); opacity: 0.32; } }
@keyframes scene-halo-right { 50% { transform: translate(-8vw, -7vh) scale(0.9); opacity: 0.3; } }
@keyframes scene-copy-in { from { opacity: 0; transform: translate3d(-70px, 24px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes scene-visual-in { from { opacity: 0; transform: translate3d(80px, 0, 0) scale(0.82) rotate(-8deg); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); } }
@keyframes note-arrive { from { opacity: 0; transform: translateY(80px) rotate(var(--note-angle, 0deg)) scale(0.9); } to { opacity: 1; transform: translateY(var(--note-rest, 0px)) rotate(0) scale(1); } }
@keyframes closing-ring { 50% { transform: scale(1.12) rotate(8deg); border-color: rgba(101, 233, 255, 0.28); } }
@keyframes closing-copy-in { from { opacity: 0; transform: translateY(52px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* ---------- scene entrance wiring ---------- */

.signal-section.scene-active::before { animation: scene-halo-left 11s ease-in-out infinite; }
.signal-section.scene-active::after { animation: scene-halo-right 13s ease-in-out infinite; }

.signal-copy, .signal-constellation, .studio-notes .intro, .studio-notes .note, .closing > *:not(.closing-glow) { opacity: 0; }

.signal-section.scene-active .signal-copy { animation: scene-copy-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.signal-section.scene-active .signal-constellation { animation: scene-visual-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both, constellation-breathe 8s ease-in-out 1.27s infinite; }

.studio-notes.scene-active .intro { animation: closing-copy-in 0.8s ease-out both; }
.studio-notes.scene-active .note { opacity: 1; animation: note-arrive 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.studio-notes.scene-active .note:nth-child(1) { --note-angle: -3deg; animation-delay: 0.08s; }
.studio-notes.scene-active .note:nth-child(2) { --note-rest: 42px; animation-delay: 0.22s; }
.studio-notes.scene-active .note:nth-child(3) { --note-angle: 3deg; animation-delay: 0.36s; }

.closing.scene-active::before { animation: closing-ring 9s ease-in-out infinite; }
.closing.scene-active::after { animation: closing-ring 7s ease-in-out -3s infinite reverse; }
.closing.scene-active .eyebrow { animation: closing-copy-in 0.75s ease-out 0.08s both; }
.closing.scene-active h2 { animation: closing-copy-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.closing.scene-active p { animation: closing-copy-in 0.8s ease-out 0.38s both; }
.closing.scene-active .button { animation: closing-copy-in 0.8s ease-out 0.52s both; }

/* ---------- responsive ---------- */

@media (max-width: 820px) {
  :root { --stack-step: 6px; }
  main { width: min(100% - 36px, 1240px); }
  .hero { padding: 48px 0; }
  .hero h1 .hero-line, .hero .lead .hero-line { white-space: normal; }

  .journey { display: block; padding-top: 90px; }
  .journey-side { position: relative; top: auto; margin-bottom: 58px; }
  .journey-side h2 { max-width: 520px; }
  .journey-side p { max-width: 460px; }
  .journey-now { width: min(420px, 100%); }

  .act-head { margin: clamp(56px, 10vh, 96px) 0 clamp(48px, 8vh, 84px); padding: 22px 24px; }
  .site { --card-top: 76px; min-height: 210px; gap: 20px; margin-bottom: clamp(96px, 15vh, 150px); border-radius: 22px; }

  .signal-section { grid-template-columns: 1fr; gap: 70px; padding: 110px 10vw; }
  .signal-copy, .signal-constellation { justify-self: center; }
  .signal-constellation { width: min(480px, 70vw); }

  .note-grid { grid-template-columns: repeat(2, 1fr); }
  .studio-notes .intro, .note-grid { width: min(100% - 36px, 1240px); }
  .intro { flex-direction: column; align-items: start; }
  .note-play { transform: none; }
  .studio-notes.scene-active .note:nth-child(2) { --note-rest: 0px; }
  .note-grid .note:last-child { grid-column: span 2; }
}

@media (max-width: 520px) {
  :root { --stack-step: 5px; }
  main { width: min(100% - 28px, 1240px); }
  .hero { min-height: 100svh; padding: 40px 0; }
  h1 { font-size: 3.4rem; }

  .journey { padding-top: 78px; }
  .act-head { margin: clamp(48px, 9vh, 78px) 0 clamp(44px, 7vh, 64px); padding: 19px 20px; }
  .act-head p { font-size: 1.08rem; }
  .site { --card-top: 62px; min-height: 200px; gap: 16px; padding: 20px 18px; margin-bottom: 90px; border-radius: 20px; }
  .site::after { right: -8px; bottom: -26px; font-size: 5.4rem; }
  .site-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 1rem; }
  .site h3 { font-size: 1.15rem; }
  .site-copy { font-size: 0.9rem; }
  .site-count { display: none; }
  .go { width: 27px; gap: 0; overflow: hidden; color: transparent; }
  .go span { flex: 0 0 27px; }

  .signal-section { min-height: 100svh; padding: 96px 9vw; margin-top: 90px; margin-bottom: 0; }
  .signal-constellation { width: min(80vw, 360px); }
  .constellation-node { width: 54px; height: 54px; border-radius: 18px; font-size: 0.62rem; }
  .node-core { width: 62px; height: 62px; }

  .studio-notes { min-height: 100svh; padding: 96px 0; }
  .studio-notes .intro, .note-grid { width: min(100% - 28px, 1240px); }
  .note-grid { grid-template-columns: 1fr; }
  .note-grid .note:last-child { grid-column: auto; }
  .note { min-height: 330px; padding: 30px; }
  .note-symbol { margin-top: 38px; }

  .closing { min-height: 100svh; padding: 105px 22px; }
  .closing-glow { width: 110vw; }

  .back-to-top { width: 46px; height: 46px; justify-content: center; padding: 0; }
  .back-to-top-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- fallbacks & reduced motion ---------- */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .eyebrow, .button.secondary, .site, .note, .signal-constellation, .constellation-node, .back-to-top, .journey-now, .act-head { background-color: rgba(9, 19, 43, 0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content, .scroll-cue i, .hero h1 span, .orb,
  .signal-section.scene-active::before, .signal-section.scene-active::after,
  .signal-section.scene-active .signal-copy, .signal-section.scene-active .signal-constellation,
  .studio-notes.scene-active .intro, .studio-notes.scene-active .note,
  .closing.scene-active::before, .closing.scene-active::after, .closing.scene-active > *,
  .signal-constellation, .constellation-node, .constellation-line, .closing-glow { animation: none; }
  .signal-copy, .signal-constellation, .studio-notes .intro, .studio-notes .note, .closing > *:not(.closing-glow), .reveal { opacity: 1; transform: none; transition: none; }
  .site.reveal, .site.reveal.is-visible, .act-head.reveal, .act-head.reveal.is-visible { transform: none; }
  .site, .act-head { filter: none; }
  .journey-bar i { transition: none; }
  .back-to-top { transition: none; }
}