/* ==========================================================================
   LIVE FLOW DIAGRAM  (stand-alone, reusable)
   --------------------------------------------------------------------------
   Markup:  resources/views/partials/flow-diagram.blade.php
   Script:  public/auth/flow.js
   Usage:   @include('partials.flow-diagram')   (loads this file by itself)

   What it shows (explains the product at a glance):

     YOUR MARKETPLACES  ──•──▶  BRAND HUB  ──•──▶  DONE AUTOMATICALLY
     (channel pills)            (logo)             (orders / stock / order mgmt)
                 + a live ticker line underneath

   Structure:
   .zf-scene ................ outer box; flow.js scales the diagram to fit it
   └── .zf-wrap ............. diagram + captions + ticker, scaled as one unit
       ├── .zf-captions ..... "Your marketplaces / Brand / Done automatically"
       ├── .zf-flow ......... the fixed 760 x 440 diagram
       │   ├── <svg> ........ connector lines + moving dots
       │   ├── .zf-node ..... marketplace pill (left)
       │   ├── .zf-hub ...... logo hub (centre)
       │   └── .zf-out ...... result card (right)
       └── .zf-ticker ....... "New order #... from ..." live line

   Notes:
   - Designed for a DARK background (white text on the pills/ticker).
   - All classes start with "zf-" so they never clash with the host page.
   - Everything sits on a fixed 760 x 440 canvas with pixel positions, so
     the SVG lines meet the pills/cards exactly. If you move a pill/card,
     update the matching <path> in the partial.
   - Colours can be overridden from the host page, e.g.
         .zf-scene { --zf-primary: #0EA5E9; }

   Contents:
     1. Colour tokens
     2. Scene + scaling
     3. Captions + canvas + lines
     4. Marketplace pills (left)
     5. Hub (centre)
     6. Result cards (right)
     7. Ticker
     8. Animations
     9. Reduced motion
    10. Compact variant
   ========================================================================== */


/* ==========================================================================
   1. COLOUR TOKENS (scoped to the diagram, override on .zf-scene)
   ========================================================================== */
.zf-scene {
    --zf-primary: #5145E5;         /* brand indigo: hub, order icon */
    --zf-primary-soft: #EEEDFD;    /* pale indigo icon background */
    --zf-accent: #22D3EE;          /* cyan: outgoing lines/dots, highlights */
    --zf-success: #16A34A;         /* green: order management icon */
    --zf-text: #16152B;            /* text inside the white result cards */
    --zf-muted: #6B6A85;           /* small grey text in the result cards */
}


/* ==========================================================================
   2. SCENE + SCALING
   flow.js sets --zf-scale so the 760px-wide diagram fits the scene:
     data-fit="width"   (default) scale to the available width; the scene's
                        height is set to match. Works in any normal layout.
     data-fit="contain" scale to fit BOTH width and height of the scene;
                        use when the parent gives the scene a fixed height
                        (e.g. a grid cell or flex child).
   If the diagram would be under 40% size it hides (.is-tiny): unreadable.
   ========================================================================== */
.zf-scene {
    --zf-scale: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;          /* decorative: never blocks clicks */
    font-family: inherit;
}
.zf-scene[data-fit="contain"] { height: 100%; }
.zf-scene.is-tiny .zf-wrap { display: none; }

/* Diagram + captions + ticker, scaled as one unit */
.zf-wrap {
    flex-shrink: 0;
    width: 760px;
    transform: scale(var(--zf-scale));
    transform-origin: center;
}
/* In width mode the scene is exactly as tall as the scaled diagram,
   so scale from the top-left corner instead of the centre. */
.zf-scene[data-fit="width"] { align-items: flex-start; justify-content: flex-start; }
.zf-scene[data-fit="width"] .zf-wrap { transform-origin: top left; }


/* ==========================================================================
   3. CAPTIONS + CANVAS + LINES
   ========================================================================== */

/* Column captions above the diagram: left / centre / right */
.zf-captions {
    position: relative;
    height: 30px;
    font-size: 13px;               /* text is sized up because the diagram is usually scaled down */
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}
.zf-captions span { position: absolute; top: 0; white-space: nowrap; }
.zf-captions span:nth-child(1) { left: 0; }
.zf-captions span:nth-child(2) { left: 380px; transform: translateX(-50%); }
.zf-captions span:nth-child(3) { right: 0; }

/* The 760 x 440 diagram area */
.zf-flow {
    position: relative;
    width: 760px;
    height: 440px;
}

/* Connector-line SVG.
   ">" = only the direct child svg. Without it this rule would also hit
   Font Awesome icons (they are <svg> too) and blow them up to full size. */
.zf-flow > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.zf-line {
    fill: none;
    stroke: rgba(143, 134, 255, .28);
    stroke-width: 1.5;
    stroke-dasharray: 3 5;
}
.zf-line.is-out { stroke: rgba(34, 211, 238, .3); }      /* outgoing lines: cyan */
.zf-packet { fill: #fff; }                                 /* incoming order dot */
.zf-packet.is-out { fill: var(--zf-accent); }             /* outgoing result dot */


/* ==========================================================================
   4. MARKETPLACE PILLS (left; 6 rows, 74px apart, right edge at x = 176)
   ========================================================================== */
.zf-node {
    position: absolute;
    left: 0;
    width: 176px;
    height: 50px;
    transform: translateY(-50%);   /* "top" is the pill's vertical centre */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(8px);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.zf-node img {
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    flex-shrink: 0;
}
/* Lights up while "its" order is shown in the ticker (set by flow.js) */
.zf-node.is-active {
    border-color: rgba(34, 211, 238, .7);
    background: rgba(34, 211, 238, .14);
    box-shadow: 0 0 24px rgba(34, 211, 238, .35);
    transition: all .3s ease;
}


/* ==========================================================================
   5. HUB (centre; centre point 380, 220; 124 x 124)
   ========================================================================== */
.zf-hub {
    position: absolute;
    left: 318px;                   /* 380 - 62 */
    top: 158px;                    /* 220 - 62 */
    width: 124px;
    height: 124px;
    border-radius: 32px;
    background: linear-gradient(145deg, #6D5DF6, var(--zf-primary) 60%, #3B31C7);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 20px 60px rgba(81, 69, 229, .6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.zf-hub img {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(10, 5, 50, .4);
}
.zf-hub small {                    /* "● Live sync" under the logo */
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}
.zf-hub small i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
}
/* Two rings expanding out of the hub, like a radar ping */
.zf-hub::before,
.zf-hub::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    border: 2px solid rgba(143, 134, 255, .6);
    animation: zf-ring 2.8s ease-out infinite;
}
.zf-hub::after { animation-delay: 1.4s; }


/* ==========================================================================
   6. RESULT CARDS (right; 3 rows at y = 70 / 220 / 370, left edge at x = 550)
   ========================================================================== */
.zf-out {
    position: absolute;
    right: 0;
    width: 210px;
    height: 84px;
    transform: translateY(-50%);   /* "top" is the card's vertical centre */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 16px;
    background: #fff;
    color: var(--zf-text);
    box-shadow: 0 16px 40px rgba(5, 3, 30, .45);
}
.zf-out-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.zf-out-icon.is-orders { background: var(--zf-primary-soft); color: var(--zf-primary); }
.zf-out-icon.is-stock  { background: rgba(34, 211, 238, .15); color: #0E7490; }
.zf-out-icon.is-manage { background: rgba(22, 163, 74, .12); color: var(--zf-success); }
.zf-out small {
    display: block;
    font-size: 13px;
    color: var(--zf-muted);
}
.zf-out b {
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.3px;
    white-space: nowrap;
}
/* Small pop when the order counter goes up (class toggled by flow.js) */
.zf-out b.is-bump { animation: zf-bump .4s ease; }


/* ==========================================================================
   7. TICKER (under the diagram)
   One line describing the latest example event. flow.js swaps the channel
   logo + text every few seconds with a quick fade.
   ========================================================================== */
.zf-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(8px);
    font-size: 16px;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
}
.zf-ticker img {
    width: 30px;
    height: 30px;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
}
.zf-ticker b { color: #fff; }
.zf-ticker em {                    /* "→ stock updated on N channels" part */
    font-style: normal;
    color: var(--zf-accent);
}
.zf-ticker-body,
.zf-ticker img { transition: opacity .25s ease; }
.zf-ticker.is-swapping .zf-ticker-body,
.zf-ticker.is-swapping img { opacity: 0; }


/* ==========================================================================
   8. ANIMATIONS
   ========================================================================== */

/* Hub rings: start at the hub's edge, grow outwards and fade away */
@keyframes zf-ring {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* Order counter pop when the number goes up */
@keyframes zf-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); color: var(--zf-primary); }
    100% { transform: scale(1); }
}


/* ==========================================================================
   9. REDUCED MOTION
   Visitors with "reduce motion" turned on get a still diagram. flow.js also
   skips the ticker and freezes the moving dots part-way along their lines.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .zf-hub::before,
    .zf-hub::after,
    .zf-out b.is-bump { animation: none; }
}


/* ==========================================================================
   10. COMPACT VARIANT  (@include(..., ['variant' => 'compact']))
   Marketplaces -> round hub only. Styled like light "store" cards so it
   fits a host page that shows its own feature cards next to the hub.
   Canvas 456 x 440: pills x 0-200 (60 tall), hub circle centre (400, 220)
   with a 112px diameter, label pill hanging under the hub.
   ========================================================================== */

/* White dashed lines, slowly flowing towards the hub */
.zf-scene.is-compact .zf-line {
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 7;
    animation: zf-dash 1.2s linear infinite;
}

/* Marketplace card: white, logo tile, name + green "Synced" line */
.zf-scene.is-compact .zf-node {
    width: 200px;
    height: 60px;
    gap: 9px;
    padding: 0 10px 0 8px;         /* tight, so long names like "WooCommerce" fit */
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: none;
    color: var(--zf-text);
    box-shadow: 0 16px 32px -16px rgba(20, 12, 70, .6);
}
.zf-scene.is-compact .zf-node img {
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 10px;
    background: #f5f5fb;
}
.zf-node-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.zf-node-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17.5px;             /* sized up (the diagram is usually scaled down), but small enough for "WooCommerce" */
    font-weight: 700;
}
.zf-node-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--zf-muted);
}
.zf-node-meta::before {            /* green "synced" dot */
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
}
/* Highlighted card (cycled by flow.js): cyan ring instead of the dark-theme glow */
.zf-scene.is-compact .zf-node.is-active {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .85), 0 16px 32px -12px rgba(20, 12, 70, .6);
}

/* Round hub with a white border; the logo fills the circle */
.zf-scene.is-compact .zf-hub {
    left: 344px;                   /* 400 - 56 */
    top: 164px;                    /* 220 - 56 */
    width: 112px;
    height: 112px;
    padding: 0;
    border-radius: 50%;
    border: 5px solid #fff;
    background: linear-gradient(140deg, #7d5fff, var(--zf-primary));
    box-shadow: 0 18px 40px -14px rgba(91, 61, 245, .9);
}
.zf-scene.is-compact .zf-hub img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: none;
}
.zf-scene.is-compact .zf-hub::before,
.zf-scene.is-compact .zf-hub::after {
    inset: -5px;
    border-radius: 50%;
    border-color: rgba(255, 255, 255, .8);
}

/* "One platform" pill hanging under the hub (doesn't move the hub's centre) */
.zf-hub-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: var(--zf-primary);
    background: #fff;
    box-shadow: 0 10px 22px -12px rgba(20, 12, 70, .6);
}

@keyframes zf-dash {
    to { stroke-dashoffset: -13; }
}

@media (prefers-reduced-motion: reduce) {
    .zf-scene.is-compact .zf-line { animation: none; }
}