/* Homepage-only scroll scene. The logo is a camera target; section copy lives
   in the negative space around its circuit lines. */
.hero-logo-anchor {
  display: block;
  width: 4.5rem;
  height: 4.625rem;
  margin-inline: auto;
}

.logo-vector-scene {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 3;
  width: 72px;
  height: 74px;
  color: #fff;
  opacity: 1;
  pointer-events: none;
  will-change: left, top, width, height, opacity, color;
  overflow: visible;
}

.logo-vector-scene.is-section-camera {
  z-index: 1;
}

.hero-logo-anchor .hero-logo {
  visibility: hidden;
}

.logo-vector-scene circle {
  fill: currentColor;
  vector-effect: non-scaling-stroke;
}

.logo-vector-scene .logo-traces {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.logo-vector-scene.is-section-camera .logo-base {
  opacity: .3;
}

.logo-vector-scene .logo-water path,
.logo-vector-scene .logo-water-soft path {
  fill: none;
  stroke: #153c67;
  stroke-width: 2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.logo-vector-scene .logo-water path[data-route="1"],
.logo-vector-scene .logo-water-soft path[data-route="1"] {
  visibility: hidden;
}

.logo-vector-scene .logo-water-soft.soft-1 { opacity: .68; }
.logo-vector-scene .logo-water-soft.soft-2 { opacity: .4; }
.logo-vector-scene .logo-water-soft.soft-3 { opacity: .17; }

.logo-vector-scene .visited-nodes circle,
.logo-vector-scene .node-highlight {
  fill: #153c67;
  opacity: 0;
}

.logo-vector-scene .logo-final circle {
  fill: #153c67;
}

.logo-vector-scene .logo-final .logo-traces {
  stroke: #153c67;
}

.logo-vector-scene .logo-final {
  opacity: 0;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: clamp(10rem, 28vh, 18rem);
  background: linear-gradient(
    to bottom,
    rgba(246, 245, 242, 0) 0%,
    rgba(246, 245, 242, .06) 22%,
    rgba(246, 245, 242, .42) 68%,
    var(--c-bg-2) 100%
  );
  pointer-events: none;
}

.hero .hero-inner,
.hero .scroll-cue {
  position: relative;
  z-index: 2;
}

#about {
  border-top: 0;
}

.e-section.logo-stage {
  position: relative;
  min-height: 100svh;
}

.e-section.logo-stage .e-grid {
  position: relative;
  z-index: 2;
  padding-block: clamp(4rem, 11vh, 7rem);
  opacity: 1;
}

.e-section.logo-stage .e-rail {
  position: sticky;
  top: 6rem;
  align-self: start;
  padding: 1rem .9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--c-line) 82%, transparent);
  border-radius: .9rem;
  background: color-mix(in srgb, var(--scene-panel) 96%, transparent);
  box-shadow: 0 .8rem 2.5rem rgba(24, 38, 57, .07);
}

.e-section.logo-stage .e-body {
  display: grid;
  gap: clamp(2rem, 8vh, 5rem);
}

.pipe-panel {
  --panel-enter-x: 0;
  --panel-enter-y: 0;
  position: relative;
  padding: clamp(1.35rem, 2.5vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--c-line) 82%, transparent);
  border-radius: 1.15rem;
  background: color-mix(in srgb, var(--scene-panel) 96%, transparent);
  box-shadow: 0 1.5rem 4rem rgba(24, 38, 57, .09);
  opacity: .24;
  transform: translate(var(--panel-enter-x), var(--panel-enter-y)) scale(.965);
  transition: opacity 520ms ease, transform 720ms cubic-bezier(.16, 1, .3, 1);
}

/* Horizontal pipe runs reveal copy from above/below; vertical runs reveal it
   from the left/right. The sequence follows the route geometry. */
.pipe-panel.from-above { --panel-enter-y: -4rem; }
.pipe-panel.from-below { --panel-enter-y: 4rem; }
.pipe-panel.from-left  { --panel-enter-x: -4rem; }
.pipe-panel.from-right { --panel-enter-x: 4rem; }

.pipe-panel.is-in-view {
  opacity: 1;
  transform: translate(0, var(--panel-lane-y, 0)) scale(1);
}

.pipe-panel .about-stats {
  gap: .75rem;
}

.pipe-panel .about-stats .stat-value {
  font-size: clamp(2rem, 3vw, 2.65rem);
}

.pipe-panel > .spotlight {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.pipe-panel > .spotlight.reversed .spotlight-media {
  order: 0;
}

.pipe-panel > .sponsors-block {
  margin-top: 0;
}

.pipe-panel::after {
  content: none;
}

@media (min-width: 861px) {
  .e-section.logo-stage .e-grid {
    width: 100%;
    max-width: 76rem;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 2rem);
    margin-inline: auto;
  }

  .e-section.logo-stage .e-body {
    display: block;
  }

  .e-section.logo-stage .pipe-panel-slot {
    position: relative;
    min-height: 165vh;
  }

  .e-section.logo-stage .pipe-panel {
    --panel-lane-x: -50%;
    --panel-lane-y: 0;
    position: sticky;
    top: 50vh;
    padding: clamp(1rem, 1.8vw, 1.5rem);
    margin-inline: auto;
    visibility: hidden;
    transform: translate(calc(var(--panel-lane-x) + var(--panel-enter-x)), calc(var(--panel-lane-y) + var(--panel-enter-y))) scale(.965);
  }

  .e-section.logo-stage .pipe-panel.is-route-active {
    position: fixed;
    z-index: 2;
    left: 50%;
    top: 50vh;
    margin: 0;
    opacity: 0;
    visibility: visible;
    transform: translate(calc(var(--panel-lane-x) + var(--panel-enter-x)), calc(var(--panel-lane-y) + var(--panel-enter-y))) scale(.965);
  }

  .e-section.logo-stage .pipe-panel.is-route-active.is-in-view {
    opacity: 1;
    transform: translate(var(--panel-lane-x), var(--panel-lane-y)) scale(1);
  }

  .e-section.logo-stage .pipe-panel.from-above {
    --panel-lane-x: -50%;
    --panel-lane-y: calc(-100% - 5.625rem);
    width: min(42rem, 58vw);
  }

  .e-section.logo-stage .pipe-panel.from-below {
    --panel-lane-x: -50%;
    --panel-lane-y: 5.625rem;
    width: min(42rem, 58vw);
  }

  .e-section.logo-stage .pipe-panel.from-left {
    --panel-lane-x: calc(-100% - 7rem);
    --panel-lane-y: -50%;
    width: min(32rem, 40vw);
  }

  .e-section.logo-stage .pipe-panel.from-right {
    --panel-lane-x: 7rem;
    --panel-lane-y: -50%;
    width: min(32rem, 40vw);
  }

  .e-section.logo-stage .pipe-panel.from-center {
    --panel-lane-x: -50%;
    --panel-lane-y: -50%;
    width: min(42rem, 58vw);
  }

  /* The finished mark and the final Placement panel resolve into one outro
     composition instead of stacking on top of each other. */
  .e-section.logo-stage.is-final-layout .pipe-panel[data-panel="3-1"] {
    --panel-lane-x: 0;
    --panel-lane-y: -50%;
    position: fixed;
    z-index: 2;
    left: var(--final-panel-left);
    top: var(--final-panel-top);
    width: var(--final-panel-width);
    max-width: 42rem;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%) scale(1);
  }

  .e-section.logo-stage.is-final-layout .pipe-panel[data-panel="3-0"] {
    opacity: 0;
    visibility: hidden;
  }

  #about .pipe-panel .ledger {
    margin-top: 0;
  }

  #about .pipe-panel .ledger li {
    padding-block: .65rem;
  }

  .pipe-panel .sponsors-media img {
    max-height: 34vh;
    object-fit: contain;
  }

  .pipe-panel.from-above > .spotlight,
  .pipe-panel.from-below > .spotlight {
    grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
    align-items: center;
  }

  .pipe-panel.from-above > .spotlight h3,
  .pipe-panel.from-below > .spotlight h3 {
    font-size: clamp(1.35rem, 2vw, 1.65rem);
  }

  .pipe-panel.from-above > .spotlight p,
  .pipe-panel.from-below > .spotlight p {
    font-size: .9rem;
    line-height: 1.45;
  }

}

.e-section.logo-stage { --scene-panel: var(--c-bg); }
.e-section.logo-stage.alt { --scene-panel: var(--c-bg-2); }

@media (max-width: 860px) {
  .hero::before { height: 32vh; }

  .e-section.logo-stage {
    min-height: auto;
  }

  /* Keep enough real page length for the final full-logo reveal to settle
     gradually instead of completing in one short wheel gesture. */
  main > .e-section.logo-stage:last-of-type {
    min-height: 190svh;
  }

  .e-section.logo-stage .e-grid {
    position: relative;
    z-index: 2;
    margin-inline: 1rem;
    padding-block: 3rem;
  }

  .e-section.logo-stage .e-rail {
    position: relative;
    top: auto;
  }

  .pipe-panel::after {
    display: none;
  }

  .e-section.logo-stage.is-final-layout .pipe-panel[data-panel="3-1"] {
    --panel-lane-x: 0;
    --panel-lane-y: -50%;
    position: fixed;
    z-index: 2;
    left: var(--final-panel-left);
    top: var(--final-panel-top);
    width: var(--final-panel-width);
    max-width: none;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%) scale(1);
  }

  .e-section.logo-stage.is-final-layout .pipe-panel[data-panel="3-1"] {
    padding: clamp(.8rem, 2.8vw, 1.15rem);
  }

  .e-section.logo-stage.is-final-layout .pipe-panel[data-panel="3-0"] {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-vector-scene {
    display: none;
  }

  .pipe-panel {
    opacity: 1;
    transform: none;
  }
}