/* ============================================================================
   Section transitions and edge cropping
   Copy-paste patterns for how one section meets the next.

   Studied from production sites (2026-09):
   - augmind.me        - SVG shape dividers, diagonal slabs, seam overlap
   - digita.co.il      - bleeding rounded panels, ambient glow seams, tonal steps

   RULES OF USE (see references/section-transitions-and-cropping.md):
   1. Pick ONE seam family per site and repeat it. Mixing diagonal + bleeding
      panel + glow on one page reads as a template collage, not art direction.
   2. The seam angle/radius/offset must be a token, reused everywhere - an
      eyeballed second angle is the tell that no system exists.
   3. Every pattern here needs `overflow-x: clip` on a wrapper or the page
      scrolls sideways on mobile. This is the #1 bug these patterns cause.
   ============================================================================ */

:root {
  /* One angle for the whole site. 2-4deg reads intentional; >6deg eats vertical
     space on mobile and starts to look like a 2016 Bootstrap theme. */
  --seam-angle: 3deg;
  --seam-height: 100px;      /* desktop wedge height */
  --seam-height-sm: 44px;    /* mobile: shallower, or the wedge eats the content */
  --seam-overlap: 1px;       /* anti-hairline; see note in .seam below */
  --panel-radius: 32px;
  --panel-bleed: 6vw;        /* how far a bleeding panel runs past the edge */
}

/* ---------------------------------------------------------------------------
   PATTERN 1 - SVG shape divider (the augmind.me technique)

   The wedge is painted in the *neighbouring* section's colour and sits on top
   of the current section's edge. This is why it works on top of a photo or a
   gradient, where a CSS transform/skew approach fails.

   <section class="seam-host" style="--seam-fill:#111">
     <div class="seam seam--bottom" aria-hidden="true">
       <svg viewBox="0 0 1000 100" preserveAspectRatio="none">
         <path d="M0,6V0h1000v100L0,6z"/>
       </svg>
     </div>
   </section>

   preserveAspectRatio="none" is mandatory: it lets the 1000x100 viewBox stretch
   to any viewport width without changing the wedge height.
   --------------------------------------------------------------------------- */
.seam-host { position: relative; }

.seam {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--seam-height);
  overflow: hidden;
  line-height: 0;          /* kills the inline-SVG descender gap */
  pointer-events: none;    /* the wedge must never eat a click */
  z-index: 2;              /* above the section background, below its content */
}

/* The -1px is not a typo. Sub-pixel rounding at fractional zoom levels leaves a
   1px hairline of the wrong colour along the seam; bleeding the wedge 1px into
   the neighbour hides it at every zoom level. */
.seam--top    { top: calc(var(--seam-overlap) * -1); }
.seam--bottom { bottom: calc(var(--seam-overlap) * -1); transform: rotate(180deg); }

.seam svg  { display: block; width: 100%; height: 100%; }
.seam path { fill: var(--seam-fill, #fff); }

@media (max-width: 768px) {
  .seam { height: var(--seam-height-sm); }
}

/* Section content must clear the wedge, or the wedge crops the first line of
   text. Pad by the wedge height, not by a guessed number. */
.seam-host > .seam-content { position: relative; z-index: 3; }
.seam-host--top-wedge    > .seam-content { padding-block-start: var(--seam-height); }
.seam-host--bottom-wedge > .seam-content { padding-block-end:   var(--seam-height); }

@media (max-width: 768px) {
  .seam-host--top-wedge    > .seam-content { padding-block-start: var(--seam-height-sm); }
  .seam-host--bottom-wedge > .seam-content { padding-block-end:   var(--seam-height-sm); }
}


/* ---------------------------------------------------------------------------
   PATTERN 2 - clip-path diagonal (no extra SVG nodes)

   Cheaper than Pattern 1 and animatable, but it clips the section's OWN
   background - so the section below shows through. Use when the section has a
   solid/gradient background of its own. Do NOT use to cut a section whose
   content reaches the edge: clip-path crops content too.
   --------------------------------------------------------------------------- */
.cut-diagonal {
  /* down-to-the-right: mirror the percentages for the opposite direction */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--seam-height)), 0 100%);
}
.cut-diagonal--reverse {
  clip-path: polygon(0 var(--seam-height), 100% 0, 100% 100%, 0 100%);
}
/* A diagonal cut that is mirrored under RTL reads as the same design rather
   than a flipped one. Opt in per component; do not apply globally. */
[dir="rtl"] .cut-diagonal--mirror {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--seam-height)));
}
@media (max-width: 768px) {
  .cut-diagonal, .cut-diagonal--reverse { --seam-height: var(--seam-height-sm); }
}


/* ---------------------------------------------------------------------------
   PATTERN 3 - full-bleed media slab cut on both edges (augmind astronaut band)

   A photographic band that is angled top AND bottom, so the image reads as a
   deliberate slab through the page rather than a rectangle dropped in.
   The image must be oversized vertically, because both cuts eat into it.
   --------------------------------------------------------------------------- */
.media-slab {
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 var(--seam-height), 100% 0,
                     100% calc(100% - var(--seam-height)), 0 100%);
}
.media-slab > img,
.media-slab > video {
  display: block;
  width: 100%;
  /* The 2x seam height compensates for what the two cuts remove, so the subject
     is not beheaded by the top cut. Crop-test the real asset - do not assume. */
  height: calc(100% + (var(--seam-height) * 2));
  object-fit: cover;
  object-position: center;
}
@media (max-width: 768px) {
  .media-slab { --seam-height: var(--seam-height-sm); }
}


/* ---------------------------------------------------------------------------
   PATTERN 4 - deliberate seam overlap (augmind product cards over the image)

   Content crosses the boundary between two sections. This is what makes a page
   feel composed rather than stacked: the eye reads the two bands as one scene.
   Needs a real z-index and a matching negative margin, not a magic `top`.
   --------------------------------------------------------------------------- */
.seam-overlap {
  position: relative;
  z-index: 4;
  margin-block-start: calc(var(--overlap-amount, 96px) * -1);
}
@media (max-width: 768px) {
  /* On mobile an overlap this large collides with the section above. Reduce it
     or drop it - do not keep a desktop overlap value at 390px. */
  .seam-overlap { --overlap-amount: 32px; }
}


/* ---------------------------------------------------------------------------
   PATTERN 5 - bleeding rounded panel (the digita.co.il technique)

   A large rounded panel runs past one viewport edge and is cropped by it, while
   the section heading sits outside the panel on the opposite side. The crop is
   the point: a fully-contained centred rounded box is a card, this is a plane.

   RTL: the panel bleeds toward the INLINE-START edge, which is the right in RTL
   and the left in LTR. Using logical properties keeps that automatic.
   --------------------------------------------------------------------------- */
.bleed-panel {
  position: relative;
  border-radius: var(--panel-radius);
  background: var(--panel-bg, #14141a);
  padding: clamp(24px, 5vw, 72px);
  /* bleeds past the start edge; the viewport does the cropping */
  margin-inline-start: calc(var(--panel-bleed) * -1);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.bleed-panel--end {
  margin-inline-start: 0;
  margin-inline-end: calc(var(--panel-bleed) * -1);
  border-start-start-radius: var(--panel-radius);
  border-end-start-radius: var(--panel-radius);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
@media (max-width: 768px) {
  /* A bleed on both sides at 390px leaves no readable measure. Pull it back to
     a normal inset panel and keep the radius as the only remaining cue. */
  .bleed-panel, .bleed-panel--end {
    margin-inline: 0;
    border-radius: var(--panel-radius);
  }
}


/* ---------------------------------------------------------------------------
   PATTERN 6 - ambient glow seam (digita hero)

   No hard edge at all: a soft radial field bleeds from one section into the
   next. Good when the two sections share a dark tonal family; useless between
   two light sections, where it turns into a grey smudge.
   --------------------------------------------------------------------------- */
.glow-seam { position: relative; isolation: isolate; }
.glow-seam::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--glow-size, 340px) * -0.5);
  height: var(--glow-size, 340px);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 100% at 50% 0%,
    var(--glow-color, rgb(124 58 237 / 0.35)),
    transparent 70%
  );
  filter: blur(40px);
}
@media (prefers-reduced-motion: no-preference) {
  /* If the glow animates at all, it must be slow and non-looping-obvious.
     A pulsing glow is the "meaningless decoration" this skill forbids. */
  .glow-seam--drift::after {
    animation: glow-drift 18s ease-in-out infinite alternate;
  }
}
@keyframes glow-drift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 0, 0) scale(1.06); }
}


/* ---------------------------------------------------------------------------
   PATTERN 7 - tonal step (dark-on-dark layering, no seam device at all)

   Two dark sections separated only by a small luminance step plus radius.
   The most restrained option and often the right one: it costs nothing, never
   breaks on mobile, and never dates. Reach for this before a diagonal.
   --------------------------------------------------------------------------- */
.tonal-step {
  background: var(--surface-raised, #14141a);  /* vs page --surface: #0b0b0f */
  border-radius: var(--panel-radius);
}
/* Borders are a weaker separator than a luminance step. If a border is needed
   at all, keep it under 8% alpha or it reads as a wireframe. */
.tonal-step--hairline { border: 1px solid rgb(255 255 255 / 0.06); }


/* ---------------------------------------------------------------------------
   REQUIRED GUARD - every pattern above can push horizontal overflow.
   Put this on the page wrapper. `clip` (not `hidden`) preserves position:sticky.
   --------------------------------------------------------------------------- */
.page-shell { overflow-x: clip; }