/* ── Add to Home Screen demo ──────────────────────────────────────
   Pairs with install-demo.js / install-demo.blade.php. Framework-free CSS:
   paste it into the app's main stylesheet (or import it) as-is.

   Theme by overriding the custom properties on `.install-demo` (or any
   ancestor). Everything tinted derives from --idm-accent.

   One 6s cycle is shared by the SVG (`idm-*`) AND the step numbers in the
   text list (`.install-step-*`), so the lit number always matches the scene:

     8–32%   step 1 — tap Share / ⋮
     36–64%  step 2 — sheet/menu open, tap the target row
     66–98%  step 3 — home screen, app icon lands

   Base (non-animated) styles are the MOST INFORMATIVE frame — menu open,
   target row highlighted, finger on it — because that is exactly what
   prefers-reduced-motion users see. A static picture, never an empty box.

   Do NOT shorten the .install-step rule to `animation: 6s ease-in-out
   infinite`. A shorthand with no animation name gets rewritten by CSS
   minifiers (Lightning CSS, used by Vite and Tailwind v4) to the defaults —
   0s, once, none — and the numbers silently never move. */

.install-demo {
    --idm-accent: #F5A623;         /* brand colour — override this one */
    --idm-ink: #0b0b0b;
    --idm-body: #1e1e1e;
    --idm-screen: #121212;
    --idm-wallpaper: #0f0f0f;
    --idm-bar: #1b1b1b;
    --idm-panel: #262626;
    --idm-text: rgba(255, 255, 255, 0.88);
}

.install-demo * { transform-box: fill-box; }

.install-demo .idm-body { fill: var(--idm-body); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.5; }
.install-demo .idm-screen { fill: var(--idm-screen); }
.install-demo .idm-wallpaper { fill: var(--idm-wallpaper); }
.install-demo .idm-hero { fill: color-mix(in srgb, var(--idm-accent) 14%, transparent); }
.install-demo .idm-line { fill: rgba(255, 255, 255, 0.08); }
.install-demo .idm-chip { fill: rgba(255, 255, 255, 0.08); }
.install-demo .idm-bar { fill: var(--idm-bar); }
.install-demo .idm-panel { fill: var(--idm-panel); }
.install-demo .idm-grabber { fill: rgba(255, 255, 255, 0.25); }
.install-demo .idm-row-bg { fill: rgba(255, 255, 255, 0.05); }
.install-demo .idm-row { fill: color-mix(in srgb, var(--idm-accent) 22%, transparent); stroke: var(--idm-accent); stroke-width: 1; }
.install-demo .idm-tile { fill: rgba(255, 255, 255, 0.1); }
.install-demo .idm-glow { fill: color-mix(in srgb, var(--idm-accent) 28%, transparent); }
.install-demo .idm-icon-edge { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 0.6; }
.install-demo .idm-dot { fill: rgba(255, 255, 255, 0.85); }
/* System font, NOT `inherit`: the mock imitates the phone's own menus, which
   are always drawn in the system font. Inheriting the page font also broke the
   layout — on a site set in Georgia, "Add to Home Screen" ran past the edge of
   its highlighted row. */
.install-demo .idm-label,
.install-demo .idm-url { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.install-demo .idm-label { fill: var(--idm-text); font-size: 7.5px; font-weight: 600; }
.install-demo .idm-url { fill: rgba(255, 255, 255, 0.55); font-size: 6.5px; }
.install-demo .idm-stroke,
.install-demo .idm-stroke-dim { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.install-demo .idm-stroke { stroke: var(--idm-accent); }
.install-demo .idm-stroke-dim { stroke: rgba(255, 255, 255, 0.35); }
.install-demo .idm-tap { fill: rgba(255, 255, 255, 0.85); }
.install-demo .idm-ring { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.2; }

/* Static frame: menu open, row highlighted, finger on the target row. */
.install-demo .idm-tap-1,
.install-demo .idm-ring,
.install-demo .idm-home { opacity: 0; }

.install-demo .idm-page { animation: idm-page 6s ease-in-out infinite; }
.install-demo .idm-target-1 { transform-origin: center; animation: idm-target 6s ease-in-out infinite; }
.install-demo .idm-sheet { animation: idm-sheet 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.install-demo .idm-menu { transform-origin: 100% 0; animation: idm-menu 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.install-demo .idm-row { animation: idm-row 6s ease-in-out infinite; }
.install-demo .idm-tap { transform-origin: center; }
.install-demo .idm-tap-1 { animation: idm-tap-1 6s ease-in-out infinite; }
.install-demo .idm-tap-2 { animation: idm-tap-2 6s ease-in-out infinite; }
.install-demo .idm-ring { transform-origin: center; }
.install-demo .idm-ring-1 { animation: idm-ring-1 6s ease-out infinite; }
.install-demo .idm-ring-2 { animation: idm-ring-2 6s ease-out infinite; }
.install-demo .idm-home { animation: idm-home 6s ease-in-out infinite; }
.install-demo .idm-app,
.install-demo .idm-app-solo { transform-origin: center; }
.install-demo .idm-app { animation: idm-app 6s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.install-demo .idm-app-solo { animation: idm-app-solo 3.5s cubic-bezier(.34, 1.56, .64, 1) infinite; }

@keyframes idm-page { 0%, 64% { opacity: 1; } 68%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes idm-target { 0%, 10% { transform: scale(1); } 16% { transform: scale(1.35); } 22%, 100% { transform: scale(1); } }
@keyframes idm-sheet {
    0%, 28% { transform: translateY(110px); opacity: 1; }
    37%, 64% { transform: translateY(0); opacity: 1; }
    68%, 94% { transform: translateY(0); opacity: 0; }
    95%, 100% { transform: translateY(110px); opacity: 0; }
}
@keyframes idm-menu {
    0%, 28% { transform: scale(0.4); opacity: 0; }
    35%, 64% { transform: scale(1); opacity: 1; }
    68%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes idm-row { 0%, 44% { opacity: 0; } 50%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes idm-tap-1 {
    0%, 11% { opacity: 0; transform: scale(0.6); }
    15% { opacity: 1; transform: scale(1); }
    20% { opacity: 1; transform: scale(0.78); }
    26% { opacity: 1; transform: scale(1); }
    30%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes idm-tap-2 {
    0%, 41% { opacity: 0; transform: scale(0.6); }
    45% { opacity: 1; transform: scale(1); }
    50% { opacity: 1; transform: scale(0.78); }
    56% { opacity: 1; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes idm-ring-1 { 0%, 19% { opacity: 0; transform: scale(0.5); } 20% { opacity: 0.8; transform: scale(0.6); } 30%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes idm-ring-2 { 0%, 49% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0.8; transform: scale(0.6); } 60%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes idm-home { 0%, 64% { opacity: 0; } 68%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes idm-app {
    0%, 70% { opacity: 0; transform: translateY(-14px) scale(0.3); }
    78% { opacity: 1; transform: translateY(0) scale(1.12); }
    84%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes idm-app-solo {
    0%, 15% { opacity: 0; transform: translateY(-14px) scale(0.3); }
    32% { opacity: 1; transform: translateY(0) scale(1.12); }
    42%, 85% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* Step numbers in the text list — the SAME 6s cycle as the SVG.
   Longhand on purpose; see the header comment. */
.install-step {
    display: inline-block;
    transform-origin: center;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.install-step-1 { animation-name: idm-step-1; }
.install-step-2 { animation-name: idm-step-2; }
.install-step-3 { animation-name: idm-step-3; }

@keyframes idm-step-1 { 0%, 6% { opacity: 0.35; transform: scale(1); } 10%, 30% { opacity: 1; transform: scale(1.3); } 34%, 100% { opacity: 0.35; transform: scale(1); } }
@keyframes idm-step-2 { 0%, 34% { opacity: 0.35; transform: scale(1); } 38%, 62% { opacity: 1; transform: scale(1.3); } 66%, 100% { opacity: 0.35; transform: scale(1); } }
@keyframes idm-step-3 { 0%, 64% { opacity: 0.35; transform: scale(1); } 68%, 94% { opacity: 1; transform: scale(1.3); } 98%, 100% { opacity: 0.35; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .install-demo *,
    .install-step { animation: none !important; }
}

/* ── The sheet around the demo (Miker Pizza) ─────────────────────
   Plain HTML on top of the Flutter canvas, so it works before Flutter
   has painted and needs nothing from the Dart side. */

#install-guide {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background .3s ease;
    font: 15px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #000;
    -webkit-tap-highlight-color: transparent;
}
#install-guide[hidden] { display: none; }
#install-guide.is-open { background: rgba(0, 0, 0, .45); }

#install-guide .ig-sheet {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    overflow-y: auto;
    padding: 22px 20px calc(18px + env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
    transform: translateY(100%);
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}
#install-guide.is-open .ig-sheet { transform: translateY(0); }

#install-guide .ig-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f2f2f2;
    color: #000;
    font: 700 20px/1 system-ui, sans-serif;
    cursor: pointer;
}

#install-guide .ig-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
#install-guide .ig-head img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
#install-guide h2 { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
#install-guide .ig-lead { margin: 4px 0 0; font-size: 13.5px; color: rgba(0, 0, 0, .6); }

#install-guide .ig-body { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
#install-guide .ig-demo { flex-shrink: 0; }
#install-guide ol { min-width: 0; margin: 0; padding: 0; list-style: none; }
#install-guide li { display: flex; gap: 10px; margin: 0 0 12px; font-size: 14.5px; }
#install-guide li:last-child { margin-bottom: 0; }
#install-guide li small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(0, 0, 0, .55); }
#install-guide .ig-alt { font-weight: 400; color: rgba(0, 0, 0, .5); font-size: 13px; }
#install-guide .install-step {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #000;
    color: #F5A623;
    font-weight: 800;
    font-size: 13px;
    line-height: 24px;
    text-align: center;
}
#install-guide .ig-text { margin: 0; min-width: 0; font-size: 14.5px; }

#install-guide .ig-note {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: #FFF4DF;
    font-size: 13px;
    color: rgba(0, 0, 0, .75);
}

#install-guide .ig-primary {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background: #000;
    color: #F5A623;
    font: inherit;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
}
#install-guide .ig-primary:disabled { opacity: .6; }
#install-guide .ig-later {
    display: block;
    margin: 10px auto 0;
    padding: 8px 16px;
    border: 0;
    background: none;
    color: rgba(0, 0, 0, .55);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#install-guide [data-show] { display: none; }
#install-guide[data-variant="ios"] [data-show~="ios"],
#install-guide[data-variant="android"] [data-show~="android"],
#install-guide[data-variant="prompt"] [data-show~="prompt"],
#install-guide[data-variant="other"] [data-show~="other"],
#install-guide[data-variant="inapp"] [data-show~="inapp"],
#install-guide[data-variant="done"] [data-show~="done"] { display: block; }
#install-guide .ig-sheet:focus { outline: none; }
#install-guide[data-variant="ios"] .ig-body[data-show~="ios"],
#install-guide[data-variant="android"] .ig-body[data-show~="android"],
#install-guide[data-variant="prompt"] .ig-body[data-show~="prompt"] { display: flex; }

@media (prefers-reduced-motion: reduce) {
    #install-guide, #install-guide .ig-sheet { transition: none; }
}