/* ============================================================
   Pontis Construction — portal sign-in (auth-login.css)

   Loaded only by resources/views/auth/login.blade.php. The verification-code
   and guest pages keep using auth.css, so nothing here is shared.

   Structure
     1. tokens            6. blueprint drawing
     2. base              7. sign-in card and fields
     3. layout            8. responsive
     4. brand panel       9. lite / reduced motion
     5. entrance timeline
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
    --orange: #e56200;
    --orange-lift: #ff8b33;      /* AA on the dark surfaces for small text */
    --orange-deep: #c45400;
    --orange-soft: rgba(229, 98, 0, 0.14);

    --ink: #0f0e0d;              /* hero */
    --ink-2: #141211;            /* panel */
    --surface: #1a1817;          /* card */
    --field: #1f1c1a;
    --field-focus: #242120;

    --text: #f5f2ee;
    --text-2: #c9c2bb;
    --muted: #8f8780;
    --muted-2: #6a635d;
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.16);
    --bp: rgba(245, 242, 238, 0.62);
    --bp-dim: rgba(245, 242, 238, 0.28);

    --err: #ff9a92;
    --err-line: rgba(255, 110, 100, 0.45);
    --ok: #86d9ab;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

    --radius: 20px;
    --radius-s: 12px;

    /* pointer-driven, written by auth-login.js */
    --px: 0;
    --py: 0;
    --lx: 50%;
    --ly: 40%;
}

/* Minor atmospheric shift only: day is a warmer neutral, night a deeper, cooler ink. */
[data-tone="day"]   { --ink: #11100e; --ink-2: #161412; --surface: #1b1917; }
[data-tone="night"] { --ink: #0c0c0f; --ink-2: #111114; --surface: #171719; --field: #1c1c1f; --field-focus: #212124; }

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    height: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 2200px) { html { font-size: 18px; } }
@media (min-width: 3000px) { html { font-size: 20px; } }
@media (min-width: 3800px) { html { font-size: 23px; } }

body {
    margin: 0;
    min-height: 100%;
    /* System faces only. The page used to pull Heebo from Google Fonts; when
       that request was blocked or slow the sign-in screen rendered in a
       different face from one load to the next. Every platform below has a
       geometric grotesque close to it, and nothing has to be fetched. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.lg-mono,
.lg-brand__label,
.lg-copy__kicker,
.lg-progress,
.lg-status,
.lg-foot,
.lg-card__access,
.lg-bp__svg text {
    font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

::selection { background: rgba(229, 98, 0, 0.35); }

:focus-visible {
    outline: 2px solid var(--orange-lift);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- 3. layout ---------- */
.lg {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    min-height: 100vh;
    min-height: 100svh;
}

/* ---------- 4. brand panel ---------- */
.lg-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
}

.lg-hero::after {
    /* soft vignette so the grid dies out toward the edges */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--ink) 100%),
        linear-gradient(90deg, transparent 88%, var(--ink) 100%);
}

/* layer 1: technical grid (drift on the pseudo-element, parallax on the box) */
.lg-hero__grid {
    position: absolute;
    inset: -4%;
    z-index: 0;
    opacity: 0;
    transform: translate3d(calc(var(--px) * 3px), calc(var(--py) * 3px), 0);
    transition: transform 900ms var(--ease);
    -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 72% at 50% 50%, #000 35%, transparent 100%);
    animation: lgFade 1200ms var(--ease) 100ms forwards;
}

.lg-hero__grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
    animation: lgDrift 60s linear infinite;
    will-change: transform;
}

@keyframes lgDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-120px, -120px, 0); }
}

/* cursor light: barely there, brand colour, desktop only */
.lg-hero__light {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(340px circle at var(--lx) var(--ly), rgba(229, 98, 0, 0.11), rgba(229, 98, 0, 0.035) 45%, transparent 70%);
    transition: opacity 700ms var(--ease);
}

.lg-full .lg-hero.is-live .lg-hero__light { opacity: 1; }

.lg-hero__inner {
    position: relative;
    z-index: 3;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 88px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* brand intro */
.lg-brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.lg-brand__logo {
    /* 150px is half the bitmap's 301px, so it stays at full 2x density on
       Retina and 4K screens rather than being stretched past it. */
    width: clamp(118px, 9.5vw, 150px);
    height: auto;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: lgLogo 820ms var(--ease) 150ms forwards;
}

@keyframes lgLogo {
    0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-6px); }
    40%  { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

.lg-brand__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 18px;
    border-left: 1px solid var(--line-2);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    animation: lgSlideIn 700ms var(--ease) 420ms forwards;
}

.lg-brand__label span:first-child { color: var(--text-2); }

/* blueprint stage: a flex item between the brand row and the copy, so it
   takes whatever height the viewport leaves and never overlaps the headline */
.lg-bp {
    position: relative;
    flex: 1 1 auto;
    min-height: 150px;
    margin: 3vh 0 2vh;
    pointer-events: none;
}

.lg-bp__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    overflow: visible;
}

/* copy */
.lg-copy {
    position: relative;
    max-width: 34rem;
}

.lg-copy__kicker {
    margin: 0 0 14px;
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--orange-lift);
    opacity: 0;
    animation: lgSlideIn 600ms var(--ease) 350ms forwards;
}

.lg-copy__kicker i {
    font-style: normal;
    color: var(--muted-2);
    margin: 0 8px;
}

.lg-copy__title {
    margin: 0;
    font-size: clamp(2.4rem, 4.4vw, 4.2rem);
    line-height: 0.98;
    font-weight: 700;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0;
    animation: lgRise 700ms var(--ease) 380ms forwards;
}

.lg-copy__sub {
    margin: 18px 0 0;
    max-width: 26rem;
    font-size: clamp(0.95rem, 1.05vw, 1.1rem);
    line-height: 1.55;
    font-weight: 300;
    color: var(--text-2);
    opacity: 0;
    animation: lgRise 700ms var(--ease) 470ms forwards;
}

/* construction progress words */
.lg-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: stage;
    opacity: 0;
    animation: lgFade 600ms var(--ease) 600ms forwards;
}

.lg-progress li {
    position: relative;
    counter-increment: stage;
    padding-left: 18px;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-2);
    animation: lgStageOn 700ms var(--ease) var(--t) forwards;
}

.lg-progress li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border: 1px solid var(--muted-2);
    transform: rotate(45deg);
    transition: background 400ms, border-color 400ms;
}

.lg-progress li::after {
    content: "0" counter(stage);
    margin-left: 8px;
    color: var(--muted-2);
    letter-spacing: 0.1em;
}

.lg-progress li:nth-child(1) { --t: 0.5s; }
.lg-progress li:nth-child(2) { --t: 1.3s; }
.lg-progress li:nth-child(3) { --t: 2.7s; }
.lg-progress li:nth-child(4) { --t: 4.0s; }

@keyframes lgStageOn {
    to { color: var(--text-2); }
}

.lg-progress li { --dot: var(--muted-2); }
.lg-progress li::before { animation: lgDotOn 500ms var(--ease) var(--t) forwards; }

@keyframes lgDotOn {
    to { border-color: var(--orange); background: var(--orange); }
}

/* status line */
.lg-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0;
    animation: lgFade 700ms var(--ease) 900ms forwards;
}

.lg-status__text i {
    font-style: normal;
    color: var(--muted-2);
    margin: 0 4px;
}

.lg-status__right {
    margin-left: auto;
    color: var(--muted-2);
}

.lg-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 rgba(134, 217, 171, 0.5);
    animation: lgBreathe 3.6s ease-in-out infinite;
}

@keyframes lgBreathe {
    0%, 100% { opacity: 0.55; box-shadow: 0 0 0 0 rgba(134, 217, 171, 0.35); }
    50%      { opacity: 1;    box-shadow: 0 0 0 4px rgba(134, 217, 171, 0); }
}

/* ---------- 5. entrance keyframes ---------- */
@keyframes lgFade    { to { opacity: 1; } }
@keyframes lgRise    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lgSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- 6. blueprint drawing ---------- */
.lg-bp__structure,
.lg-bp__details {
    transition: transform 900ms var(--ease);
    will-change: transform;
}

.lg-bp__structure { transform: translate3d(calc(var(--px) * 4.5px), calc(var(--py) * 4.5px), 0); }
.lg-bp__details   { transform: translate3d(calc(var(--px) * 6px),   calc(var(--py) * 6px),   0); }

.lg-bp__svg path,
.lg-bp__svg circle {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lg-bp__svg path[pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: lgDraw var(--d, 900ms) var(--ease-io) var(--t, 0ms) forwards;
}

@keyframes lgDraw { to { stroke-dashoffset: 0; } }

/* stage timing: foundation → columns → beams → envelope → measurements → details */
.lg-bp__s1 { --t: 300ms;  --d: 950ms; }
.lg-bp__s2 { --t: 1050ms; --d: 800ms; }
.lg-bp__s3 { --t: 1750ms; --d: 950ms; }
.lg-bp__s4 { --t: 2600ms; --d: 950ms; }
.lg-bp__s5 { --t: 3400ms; --d: 700ms; }
.lg-bp__s6 { opacity: 0; animation: lgFade 900ms var(--ease) 3800ms forwards; }

.lg-bp__s2 path:nth-child(2) { --t: 1150ms; }
.lg-bp__s2 path:nth-child(3) { --t: 1250ms; }
.lg-bp__s2 path:nth-child(4) { --t: 1350ms; }
.lg-bp__s2 path:nth-child(5) { --t: 1500ms; }
.lg-bp__s3 path:nth-child(2) { --t: 1900ms; }
.lg-bp__s3 path:nth-child(3) { --t: 2050ms; }
.lg-bp__s3 path:nth-child(4) { --t: 2200ms; }
.lg-bp__s3 path:nth-child(5) { --t: 2300ms; }
.lg-bp__s3 path:nth-child(6) { --t: 2250ms; --d: 1100ms; }
.lg-bp__s3 path:nth-child(7) { --t: 2400ms; }
.lg-bp__s4 path:nth-child(2) { --t: 3000ms; --d: 600ms; }
.lg-bp__s4 path:nth-child(3) { --t: 3150ms; --d: 500ms; }
.lg-bp__s4 path:nth-child(4) { --t: 3100ms; --d: 1000ms; }

.lg-bp__ground   { stroke: var(--bp); stroke-width: 1.6; }
.lg-bp__hatch    { stroke: var(--bp-dim); stroke-width: 1; }
.lg-bp__footing  { stroke: var(--bp-dim); stroke-width: 1; }
.lg-bp__column   { stroke: var(--bp); stroke-width: 1.5; }
.lg-bp__column--light { stroke: var(--bp-dim); stroke-width: 1.2; }
.lg-bp__beam     { stroke: var(--orange); stroke-width: 1.5; opacity: 0.9; }
.lg-bp__beam--light { stroke: var(--orange); opacity: 0.55; stroke-width: 1.2; }
.lg-bp__brace    { stroke: var(--bp-dim); stroke-width: 1; stroke-dasharray: 1; }
.lg-bp__slab     { stroke: rgba(229, 98, 0, 0.35); stroke-width: 1; }
.lg-bp__outline  { stroke: var(--bp); stroke-width: 1; opacity: 0.8; }
.lg-bp__outline--thin { opacity: 0.55; }
.lg-bp__glazing  { stroke: var(--bp-dim); stroke-width: 1; opacity: 0.6; }
.lg-bp__gridline { stroke: var(--bp-dim); stroke-width: 0.8; opacity: 0.55; }
.lg-bp__dim      { stroke: var(--bp-dim); stroke-width: 0.8; }
.lg-bp__tick     { stroke: var(--bp-dim); stroke-width: 0.8; }

.lg-bp__bubbles circle { stroke: var(--bp-dim); stroke-width: 0.8; opacity: 0; animation: lgFade 500ms var(--ease) 3700ms forwards; }
.lg-bp__bubbles text {
    font-size: 9px;
    text-anchor: middle;
    fill: var(--bp);
    opacity: 0;
    animation: lgFade 500ms var(--ease) 3800ms forwards;
}

.lg-bp__text text {
    font-size: 9px;
    letter-spacing: 0.12em;
    fill: var(--bp-dim);
}

.lg-bp__text--accent { fill: var(--orange-lift) !important; opacity: 0.85; }
.lg-bp__text--dim    { fill: var(--muted-2) !important; font-size: 8.5px !important; }

.lg-bp__node {
    fill: var(--ink);
    stroke: var(--orange-lift);
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(var(--s, 1));
    transition: transform 260ms var(--ease);
}

.lg-bp__node--key { fill: var(--orange); }

.lg-bp__ring {
    fill: none;
    stroke: var(--orange);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
    animation: lgRing 4.8s ease-out 4.2s infinite;
}

.lg-bp__ring:nth-of-type(2) { animation-delay: 6.4s; }

@keyframes lgRing {
    0%   { transform: scale(1);   opacity: 0.8; }
    60%  { transform: scale(5.5); opacity: 0; }
    100% { transform: scale(5.5); opacity: 0; }
}

.lg-bp__point path   { stroke: var(--bp-dim); stroke-width: 0.9; }
.lg-bp__point circle { fill: var(--bp-dim); }

.lg-bp__point {
    animation: lgFloat calc(14s + var(--i) * 1.3s) ease-in-out calc(var(--i) * -2.1s) infinite;
}

@keyframes lgFloat {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
}

/* once drawn, the structure settles slightly back so the copy leads */
.lg-bp__structure { animation: lgSettle 1400ms var(--ease) 4400ms forwards; }

@keyframes lgSettle { to { opacity: 0.78; } }

/* ---------- 7. sign-in panel ---------- */
.lg-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vh, 56px) clamp(20px, 4vw, 64px);
    background: var(--ink-2);
    border-left: 1px solid var(--line);
}

.lg-card {
    position: relative;
    width: 100%;
    max-width: 27.5rem;
    padding: 2.5rem 2.5rem 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    opacity: 0;
    filter: blur(4px);
    animation: lgCardIn 560ms var(--ease) 250ms forwards;
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.lg-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 98, 0, 0.85), transparent);
}

@keyframes lgCardIn {
    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* card children stagger in after the card itself */
.lg-card > * {
    opacity: 0;
    animation: lgRise 520ms var(--ease) forwards;
}

.lg-card > :nth-child(1) { animation-delay: 300ms; }
.lg-card > :nth-child(2) { animation-delay: 360ms; }
.lg-card > :nth-child(3) { animation-delay: 420ms; }
.lg-card > :nth-child(4) { animation-delay: 470ms; }
.lg-card > :nth-child(5) { animation-delay: 520ms; }

.lg-form > * { opacity: 0; animation: lgRise 520ms var(--ease) forwards; }
.lg-form > :nth-child(2) { animation-delay: 450ms; }
.lg-form > :nth-child(3) { animation-delay: 500ms; }
.lg-form > :nth-child(4) { animation-delay: 540ms; }
.lg-form > :nth-child(5) { animation-delay: 580ms; }

/* while the browser is posting the form */
.lg-card.is-busy {
    opacity: 0.85;
    transform: translateY(-5px);
}

.lg-card__brand {
    display: inline-block;
    line-height: 0;
    border-radius: 6px;
    transition: opacity 200ms var(--ease);
}

.lg-card__brand:hover { opacity: 0.85; }

.lg-card__logo {
    width: 5.75rem;
    height: auto;
}

.lg-card__head { margin: 1.5rem 0 1.5rem; }

.lg-card__title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.lg-card__sub {
    margin: 6px 0 0;
    font-size: 0.92rem;
    color: var(--muted);
}

/* notices */
.lg-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 1.1rem;
    padding: 11px 13px;
    font-size: 0.86rem;
    line-height: 1.45;
    border-radius: var(--radius-s);
    border: 1px solid var(--line);
}

.lg-notice svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.lg-notice strong { display: block; font-weight: 600; }

.lg-notice--err {
    color: var(--err);
    background: rgba(220, 70, 60, 0.10);
    border-color: var(--err-line);
}

.lg-notice--ok {
    color: var(--ok);
    background: rgba(48, 164, 108, 0.10);
    border-color: rgba(48, 164, 108, 0.35);
}

/* fields */
.lg-field { margin-bottom: 1rem; }

.lg-field__box { position: relative; }

.lg-field__input {
    width: 100%;
    height: 3.6rem;
    padding: 1.35rem 1rem 0.45rem 3rem;
    font: inherit;
    font-size: max(16px, 1rem);   /* 16px floor stops iOS zooming on focus */
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    caret-color: var(--orange-lift);
    transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.lg-field--toggle .lg-field__input { padding-right: 3.2rem; }

.lg-field__input:hover { border-color: var(--line-2); }

.lg-field__input:focus {
    outline: none;
    background: var(--field-focus);
    border-color: rgba(229, 98, 0, 0.7);
    box-shadow: 0 0 0 3px var(--orange-soft);
}

.lg-field__label {
    position: absolute;
    left: 3rem;
    top: 50%;
    margin-top: -0.6rem;
    line-height: 1.2rem;
    font-size: 0.95rem;
    color: var(--muted);
    pointer-events: none;
    transform-origin: 0 50%;
    transition: transform 200ms var(--ease), color 200ms var(--ease), letter-spacing 200ms var(--ease);
    will-change: transform;
}

.lg-field__input:focus ~ .lg-field__label,
.lg-field__input:not(:placeholder-shown) ~ .lg-field__label,
.lg-field__input:-webkit-autofill ~ .lg-field__label {
    transform: translateY(-0.78rem) scale(0.72);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lg-field__input:focus ~ .lg-field__label { color: var(--orange-lift); }

.lg-field__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: var(--muted);
    pointer-events: none;
    transition: color 200ms var(--ease), transform 200ms var(--ease);
}

.lg-field__icon svg { width: 100%; height: 100%; display: block; }

.lg-field__input:focus ~ .lg-field__icon,
.lg-field__box:focus-within .lg-field__icon {
    color: var(--orange-lift);
    transform: translateY(-1px);
}

/* accent line under the input */
.lg-field__line {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 240ms var(--ease);
    pointer-events: none;
}

.lg-field__input:focus ~ .lg-field__line { transform: scaleX(1); }

/* show / hide password */
.lg-field__toggle {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -1.25rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color 180ms var(--ease), background-color 180ms var(--ease);
}

.lg-field__toggle:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.lg-field__toggle svg { width: 20px; height: 20px; }

.lg-eye__slash {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 220ms var(--ease);
}

.lg-eye__pupil { transition: transform 220ms var(--ease); transform-box: fill-box; transform-origin: center; }

.lg-field__toggle[aria-pressed="true"] .lg-eye__slash { stroke-dashoffset: 0; }
.lg-field__toggle[aria-pressed="true"] .lg-eye__pupil { transform: scale(0.6); }

/* error state */
.lg-field.is-invalid .lg-field__input { border-color: var(--err-line); }
.lg-field.is-invalid .lg-field__input:focus { box-shadow: 0 0 0 3px rgba(255, 110, 100, 0.16); border-color: rgba(255, 130, 120, 0.7); }
.lg-field.is-invalid .lg-field__label { color: var(--err); }
.lg-field.is-invalid .lg-field__line { background: var(--err); }

.lg-field__error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 7px 0 0 4px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--err);
    animation: lgRise 360ms var(--ease) 500ms both;
}

.lg-field__error svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* a single, short nudge of the form after a failed attempt */
.is-failed .lg-form {
    animation: lgRise 520ms var(--ease) forwards, lgNudge 460ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 760ms;
}

@keyframes lgNudge {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* Chrome / Edge autofill: keep the dark surface instead of the pale fill */
.lg-field__input:-webkit-autofill,
.lg-field__input:-webkit-autofill:hover,
.lg-field__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
    box-shadow: 0 0 0 1000px var(--field) inset;
    border-color: var(--line-2);
    caret-color: var(--orange-lift);
    transition: background-color 9999s ease-out 0s;
}

.lg-field__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--field-focus) inset, 0 0 0 3px var(--orange-soft);
    box-shadow: 0 0 0 1000px var(--field-focus) inset, 0 0 0 3px var(--orange-soft);
    border-color: rgba(229, 98, 0, 0.7);
}

.lg-field__input:autofill { -webkit-text-fill-color: var(--text); }

/* meta row */
.lg-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0.35rem 0 1.5rem;
}

.lg-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.lg-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.lg-check__box {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: #fff;
    background: var(--field);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    transition: background-color 180ms var(--ease), border-color 180ms var(--ease);
}

.lg-check__box svg {
    width: 12px;
    height: 12px;
    transform: scale(0.4);
    opacity: 0;
    transition: transform 180ms var(--ease), opacity 180ms var(--ease);
}

.lg-check:hover .lg-check__box { border-color: rgba(255, 255, 255, 0.3); }
.lg-check__input:checked ~ .lg-check__box { background: var(--orange); border-color: var(--orange); }
.lg-check__input:checked ~ .lg-check__box svg { transform: scale(1); opacity: 1; }
.lg-check__input:focus-visible ~ .lg-check__box { outline: 2px solid var(--orange-lift); outline-offset: 2px; }

.lg-link {
    position: relative;
    font-size: 0.88rem;
    color: var(--orange-lift);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 0 100%;
    transition: background-size 240ms var(--ease), color 160ms var(--ease);
}

.lg-link:hover,
.lg-link:focus-visible { background-size: 100% 1px; color: #ffa763; }

.lg-hint {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: right;
}

/* primary button */
.lg-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 3.4rem;
    padding: 0 1.25rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #f26a08 0%, var(--orange) 55%, var(--orange-deep) 100%);
    border: 0;
    border-radius: var(--radius-s);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 10px 26px rgba(229, 98, 0, 0.26), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), filter 180ms var(--ease);
}

/* directional highlight that eases across on hover */
.lg-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
    transform: translateX(-70%);
    transition: transform 700ms var(--ease);
}

.lg-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 14px 30px rgba(229, 98, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.lg-btn:hover::before { transform: translateX(70%); }
.lg-btn:active { transform: scale(0.98); filter: brightness(0.98); }

.lg-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.lg-btn__arrow {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    transition: transform 220ms var(--ease);
}

.lg-btn__arrow svg { width: 18px; height: 18px; }
.lg-btn:hover .lg-btn__arrow { transform: translateX(3px); }

.lg-btn__busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.95rem;
}

.lg-btn__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
}

.lg-btn.is-busy .lg-btn__spinner { animation: lgSpin 0.75s linear infinite; }

@keyframes lgSpin { to { transform: rotate(360deg); } }

.lg-btn.is-busy { pointer-events: none; filter: none; transform: none; }
.lg-btn.is-busy .lg-btn__label,
.lg-btn.is-busy .lg-btn__arrow { opacity: 0; transform: translateY(-6px); transition: opacity 160ms, transform 160ms; }
.lg-btn.is-busy .lg-btn__busy { opacity: 1; transform: translateY(0); }

.lg-card__access {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 1.4rem 0 0;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.lg-card__access svg { width: 13px; height: 13px; }

.lg-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1.75rem;
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
    opacity: 0;
    animation: lgFade 600ms var(--ease) 800ms forwards;
}

.lg-foot__sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted-2);
}

/* ---------- 8. responsive ---------- */

/* Narrow desktops: give the form a little more room */
@media (min-width: 1024px) and (max-width: 1279px) {
    .lg { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
    .lg-panel { padding-left: 28px; padding-right: 28px; }
    .lg-card { padding: 2rem 1.75rem 1.6rem; }
    .lg-meta { flex-wrap: wrap; row-gap: 10px; }
    .lg-hint { text-align: left; }
}

/* Short desktop viewports: tighten the hero vertically */
@media (min-width: 1024px) and (max-height: 760px) {
    .lg-hero__inner { padding-top: 22px; padding-bottom: 22px; }
    .lg-bp { margin: 1vh 0; min-height: 120px; }
    .lg-brand__logo { width: 112px; }
    .lg-copy__title { font-size: clamp(2rem, 3.6vw, 3rem); }
    .lg-copy__sub { margin-top: 12px; }
    .lg-progress { margin-top: 18px; }
    .lg-status { margin-top: 16px; padding-top: 12px; }
}

/* Tablet and below: single column, the visual becomes an atmospheric backdrop */
@media (max-width: 1023px) {
    .lg { display: block; }

    .lg-hero {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    /* only the drawing survives on small screens, as a faint backdrop */
    .lg-hero__inner { padding: 0; min-height: 0; }
    .lg-brand, .lg-copy, .lg-status { display: none; }
    .lg-bp { position: absolute; left: 0; right: 0; top: 0; bottom: 34%; margin: 0; padding: 0 4%; opacity: 0.3; }
    .lg-bp__structure { animation: none; opacity: 1; }
    .lg-hero::after { background: linear-gradient(180deg, transparent 30%, var(--ink) 100%); }

    .lg-hero__light { display: none; }

    .lg-hero__grid { opacity: 0; animation: lgFade 1200ms var(--ease) 100ms forwards; }

    /* the hero inner is hidden, so the blueprint is re-homed by the panel's own copy */
    .lg-panel {
        position: relative;
        z-index: 1;
        min-height: 100vh;
        min-height: 100svh;
        padding: 24px 16px 20px;
        border-left: 0;
        background: transparent;
    }

    .lg-panel::before {
        /* faint drawing behind the card, clipped to the top of the viewport */
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(229, 98, 0, 0.05), transparent 35%, var(--ink) 100%);
    }

    .lg-card { padding: 2rem 1.5rem 1.6rem; max-width: 28rem; }
    .lg-card__logo { width: 6.5rem; }
    .lg-card__head { margin: 1.25rem 0 1.25rem; }
    .lg-card__title { font-size: 1.5rem; }
    .lg-foot { margin-top: 1.25rem; }
}

@media (max-width: 480px) {
    .lg-panel { padding: 16px 14px 16px; justify-content: flex-start; }
    .lg-card { padding: 1.6rem 1.15rem 1.3rem; border-radius: 16px; margin-top: 4px; }
    .lg-card__logo { width: 5.75rem; }
    .lg-card__head { margin: 1rem 0 1.1rem; }
    .lg-card__title { font-size: 1.4rem; }
    .lg-card__sub { font-size: 0.86rem; }
    .lg-field__input { height: 3.4rem; }
    .lg-meta { flex-wrap: wrap; row-gap: 10px; }
    .lg-hint { text-align: left; }
    .lg-card__access { margin-top: 1.1rem; }
    .lg-foot { flex-wrap: wrap; justify-content: center; gap: 8px 10px; text-align: center; font-size: 0.6rem; }
}

@media (max-width: 340px) {
    .lg-card { padding: 1.3rem 0.9rem 1.1rem; }
    .lg-card__logo { width: 5rem; }
}

/* landscape phones */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1023px) {
    .lg-panel { padding: 12px 16px; justify-content: flex-start; }
    .lg-card { padding: 1.2rem 1.4rem 1rem; }
    .lg-card__logo { width: 4.5rem; }
    .lg-card__head { margin: 0.75rem 0 0.9rem; }
    .lg-card__title { font-size: 1.3rem; }
    .lg-field { margin-bottom: 0.7rem; }
    .lg-field__input { height: 3.2rem; }
    .lg-meta { margin: 0.2rem 0 0.9rem; }
    .lg-btn { height: 3rem; }
    .lg-card__access { margin-top: 0.9rem; }
    .lg-foot { margin-top: 0.8rem; }
}

/* ---------- 9. lite / reduced motion ---------- */

/* Paused by auth-login.js when the tab is hidden */
.lg-hero.is-paused *,
.lg-hero.is-paused *::before,
.lg-hero.is-paused *::after,
.lg-hero.is-paused::before,
.lg-hero.is-paused::after { animation-play-state: paused !important; }

/* Lite devices (touch, small, low memory): no parallax, no light, no loops.
   The blueprint is still drawn once; the looping decorations are stopped. */
.lg-lite .lg-hero__grid,
.lg-lite .lg-bp__structure,
.lg-lite .lg-bp__details { transform: none; transition: none; }
.lg-lite .lg-hero__grid::before { animation: none; }
.lg-lite .lg-hero__light { display: none; }
.lg-lite .lg-bp__point { animation: none; }
.lg-lite .lg-bp__ring { animation: none; opacity: 0; }
.lg-lite .lg-bp__node { transition: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .lg-hero__grid,
    .lg-brand__logo,
    .lg-brand__label,
    .lg-copy__kicker,
    .lg-copy__title,
    .lg-copy__sub,
    .lg-progress,
    .lg-progress li,
    .lg-progress li::before,
    .lg-status,
    .lg-bp__s6,
    .lg-bp__bubbles circle,
    .lg-bp__bubbles text,
    .lg-bp__structure,
    .lg-card,
    .lg-card > *,
    .lg-form > *,
    .lg-field__error,
    .lg-foot {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }

    .lg-progress li { color: var(--text-2); }
    .lg-progress li::before { border-color: var(--orange); background: var(--orange); transform: rotate(45deg) !important; }
    .lg-bp__structure { opacity: 0.78 !important; }
    .lg-bp__svg path[pathLength] { animation: none !important; stroke-dashoffset: 0 !important; }
    .lg-hero__grid::before,
    .lg-bp__point,
    .lg-bp__ring,
    .lg-status__dot { animation: none !important; }
    .lg-bp__ring { opacity: 0; }
    .lg-status__dot { opacity: 1; }
    .lg-hero__light { display: none; }
    .is-failed .lg-form { animation: none !important; }
    .lg-card.is-busy { transform: none; }
    .lg-btn, .lg-btn::before, .lg-btn__arrow, .lg-link, .lg-field__label, .lg-field__line, .lg-field__icon {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Sign-in code screen (auth/verify-code.blade.php)
   Everything below is scoped to classes that only that page uses, so the
   sign-in page itself renders exactly as before.
   ============================================================ */

/* the card has more children here than on the sign-in page */
.lg-card--verify > :nth-child(6) { animation-delay: 560ms; }
.lg-card--verify > :nth-child(7) { animation-delay: 600ms; }
.lg-card--verify > :nth-child(8) { animation-delay: 640ms; }
.lg-card--verify > :nth-child(9) { animation-delay: 680ms; }

.lg-verify__step {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0.75rem;
    font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange-lift);
}

.lg-verify__pip {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--orange);
}

.lg-verify__pip.is-now { background: var(--orange-lift); box-shadow: 0 0 8px rgba(229, 98, 0, 0.55); margin-right: 4px; }

.lg-verify__email { color: var(--text); font-weight: 600; }

.lg-notice--warn {
    color: #f0c07a;
    background: rgba(183, 121, 31, 0.12);
    border-color: rgba(183, 121, 31, 0.42);
}

/* the code field: one input, large, grouped digits */
.lg-code__label {
    display: block;
    margin: 0 0 0.5rem;
    font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 200ms var(--ease);
}

.lg-code:focus-within .lg-code__label { color: var(--orange-lift); }
.lg-code.is-invalid .lg-code__label { color: var(--err); }

.lg-field__input.lg-code__input {
    height: 4.2rem;
    padding: 0 1rem;
    text-align: center;
    font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: max(16px, 1.85rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
}

.lg-code__input::placeholder { color: rgba(255, 255, 255, 0.16); }

/* resend: a POST, so a button that reads as a link */
.lg-verify__resend { margin: 1.05rem 0 0; text-align: center; }

.lg-linkbtn {
    padding: 6px 2px;
    font: inherit;
    font-size: 0.86rem;
    color: var(--orange-lift);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 139, 51, 0.4);
    text-underline-offset: 3px;
    transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}

.lg-linkbtn:hover { color: #ffa763; text-decoration-color: currentColor; }

.lg-verify__hint {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--muted);
}

.lg-card--verify .lg-card__access { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 0.86rem; }

.lg-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- code refused: the red "denied" sequence, played once ---------- */
.lg-card--verify.is-denied {
    animation: lgCardIn 560ms var(--ease) 250ms forwards, lgDenied 1200ms var(--ease) 820ms forwards;
}

.lg-card--verify.is-denied::before {
    background: linear-gradient(90deg, transparent, rgba(255, 100, 90, 0.95), transparent);
}

@keyframes lgDenied {
    0%   { border-color: var(--line); }
    18%  { border-color: rgba(255, 105, 95, 0.85);
           box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), 0 0 0 4px rgba(255, 90, 80, 0.16), 0 0 54px rgba(255, 70, 60, 0.26); }
    100% { border-color: var(--err-line);
           box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 90, 80, 0.08); }
}

.lg-card--verify.is-denied .lg-code__input { animation: lgDeniedField 900ms ease-out 820ms 1; }

@keyframes lgDeniedField {
    0%   { background-color: var(--field); }
    20%  { background-color: rgba(255, 80, 70, 0.16); }
    100% { background-color: var(--field); }
}

/* ---------- server confirmed the code: the welcome sequence ---------- */
.lg-card > .lg-welcome {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 2rem;
    text-align: center;
    border-radius: inherit;
    background:
        radial-gradient(110% 80% at 50% 38%, rgba(229, 98, 0, 0.17), transparent 62%),
        var(--surface);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
    transition: opacity 380ms var(--ease), visibility 0s linear 380ms;
}

.lg-card.is-verified > .lg-welcome {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 380ms var(--ease), visibility 0s;
}

.lg-card.is-verified { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(229, 98, 0, 0.28), 0 0 70px rgba(229, 98, 0, 0.16); }
.lg-card.is-verified::before { background: linear-gradient(90deg, transparent, rgba(134, 217, 171, 0.95), transparent); }

.lg-welcome__mark { width: 78px; height: 78px; margin-bottom: 0.9rem; opacity: 0; }

.lg-welcome__ring {
    fill: none;
    stroke: var(--orange);
    stroke-width: 2.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transform: rotate(-90deg);
    transform-origin: 32px 32px;
}

.lg-welcome__tick {
    fill: none;
    stroke: #fff;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.lg-welcome__kicker {
    margin: 0;
    font-family: "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ok);
    opacity: 0;
}

.lg-welcome__title { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; opacity: 0; }
.lg-welcome__sub   { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--muted); opacity: 0; }

.is-verified .lg-welcome__mark   { animation: lgPop 640ms cubic-bezier(0.2, 1.35, 0.4, 1) 120ms forwards; }
.is-verified .lg-welcome__ring   { animation: lgTrace 620ms var(--ease) 160ms forwards; }
.is-verified .lg-welcome__tick   { animation: lgTrace 380ms var(--ease) 640ms forwards; }
.is-verified .lg-welcome__kicker { animation: lgRise 480ms var(--ease) 720ms forwards; }
.is-verified .lg-welcome__title  { animation: lgRise 480ms var(--ease) 800ms forwards; }
.is-verified .lg-welcome__sub    { animation: lgRise 480ms var(--ease) 900ms forwards; }

@keyframes lgPop   { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes lgTrace { to { stroke-dashoffset: 0; } }

/* the drawing behind acknowledges it too */
.lg-verified .lg-bp__structure { filter: drop-shadow(0 0 6px rgba(229, 98, 0, 0.45)); transition: filter 700ms var(--ease); }
.lg-verified .lg-status__dot { background: var(--orange-lift); box-shadow: 0 0 10px rgba(229, 98, 0, 0.7); }

@media (prefers-reduced-motion: reduce) {
    /* the general rule above makes every card child visible; these two must
       still wait for their moment */
    .lg-card > .lg-welcome { opacity: 0 !important; }
    .lg-card.is-verified > .lg-welcome { opacity: 1 !important; transition: none; }

    .lg-welcome__mark,
    .lg-welcome__kicker,
    .lg-welcome__title,
    .lg-welcome__sub { animation: none !important; opacity: 1 !important; transform: none !important; }
    .lg-welcome__ring,
    .lg-welcome__tick { animation: none !important; stroke-dashoffset: 0 !important; }

    .lg-card--verify.is-denied { border-color: var(--err-line); }
    .lg-card--verify.is-denied .lg-code__input { animation: none !important; }
    .lg-verified .lg-bp__structure { transition: none; }
}