/* Section breaks (all pages): a soft wave with a glowing orange edge at the top of every section,
   plus a faint orange-rimmed "planet" peeking in from alternating sides. Works with any section order. */
main :is(.section, .featured):not(:first-child) { isolation: isolate; }
.home .section { padding-top: 9rem; }
.home .featured { padding-top: 8rem; }
main .section--tint:not(:first-child) { background-color: transparent; }

main .section:not(:first-child)::after, main .featured:not(:first-child)::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; z-index: -1; pointer-events: none;
  height: clamp(6rem, 15vw, 15rem);
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%20240%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%0A%3ClinearGradient%20id=%27f%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%238fa3c4%27%20stop-opacity=%27.10%27/%3E%3Cstop%20offset=%27.6%27%20stop-color=%27%238fa3c4%27%20stop-opacity=%27.03%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%238fa3c4%27%20stop-opacity=%270%27/%3E%3C/linearGradient%3E%0A%3ClinearGradient%20id=%27s%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%270%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%270%27/%3E%3Cstop%20offset=%27.18%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%27.55%27/%3E%3Cstop%20offset=%27.5%27%20stop-color=%27%23ffa04d%27%20stop-opacity=%27.9%27/%3E%3Cstop%20offset=%27.82%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%27.55%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%270%27/%3E%3C/linearGradient%3E%0A%3Cfilter%20id=%27b%27%20x=%27-5%25%27%20y=%27-80%25%27%20width=%27110%25%27%20height=%27260%25%27%3E%3CfeGaussianBlur%20stdDeviation=%279%27/%3E%3C/filter%3E%0A%3C/defs%3E%0A%3Cpath%20d=%27M0,78%20C220,12%20470,8%20720,52%20C970,96%201200,104%201440,34%20L1440,240%20L0,240%20Z%27%20fill=%27url(%23f)%27/%3E%0A%3Cpath%20d=%27M0,78%20C220,12%20470,8%20720,52%20C970,96%201200,104%201440,34%27%20fill=%27none%27%20stroke=%27url(%23s)%27%20stroke-width=%2710%27%20filter=%27url(%23b)%27%20opacity=%27.55%27%20vector-effect=%27non-scaling-stroke%27/%3E%0A%3Cpath%20d=%27M0,78%20C220,12%20470,8%20720,52%20C970,96%201200,104%201440,34%27%20fill=%27none%27%20stroke=%27url(%23s)%27%20stroke-width=%271.5%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}

/* Orange-rimmed planet arcs on the side edges, alternating left / right */
main section:is(.section, .featured):not(:first-child):nth-of-type(odd) {
  background-image: linear-gradient(to top, var(--background) 0, transparent 12rem), linear-gradient(to bottom, var(--background) 0, transparent 9rem), radial-gradient(circle clamp(11rem, 24vw, 22rem) at -3rem calc(100% - 2rem), transparent 0 80%, color-mix(in oklab, var(--primary) 42%, transparent) 81%, color-mix(in oklab, var(--primary) 10%, transparent) 90%, transparent 100%);
}
main section:is(.section, .featured):not(:first-child):nth-of-type(even) {
  background-image: linear-gradient(to top, var(--background) 0, transparent 12rem), linear-gradient(to bottom, var(--background) 0, transparent 9rem), radial-gradient(circle clamp(11rem, 24vw, 22rem) at calc(100% + 3rem) calc(100% - 2rem), transparent 0 80%, color-mix(in oklab, var(--primary) 42%, transparent) 81%, color-mix(in oklab, var(--primary) 10%, transparent) 90%, transparent 100%);
}

:root[data-theme="light"] main .section:not(:first-child)::after, :root[data-theme="light"] main .featured:not(:first-child)::after {
  opacity: .8;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201440%20240%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%0A%3ClinearGradient%20id=%27f%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23f6c79b%27%20stop-opacity=%27.22%27/%3E%3Cstop%20offset=%27.6%27%20stop-color=%27%23f6c79b%27%20stop-opacity=%27.07%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23f6c79b%27%20stop-opacity=%270%27/%3E%3C/linearGradient%3E%0A%3ClinearGradient%20id=%27s%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%270%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%270%27/%3E%3Cstop%20offset=%27.18%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%27.55%27/%3E%3Cstop%20offset=%27.5%27%20stop-color=%27%23ffa04d%27%20stop-opacity=%27.9%27/%3E%3Cstop%20offset=%27.82%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%27.55%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23ff7a1a%27%20stop-opacity=%270%27/%3E%3C/linearGradient%3E%0A%3Cfilter%20id=%27b%27%20x=%27-5%25%27%20y=%27-80%25%27%20width=%27110%25%27%20height=%27260%25%27%3E%3CfeGaussianBlur%20stdDeviation=%279%27/%3E%3C/filter%3E%0A%3C/defs%3E%0A%3Cpath%20d=%27M0,78%20C220,12%20470,8%20720,52%20C970,96%201200,104%201440,34%20L1440,240%20L0,240%20Z%27%20fill=%27url(%23f)%27/%3E%0A%3Cpath%20d=%27M0,78%20C220,12%20470,8%20720,52%20C970,96%201200,104%201440,34%27%20fill=%27none%27%20stroke=%27url(%23s)%27%20stroke-width=%2710%27%20filter=%27url(%23b)%27%20opacity=%27.55%27%20vector-effect=%27non-scaling-stroke%27/%3E%0A%3Cpath%20d=%27M0,78%20C220,12%20470,8%20720,52%20C970,96%201200,104%201440,34%27%20fill=%27none%27%20stroke=%27url(%23s)%27%20stroke-width=%271.5%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}
/* softer orange planet arcs on the cream background */
:root[data-theme="light"] main section:is(.section, .featured):not(:first-child):nth-of-type(odd) {
  background-image: linear-gradient(to top, var(--background) 0, transparent 12rem), linear-gradient(to bottom, var(--background) 0, transparent 9rem), radial-gradient(circle clamp(11rem, 24vw, 22rem) at -3rem calc(100% - 2rem), transparent 0 80%, color-mix(in oklab, var(--primary) 22%, transparent) 81%, color-mix(in oklab, var(--primary) 6%, transparent) 90%, transparent 100%);
}
:root[data-theme="light"] main section:is(.section, .featured):not(:first-child):nth-of-type(even) {
  background-image: linear-gradient(to top, var(--background) 0, transparent 12rem), linear-gradient(to bottom, var(--background) 0, transparent 9rem), radial-gradient(circle clamp(11rem, 24vw, 22rem) at calc(100% + 3rem) calc(100% - 2rem), transparent 0 80%, color-mix(in oklab, var(--primary) 22%, transparent) 81%, color-mix(in oklab, var(--primary) 6%, transparent) 90%, transparent 100%);
}

@media (max-width: 767px) {
  .home .section { padding-top: 6.5rem; }
  .home .featured { padding-top: 6rem; }
}

/* ==========================================================================
   Wave → content spacing (inner pages: project detail, Experience, Contact, About, Services …)
   The wave dips up to ~45% of its height below the section's top edge, so content that starts at the
   normal section padding sits right on the glowing line. --wave-gap adds clear space below the wave.
   Change --wave-gap to make the distance bigger or smaller everywhere at once.
   ========================================================================== */
:root { --wave-gap: clamp(2.5rem, 6vw, 5rem); }

body:not(.home) main :is(.section, .featured):not(:first-child) {
  padding-top: calc(var(--section-py, 90px) + var(--wave-gap));
}

/* Home contact section: the soft halo glow used to start above the section and was clipped flat at the section's
   top edge, which showed as a dim rectangular haze above the wave (most visible on the right, where the wave dips).
   Start the halo at the section's own top edge and fade it in well below the wave line, so nothing glows above it. */
.home .contact.halo::before {
  inset: 0 -20% -20% -20%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 9rem, #000 22rem);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 9rem, #000 22rem);
}