/*
 * ZHYRI ZipVerify — the zipper, in the identity's own language.
 *
 * Gold light on a dark tape, the sun riding the join, the closed run lit
 * behind it. No CSS here decides anything; it only shows what the server has
 * already been asked about.
 *
 * Every colour is a token with a literal fallback, so the component looks
 * right on a tenant front site that has never loaded the admin theme.
 */

.zv {
    --zv-gold: var(--brand-gold, #E8B84B);
    --zv-gold-hi: var(--brand-gold-hi, #FFE9A8);
    --zv-tape: var(--zv-tape-color, #1B1E27);
    --zv-tape-open: var(--zv-tape-open-color, #2A2F3D);
    --zv-ink: var(--text, #14161c);
    --zv-mid: var(--text-mid, #5b6474);

    display: block;
    margin-block: 1.25rem;
}

.zv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-block-end: .6rem;
}

.zv-label {
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zv-mid);
}

.zv-state { font-size: .9rem; color: var(--zv-ink); font-weight: 600; }

.zv-stage {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border, #e2e5ec);
    border-radius: 16px;
    background: var(--bg2);
}

/* ── the track ───────────────────────────────────────────────────────────
   Vertical, because the ZHYRI zip is vertical. 44px wide so the whole
   column is a touch target, not just the handle. */
.zv-track {
    position: relative;
    inline-size: 52px;
    block-size: 190px;
    flex: 0 0 auto;
    border-radius: 26px;
    background: var(--zv-tape-open);
    overflow: hidden;
    touch-action: none;          /* the drag is ours, not the page's */
    cursor: grab;
}

.zv-track:active { cursor: grabbing; }

/* The two tape halves. */
.zv-tape {
    position: absolute;
    inset-block: 0;
    inline-size: 21px;
    background: linear-gradient(180deg, var(--zv-tape), #12141b);
}
.zv-tape-l { inset-inline-start: 0; border-start-start-radius: 26px; border-end-start-radius: 26px; }
.zv-tape-r { inset-inline-end: 0; border-start-end-radius: 26px; border-end-end-radius: 26px; }

/* The seam: the closed run, lit. Its height IS the progress. */
.zv-seam {
    position: absolute;
    inset-inline: 50%;
    inset-block-start: 0;
    inline-size: 4px;
    margin-inline-start: -2px;
    block-size: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--zv-gold-hi), var(--zv-gold));
    box-shadow: 0 0 10px rgba(232, 184, 75, .65);
    transition: block-size .08s linear;
}

/* The teeth, drawn once as a repeating gradient on each tape edge. They
   sit closer together over the closed run because the seam covers the gap. */
.zv-teeth {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, rgba(232,184,75,.30) 0 3px, transparent 3px 9px) left  2px / 15px 100% no-repeat,
        repeating-linear-gradient(180deg, rgba(232,184,75,.30) 0 3px, transparent 3px 9px) right 2px / 15px 100% no-repeat;
    opacity: .8;
}

/* ── the light ───────────────────────────────────────────────────────── */
.zv-light {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 0;
    inline-size: 46px;
    block-size: 46px;
    margin-inline-start: -23px;
    margin-block-start: -2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: grab;
    touch-action: none;
    transition: inset-block-start .1s linear;
}

.zv-light:focus-visible { outline: 3px solid var(--zv-gold-hi); outline-offset: 3px; }

.zv-sun { position: relative; display: block; inline-size: 100%; block-size: 100%; }

.zv-core {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #FFFDF0, var(--zv-gold-hi) 45%, var(--zv-gold) 100%);
    box-shadow: 0 0 14px 3px rgba(232, 184, 75, .7), 0 0 34px 8px rgba(232, 184, 75, .28);
}

/* The rays: the identity's own spinning corona, at component scale. */
.zv-rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        var(--zv-gold) 0 4deg, transparent 4deg 17deg,
        var(--zv-gold) 17deg 21deg, transparent 21deg 34deg,
        var(--zv-gold) 34deg 38deg, transparent 38deg 51deg,
        var(--zv-gold) 51deg 55deg, transparent 55deg 68deg,
        var(--zv-gold) 68deg 72deg, transparent 72deg 85deg,
        var(--zv-gold) 85deg 89deg, transparent 89deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 44%, #000 46%, #000 72%, transparent 74%);
            mask: radial-gradient(circle, transparent 44%, #000 46%, #000 72%, transparent 74%);
    opacity: .85;
    animation: zv-spin 9s linear infinite;
}

@keyframes zv-spin { to { transform: rotate(360deg); } }

.zv-hint { margin: 0; font-size: .86rem; color: var(--zv-mid); max-inline-size: 34ch; }

/* ── states ──────────────────────────────────────────────────────────── */
.zv.is-dragging .zv-light { transition: none; }
.zv.is-dragging .zv-seam  { transition: none; }

.zv.is-verified .zv-track { background: #14301f; }
.zv.is-verified .zv-seam  { box-shadow: 0 0 16px rgba(232, 184, 75, .9); }
.zv.is-verified .zv-state { color: var(--good, #197a4b); }
.zv.is-verified .zv-light { cursor: default; }
.zv.is-verified .zv-core  { animation: zv-lock .5s ease-out; }

@keyframes zv-lock {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.28); box-shadow: 0 0 26px 10px rgba(232, 184, 75, .85); }
    100% { transform: scale(1); }
}

.zv.is-failed .zv-state { color: var(--danger, #b3261e); }
.zv.is-failed .zv-track { animation: zv-shake .3s ease-in-out; }

@keyframes zv-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* The honeypot: off-screen, never display:none — a form-filler that skips
   hidden fields would skip this one too, which defeats the point. */
.zv-trap {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── reduced motion ──────────────────────────────────────────────────────
   The interaction SURVIVES; only the decoration stops. Removing the drag
   here would leave a visitor who asked for less motion with no way through
   the form at all. */
@media (prefers-reduced-motion: reduce) {
    .zv-rays { animation: none; }
    .zv-core { animation: none !important; }
    .zv-track { animation: none !important; }
    .zv-light, .zv-seam { transition: none; }
}

/* ── narrow screens ─────────────────────────────────────────────────────
   The stage stacks rather than squeezing the track, so the drag keeps its
   full travel on a phone — a 90px zip is a fiddly zip. */
@media (max-width: 460px) {
    .zv-stage { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .zv-track { block-size: 160px; }
    .zv-hint  { max-inline-size: none; }
}