/* Ten treatments of the big STRIVE word. The landing ships with 9 (Deep water), set by
   data-word="9" on <html>; the rest stay for comparison: ?word=N, or strive-variants.html.
   Without data-word the word falls back to drop.css's original gray-to-blue (?word=0). */
.num { --ga: 0deg; }
@media (max-width: 768px) { .num { --ga: 90deg; } }

/* a blur that sits over the word's edges, for the variants that feather */
.word-haze {
    display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}

/* 1 Mist: the current colours, quiet, dissolving into the page at the foot */
[data-word="1"] .num {
    opacity: .38;
    -webkit-mask-image: linear-gradient(calc(var(--ga) + 180deg), #000 30%, transparent 92%);
            mask-image: linear-gradient(calc(var(--ga) + 180deg), #000 30%, transparent 92%);
}

/* 2 Ice: pale periwinkle, crisp, a cold glow */
[data-word="2"] .num {
    background-image: linear-gradient(var(--ga), #c9d6ef 10%, #a9c2f5 55%, #7fa6ff 95%);
    filter: drop-shadow(0 -0.01em 0.03em rgba(47, 109, 255, .45));
}

/* 3 Graphite: one dark gray, sides and foot feathered out */
[data-word="3"] .num {
    background-image: linear-gradient(#2b2d33, #2b2d33);
    filter: none; opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(calc(var(--ga) + 180deg), #000 35%, transparent 95%);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(calc(var(--ga) + 180deg), #000 35%, transparent 95%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* 4 Soft focus: the current word, the whole thing gently out of focus */
[data-word="4"] .num {
    filter: blur(0.006em) drop-shadow(0 -0.012em 0.03em rgba(0, 120, 255, .55));
    opacity: .85;
}

/* 5 Edge blur: crisp in the middle, melting at the sides and the foot */
[data-word="5"] .word-haze {
    display: block;
    -webkit-mask-image: radial-gradient(ellipse 46% 80% at 50% 10%, transparent 40%, #000 100%);
            mask-image: radial-gradient(ellipse 46% 80% at 50% 10%, transparent 40%, #000 100%);
}


@media (max-width: 768px) {
    /* the word stands on end here, so blur its two ends instead */
    [data-word="5"] .word-haze {
        height: 100%;
        -webkit-mask-image: linear-gradient(0deg, #000 4%, transparent 26%, transparent 66%, #000 86%);
                mask-image: linear-gradient(0deg, #000 4%, transparent 26%, transparent 66%, #000 86%);
    }
}

/* 6 Heat: picks up the light band above, ink into indigo into cyan */
[data-word="6"] .num {
    background-image: linear-gradient(var(--ga), #1b1530 12%, #2a1a8f 40%, #3412d8 62%, #1ec8ff 92%);
    filter: drop-shadow(0 -0.012em 0.03em rgba(30, 200, 255, .55)) drop-shadow(0 0.006em 0.006em rgba(255, 122, 18, .5));
}

/* 7 Outline: hairline letters, almost no fill. The line is cut from the letters' solid
   shape by an SVG filter (#word-outline, added by word-variants.js), not text-stroke, which
   traces each overlapping contour of the R separately. */
[data-word="7"] .num {
    background-image: linear-gradient(var(--ga), rgba(43, 45, 51, .7), rgba(29, 79, 196, .7) 60%, rgba(47, 109, 255, .75));
    filter: url(#word-outline);
}

/* 8 Frost: near-white letters lifted off the page by a blue halo */
[data-word="8"] .num {
    background-image: linear-gradient(var(--ga), #eef1f6, #f8faff);
    filter: drop-shadow(0 0 0.004em rgba(47, 109, 255, .75)) drop-shadow(0 0 0.012em rgba(47, 109, 255, .6)) drop-shadow(0 0 0.03em rgba(47, 109, 255, .3)) drop-shadow(0 0.01em 0.04em rgba(10, 10, 10, .14));
}

/* 9 Deep water: navy into cyan, feathered sides, soft foot */
[data-word="9"] .num {
    background-image: linear-gradient(calc(var(--ga) + 38deg), #0b1424 8%, #0a2f63 34%, #0b5fae 60%, #16a8df 82%, #7fe2f5 100%);
    filter: drop-shadow(0 -0.012em 0.03em rgba(22, 168, 223, .5));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* the tops of the letters go out of focus: a blur band whose strongest point sits on the
   cap line (22.2vw above the page's foot), with room above it so the blur fades out
   instead of being clipped at the band's edge, and fading out down into the letters */
.word-edge {
    display: none; position: absolute; left: 0; right: 0; bottom: 16.2vw; height: 12vw; pointer-events: none;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.12) 16%, rgba(0,0,0,.45) 32%, rgba(0,0,0,.85) 44%, #000 50%, #000 58%, transparent);
            mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.12) 16%, rgba(0,0,0,.45) 32%, rgba(0,0,0,.85) 44%, #000 50%, #000 58%, transparent);
}
[data-word="9"] .word-edge { display: block; }
@media (max-width: 768px) {
    /* standing on end, the cap line runs down the left of the screen */
    .word-edge {
        top: 40%; bottom: 0; height: auto; left: calc(27vw - 17.2vh); right: auto; width: 11.2vh;   /* only alongside the letters, not the empty page above them */
        -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.12) 16%, rgba(0,0,0,.45) 32%, rgba(0,0,0,.85) 44%, #000 50%, #000 58%, transparent);
                mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.12) 16%, rgba(0,0,0,.45) 32%, rgba(0,0,0,.85) 44%, #000 50%, #000 58%, transparent);
    }
}
[data-word="9"] .word-haze {
    display: block; height: 22%;
    -webkit-mask-image: linear-gradient(0deg, #000, transparent);
            mask-image: linear-gradient(0deg, #000, transparent);
}
@media (max-width: 768px) {
    /* the S sits at the foot here; a shorter blur keeps it readable */
    [data-word="9"] .word-haze { height: 11%; }
    /* from the I upward the letters stay sharp and simply fade into the light: no melt blur,
       and the word's own fill thins out along its length (S at 0%, E at 100%) */
    [data-word="9"] .melt { display: none; }
    [data-word="9"] .num {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 55%, rgba(0,0,0,.55) 70%, transparent 92%);
                mask-image: linear-gradient(90deg, transparent, #000 10%, #000 55%, rgba(0,0,0,.55) 70%, transparent 92%);
    }
    .word-edge { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%), linear-gradient(90deg, transparent, rgba(0,0,0,.12) 16%, rgba(0,0,0,.45) 32%, rgba(0,0,0,.85) 44%, #000 50%, #000 58%, transparent);
                         mask-image: linear-gradient(180deg, transparent, #000 12%), linear-gradient(90deg, transparent, rgba(0,0,0,.12) 16%, rgba(0,0,0,.45) 32%, rgba(0,0,0,.85) 44%, #000 50%, #000 58%, transparent);
                 -webkit-mask-composite: source-in; mask-composite: intersect; }
}

/* 10 Dusk: the current word at half strength, its lower half lost in a blur */
[data-word="10"] .num { opacity: .55; }
[data-word="10"] .word-haze {
    display: block; height: 34%;
    -webkit-mask-image: linear-gradient(0deg, #000 20%, transparent);
            mask-image: linear-gradient(0deg, #000 20%, transparent);
}

/* the picker */
.word-pick {
    position: fixed; z-index: 50; left: 50%; top: 72px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px; padding: 4px;
    font: 500 13px/1 var(--sans); color: var(--ink);
    background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-radius: 100px; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .08), 0 6px 20px rgba(10, 10, 10, .06);
}
.word-pick button { all: unset; cursor: pointer; width: 30px; height: 30px; border-radius: 100px; text-align: center; line-height: 30px; }
.word-pick button:hover { background: rgba(10, 10, 10, .06); }
.word-pick span { min-width: 150px; text-align: center; font-variant-numeric: tabular-nums; }