/*
 * GadVerify's animated brand illustration (resources/views/partials/
 * gv-device-illustration.blade.php). Replaces the static hero photo and
 * the bottom CTA banner's phone photos with a hand-built SVG/CSS loop --
 * no images, no video, no animation library.
 *
 * Six stages crossfade in place on one shared 18s timeline (device ->
 * verify -> identity -> ownership -> business management -> final
 * state -> loops back to device), driven entirely by CSS keyframes on
 * each .gvi-stage-N group's opacity. The device silhouette itself
 * (.gvi-device) never fades -- it's the one constant the loop reads
 * against. A handful of elements layer a SECOND, faster, continuously-
 * looping animation on top (the scan beam's sweep, the flow-lines'
 * dash-flow) via comma-separated `animation` shorthand, so they're only
 * ever visible during their own stage's on-window but keep moving
 * within it.
 *
 * Stage timeline (each slice is 1/6 of 18s = 3s):
 *   0.0% –16.7%  Stage 1  Device identity data (IMEI / Serial / Fingerprint)
 *  16.7% –33.3%  Stage 2  Verification scan
 *  33.3% –50.0%  Stage 3  Identity (ID card + shield)
 *  50.0% –66.7%  Stage 4  Ownership transfer
 *  66.7% –83.3%  Stage 5  Business management (inventory/device/sale/
 *                          customer/POS/ownership tiles)
 *  83.3%–100.0%  Stage 6  Final state ("Device Verified" / "Ownership
 *                          Verified" + shield), fades back into stage 1.
 */

.gvi {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.gvi text {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    fill: rgba(255, 255, 255, 0.8);
}

/* -----------------------------------------------------------------------
   Ambient glow + persistent device
----------------------------------------------------------------------- */

.gvi-ambient-glow {
    fill: url(#gvi-screen-gradient);
    opacity: 0.25;
    animation: gvi-breathe 6s ease-in-out infinite;
    transform-origin: 190px 190px;
}

.gvi-device-shadow { fill: rgba(0, 0, 0, 0.35); filter: blur(6px); }

.gvi-device-body {
    fill: rgba(255, 255, 255, 0.045);
    stroke: color-mix(in srgb, var(--gv-primary) 55%, white 15%);
    stroke-width: 1.4;
}

.gvi-device-camera { fill: rgba(255, 255, 255, 0.5); }
.gvi-device-home { fill: rgba(255, 255, 255, 0.18); }

/* -----------------------------------------------------------------------
   Stage groups -- opacity keyframed on the shared 18s timeline
----------------------------------------------------------------------- */

.gvi-stage { opacity: 0; }

.gvi-stage-1 { animation: gvi-stage-1-anim 18s ease-in-out infinite; }
.gvi-stage-2 { animation: gvi-stage-2-anim 18s ease-in-out infinite; }
.gvi-stage-3 { animation: gvi-stage-3-anim 18s ease-in-out infinite; }
.gvi-stage-4 { animation: gvi-stage-4-anim 18s ease-in-out infinite; }
.gvi-stage-5 { animation: gvi-stage-5-anim 18s ease-in-out infinite; }
.gvi-stage-6 { animation: gvi-stage-6-anim 18s ease-in-out infinite; }

@keyframes gvi-stage-1-anim {
    0%      { opacity: 0; }
    1.5%    { opacity: 1; }
    15%     { opacity: 1; }
    16.7%   { opacity: 0; }
    100%    { opacity: 0; }
}
@keyframes gvi-stage-2-anim {
    0%, 16.7%   { opacity: 0; }
    18.2%       { opacity: 1; }
    31.8%       { opacity: 1; }
    33.3%       { opacity: 0; }
    100%        { opacity: 0; }
}
@keyframes gvi-stage-3-anim {
    0%, 33.3%   { opacity: 0; }
    34.9%       { opacity: 1; }
    48.5%       { opacity: 1; }
    50%         { opacity: 0; }
    100%        { opacity: 0; }
}
@keyframes gvi-stage-4-anim {
    0%, 50%     { opacity: 0; }
    51.5%       { opacity: 1; }
    65.2%       { opacity: 1; }
    66.7%       { opacity: 0; }
    100%        { opacity: 0; }
}
@keyframes gvi-stage-5-anim {
    0%, 66.7%   { opacity: 0; }
    68.2%       { opacity: 1; }
    81.8%       { opacity: 1; }
    83.3%       { opacity: 0; }
    100%        { opacity: 0; }
}
@keyframes gvi-stage-6-anim {
    0%, 83.3%   { opacity: 0; }
    84.9%       { opacity: 1; }
    98.5%       { opacity: 1; }
    100%        { opacity: 0; }
}

/* -----------------------------------------------------------------------
   Stage 1 -- device identity data
----------------------------------------------------------------------- */

.gvi-lead-line { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.gvi-label { font-size: 7px; font-weight: 600; letter-spacing: 0.06em; fill: rgba(255, 255, 255, 0.55); }
.gvi-value { font-size: 8px; font-weight: 600; fill: var(--gv-primary); }
.gvi-fingerprint path { fill: none; stroke: var(--gv-success); stroke-width: 1.4; stroke-linecap: round; }

/* -----------------------------------------------------------------------
   Stage 2 -- verification scan
----------------------------------------------------------------------- */

.gvi-scan-beam {
    filter: blur(0.4px);
    animation: gvi-beam-sweep 2.1s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes gvi-beam-sweep {
    0%   { transform: translateY(0); opacity: 0.9; }
    50%  { transform: translateY(172px); opacity: 0.9; }
    100% { transform: translateY(0); opacity: 0.9; }
}

.gvi-check-chip circle { fill: color-mix(in srgb, var(--gv-success) 22%, transparent); stroke: var(--gv-success); stroke-width: 1.4; }
.gvi-check-chip path { fill: none; stroke: var(--gv-success); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gvi-check-chip {
    animation: gvi-chip-pop 2.1s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.gvi-check-chip-delay { animation-delay: 0.5s; }
@keyframes gvi-chip-pop {
    0%, 15%  { opacity: 0; transform: scale(0.6); }
    30%      { opacity: 1; transform: scale(1); }
    85%      { opacity: 1; transform: scale(1); }
    100%     { opacity: 0; transform: scale(1); }
}

/* -----------------------------------------------------------------------
   Stage 3 -- identity
----------------------------------------------------------------------- */

.gvi-flow-line {
    fill: none;
    stroke: color-mix(in srgb, var(--gv-violet) 60%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 4 6;
    animation: gvi-flow-dash 1.4s linear infinite;
}
@keyframes gvi-flow-dash { to { stroke-dashoffset: -20; } }

.gvi-id-card rect { fill: rgba(255, 255, 255, 0.06); stroke: color-mix(in srgb, var(--gv-violet) 50%, white 10%); stroke-width: 1.2; }
.gvi-id-avatar { fill: var(--gv-violet); opacity: 0.7; }
.gvi-id-line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; stroke-linecap: round; }

/* -----------------------------------------------------------------------
   Stage 4 -- ownership transfer
----------------------------------------------------------------------- */

.gvi-owner-node circle { fill: rgba(255, 255, 255, 0.05); stroke: var(--gv-primary); stroke-width: 1.4; }
.gvi-owner-node-to circle { stroke: var(--gv-success); }
.gvi-owner-glyph { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.3; stroke-linecap: round; }

.gvi-transfer-dot { fill: var(--gv-success); filter: drop-shadow(0 0 4px var(--gv-success)); }

/* -----------------------------------------------------------------------
   Stage 5 -- business management tiles
----------------------------------------------------------------------- */

.gvi-tile-bg { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.gvi-tile-icon { fill: none; stroke: var(--gv-primary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.gvi-tile {
    animation: gvi-tile-pop 18s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.gvi-tile-2 { animation-delay: 0.12s; }
.gvi-tile-3 { animation-delay: 0.24s; }
.gvi-tile-4 { animation-delay: 0.36s; }
.gvi-tile-5 { animation-delay: 0.48s; }
.gvi-tile-6 { animation-delay: 0.6s; }
@keyframes gvi-tile-pop {
    0%, 66.7%   { opacity: 0; transform: scale(0.7); }
    69.5%       { opacity: 1; transform: scale(1); }
    81.8%       { opacity: 1; transform: scale(1); }
    83.3%       { opacity: 0; transform: scale(1); }
    100%        { opacity: 0; transform: scale(1); }
}

/* -----------------------------------------------------------------------
   Stage 6 -- final state
----------------------------------------------------------------------- */

.gvi-shield-outline { fill: color-mix(in srgb, var(--gv-success) 12%, transparent); stroke: var(--gv-success); stroke-width: 2; }
.gvi-shield-check { fill: none; stroke: var(--gv-success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--gv-success)); }

.gvi-shield {
    animation: gvi-shield-pulse 2.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes gvi-shield-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gv-success) 50%, transparent)); }
    50%      { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gv-success) 70%, transparent)); }
}

.gvi-final-text { font-size: 13px; font-weight: 700; fill: #fff; }
.gvi-final-text-2 { fill: var(--gv-success); }

/* -----------------------------------------------------------------------
   Breathing ambient glow (continuous, independent of the stage timeline)
----------------------------------------------------------------------- */

@keyframes gvi-breathe {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50%      { opacity: 0.32; transform: scale(1.04); }
}

/* -----------------------------------------------------------------------
   Compact variant -- bottom CTA banner. Smaller, simpler: device +
   verify + final state only (no identity/ownership/dashboard stages,
   which would be illegible at this size) on a shorter 9s loop.
----------------------------------------------------------------------- */

.gvi--compact { width: 100%; height: 100%; }
.gvi--compact .gvi-stage-3,
.gvi--compact .gvi-stage-4,
.gvi--compact .gvi-stage-5 { display: none; }

.gvi--compact .gvi-stage-1 { animation-duration: 9s; animation-name: gvi-compact-stage-1; }
.gvi--compact .gvi-stage-2 { animation-duration: 9s; animation-name: gvi-compact-stage-2; }
.gvi--compact .gvi-stage-6 { animation-duration: 9s; animation-name: gvi-compact-stage-6; }
.gvi--compact .gvi-scan-beam { animation-duration: 1.6s; }
.gvi--compact .gvi-check-chip { animation-duration: 1.6s; }

@keyframes gvi-compact-stage-1 {
    0%    { opacity: 0; }
    3%    { opacity: 1; }
    28%   { opacity: 1; }
    33.3% { opacity: 0; }
    100%  { opacity: 0; }
}
@keyframes gvi-compact-stage-2 {
    0%, 33.3% { opacity: 0; }
    36.3%     { opacity: 1; }
    63.7%     { opacity: 1; }
    66.7%     { opacity: 0; }
    100%      { opacity: 0; }
}
@keyframes gvi-compact-stage-6 {
    0%, 66.7% { opacity: 0; }
    69.7%     { opacity: 1; }
    97%       { opacity: 1; }
    100%      { opacity: 0; }
}

/* -----------------------------------------------------------------------
   Motion / performance
----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .gvi * { animation: none !important; }
    .gvi-ambient-glow { opacity: 0.25; }
    .gvi-stage { opacity: 0; }
    /* Static resting frame: the device, already verified -- no
       mid-sequence state (a frozen scan beam or half-drawn ID card
       would read as broken, not paused). */
    .gvi-stage-1,
    .gvi-stage-6 { opacity: 1; }
    .gvi-shield-outline,
    .gvi-shield-check { filter: none; }
}