.about { position: relative; background: var(--scene-bg, #000); color: var(--scene-ink, #f8f8fb); }
.about-stage { position: relative; padding: 16px 24px 100px; }
.about-title {
  margin: 0 0 40px;
  padding: 90px 24px 0;
  font-size: clamp(68px, 10vw, 152px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.065em;
  text-align: center;
  pointer-events: none;
}
.about-scene { width: min(1480px, 100%); margin: 0 auto; }
.about-route { display: none; }
.about-chapters { max-width: 640px; margin: 0 auto; padding: 0; list-style: none; }
.about-chapters > li { position: relative; padding: 48px 0 48px 24px; border-left: 1px solid var(--scene-rule, #22304e); }
.about-dot { position: absolute; left: -5px; top: 52px; width: 9px; height: 9px; border-radius: 50%; background: #6292ff; }
.about-dot::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: #3268ff; filter: blur(10px); opacity: .35; }
.about-chapter-label { margin: 0 0 24px; color: var(--scene-label, #8caaff); font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.about h3 { margin: 0; font-size: clamp(34px, 3.25vw, 48px); font-weight: 650; line-height: 1.07; letter-spacing: -.055em; }
.about-chapter-body { margin-top: 28px; }
.about h4 { margin: 0 0 12px; font-size: clamp(19px, 1.65vw, 23px); line-height: 1.3; font-weight: 600; letter-spacing: -.035em; }
.about-chapter-body p { margin: 0 0 16px; color: var(--scene-ink, #fff); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; letter-spacing: -.025em; }
.about-chapter-note { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--scene-rule, #22232c); color: var(--scene-ink, #fff); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.5; letter-spacing: -.02em; }
.about .about-node-art { width: min(calc(220px * var(--art-optical-scale, 1)), 70%); margin-top: 32px; pointer-events: none; }
.about .about-art-surface { position: relative; width: 100%; }
.about .about-art-source { display: block; width: 100%; height: auto; opacity: 1; }
.about .about-art-particles { display: none; }

@media (min-width: 1100px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .about[data-enhanced='true'] {
    scroll-margin-top: 44svh;
    margin-top: -100svh;
    height: calc(var(--about-story-height) + 100svh);
  }
  .about[data-enhanced='true'] .about-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    padding: 0;
    isolation: isolate;
    overflow: hidden;
    z-index: 4;
  }
  /* A single viewport overlay bridges the black core and the next section.
     It sits outside the stage so the stage's clipping cannot cut its entrance. */
  .about[data-enhanced='true'] .about-title {
    position: fixed;
    z-index: 10;
    top: 30%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 24px;
    opacity: var(--about-title-opacity, 0);
    transform: translate3d(0, var(--about-title-y, 70svh), 0);
  }
  .about[data-enhanced='true'] .about-scene {
    width: min(1480px, 92vw);
    height: 100%;
  }
  .about[data-enhanced='true'] .about-story {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .about[data-enhanced='true'] .about-story-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .about[data-enhanced='true'] .about-route {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    mask-image: linear-gradient(transparent 0%, #000 20%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-composite: intersect;
  }
  .about-route path { stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .about-route-base { stroke: var(--route-base, #e7efff); opacity: .8; }
  .about-route-draw { stroke: #3b629e; }
  .about-route .about-route-glow { stroke-width: 16; opacity: .75; }
  .about-route .about-route-light { stroke-width: 1.8; }
  .about-route-pulse { animation: about-road-breathe 3.6s ease-in-out infinite; animation-play-state: paused; }
  .about-route .about-route-glow { animation: about-glow-breathe 3.6s ease-in-out infinite; animation-play-state: paused; }
  .about[data-pulse='true'] .about-route-pulse,
  .about[data-pulse='true'] .about-route-glow { animation-play-state: running; }
  .about[data-enhanced='true'] .about-chapters { position: absolute; inset: 0; max-width: none; margin: 0; }
  .about[data-enhanced='true'] .about-chapters > li {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
  }
  .about[data-enhanced='true'] .about-node-copy {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: clamp(330px, 34vw, 440px);
    opacity: var(--chapter-opacity, 0);
    transform-origin: 0 0;
    transform: translate3d(var(--node-x, 0px), var(--node-y, 0px), 0) scale(var(--node-scale, 1));
  }
  .about[data-enhanced='true'] .about-node-art {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: var(--art-size, 240px);
    height: var(--art-size, 240px);
    margin: 0;
    opacity: var(--art-opacity, 0);
    transform-origin: 0 0;
    transform: translate3d(var(--node-x, 0px), var(--node-y, 0px), 0) scale(var(--node-scale, 1));
  }
  .about[data-enhanced='true'] .about-art-surface {
    left: var(--art-offset-x, 0px);
    top: var(--art-offset-y, 0px);
    height: 100%;
  }
  .about[data-enhanced='true'] .about-art-source { height: 100%; object-fit: contain; }
  .about[data-enhanced='true'] .about-node-art[data-preparing='true'] .about-art-source { opacity: 0; }
  .about[data-enhanced='true'] .about-art-particles {
    position: absolute;
    top: -30%;
    left: -30%;
    display: block;
    width: 160%;
    height: 160%;
    opacity: 0;
    pointer-events: none;
  }
  .about[data-enhanced='true'] .about-node-art[data-renderer='webgl'] .about-art-source { opacity: 0; }
  .about[data-enhanced='true'] .about-node-art[data-renderer='webgl'] .about-art-particles { opacity: 1; }
  .about[data-enhanced='true'] .about-hologram {
    position: relative;
    transform-origin: 0 0;
    transform: perspective(1100px) rotateX(var(--holo-rx, 0deg)) rotateY(var(--holo-ry, 0deg));
  }
  .about[data-enhanced='true'] .about-hologram::before {
    content: '';
    position: absolute;
    top: -32px;
    left: -.5px;
    width: 1px;
    height: 32px;
    background: linear-gradient(0deg, #84b2ffb3, #558bff26);
    box-shadow: 0 0 8px #387aff73;
    pointer-events: none;
  }
  .about[data-enhanced='true'] .about-copy-surface {
    position: relative;
    left: var(--copy-offset-x, 0px);
    top: var(--copy-offset-y, 0px);
    color: var(--scene-ink, #fff);
    text-shadow: 0 0 12px #7da6ff12;
  }
  .about[data-enhanced='true'] .about-chapter-label,
  .about[data-enhanced='true'] .about-chapter-body p,
  .about[data-enhanced='true'] .about-chapter-note { color: var(--scene-ink, #fff); }
  .about[data-enhanced='true'] .about-chapter-note { border-color: var(--scene-rule, #ffffff38); }
  .about[data-enhanced='true'] .about-dot {
    z-index: 1;
    left: calc(var(--node-x, 0px) - 4px);
    top: calc(var(--node-y, 0px) - 4px);
    width: 8px;
    height: 8px;
    background: var(--route-idle, #17243e);
    opacity: var(--node-opacity, 0);
    transform: scale(var(--node-scale, 1));
  }
  .about[data-enhanced='true'] .about-dot::before { opacity: var(--point-glow, 0); animation: about-point-breathe 3.6s ease-in-out infinite; animation-play-state: paused; }
  .about[data-enhanced='true'][data-pulse='true'] .about-dot::before { animation-play-state: running; }
  .about[data-enhanced='true'] .about-dot > span { position: absolute; inset: 0; border-radius: inherit; background: var(--route-reached, #80a6ff); opacity: var(--point-reached, 0); }
}

@keyframes about-road-breathe { 0%, 100% { opacity: .67; } 50% { opacity: 1; } }
@keyframes about-glow-breathe { 0%, 100% { opacity: .42; } 50% { opacity: .95; } }
@keyframes about-point-breathe { 0%, 100% { opacity: calc(var(--point-glow, 0) * .55); } 50% { opacity: var(--point-glow, 0); } }

@media (min-width: 1100px) and (min-height: 640px) and (max-height: 760px) {
  .about h3 { font-size: clamp(30px, 2.7vw, 38px); }
  .about h4 { font-size: 20px; }
  .about-chapter-label { margin-bottom: 18px; }
  .about-chapter-body { margin-top: 20px; }
  .about-chapter-body p { font-size: 16px; line-height: 1.5; }
  .about-chapter-note { margin-top: 20px; padding-top: 16px; }
}