/* ===================================================================
   Boost Flight — see js/boost-flight.js. Preview of record:
   /static/boost-live-flightlog-v3-preview.html
   =================================================================== */

:root { --bf-h: 78px; --bf-navy: #14183a; --bf-navy-2: #1d2350; --bf-gold: #FFD93D; --bf-mute: #9aa3d6; }

/* Room for the strip: everything laid out below the header reads
   --header-height, so raising it moves every tab's content down. The header
   itself keeps its own 72px. */
body.boost-flight { --header-height: calc(72px + var(--bf-h)); }
body.boost-flight .currency-header { height: calc(72px + var(--safe-top, 0px)); }
/* The strip replaces the old floating "2X h:mm:ss" pill. */
body.boost-flight #double-d-indicator { display: none !important; }

.bf-strip {
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bf-navy), var(--bf-navy-2));
    color: #fff;
    transition: height .5s cubic-bezier(.2, .9, .25, 1), background .6s;
    pointer-events: none;
}
body.boost-flight .bf-strip { height: var(--bf-h); }
body.boost-flight-final .bf-strip { background: linear-gradient(180deg, #3a2410, #5a3512); }

.bf-top { display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 14px 0; }
.bf-st { font: 700 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; color: var(--bf-gold); margin-bottom: 2px; }
.bf-st i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; animation: bf-blink 1.2s infinite; }
@keyframes bf-blink { 50% { opacity: .25; } }
body.boost-flight-final .bf-st,
body.boost-flight-final .bf-odo b { color: #ffb84d; }

.bf-odo { display: flex; align-items: center; gap: 8px; }
.bf-odo b { font: 700 24px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--bf-gold); display: inline-flex; text-shadow: 0 0 12px rgba(255, 217, 61, .45); }
.bf-odo b span { display: inline-block; overflow: hidden; height: 24px; position: relative; }
.bf-odo b span i { display: block; font-style: normal; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.bf-odo b span i.in { position: absolute; left: 0; top: 0; transform: translateY(100%); }
.bf-odo b span i.out { transform: translateY(-100%); }
.bf-odo small { font: 700 9px/1.25 'JetBrains Mono', ui-monospace, monospace; color: var(--bf-mute); letter-spacing: .12em; }

.bf-eta { text-align: right; font: 700 16px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.bf-eta small { display: block; font-size: 9px; color: var(--bf-mute); letter-spacing: .14em; margin-bottom: 2px; }

.bf-route { position: relative; margin: 7px 18px 0; height: 24px; }
.bf-ln { position: absolute; left: 0; right: 0; top: 12px; border-top: 2px dashed rgba(255, 255, 255, .28); }
.bf-done { position: absolute; left: 0; top: 11px; height: 4px; width: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 217, 61, 0), rgba(255, 217, 61, .9)); }
.bf-pt { position: absolute; top: 7px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: var(--bf-navy-2); box-sizing: border-box; }
.bf-pt.a { left: -6px; background: var(--bf-gold); border-color: var(--bf-gold); }
.bf-pt.b { right: -6px; }
.bf-lb { position: absolute; top: -3px; font: 9px 'JetBrains Mono', ui-monospace, monospace; color: var(--bf-mute); letter-spacing: .1em; }
.bf-lb.a { left: 10px; }
.bf-lb.b { right: 10px; }
.bf-plane { position: absolute; top: 0; left: 0; font-size: 22px; line-height: 1; color: #fff; transform: translateX(-50%); filter: drop-shadow(0 0 6px rgba(255, 217, 61, .8)); transition: top .8s; }
body.boost-flight-final .bf-plane { top: 6px; }

/* Miles chip during flight: the "×2" tag says what the chip is doing. */
body.boost-flight .currency-chip.miles { position: relative; overflow: visible; }
body.boost-flight .currency-chip.miles::before {
    content: "×2";
    position: absolute; left: -6px; top: -8px; z-index: 1;
    background: var(--bf-gold); color: var(--bf-navy);
    font: 900 10px 'Archivo Black', sans-serif;
    padding: 2px 6px; border-radius: 100px;
    pointer-events: none;
}

/* ── take-off ─────────────────────────────────────────────────────── */
.bf-takeoff {
    position: fixed; inset: 0; z-index: 10050; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 70%, var(--bf-navy-2), #0b0d22 70%);
    transition: opacity .35s; overflow: hidden;
}
.bf-takeoff.on { opacity: 1; }
.bf-rw { position: absolute; left: -10%; right: -10%; top: 58%; height: 70px; background: #26283d; transform: perspective(300px) rotateX(55deg); overflow: hidden; }
.bf-rw::before { content: ""; position: absolute; left: 0; right: -60px; top: 32px; border-top: 6px dashed #fff; animation: bf-rush .25s linear infinite; }
@keyframes bf-rush { to { transform: translateX(-60px); } }
.bf-bp { position: absolute; left: -20%; top: 52%; font-size: 62px; line-height: 1; color: #fff; filter: drop-shadow(0 0 18px rgba(255, 217, 61, .9)); }
.bf-takeoff.on .bf-bp { animation: bf-lift 1.9s cubic-bezier(.55, 0, .4, 1) forwards; }
@keyframes bf-lift {
    0%   { left: -20%; top: 54%; transform: rotate(0); }
    55%  { left: 45%;  top: 52%; transform: rotate(0); }
    100% { left: 120%; top: 8%;  transform: rotate(-22deg); }
}
.bf-takeoff h2 { position: absolute; left: 16px; right: 16px; top: 22%; margin: 0; text-align: center; font: 24px 'Archivo Black', sans-serif; color: var(--bf-gold); letter-spacing: .06em; opacity: 0; }
.bf-takeoff h2 small { display: block; font: 700 12px/1.6 'JetBrains Mono', ui-monospace, monospace; color: #c9cff5; letter-spacing: .2em; margin-top: 8px; }
.bf-takeoff.on h2 { animation: bf-in .5s .25s forwards; }
@keyframes bf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── landing pass ─────────────────────────────────────────────────── */
.bf-scrim {
    position: fixed; inset: 0; z-index: 10049;
    background: rgba(11, 13, 34, .72);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .4s;
}
.bf-scrim.on { opacity: 1; }
.bf-pass {
    position: fixed; left: 16px; right: 16px; top: 50%; z-index: 10050;
    max-width: 420px; margin: 0 auto;
    background: var(--paper, #F4F1EA); color: var(--ink, #1a1a1a);
    border: 2px solid var(--bf-gold); border-radius: 20px; overflow: hidden;
    box-shadow: 0 0 0 6px rgba(255, 217, 61, .18), 0 24px 60px rgba(0, 0, 0, .55);
    transform: translateY(-50%) translateY(120vh) rotate(-4deg);
    transition: transform .6s cubic-bezier(.2, .9, .25, 1.08);
}
.bf-pass.on { transform: translateY(-50%); }
.bf-tp { background: var(--bf-navy); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.bf-tp b { font: 22px 'Archivo Black', sans-serif; color: var(--bf-gold); letter-spacing: .06em; }
.bf-tp span { font: 700 11px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; color: var(--bf-mute); }
.bf-stamp {
    position: absolute; right: 16px; top: 20px; z-index: 1;
    font: 14px 'Archivo Black', sans-serif; letter-spacing: .12em; color: var(--bf-gold);
    border: 3px solid var(--bf-gold); border-radius: 8px; padding: 4px 9px;
    transform: rotate(-10deg) scale(2.4); opacity: 0;
}
.bf-pass.on .bf-stamp { animation: bf-thud .35s .65s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes bf-thud { to { transform: rotate(-10deg) scale(1); opacity: 1; } }
.bf-bd { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 16px; border-bottom: 2px dashed #d8d1c0; }
.bf-bd div { font: 700 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; color: #8d877a; }
.bf-bd div b { display: block; font: 24px 'Archivo Black', sans-serif; color: var(--ink, #1a1a1a); letter-spacing: 0; margin-top: 3px; }
.bf-bd div.g b { color: #a9811b; }
.bf-ft { padding: 12px 16px; display: flex; gap: 10px; align-items: center; }
.bf-ft p { flex: 1; margin: 0; font: 13px var(--font-ui, Figtree, sans-serif); color: #5c574d; }
.bf-ft button { border: 0; border-radius: 100px; padding: 10px 16px; background: var(--ink, #1a1a1a); color: #fff; font: 800 13px var(--font-ui, Figtree, sans-serif); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    .bf-strip, .bf-plane, .bf-pass, .bf-scrim, .bf-takeoff { transition: none; }
    .bf-st i, .bf-rw::before, .bf-takeoff.on .bf-bp, .bf-takeoff.on h2 { animation: none; }
    .bf-takeoff h2 { opacity: 1; }
    .bf-pass.on .bf-stamp { animation: none; transform: rotate(-10deg); opacity: 1; }
}