/* ============================================================
ארז ביטון — the "enter" button: a small lit marquee object
Scoped to .loader__btn. Link after intro.css; the markup stays
The sign's letters are thick crimson with a row of pink bulbs set
into them. This pill is one such letter-piece: a crimson face with a
raised rim, 48 bulbs ringing it (dark socket, pink halo, white-hot
core), and one soft lobe of light that runs round the ring: along the
top row right→left, round the cap, back along the bottom row.
Layers, CSS only:
button face (letter fill) + 48 bulb sockets + the bulbs' pink wash
::before 48 bulb halos — mask of soft dots, lit by the running lobe
::after 48 bulb cores — mask of crisp dots, white where the lobe passes
label::before a faint light sweep across the face every 7 s
Geometry (rem): 16 × 3.6, ring inset .5 → cap radius 1.3; bulbs every
.6889 along the 12.4 straight run (19 per row) and every 30° round each
cap (5 per cap), so spacing stays even all the way round.
============================================================ */
/* one clock for the chase (0→1 per lap) and one hover boost; both inherit into the pseudo-elements */
@property --enter-t { syntax: ''; inherits: true; initial-value: 0; }
@property --enter-boost { syntax: ''; inherits: true; initial-value: 0; }
.loader__btn {
/* --- geometry --- */
--w: 16rem; --h: 3.6rem;
--step: .6889rem; /* 12.4rem straight run / 18 gaps */
--core: .165rem; /* bulb core radius (~5.3px across) */
--halo: .34rem; /* halo radius: fits the .6889 row tile */
--socket: .265rem; /* dark ring the bulb sits in */
/* the five bulbs round each cap, 30° apart on a 1.3rem radius about (1.8, 1.8) and (14.2, 1.8) */
--l1: 1.15rem .6742rem; --l2: .6742rem 1.15rem; --l3: .5rem 1.8rem; --l4: .6742rem 2.45rem; --l5: 1.15rem 2.9258rem;
--r1: 14.85rem .6742rem; --r2: 15.3258rem 1.15rem; --r3: 15.5rem 1.8rem; --r4: 15.3258rem 2.45rem; --r5: 14.85rem 2.9258rem;
/* --- the running light: one 5rem lobe; top row 15.5→-4.5 (right→left), then bottom row -4.5→15.5 --- */
--u: calc(var(--enter-t) + var(--enter-boost));
--lobe-top: calc(15.5rem - 20rem * clamp(0, 2 * var(--u), 1));
--lobe-bot: calc(-4.5rem + 20rem * clamp(0, 2 * var(--u) - 1, 1));
/* --- bulb masks (12 layers: two rows as spaced tiles clipped to the content box, ten cap bulbs placed) --- */
--dot-core: radial-gradient(circle, #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px));
--dot-halo: radial-gradient(circle, rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo));
--bulbs-core:
var(--dot-core) 0 0 / var(--step) 1rem space no-repeat content-box,
var(--dot-core) 0 100% / var(--step) 1rem space no-repeat content-box,
radial-gradient(circle at var(--l1), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l2), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l3), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l4), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l5), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r1), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r2), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r3), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r4), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r5), #000 0, rgba(0,0,0,.96) calc(var(--core) * .42), rgba(0,0,0,.6) calc(var(--core) - .3px), transparent calc(var(--core) + .4px)) 0 0 / 100% 100% no-repeat border-box;
--bulbs-halo:
var(--dot-halo) 0 0 / var(--step) 1rem space no-repeat content-box,
var(--dot-halo) 0 100% / var(--step) 1rem space no-repeat content-box,
radial-gradient(circle at var(--l1), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l2), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l3), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l4), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--l5), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r1), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r2), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r3), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r4), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box,
radial-gradient(circle at var(--r5), rgba(0,0,0,.8) 0, rgba(0,0,0,.26) calc(var(--halo) * .42), transparent var(--halo)) 0 0 / 100% 100% no-repeat border-box;
/* --- the object --- */
position: relative;
width: var(--w); min-width: 0; max-width: 100%;
height: var(--h); min-height: var(--h);
padding: 0 1.45rem; /* the content box = the straight run (+ half a tile each side) for the two bulb rows */
border-radius: 999px;
border: 1px solid rgba(255, 158, 198, .42);
isolation: isolate;
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
letter-spacing: .04em;
line-height: 1;
/* face: a lit-from-above crimson fill (the letter), with the 48 dark bulb sockets set into it
(kept in --face so the hover rule can re-apply it over base.css's .btn--champagne:hover shorthand) */
--socket-dot: radial-gradient(circle, rgba(30, 3, 14, .74) calc(var(--socket) - .4px), rgba(30, 3, 14, .5) calc(var(--socket) + .2px), rgba(255, 170, 205, .2) calc(var(--socket) + .7px), rgba(255, 170, 205, 0) calc(var(--socket) + 1.6px));
--face:
var(--socket-dot) 0 0 / var(--step) 1rem space no-repeat content-box,
var(--socket-dot) 0 100% / var(--step) 1rem space no-repeat content-box,
radial-gradient(circle at var(--l1), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--l2), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--l3), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--l4), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--l5), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--r1), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--r2), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--r3), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--r4), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(circle at var(--r5), rgba(30,3,14,.74) calc(var(--socket) - .4px), rgba(30,3,14,.5) calc(var(--socket) + .2px), rgba(255,170,205,.2) calc(var(--socket) + .7px), rgba(255,170,205,0) calc(var(--socket) + 1.6px)) 0 0 / 100% 100% no-repeat padding-box,
radial-gradient(90% 120% at 50% -30%, rgba(255, 143, 187, .26), rgba(255, 143, 187, 0) 62%) 0 0 / 100% 100% no-repeat padding-box,
linear-gradient(180deg, #a5275c 0%, #871f49 50%, #5c1232 100%) 0 0 / 100% 100% no-repeat padding-box;
background: var(--face);
/* rim lip, the bulbs' pink wash on the face, and a restrained outer glow */
--glow-a: .30; --glow-b: .14;
box-shadow:
inset 0 1px 0 rgba(255, 222, 237, .16),
inset 0 -1px 0 rgba(0, 0, 0, .45),
inset 0 0 .3rem rgba(38, 3, 17, .6),
inset 0 0 1.1rem rgba(255, 143, 187, .24),
0 0 1.2rem rgba(214, 74, 124, var(--glow-a)),
0 0 3rem rgba(214, 74, 124, var(--glow-b)),
0 .9rem 2rem -1rem rgba(0, 0, 0, .9);
text-shadow:
0 0 .25rem rgba(255, 143, 187, .75),
0 0 .8rem rgba(255, 143, 187, .4),
0 1px 1px rgba(0, 0, 0, .35);
animation: enter-chase 7s linear infinite;
transition:
--enter-boost 16s linear,
transform .14s var(--ease-out),
box-shadow .5s var(--ease-out),
border-color .5s var(--ease-out),
text-shadow .5s var(--ease-out),
filter .5s var(--ease-out);
will-change: transform;
}
/* the label: Karantina, pure white, soft pink neon; static so its ::before can span the whole face */
.loader__btn .btn__label {
position: static;
z-index: auto;
line-height: 1;
padding-bottom: .07em; /* optical: lift the body letters a hair (~1.5px); the two lameds add mass on top */
white-space: nowrap;
}
/* the bulbs: halos (::before) under cores (::after), both lit by the same running lobe */
.loader__btn::before,
.loader__btn::after {
content: "";
position: absolute;
inset: 0;
padding: 0 1.45rem; /* same content box as the button: the row tiles line up with the sockets */
border-radius: inherit;
pointer-events: none;
background-repeat: no-repeat;
background-size: 5rem 56%, 5rem 56%, 100% 100%;
background-position: var(--lobe-top) 0, var(--lobe-bot) 100%, 0 0;
transition: opacity .5s var(--ease-out), filter .5s var(--ease-out);
}
.loader__btn::before {
-webkit-mask: var(--bulbs-halo);
mask: var(--bulbs-halo);
background-image:
linear-gradient(90deg, rgba(255, 205, 225, 0) 0%, rgba(255, 205, 225, .9) 50%, rgba(255, 205, 225, 0) 100%),
linear-gradient(90deg, rgba(255, 205, 225, 0) 0%, rgba(255, 205, 225, .9) 50%, rgba(255, 205, 225, 0) 100%),
linear-gradient(rgba(255, 130, 180, .66), rgba(255, 130, 180, .66));
opacity: .78;
}
.loader__btn::after {
-webkit-mask: var(--bulbs-core);
mask: var(--bulbs-core);
background-image:
linear-gradient(90deg, rgba(255, 244, 249, 0) 0%, rgba(255, 244, 249, 1) 50%, rgba(255, 244, 249, 0) 100%),
linear-gradient(90deg, rgba(255, 244, 249, 0) 0%, rgba(255, 244, 249, 1) 50%, rgba(255, 244, 249, 0) 100%),
linear-gradient(#ffbbd4, #ffbbd4);
}
/* a faint light sweep across the face every few seconds (right→left, with the reading direction) */
.loader__btn .btn__label::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(100deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.08) 45%, rgba(255,228,240,.2) 50%, rgba(255,255,255,.08) 55%, rgba(255,255,255,0) 64%);
transform: translateX(140%);
animation: enter-sweep 7s var(--ease-in-out) infinite;
animation-delay: 2.6s;
}
@keyframes enter-chase { from { --enter-t: 0; } to { --enter-t: 1; } }
@keyframes enter-sweep {
0% { transform: translateX(140%); }
22%, 100% { transform: translateX(-140%); }
}
/* hover / focus / the test page's .is-hover: the bulbs brighten, the glow swells, the chase hurries a little */
@media (hover: hover) {
.loader__btn:hover { --glow-a: .44; --glow-b: .22; border-color: rgba(255, 170, 205, .62); filter: brightness(1.04); text-shadow: 0 0 .3rem rgba(255, 160, 198, .9), 0 0 1rem rgba(255, 143, 187, .5), 0 1px 1px rgba(0, 0, 0, .35); background: var(--face); }
.loader__btn:hover::before { opacity: 1; }
.loader__btn:hover::after { filter: brightness(1.14); }
}
.loader__btn:focus-visible,
.loader__btn.is-hover { --glow-a: .44; --glow-b: .22; border-color: rgba(255, 170, 205, .62); filter: brightness(1.04); text-shadow: 0 0 .3rem rgba(255, 160, 198, .9), 0 0 1rem rgba(255, 143, 187, .5), 0 1px 1px rgba(0, 0, 0, .35); }
.loader__btn:focus-visible::before, .loader__btn.is-hover::before { opacity: 1; }
.loader__btn:focus-visible::after, .loader__btn.is-hover::after { filter: brightness(1.14); }
/* the speed-up: the lobe runs ahead by a sixth of a lap over 2.4s, then eases back to the house tempo over
16s (so it never jumps). mod() keeps the clock wrapping; where mod() is missing there is simply no boost */
@supports (width: mod(3px, 2px)) {
.loader__btn { --u: mod(calc(var(--enter-t) + var(--enter-boost)), 1); }
@media (hover: hover) {
.loader__btn:hover { --enter-boost: .16; transition: --enter-boost 2.4s var(--ease-out), transform .14s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out), text-shadow .5s var(--ease-out), filter .5s var(--ease-out); }
}
.loader__btn:focus-visible, .loader__btn.is-hover { --enter-boost: .16; transition: --enter-boost 2.4s var(--ease-out), transform .14s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out), text-shadow .5s var(--ease-out), filter .5s var(--ease-out); }
}
/* keyboard focus: a pink ring outside the glow, following the pill */
.loader__btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 5px; border-radius: 999px; }
/* press: dips 2% (press.js adds .is-pressing on pointerdown and springs it back on release) */
.loader__btn:active, .loader__btn.is-pressing { transform: scale(.98); }
@media (hover: none) { .loader__btn:active { transform: scale(.98); } }
/* reduced motion: nothing runs, every bulb lit evenly, still a lit sign */
@media (prefers-reduced-motion: reduce) {
.loader__btn { animation: none; transition: none; }
.loader__btn::before, .loader__btn::after { transition: none; background-image: none; }
.loader__btn::before { background-color: rgba(255, 160, 200, .7); }
.loader__btn::after { background-color: #ffc4db; }
.loader__btn .btn__label::before { display: none; }
}