/* ===================================================================
   D-PAD intro — the animated "how D-PAD works" explainer (js/dpad-intro.js).
   Plays as the first screen of the issuing flow (onboarding-issue.js).
   Preview of record: /static/explainer-how-dpad-works-preview.html.
   Everything is scoped under #dpad-intro; the stage is drawn at 360×640
   and scaled to fit the screen.
   =================================================================== */

#dpad-intro {
    --di-paper: #F4F1EA; --di-ink: #1a1a1a; --di-gold: #FFD93D; --di-navy: #14183a; --di-navy2: #0d1030; --di-mute: #7a7466; --di-green: #27ae60;
    position: fixed; inset: 0; z-index: 20001;
    background: var(--di-paper);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
    font-family: var(--font-ui, Figtree, system-ui, sans-serif); color: var(--di-ink);
    -webkit-tap-highlight-color: transparent;
    transition: background .4s;
}
#dpad-intro.di-dark { background: var(--di-navy); }
#dpad-intro * { box-sizing: border-box; margin: 0; padding: 0; }
#dpad-intro .di-frame { position: relative; flex: none; }
#dpad-intro .di-stage { width: 360px; height: 640px; position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: var(--di-paper); }
#dpad-intro .di-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
#dpad-intro .di-dk { background: var(--di-navy); color: #fff; }
#dpad-intro .di-cap { position: absolute; left: 24px; right: 24px; bottom: 58px; text-align: center; }
#dpad-intro .di-cap b { display: block; font: 24px/1.12 var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: -.01em; }
#dpad-intro .di-cap small { display: block; margin-top: 8px; font-size: 15px; line-height: 1.35; color: var(--di-mute); }
#dpad-intro .di-dk .di-cap small { color: #aab0d6; }
#dpad-intro .di-kick { position: absolute; left: 0; right: 0; top: 34px; text-align: center; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .22em; color: var(--di-mute); }
#dpad-intro .di-dk .di-kick { color: var(--di-gold); }
#dpad-intro .di-chip { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 100px; background: #efe6c5; border: 2px solid #e2d29a; font: 22px var(--font-display, 'Archivo Black'), sans-serif; color: #a9811b; }
#dpad-intro .di-chip i { font-style: normal; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .14em; color: #b8a067; }
#dpad-intro .di-meter { position: absolute; left: 0; right: 0; text-align: center; }

/* 1 intro */
#dpad-intro #di-s1 .di-logo { position: absolute; left: 50%; top: 170px; width: 150px; height: 150px; margin-left: -75px; }
#dpad-intro #di-s1 .di-word { position: absolute; left: 0; right: 0; top: 340px; text-align: center; font: 52px var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: -.02em; }
#dpad-intro #di-s1 .di-tag { position: absolute; left: 30px; right: 30px; top: 410px; text-align: center; font-size: 18px; line-height: 1.35; color: var(--di-mute); }
#dpad-intro #di-s1 .di-tag em { font-style: normal; color: var(--di-ink); font-weight: 800; }

/* 2 play */
#dpad-intro .di-tv { position: absolute; left: 40px; top: 110px; width: 280px; height: 170px; border-radius: 16px; background: #05071a; border: 6px solid #262b55; overflow: hidden; }
#dpad-intro .di-tv .di-sky { position: absolute; inset: 0; background: linear-gradient(#2b2f78, #6a3f8f 60%, #e0795a); }
#dpad-intro .di-tv .di-hill { position: absolute; bottom: -40px; width: 200px; height: 110px; border-radius: 50%; background: #1d2150; }
#dpad-intro .di-tv .di-hero { position: absolute; bottom: 44px; left: 60px; width: 16px; height: 22px; border-radius: 4px; background: var(--di-gold); }
#dpad-intro .di-pad { position: absolute; left: 115px; top: 300px; width: 130px; height: 74px; }
#dpad-intro #di-s2 .di-meter { top: 400px; }
#dpad-intro #di-s2 .di-chip { background: #252a5a; border-color: #3a4083; color: var(--di-gold); }
#dpad-intro #di-s2 .di-chip i { color: #8d93c8; }
#dpad-intro .di-plus { position: absolute; left: 50%; top: 388px; font: 18px var(--font-display, 'Archivo Black'), sans-serif; color: var(--di-gold); opacity: 0; }

/* 3 walk */
#dpad-intro .di-feet { position: absolute; left: 0; right: 0; top: 96px; height: 260px; }
#dpad-intro .di-fp { position: absolute; width: 22px; height: 38px; border-radius: 50% 50% 45% 45%; background: var(--di-ink); opacity: 0; }
#dpad-intro .di-count { position: absolute; left: 0; right: 0; top: 330px; text-align: center; }
#dpad-intro .di-count b { display: block; font: 56px var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: -.02em; }
#dpad-intro .di-count small { font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .2em; color: var(--di-mute); }
#dpad-intro #di-s3 .di-meter { top: 420px; }

/* 4 ticket — a copy of the app's real boarding pass (dep-wallet.css .dw-bp) */
#dpad-intro .di-pass { position: absolute; left: 24px; top: 62px; width: 312px; border-radius: 16px; color: #fff;
    background: linear-gradient(160deg, #2f5d7c 0%, #1d3b57 70%); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
#dpad-intro .di-pstamp { position: absolute; right: 8px; top: -12px; width: 82px; height: 82px; object-fit: contain; transform: rotate(7deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
#dpad-intro .di-ptop { padding: 12px 96px 8px 14px; min-height: 58px; }
#dpad-intro .di-air { font: 800 9.5px 'JetBrains Mono', monospace; letter-spacing: .14em; opacity: .8; }
#dpad-intro .di-pass h3 { font: 19px/1.1 var(--font-display, 'Archivo Black'), sans-serif; margin-top: 3px; text-transform: none; letter-spacing: 0; color: #fff; }
#dpad-intro .di-proute { display: flex; align-items: center; gap: 10px; padding: 2px 14px 10px; }
#dpad-intro .di-proute > div:not(.di-pln) { font: 25px/1 var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: .02em; }
#dpad-intro .di-proute small { display: block; font: 600 8.5px 'JetBrains Mono', monospace; letter-spacing: .1em; opacity: .75; margin-top: 3px; white-space: nowrap; }
#dpad-intro .di-proute .di-to { text-align: right; }
#dpad-intro .di-pln { flex: 1; position: relative; border-top: 2px dashed rgba(255,255,255,.45); }
#dpad-intro .di-pln span { position: absolute; left: 0; top: -11px; font-size: 14px; transform: translateX(-8px); }
#dpad-intro .di-flds { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; padding: 0 14px 12px; }
#dpad-intro .di-flds div { font: 700 11.5px var(--font-ui, Figtree, sans-serif); white-space: nowrap; }
#dpad-intro .di-flds small { display: block; font: 600 8px 'JetBrains Mono', monospace; letter-spacing: .12em; opacity: .65; margin-bottom: 2px; }
#dpad-intro .di-perf { position: relative; border-top: 2px dashed rgba(255,255,255,.35); margin: 0 10px; }
#dpad-intro .di-perf::before, #dpad-intro .di-perf::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--di-paper); }
#dpad-intro .di-perf::before { left: -19px; }
#dpad-intro .di-perf::after { right: -19px; }
#dpad-intro .di-stub { padding: 10px 14px 12px; background: rgba(0,0,0,.12); border-radius: 0 0 16px 16px; }
#dpad-intro .di-rw { display: flex; gap: 8px; margin-bottom: 4px; }
#dpad-intro .di-rw span { font: 700 11px var(--font-ui, Figtree, sans-serif); background: rgba(255,255,255,.16); padding: 5px 10px; border-radius: 100px; }
#dpad-intro .di-task { display: flex; align-items: center; gap: 10px; padding: 5px 0; font: 600 13px var(--font-ui, Figtree, sans-serif); }
#dpad-intro .di-box { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); display: grid; place-items: center; color: #1d3b57; font-size: 10px; font-weight: 900; flex: none; }
#dpad-intro .di-bar { display: flex; gap: 2px; height: 22px; margin-top: 6px; background: #fff; padding: 4px 8px; border-radius: 6px; }
#dpad-intro .di-bar i { flex: 1; background: #1a1a1a; opacity: .85; }
#dpad-intro .di-bar i:nth-child(3n) { opacity: .18; }
#dpad-intro .di-bar i:nth-child(7n) { opacity: .35; }
#dpad-intro .di-punch { position: absolute; right: 14px; top: 146px; padding: 6px 10px; border: 3px solid #fff; background: var(--di-green); color: #fff; border-radius: 8px; font: 15px var(--font-display, 'Archivo Black'), sans-serif; letter-spacing: .06em; transform: rotate(-10deg); opacity: 0; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
#dpad-intro .di-coin { position: absolute; left: 135px; top: 386px; width: 90px; height: 90px; opacity: 0; }
#dpad-intro .di-coin img { width: 100%; height: 100%; }
#dpad-intro .di-tok { position: absolute; left: 0; right: 0; top: 480px; text-align: center; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .18em; color: #a9811b; opacity: 0; }

/* 5 boost */
#dpad-intro .di-cleared { position: absolute; left: 0; right: 0; top: 100px; text-align: center; font: 30px/1.05 var(--font-display, 'Archivo Black'), sans-serif; color: var(--di-gold); }
#dpad-intro .di-strip { position: absolute; left: 20px; right: 20px; top: 200px; height: 110px; border-radius: 18px; background: var(--di-navy2); border: 2px solid #2c3270; padding: 14px 16px; }
#dpad-intro .di-strip .di-row { display: flex; justify-content: space-between; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .18em; color: #8d93c8; }
#dpad-intro .di-track { position: relative; height: 2px; margin: 20px 6px 0; background: repeating-linear-gradient(90deg, #4a5196 0 6px, transparent 6px 12px); }
#dpad-intro .di-plane { position: absolute; left: 0; top: -15px; font-size: 24px; color: var(--di-gold); transform: translateX(-12px); }
#dpad-intro .di-x2 { position: absolute; right: 16px; bottom: 10px; font: 20px var(--font-display, 'Archivo Black'), sans-serif; color: var(--di-gold); }
#dpad-intro .di-bonus { position: absolute; left: 0; right: 0; top: 336px; text-align: center; }
#dpad-intro .di-bonus b { display: block; font: 54px var(--font-display, 'Archivo Black'), sans-serif; color: var(--di-gold); letter-spacing: -.02em; }
#dpad-intro .di-bonus small { font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .2em; color: #aab0d6; }

/* 6 travel */
#dpad-intro .di-map { position: absolute; inset: 0; background: #e8e2d2; }
#dpad-intro .di-map svg { position: absolute; inset: 0; }
#dpad-intro .di-map::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; background: linear-gradient(transparent, var(--di-paper) 45%); }
#dpad-intro .di-pin { position: absolute; left: 206px; top: 150px; width: 34px; height: 44px; margin-left: -17px; }
#dpad-intro .di-welcome { position: absolute; left: 0; right: 0; top: 60px; text-align: center; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .22em; color: #5a5446; opacity: 0; }
#dpad-intro .di-page { position: absolute; left: 30px; top: 100px; width: 300px; height: 330px; border-radius: 14px; background: #fbf8f0; box-shadow: 0 12px 34px rgba(0,0,0,.18); opacity: 0; background-image: repeating-linear-gradient(0deg, transparent 0 27px, #efe7d6 27px 28px); }
#dpad-intro .di-old { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 3px solid; opacity: .55; }
#dpad-intro .di-stamp { position: absolute; left: 80px; top: 150px; width: 200px; height: 200px; opacity: 0; }
#dpad-intro .di-stamp img { width: 100%; height: 100%; border-radius: 50%; }
#dpad-intro .di-stamp .di-lbl { position: absolute; left: -10px; right: -10px; bottom: -14px; text-align: center; font: 15px var(--font-display, 'Archivo Black'), sans-serif; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); letter-spacing: .02em; }

/* 7 duty free */
#dpad-intro #di-s7 .di-meter { top: 110px; }
#dpad-intro .di-card { position: absolute; left: 50px; top: 190px; width: 260px; height: 160px; border-radius: 18px; background: linear-gradient(135deg, #e5383b, #a4161a); color: #fff; padding: 18px; box-shadow: 0 16px 36px rgba(164,22,26,.35); transform-origin: 50% 100%; }
#dpad-intro .di-card small { font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .2em; opacity: .8; }
#dpad-intro .di-card b { display: block; font: 28px/1.05 var(--font-display, 'Archivo Black'), sans-serif; margin-top: 10px; }
#dpad-intro .di-card .di-amt { position: absolute; right: 18px; bottom: 14px; font: 34px var(--font-display, 'Archivo Black'), sans-serif; }
#dpad-intro .di-card .di-reel { position: absolute; left: 18px; bottom: 20px; font-size: 28px; }
#dpad-intro .di-spent { position: absolute; left: 0; right: 0; top: 376px; text-align: center; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .18em; color: var(--di-mute); opacity: 0; }

/* 8 end */
#dpad-intro #di-s8 .di-logo { position: absolute; left: 50%; top: 130px; width: 110px; height: 110px; margin-left: -55px; }
#dpad-intro .di-quote { position: absolute; left: 30px; right: 30px; top: 270px; text-align: center; font: 26px/1.15 var(--font-display, 'Archivo Black'), sans-serif; }
#dpad-intro .di-quote span { background: linear-gradient(transparent 62%, var(--di-gold) 62%); }
#dpad-intro .di-who { position: absolute; left: 0; right: 0; top: 400px; text-align: center; font-size: 15px; color: var(--di-mute); }

/* chrome: skip, progress, the button out */
#dpad-intro .di-skip { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2; min-height: 40px; padding: 0 16px; border: 0; border-radius: 100px; background: rgba(26,26,26,.08); color: var(--di-ink); font: 700 13px var(--font-ui, Figtree, sans-serif); cursor: pointer; }
#dpad-intro.di-dark .di-skip { background: rgba(255,255,255,.12); color: #fff; }
#dpad-intro .di-prog { position: absolute; left: 16px; right: 16px; top: max(8px, calc(env(safe-area-inset-top) - 6px)); height: 3px; border-radius: 2px; background: rgba(26,26,26,.1); overflow: hidden; z-index: 2; }
#dpad-intro.di-dark .di-prog { background: rgba(255,255,255,.15); }
#dpad-intro .di-prog u { display: block; height: 100%; width: 0; background: #a9811b; }
#dpad-intro .di-out { position: absolute; left: 22px; right: 22px; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 2; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s, transform .4s, visibility .4s; }
#dpad-intro .di-out.on { opacity: 1; visibility: visible; transform: none; }
#dpad-intro .di-go { width: 100%; padding: 15px; border: 0; border-radius: 14px; background: var(--di-ink); color: var(--di-paper); font: 700 14.5px var(--font-ui, Figtree, sans-serif); cursor: pointer; }
#dpad-intro .di-again { width: 100%; padding: 11px; border: 0; background: transparent; color: rgba(26,26,26,.55); font: 600 13px var(--font-ui, Figtree, sans-serif); cursor: pointer; }