/* Section dividers: a defined neutral seam between two scene/video bands.
   ---------------------------------------------------------------------
   A divider is its own strip in the normal flow, 32-56px tall, painted in the
   page ground (--bg), so the film of the band above and the film of the band
   below can never bleed into each other. It sits BETWEEN two sections; it
   overlaps nothing, has a fixed height (no layout shift), is decorative
   (aria-hidden) and is drawn with tokens so it follows the light and dark theme.
   Markup (inc/section-divider.php):
     <div class="sdiv sdiv--wave" aria-hidden="true"><span class="sdiv__tag"><b>01</b><span>Hosting</span></span></div>

   Techniques and where they come from (see docs/section-dividers.txt):
   - clip-path polygon slants (css-generators.com, Temani Afif)
   - mask-image tiles for wave, chevron and sprocket edges (CSS-Tricks "Fancy CSS Borders
     Using Masks", Temani Afif; CSS-Tricks licence: use the code freely)
   - shape vocabulary: wave, curve, tilt, arrow, split (shapedivider.app; the MIT
     blade-shape-divider port; the CC0 andraswebcode/shape-dividers set). No file of theirs is
     copied: every shape below is redrawn as a small tile or a polygon of our own.
   - scroll-driven view() timeline for the one-shot hairline fade-in (MDN).
   No vw/svh anywhere, so the html zoom (--egz) cannot distort a seam.
   Direction: the decoration mirrors under :dir(rtl); tags are symmetrical. */

.sdiv {
    --sd-h: 44px;
    --sd-line: var(--line-strong, rgba(255, 255, 255, .14));
    --sd-accent: var(--copper-ink, #FF9A6B);
    --sd-fill: var(--copper-500, #E85622);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: var(--sd-h);
    margin: 0;
    padding: 0;
    overflow: hidden;              /* a mask tile never widens the page */
    background: var(--bg, #12101A);
    color: var(--sd-accent);
    contain: paint;
    isolation: isolate;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.sdiv::before, .sdiv::after { content: ''; position: absolute; pointer-events: none; }

/* the label: number in mono, then the words; the same in every style that carries one */
.sdiv__tag {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: .6em;
    padding-inline: 14px;
    font: 600 12px/1 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sd-accent);
}
.sdiv__tag b { font-weight: 700; color: var(--text-strong, currentColor); }

/* ---- 1. chapter: a hairline each side of a numbered badge (01 Hosting) ---- */
.sdiv--chapter { --sd-h: 52px; }
.sdiv--chapter::before, .sdiv--chapter::after {
    top: 50%;
    height: 1px;
    background: var(--sd-line);
}
.sdiv--chapter::before { inset-inline-start: 4%; inset-inline-end: calc(50% + 46px); }
.sdiv--chapter::after  { inset-inline-end: 4%; inset-inline-start: calc(50% + 46px); }
.sdiv--chapter:has(.sdiv__tag > span)::before { inset-inline-end: calc(50% + 80px); }
.sdiv--chapter:has(.sdiv__tag > span)::after { inset-inline-start: calc(50% + 80px); }
.sdiv--chapter .sdiv__tag {
    padding: 8px 16px;
    border: 1px solid var(--sd-line);
    border-radius: 999px;
    background: var(--bg-alt, transparent);
}

/* ---- 2. wave: two sine hairlines, one neutral one copper, out of phase ---- */
.sdiv--wave { --sd-h: 40px; }
.sdiv--wave::before, .sdiv--wave::after {
    left: 0; right: 0;
    height: 16px;
    top: calc(50% - 8px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath d='M0 8Q16 0 32 8T64 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 64px 16px repeat-x;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath d='M0 8Q16 0 32 8T64 8' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 64px 16px repeat-x;
}
.sdiv--wave::before { background: var(--sd-line); transform: translateY(-4px); }
.sdiv--wave::after  { background: var(--sd-accent); opacity: .75; transform: translateY(4px) scaleX(-1); }

/* ---- 3. angle: the ground is cut on the diagonal, a copper line rides the cut ---- */
.sdiv--angle { --sd-h: 56px; }
.sdiv--angle::before {
    inset: 0;
    background: var(--bg-alt, rgba(255, 255, 255, .04));
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.sdiv--angle::after {
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--sd-fill) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

/* ---- 4. film: a sprocket edge on dark stock, for video bands ---- */
.sdiv--film { --sd-h: 46px; --sd-hole: rgba(247, 245, 251, .78); background: var(--ink-950, #12101A); }
.sdiv--film::before, .sdiv--film::after {
    left: 0; right: 0;
    height: 8px;
    background: var(--sd-hole);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Crect x='6' width='12' height='8' rx='2'/%3E%3C/svg%3E") 0 0 / 24px 8px repeat-x;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Crect x='6' width='12' height='8' rx='2'/%3E%3C/svg%3E") 0 0 / 24px 8px repeat-x;
}
.sdiv--film::before { top: 5px; }
.sdiv--film::after  { bottom: 5px; }
.sdiv--film .sdiv__tag { color: #FF9A6B; background: var(--ink-950, #12101A); padding-block: 2px; }
.sdiv--film .sdiv__tag b { color: #F7F5FB; }

/* ---- 5. tab: a hairline, and a copper tab hanging from it ---- */
.sdiv--tab { --sd-h: 48px; align-items: flex-start; }
.sdiv--tab::before { top: 0; left: 0; right: 0; height: 1px; background: var(--sd-line); }
.sdiv--tab .sdiv__tag {
    padding: 9px 30px 10px;
    background: var(--sd-fill);
    color: var(--ink-950, #12101A);
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%);
}
.sdiv--tab .sdiv__tag b { color: var(--ink-950, #12101A); }

/* ---- 6. glow: a copper hairline that fades out at both ends, with a soft light under it ---- */
.sdiv--glow { --sd-h: 36px; }
.sdiv--glow::before {
    top: 50%; left: 6%; right: 6%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sd-fill) 50%, transparent);
}
.sdiv--glow::after {
    inset: 0;
    background: radial-gradient(ellipse 42% 60% at 50% 50%, color-mix(in srgb, var(--sd-fill) 20%, transparent), transparent 70%);
}
.sdiv--glow .sdiv__tag { background: var(--bg, transparent); }

/* ---- 7. chevron: a row of down-pointing chevrons, fading at both ends ---- */
.sdiv--chevron { --sd-h: 32px; }
.sdiv--chevron::before {
    left: 0; right: 0; top: calc(50% - 5px); height: 10px;
    background: var(--sd-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M8 2l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 28px 10px repeat-x,
                  linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-composite: source-in;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M8 2l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 28px 10px repeat-x,
                  linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
            mask-composite: intersect;
    opacity: .85;
}

/* ---- 8. ruler: tick marks of a journey, a copper marker at the middle stage ---- */
.sdiv--ruler { --sd-h: 36px; }
.sdiv--ruler::before {
    left: 0; right: 0; top: calc(50% - 7px); height: 14px;
    background:
        repeating-linear-gradient(90deg, var(--sd-line) 0 1px, transparent 1px 12px) 0 100% / 100% 6px no-repeat,
        repeating-linear-gradient(90deg, var(--sd-line) 0 1px, transparent 1px 60px) 0 100% / 100% 14px no-repeat;
    -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
            mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.sdiv--ruler::after {
    top: calc(50% - 4px); left: calc(50% - 4px); width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sd-fill);
    box-shadow: 0 0 0 4px var(--bg, #12101A), 0 0 0 5px var(--sd-line);
}

/* mirror the directional decoration in right-to-left pages (the tags and centred marks are symmetrical) */
.sdiv--angle:dir(rtl)::before, .sdiv--angle:dir(rtl)::after,
.sdiv--wave:dir(rtl)::before { scale: -1 1; }

/* one-shot fade-in of the hairlines as the seam enters the screen (calm, finite, optional) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sdiv--chapter::before, .sdiv--chapter::after, .sdiv--glow::before, .sdiv--tab::before {
            animation: sdiv-draw linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }
        @keyframes sdiv-draw { from { opacity: 0; } to { opacity: 1; } }
    }
}
@media print { .sdiv { display: none; } }