/* =============================================================================
   InvestProp — home page «استعلام سرتیفیکیت» (certificate check)
   -----------------------------------------------------------------------------
   Used by `site/index/verify.blade.php`. Every rule is scoped to `.vc-verify`,
   the section's own root — NOT a page body class — so nothing here can match
   outside the section (same rule as roadmap.css / bento.css / atlas.css).

   The brief: premium and trustworthy, quiet, in the home page's language —
   the house blue (#007BFF → #1C8AFF), sky / cyan accents on the #020915 ground,
   flat surfaces, hairlines instead of boxes. The FORM is the hero; the sample
   certificate is supporting art and is kept deliberately smaller.

   Two layers of decoration, both themed through `currentColor` + CSS masks
   (the closing CTA's technique), so neither needs a second asset per theme:
     • a guilloche texture — the interlaced-wave pattern of security printing —
       fading out behind the certificate;
     • on the fallback sheet only (shown if the sample image is ever
       missing): a QR-like block and a signature stroke.

   Motion: one scan-line pass over the certificate, then the "verified" chip
   settling in — once, when the DOCUMENT comes on screen. verify-section.js
   owns the contract: `.vc-doc.is-armed` (script alive; the chip may start
   hidden) → `.vc-doc.is-seen` (play). It never arms under reduced motion, so
   resting state = finished state for no-JS and reduced-motion visitors. The
   card itself uses the home page's `.hx-reveal` fade like every section.

   Direction: logical properties throughout. The few physical values (the
   card glow's X, the sheet's tilt, the arrow's hover nudge) are custom
   properties flipped once under `html[dir="ltr"]`. The code field and the
   certificate itself are always left-to-right.
   ========================================================================== */

.vc-verify {
    /* --- palette (dark = default) ----------------------------------------- */
    --vc-primary: #007BFF;
    --vc-primary-2: #1C8AFF;
    --vc-cyan: #5ED2EC;
    --vc-sky: #8DC4FF;

    --vc-card-top: #0A1B30;
    --vc-card-bottom: #050F1D;
    --vc-card-glow: rgba(0, 123, 255, .16);
    --vc-well: rgba(2, 9, 21, .66);
    --vc-strip: rgba(2, 9, 21, .3);
    --vc-line: rgba(141, 196, 255, .14);
    --vc-line-strong: rgba(141, 196, 255, .28);
    --vc-text: #EAF2FF;
    --vc-text-2: #C3D4EA;
    --vc-muted: #8FA5C2;
    --vc-accent: #8DC4FF;
    --vc-icon: #5ED2EC;
    --vc-hl-a: #1C8AFF;
    --vc-hl-b: #5ED2EC;
    --vc-ok: #3DD68C;
    --vc-warn: #F4A641;
    --vc-ink: #8DC4FF;
    --vc-chip-bg: rgba(5, 16, 30, .88);

    --vc-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --vc-glow: 0 10px 34px -14px rgba(0, 123, 255, .62);
    --vc-shadow: 0 30px 80px -46px rgba(0, 0, 0, .9);
    --vc-sheet-bg: #0B1D34;
    --vc-sheet-shadow: 0 34px 60px -30px rgba(0, 0, 0, .85);

    /* Physical values, flipped for LTR below. The certificate sits on the
       inline-end side — left in RTL — and turns slightly towards the form. */
    --vc-glow-x: 20%;
    --vc-tilt: 7deg;
    --vc-nudge: -3px;

    /* Latin face for the code: the Persian stacks draw 0–9 as ۰–۹. */
    --vc-latin: "Poppins", "Roboto", ui-sans-serif, system-ui, sans-serif;

    position: relative;
    margin-top: 96px;
    color: var(--vc-text);
}

html:not(.dark) .vc-verify {
    --vc-card-top: #FFFFFF;
    --vc-card-bottom: #F1F6FF;
    --vc-card-glow: rgba(0, 123, 255, .08);
    --vc-well: #FFFFFF;
    --vc-strip: rgba(0, 72, 153, .03);
    --vc-line: rgba(0, 72, 153, .12);
    --vc-line-strong: rgba(0, 72, 153, .24);
    --vc-text: #0A1A30;
    --vc-text-2: #2B4463;
    --vc-muted: #5D7492;
    --vc-accent: #0B62C4;
    --vc-icon: #0B62C4;
    /* The dark theme's cyan sits near 1.7:1 on white — the light ramp is the
       same two hues darkened (as roadmap.css does). */
    --vc-hl-a: #0B63D6;
    --vc-hl-b: #0C7C9B;
    --vc-ok: #12885A;
    --vc-warn: #A85F00;
    --vc-ink: #0B62C4;
    --vc-chip-bg: rgba(255, 255, 255, .94);
    --vc-shadow: 0 26px 60px -42px rgba(10, 40, 80, .35);
    --vc-sheet-bg: #EAF1FB;
    --vc-sheet-shadow: 0 30px 56px -30px rgba(10, 40, 80, .45);
}

html[dir="ltr"] .vc-verify {
    --vc-glow-x: 80%;
    --vc-tilt: -7deg;
    --vc-nudge: 3px;
}

@media (max-width: 767.98px) {
    .vc-verify { margin-top: 64px; }
}

/* =============================================================================
   1. The card
   ========================================================================== */

.vc-verify .vc-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "main"
        "visual"
        "points";
    border-radius: 26px;
    background:
        radial-gradient(ellipse 50% 85% at var(--vc-glow-x) 0%, var(--vc-card-glow), rgba(0, 123, 255, 0) 70%),
        linear-gradient(160deg, var(--vc-card-top) 0%, var(--vc-card-bottom) 100%);
    box-shadow: var(--vc-shadow);
    overflow: hidden;
    isolation: isolate;
}

/* The outline is an inset hairline on top of everything, so the panes'
   own backgrounds never paint over it. */
.vc-verify .vc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--vc-line);
    pointer-events: none;
}

@media (min-width: 992px) {
    .vc-verify .vc-card {
        grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
        grid-template-areas:
            "main   visual"
            "points points";
    }
}

/* =============================================================================
   2. The desk — heading and form
   ========================================================================== */

.vc-verify .vc-main {
    grid-area: main;
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: clamp(28px, 4.2vw, 56px) clamp(20px, 4vw, 54px);
}

.vc-verify .vc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 14px;
    border: 1px solid var(--vc-line-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--vc-primary) 10%, transparent);
    color: var(--vc-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
}

.vc-verify .vc-eyebrow i { font-size: 15px; }

.vc-verify .vc-title {
    margin: 0;
    color: var(--vc-text);
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.45;
}

/* Second line of the heading, in the house gradient. `fit-content` keeps the
   gradient the width of the words rather than the whole column. */
.vc-verify .vc-title__hl {
    display: block;
    width: fit-content;
    max-width: 100%;
    background: linear-gradient(96deg, var(--vc-hl-a) 0%, var(--vc-hl-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.vc-verify .vc-lead {
    margin: 14px 0 0;
    max-width: 60ch;
    color: var(--vc-muted);
    font-size: 15px;
    line-height: 2;
}

/* --- the form ------------------------------------------------------------- */

.vc-verify .vc-form { margin: 28px 0 0; }

.vc-verify .vc-label {
    display: block;
    margin: 0 0 10px;
    color: var(--vc-text-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.vc-verify .vc-row {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.vc-verify .vc-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    border-radius: 16px;
    background: var(--vc-well);
    box-shadow: inset 0 0 0 1px var(--vc-line-strong);
    transition: box-shadow .2s ease;
}

.vc-verify .vc-field:focus-within {
    box-shadow: inset 0 0 0 1.5px var(--vc-primary-2), 0 0 0 4px rgba(28, 138, 255, .18);
}

.vc-verify .vc-field.is-complete {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vc-ok) 72%, transparent);
}

.vc-verify .vc-field.is-complete:focus-within {
    box-shadow: inset 0 0 0 1.5px var(--vc-ok), 0 0 0 4px color-mix(in srgb, var(--vc-ok) 18%, transparent);
}

.vc-verify .vc-field.is-invalid,
.vc-verify .vc-field.is-invalid:focus-within {
    box-shadow: inset 0 0 0 1.5px var(--vc-warn), 0 0 0 4px color-mix(in srgb, var(--vc-warn) 16%, transparent);
}

.vc-verify .vc-field__icon,
.vc-verify .vc-field__ok {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
}

.vc-verify .vc-field__icon {
    inset-inline-start: 18px;
    color: var(--vc-accent);
}

.vc-verify .vc-field__ok {
    inset-inline-end: 18px;
    color: var(--vc-ok);
    opacity: 0;
    scale: .6;
    transition: opacity .2s ease, scale .28s cubic-bezier(.2, 1.4, .4, 1);
}

.vc-verify .vc-field.is-complete .vc-field__ok {
    opacity: 1;
    scale: 1;
}

/* The code itself: Latin, tracked out and centred, so it reads the way it is
   printed on the certificate in either page direction. The bottom padding
   leaves room for the meter. */
.vc-verify .vc-input {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 54px 6px;
    border: 0;
    border-radius: inherit;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: var(--vc-text);
    caret-color: var(--vc-primary-2);
    font-family: var(--vc-latin);
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 600;
    /* The trailing tracking would push the centred code off-centre; an equal
       indent cancels it. */
    letter-spacing: .18em;
    text-indent: .18em;
    text-align: center;
    text-transform: uppercase;
    appearance: none;
}

.vc-verify .vc-input::placeholder {
    color: var(--vc-muted);
    opacity: .5;
}

.vc-verify .vc-input:focus::placeholder { opacity: .28; }

/* Three segments, one per group of four characters, filled from `--vc-n`.
   The code runs left-to-right in every locale, so the meter does too. It only
   appears once something has been typed (`.is-filled`, set by the script) —
   at rest the field is just the icon and the placeholder. */
.vc-verify .vc-meter {
    position: absolute;
    left: 50%;
    bottom: 9px;
    translate: -50% 0;
    display: flex;
    gap: 6px;
    direction: ltr;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.vc-verify .vc-field.is-filled .vc-meter { opacity: 1; }

.vc-verify .vc-meter i {
    position: relative;
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--vc-line-strong);
    overflow: hidden;
}

.vc-verify .vc-meter i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vc-grad);
    transform-origin: left center;
    transform: scaleX(var(--vc-fill, 0));
    transition: transform .18s ease, background-color .2s ease;
}

.vc-verify .vc-meter i:nth-child(1)::after { --vc-fill: clamp(0, var(--vc-n, 0) / 4, 1); }
.vc-verify .vc-meter i:nth-child(2)::after { --vc-fill: clamp(0, (var(--vc-n, 0) - 4) / 4, 1); }
.vc-verify .vc-meter i:nth-child(3)::after { --vc-fill: clamp(0, (var(--vc-n, 0) - 8) / 4, 1); }

.vc-verify .vc-field.is-complete .vc-meter i::after { background: var(--vc-ok); }

/* --- the button: the house primary CTA -------------------------------------- */

.vc-verify .vc-submit {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 64px;
    margin: 0;
    padding: 0 28px;
    border: 0;
    border-radius: 16px;
    background: var(--vc-grad);
    box-shadow: var(--vc-glow);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .25s ease;
}

/* The 1px shine along the top-start edge — the house style for the CTA. */
.vc-verify .vc-submit::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(106.61deg, #FFFFFF 2.5%, rgba(255, 255, 255, 0) 18.15%);
    -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.vc-verify .vc-submit:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -14px rgba(0, 123, 255, .78);
}

.vc-verify .vc-submit:active { transform: translateY(0); }

.vc-verify .vc-submit:focus-visible {
    outline: 2px solid var(--vc-accent);
    outline-offset: 3px;
}

/* `translate`, not `transform`: site.css mirrors this glyph under LTR with a
   transform, and the two compose instead of overwriting each other. */
.vc-verify .vc-submit i {
    font-size: 18px;
    transition: translate .2s ease;
}

.vc-verify .vc-submit:hover i { translate: var(--vc-nudge) 0; }

/* --- helper / status line ----------------------------------------------- */

.vc-verify .vc-hint {
    margin: 12px 0 0;
    color: var(--vc-muted);
    font-size: 13px;
    line-height: 1.9;
    transition: color .2s ease;
}

.vc-verify .vc-hint[data-state="empty"],
.vc-verify .vc-hint[data-state="lookalike"] { color: var(--vc-warn); }

.vc-verify .vc-hint[data-state="ready"] { color: var(--vc-ok); }

/* =============================================================================
   3. Trust points — the card's footer strip, one cell per point
   ========================================================================== */

.vc-verify .vc-points {
    grid-area: points;
    display: grid;
    grid-template-columns: repeat(var(--vc-cols, 3), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--vc-line);
    background: var(--vc-strip);
    list-style: none;
}

.vc-verify .vc-point {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 22px clamp(20px, 3vw, 40px);
}

/* Hairlines between the cells instead of a box around each one. */
.vc-verify .vc-point + .vc-point { border-inline-start: 1px solid var(--vc-line); }

.vc-verify .vc-point__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--vc-primary) 12%, transparent);
    box-shadow: inset 0 0 0 1px var(--vc-line);
    color: var(--vc-icon);
    font-size: 20px;
}

.vc-verify .vc-point__body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.vc-verify .vc-point__title {
    color: var(--vc-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
}

.vc-verify .vc-point__text {
    color: var(--vc-muted);
    font-size: 12.5px;
    line-height: 1.8;
}

/* =============================================================================
   4. The document
   ========================================================================== */

.vc-verify .vc-visual {
    grid-area: visual;
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: clamp(40px, 4.4vw, 60px) clamp(28px, 3.4vw, 52px);
    background: radial-gradient(circle at 50% 50%, rgba(0, 123, 255, .13), rgba(0, 123, 255, 0) 62%);
    overflow: hidden;
}

/* The seam between the panes: a hairline that fades out at both ends. */
.vc-verify .vc-visual::before {
    content: "";
    position: absolute;
    inset-inline: 8%;
    inset-block-start: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(141, 196, 255, 0), var(--vc-line-strong) 20%, var(--vc-line-strong) 80%, rgba(141, 196, 255, 0));
    pointer-events: none;
}

@media (min-width: 992px) {
    .vc-verify .vc-visual::before {
        inset-inline: auto;
        inset-inline-start: 0;
        inset-block: 10%;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, rgba(141, 196, 255, 0), var(--vc-line-strong) 20%, var(--vc-line-strong) 80%, rgba(141, 196, 255, 0));
    }
}

/* Security-print texture, fading out from behind the certificate. */
.vc-verify .vc-guilloche {
    position: absolute;
    inset: 0;
    color: var(--vc-ink);
    opacity: .2;
    -webkit-mask: radial-gradient(ellipse 72% 64% at 50% 50%, #000 18%, rgba(0, 0, 0, 0) 74%);
    mask: radial-gradient(ellipse 72% 64% at 50% 50%, #000 18%, rgba(0, 0, 0, 0) 74%);
    pointer-events: none;
}

html:not(.dark) .vc-verify .vc-guilloche { opacity: .14; }

.vc-verify .vc-guilloche i {
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M0 9C20 2 40 2 60 9S100 16 120 9'/%3E%3Cpath transform='translate(30 0)' d='M0 9C20 2 40 2 60 9S100 16 120 9'/%3E%3Cpath transform='translate(-90 0)' d='M0 9C20 2 40 2 60 9S100 16 120 9'/%3E%3Cpath d='M0 9C20 16 40 16 60 9S100 2 120 9'/%3E%3Cpath transform='translate(30 0)' d='M0 9C20 16 40 16 60 9S100 2 120 9'/%3E%3Cpath transform='translate(-90 0)' d='M0 9C20 16 40 16 60 9S100 2 120 9'/%3E%3Cpath d='M0 27C20 20 40 20 60 27S100 34 120 27'/%3E%3Cpath transform='translate(30 0)' d='M0 27C20 20 40 20 60 27S100 34 120 27'/%3E%3Cpath transform='translate(-90 0)' d='M0 27C20 20 40 20 60 27S100 34 120 27'/%3E%3Cpath d='M0 27C20 34 40 34 60 27S100 20 120 27'/%3E%3Cpath transform='translate(30 0)' d='M0 27C20 34 40 34 60 27S100 20 120 27'/%3E%3Cpath transform='translate(-90 0)' d='M0 27C20 34 40 34 60 27S100 20 120 27'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 36px repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='.7'%3E%3Cpath d='M0 9C20 2 40 2 60 9S100 16 120 9'/%3E%3Cpath transform='translate(30 0)' d='M0 9C20 2 40 2 60 9S100 16 120 9'/%3E%3Cpath transform='translate(-90 0)' d='M0 9C20 2 40 2 60 9S100 16 120 9'/%3E%3Cpath d='M0 9C20 16 40 16 60 9S100 2 120 9'/%3E%3Cpath transform='translate(30 0)' d='M0 9C20 16 40 16 60 9S100 2 120 9'/%3E%3Cpath transform='translate(-90 0)' d='M0 9C20 16 40 16 60 9S100 2 120 9'/%3E%3Cpath d='M0 27C20 20 40 20 60 27S100 34 120 27'/%3E%3Cpath transform='translate(30 0)' d='M0 27C20 20 40 20 60 27S100 34 120 27'/%3E%3Cpath transform='translate(-90 0)' d='M0 27C20 20 40 20 60 27S100 34 120 27'/%3E%3Cpath d='M0 27C20 34 40 34 60 27S100 20 120 27'/%3E%3Cpath transform='translate(30 0)' d='M0 27C20 34 40 34 60 27S100 20 120 27'/%3E%3Cpath transform='translate(-90 0)' d='M0 27C20 34 40 34 60 27S100 20 120 27'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 36px repeat;
}

.vc-verify .vc-doc {
    position: relative;
    z-index: 1;
    width: min(100%, 392px);
    margin: 0;
    transform: perspective(1600px) rotateY(var(--vc-tilt)) rotateX(3deg);
}

.vc-verify .vc-doc__sheet {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    /* Holds the image's box (width/height attributes) until the lazy load lands. */
    background: var(--vc-sheet-bg);
    box-shadow: var(--vc-sheet-shadow), 0 0 0 1px var(--vc-line-strong);
}

.vc-verify .vc-doc__sheet img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

/* One pass of a scan line; parked out of sight at rest. */
.vc-verify .vc-doc__scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(94, 210, 236, 0) 58%,
        rgba(94, 210, 236, .12) 90%,
        rgba(94, 210, 236, .85) 99.2%,
        rgba(94, 210, 236, 0) 100%);
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.vc-verify .vc-doc.is-seen .vc-doc__scan {
    animation: vcScan 1.6s cubic-bezier(.45, 0, .25, 1) .25s 1 both;
}

@keyframes vcScan {
    0%   { opacity: 1; transform: translateY(-100%); }
    82%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

.vc-verify .vc-doc__sample {
    position: absolute;
    top: -13px;
    inset-inline-end: 16px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--vc-chip-bg);
    box-shadow: inset 0 0 0 1px var(--vc-line-strong);
    color: var(--vc-muted);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .03em;
}

/* Hangs off the edge that faces the form, level with the sheet's quiet
   middle rather than over the signature. */
.vc-verify .vc-doc__stamp {
    position: absolute;
    inset-inline-start: -18px;
    top: 38%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px 8px 13px;
    border-radius: 999px;
    background: var(--vc-chip-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc-ok) 55%, transparent), 0 16px 30px -16px rgba(0, 0, 0, .75);
    color: var(--vc-ok);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.vc-verify .vc-doc__stamp i { font-size: 17px; }

/* Armed: waiting, out of sight, for the scan to reach it. */
.vc-verify .vc-doc.is-armed .vc-doc__stamp {
    opacity: 0;
    scale: .7;
}

.vc-verify .vc-doc.is-armed.is-seen .vc-doc__stamp {
    animation: vcStamp .55s cubic-bezier(.2, 1.4, .4, 1) 1.6s both;
}

@keyframes vcStamp {
    from { opacity: 0; scale: .7; }
    to   { opacity: 1; scale: 1; }
}

/* --- fallback sheet ---------------------------------------------------------
   Shown only while the certificate module's sample image is missing: an
   abstract certificate — brand, seal, placeholder lines, QR block, code slot,
   signature — rather than invented names and amounts. Sized in `cqi` so it
   scales as one piece with the sheet. */

.vc-verify .vc-doc__sheet--mock { aspect-ratio: 1.414 / 1; }

.vc-verify .vc-mock {
    --vc-paper-top: #12294A;
    --vc-paper-bottom: #0A1A30;
    --vc-paper-ink: #EAF2FF;
    --vc-paper-soft: rgba(141, 196, 255, .2);
    --vc-paper-accent: #8DC4FF;

    position: absolute;
    inset: 0;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 7.5% 8.5%;
    background:
        radial-gradient(ellipse 70% 60% at 88% 0%, rgba(0, 123, 255, .24), rgba(0, 123, 255, 0) 70%),
        linear-gradient(150deg, var(--vc-paper-top) 0%, var(--vc-paper-bottom) 100%);
    color: var(--vc-paper-ink);
    font-family: var(--vc-latin);
}

html:not(.dark) .vc-verify .vc-mock {
    --vc-paper-top: #FFFFFF;
    --vc-paper-bottom: #F2F7FF;
    --vc-paper-ink: #0A1A30;
    --vc-paper-soft: rgba(0, 72, 153, .13);
    --vc-paper-accent: #0B62C4;
}

/* The certificate's inner frame. */
.vc-verify .vc-mock::before {
    content: "";
    position: absolute;
    inset: 3.4%;
    border-radius: 7px;
    box-shadow: inset 0 0 0 1px var(--vc-paper-soft);
    pointer-events: none;
}

.vc-verify .vc-mock__head {
    display: flex;
    align-items: center;
    gap: 2.4cqi;
}

.vc-verify .vc-mock__mark {
    width: 5.6cqi;
    aspect-ratio: 148.4 / 150.4;
    background: var(--vc-paper-accent);
    -webkit-mask: url("../images/main/logo-mark.svg") no-repeat center / contain;
    mask: url("../images/main/logo-mark.svg") no-repeat center / contain;
}

.vc-verify .vc-mock__brand {
    font-size: 3.1cqi;
    font-weight: 700;
    letter-spacing: .32em;
    line-height: 1;
}

/* A rosette seal: rays in a ring. */
.vc-verify .vc-mock__seal {
    margin-inline-start: auto;
    width: 12cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(var(--vc-paper-accent) 0 3deg, rgba(141, 196, 255, 0) 3deg 9deg);
    -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 0) 52%, #000 54% 70%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 80%, #000 82% 100%);
    mask: radial-gradient(circle, rgba(0, 0, 0, 0) 52%, #000 54% 70%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 80%, #000 82% 100%);
    opacity: .7;
}

/* Centred, like the real certificate's own layout — which also keeps the
   placeholder lines clear of the chip hanging off either edge. */
.vc-verify .vc-mock__body {
    display: grid;
    justify-items: center;
    gap: 2.6cqi;
}

.vc-verify .vc-mock__bar {
    display: block;
    height: 1.7cqi;
    border-radius: 99px;
    background: var(--vc-paper-soft);
}

.vc-verify .vc-mock__bar--kicker {
    width: 42%;
    background: color-mix(in srgb, var(--vc-paper-accent) 55%, transparent);
}

.vc-verify .vc-mock__bar--name {
    width: 60%;
    height: 3.9cqi;
    background: color-mix(in srgb, var(--vc-paper-ink) 78%, transparent);
}

.vc-verify .vc-mock__bar--amount {
    width: 36%;
    height: 6cqi;
    background: linear-gradient(94.98deg, #1C8AFF 0%, #5ED2EC 100%);
}

.vc-verify .vc-mock__bar--meta { width: 50%; }

.vc-verify .vc-mock__foot {
    display: flex;
    align-items: flex-end;
    gap: 3cqi;
}

.vc-verify .vc-mock__qr {
    flex: 0 0 auto;
    width: 15cqi;
    aspect-ratio: 1;
    padding: 1.3cqi;
    border-radius: 1.4cqi;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--vc-paper-soft);
}

.vc-verify .vc-mock__qr::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #0A1A30;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h7v7h-7zM1 1v5h5v-5zM2 2h3v3h-3zM14 0h7v7h-7zM15 1v5h5v-5zM16 2h3v3h-3zM0 14h7v7h-7zM1 15v5h5v-5zM2 16h3v3h-3zM8 0h2v1h-2zM11 0h2v1h-2zM11 1h1v1h-1zM8 3h1v1h-1zM12 3h1v1h-1zM10 4h1v1h-1zM8 5h1v1h-1zM10 5h2v1h-2zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM3 8h6v1h-6zM14 8h6v1h-6zM1 9h1v1h-1zM5 9h1v1h-1zM7 9h3v1h-3zM11 9h1v1h-1zM13 9h3v1h-3zM18 9h1v1h-1zM20 9h1v1h-1zM6 10h1v1h-1zM8 10h2v1h-2zM12 10h1v1h-1zM17 10h3v1h-3zM0 11h1v1h-1zM2 11h1v1h-1zM4 11h2v1h-2zM10 11h1v1h-1zM12 11h1v1h-1zM16 11h2v1h-2zM19 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h6v1h-6zM14 12h1v1h-1zM17 12h1v1h-1zM19 12h1v1h-1zM8 13h1v1h-1zM10 13h1v1h-1zM13 13h1v1h-1zM17 13h4v1h-4zM8 14h1v1h-1zM11 14h3v1h-3zM18 14h1v1h-1zM20 14h1v1h-1zM8 15h4v1h-4zM14 15h1v1h-1zM16 15h1v1h-1zM20 15h1v1h-1zM8 16h1v1h-1zM10 16h1v1h-1zM12 16h1v1h-1zM18 16h2v1h-2zM8 17h5v1h-5zM14 17h1v1h-1zM16 17h2v1h-2zM19 17h2v1h-2zM9 18h1v1h-1zM12 18h3v1h-3zM16 18h1v1h-1zM18 18h3v1h-3zM8 19h2v1h-2zM12 19h1v1h-1zM14 19h3v1h-3zM18 19h1v1h-1zM20 19h1v1h-1zM10 20h1v1h-1zM13 20h5v1h-5z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath fill-rule='evenodd' d='M0 0h7v7h-7zM1 1v5h5v-5zM2 2h3v3h-3zM14 0h7v7h-7zM15 1v5h5v-5zM16 2h3v3h-3zM0 14h7v7h-7zM1 15v5h5v-5zM2 16h3v3h-3zM8 0h2v1h-2zM11 0h2v1h-2zM11 1h1v1h-1zM8 3h1v1h-1zM12 3h1v1h-1zM10 4h1v1h-1zM8 5h1v1h-1zM10 5h2v1h-2zM8 6h1v1h-1zM10 6h1v1h-1zM12 6h1v1h-1zM8 7h1v1h-1zM10 7h1v1h-1zM3 8h6v1h-6zM14 8h6v1h-6zM1 9h1v1h-1zM5 9h1v1h-1zM7 9h3v1h-3zM11 9h1v1h-1zM13 9h3v1h-3zM18 9h1v1h-1zM20 9h1v1h-1zM6 10h1v1h-1zM8 10h2v1h-2zM12 10h1v1h-1zM17 10h3v1h-3zM0 11h1v1h-1zM2 11h1v1h-1zM4 11h2v1h-2zM10 11h1v1h-1zM12 11h1v1h-1zM16 11h2v1h-2zM19 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h6v1h-6zM14 12h1v1h-1zM17 12h1v1h-1zM19 12h1v1h-1zM8 13h1v1h-1zM10 13h1v1h-1zM13 13h1v1h-1zM17 13h4v1h-4zM8 14h1v1h-1zM11 14h3v1h-3zM18 14h1v1h-1zM20 14h1v1h-1zM8 15h4v1h-4zM14 15h1v1h-1zM16 15h1v1h-1zM20 15h1v1h-1zM8 16h1v1h-1zM10 16h1v1h-1zM12 16h1v1h-1zM18 16h2v1h-2zM8 17h5v1h-5zM14 17h1v1h-1zM16 17h2v1h-2zM19 17h2v1h-2zM9 18h1v1h-1zM12 18h3v1h-3zM16 18h1v1h-1zM18 18h3v1h-3zM8 19h2v1h-2zM12 19h1v1h-1zM14 19h3v1h-3zM18 19h1v1h-1zM20 19h1v1h-1zM10 20h1v1h-1zM13 20h5v1h-5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vc-verify .vc-mock__code {
    padding-bottom: .6cqi;
    color: color-mix(in srgb, var(--vc-paper-ink) 70%, transparent);
    font-size: 2.6cqi;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1;
    white-space: nowrap;
}

.vc-verify .vc-mock__sign {
    margin-inline-start: auto;
    width: 25cqi;
    aspect-ratio: 140 / 44;
    background: color-mix(in srgb, var(--vc-paper-ink) 70%, transparent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 44'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 30c7-9 12-22 19-22 5 0 3 9-2 16-3 5-2 8 3 8 7 0 11-13 17-13 3 0 2 7 6 7 5 0 8-10 13-10 3 0 1 8 6 8 7 0 14-6 23-8M34 37c24-4 58-6 96-5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 44'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 30c7-9 12-22 19-22 5 0 3 9-2 16-3 5-2 8 3 8 7 0 11-13 17-13 3 0 2 7 6 7 5 0 8-10 13-10 3 0 1 8 6 8 7 0 14-6 23-8M34 37c24-4 58-6 96-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =============================================================================
   5. Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    .vc-verify .vc-doc { width: min(100%, 380px); }
}

@media (max-width: 767.98px) {
    .vc-verify .vc-card { border-radius: 22px; }

    /* Stacked cells, hairlines between rows. */
    .vc-verify .vc-points { grid-template-columns: minmax(0, 1fr); }

    .vc-verify .vc-point { padding: 16px 20px; }

    .vc-verify .vc-point + .vc-point {
        border-inline-start: 0;
        border-top: 1px solid var(--vc-line);
    }
}

@media (max-width: 575.98px) {
    .vc-verify .vc-row { flex-direction: column; }

    .vc-verify .vc-field { flex: 0 0 auto; height: 60px; }

    .vc-verify .vc-submit {
        width: 100%;
        height: 54px;
    }

    .vc-verify .vc-visual { padding: 36px 26px 34px; }

    .vc-verify .vc-doc {
        width: min(100%, 320px);
        transform: perspective(1400px) rotateY(calc(var(--vc-tilt) * .6)) rotateX(2deg);
    }

    .vc-verify .vc-doc__stamp {
        inset-inline-start: -10px;
        padding: 6px 12px 6px 10px;
        font-size: 12px;
    }
}

/* A 360px phone: the code still has to fit on one line inside the field. */
@media (max-width: 399.98px) {
    .vc-verify .vc-input {
        padding-inline: 44px;
        font-size: 17px;
        letter-spacing: .11em;
        text-indent: .11em;
    }

    .vc-verify .vc-field__icon { inset-inline-start: 14px; font-size: 20px; }
    .vc-verify .vc-field__ok { inset-inline-end: 14px; font-size: 20px; }
}

/* =============================================================================
   6. Reduced motion — the finished frame, no movement
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .vc-verify .vc-doc.is-seen .vc-doc__scan,
    .vc-verify .vc-doc.is-armed.is-seen .vc-doc__stamp { animation: none; }

    /* Armed before the preference changed: show the finished frame. */
    .vc-verify .vc-doc.is-armed .vc-doc__stamp { opacity: 1; scale: 1; }

    .vc-verify .vc-field,
    .vc-verify .vc-field__ok,
    .vc-verify .vc-meter,
    .vc-verify .vc-meter i::after,
    .vc-verify .vc-submit,
    .vc-verify .vc-submit i,
    .vc-verify .vc-hint { transition: none; }

    .vc-verify .vc-submit:hover { transform: none; }
    .vc-verify .vc-submit:hover i { translate: none; }
}