/* ==========================================================================
   Glowmigos — Page shell, sections, wires and roofline dividers
   ========================================================================== */

.shell { position: relative; isolation: isolate; }

.wrap {
  inline-size: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.wrap--narrow { inline-size: min(100% - (var(--gutter) * 2), 1040px); }

.section { position: relative; padding-block: var(--section-y); }
.section--night {
  background:
    radial-gradient(80% 60% at 10% 0%, rgba(241, 57, 183, 0.10), transparent 62%),
    radial-gradient(70% 60% at 92% 22%, rgba(255, 181, 17, 0.09), transparent 60%),
    var(--s-deep);
}
.section--deeper {
  background:
    radial-gradient(110% 80% at 82% 0%, rgba(9, 188, 235, 0.16), transparent 62%),
    radial-gradient(90% 80% at 6% 96%, rgba(255, 181, 17, 0.13), transparent 60%),
    radial-gradient(60% 50% at 48% 50%, rgba(87, 217, 39, 0.05), transparent 70%),
    var(--s-abyss);
}
.section--raised {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(16, 48, 122, 0.65), transparent 70%),
    radial-gradient(70% 60% at 96% 90%, rgba(241, 57, 183, 0.12), transparent 62%),
    radial-gradient(70% 60% at 4% 10%, rgba(69, 231, 247, 0.10), transparent 62%),
    var(--s-navy);
}

/* --- Section heading block --------------------------------------------- */
.sec-head { display: grid; gap: var(--sp-4); margin-block-end: clamp(2rem, 1rem + 3vw, 3.6rem); }
.sec-head__title { max-inline-size: 18ch; }
.sec-head--split {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 62rem) {
  .sec-head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-6); }
  .sec-head--split .sec-head__aside { padding-block-end: 0.35rem; }
}

/* --- The wire: a continuous cable threading the whole page -------------- */
.wire {
  position: absolute; inset-inline-start: clamp(0.75rem, 3vw, 3.2rem);
  inset-block: 0; inline-size: 2px;
  z-index: var(--z-scene);
  pointer-events: none;
}
.wire::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent, rgba(137, 176, 255, 0.22) 6%,
    rgba(137, 176, 255, 0.22) 94%, transparent);
}
/* Travelling pulse — only alive in Glow Mode / Light Show. */
.wire__spark {
  position: absolute; inset-inline: -3px; block-size: 84px; inset-block-start: 0;
  will-change: transform;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, transparent, var(--c-cyan), transparent);
  opacity: 0;
  filter: blur(1px);
}
:where([data-glow="on"], [data-show="on"]) .wire__spark {
  opacity: calc(0.35 + var(--glow) * 0.4);
  animation: wire-travel 7.5s linear infinite;
  contain: strict;
}
@keyframes wire-travel {
  from { transform: translate3d(0, -120px, 0); }
  to   { transform: translate3d(0, calc(100vh + 120px), 0); }
}

@media (max-width: 61.99rem) { .wire { display: none; } }

/* --- Roofline divider: a pitched roof edge strung with bulbs ------------ */
.roofline {
  position: relative; display: block; inline-size: 100%;
  color: rgba(255, 181, 17, 0.42);
  block-size: clamp(38px, 5vw, 62px);
  color: rgba(137, 176, 255, 0.34);
  overflow: hidden;
}
.roofline svg { inline-size: 100%; block-size: 100%; }
.roofline__edge { fill: none; stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* --- Panels: matte console surfaces, never glassmorphic ----------------- */
.panel {
  position: relative;
  background: linear-gradient(168deg, var(--s-raised), var(--s-navy) 62%, var(--s-deep));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.panel--inset {
  background: linear-gradient(180deg, var(--s-abyss), #061532);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(137, 176, 255, 0.08);
}


/* Sections isolate their own paint so one section's repaint never invalidates
   the rest of the page. Cheap, and unlike content-visibility it cannot shift
   layout as you scroll into it. */
.section--defer { contain: paint; }