/* =====================================================================================================================
   DashTurbo  -  "Take it anywhere": exporting to Power BI, Tableau, PDF and PNG on the home page

   1. The hero's final act (heroanim.js exportAct): an export dock rises over the live dashboard and builds a Power BI
      file, a Tableau workbook and a PDF, one after another. State classes on the stage: s-export, s-export-cloud,
      s-export-out; on each row: go (building), ok (ready).
   2. The "Export anywhere" section: the dashboard at the centre, beams carrying it to Power BI Desktop, Tableau
      Desktop, a PDF and an image, and the months of build work it skips.

   Power BI and Tableau are named, never drawn: their tiles use the site's own icons in colours that suggest them.

   Coded By Darko G.
   ===================================================================================================================== */

/* ---- 2. The "Export anywhere" section ----------------------------------------------------------------------------- */

.export-section { overflow: hidden; isolation: isolate; }
.export-section::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 50% at 8% 30%, rgba(242, 200, 17, 0.16), transparent 70%), radial-gradient(40% 50% at 92% 35%, rgba(62, 123, 214, 0.16), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(249, 42, 117, 0.12), transparent 70%);
}
.export-section .section-head h2 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #D9A400, #E97627 45%, #7B2FF7); -webkit-background-clip: text; background-clip: text; }
.export-section .section-head p { max-width: 760px; margin: 22px auto 0; font-size: 17.5px; line-height: 1.65; }

/* The stage: two destinations either side of the dashboard, beams between them */
.xp-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr); gap: 64px; align-items: center; margin: 10px 0 64px; }
.xp-col { display: grid; gap: 22px; }

.xp-dest { position: relative; padding: 20px 20px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 30px 60px -34px rgba(29, 22, 92, 0.45), 0 0 0 1px var(--line); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease; }
.xp-dest:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -34px rgba(29, 22, 92, 0.5), 0 0 0 1px var(--line-2); }
.xp-top { display: flex; align-items: center; gap: 13px; }
.xp-tile { width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; font-size: 20px; }
.xp-dest.pbi .xp-tile { color: #1F1A00; background: linear-gradient(145deg, #FFE066, #F2C811 55%, #D9A400); box-shadow: 0 12px 26px -12px rgba(217, 164, 0, 0.9); }
.xp-dest.tab .xp-tile { color: #fff; background: linear-gradient(145deg, #3E7BD6, #1F4E9E 60%, #E97627 160%); box-shadow: 0 12px 26px -12px rgba(31, 78, 158, 0.9); }
.xp-dest.pdf .xp-tile { color: #fff; background: linear-gradient(145deg, #FF7A6B, #E5484D 60%, #B4232A); box-shadow: 0 12px 26px -12px rgba(229, 72, 77, 0.85); }
.xp-dest.png .xp-tile { color: #fff; background: linear-gradient(145deg, #34D399, #0E9F6E 60%, #047857); box-shadow: 0 12px 26px -12px rgba(14, 159, 110, 0.85); }
.xp-name strong { display: block; font: 650 17px/1.2 var(--font); color: var(--ink); letter-spacing: -0.015em; }
.xp-name span { display: inline-block; margin-top: 5px; padding: 3px 8px; border-radius: 7px; font: 600 11.5px/1.2 var(--mono); color: var(--ink-2); background: var(--input); border: 1px solid var(--line); }
.xp-dest ul { list-style: none; margin: 15px 0 0; display: grid; gap: 7px; }
.xp-dest li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.xp-dest li i { margin-top: 3px; font-size: 12px; color: var(--good); }
.xp-cloud { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; padding: 8px 12px; border-radius: 999px; font: 600 12.5px/1.2 var(--font); color: var(--brand-ink);
    background: var(--brand-tint); border: 1px solid var(--brand-line); }
.xp-cloud i { color: var(--accent); }
.xp-cloud.plain { color: var(--good); background: var(--good-bg); border-color: rgba(14, 138, 85, 0.25); }
.xp-cloud.plain i { color: var(--good); }

/* Beams: a line from each destination to the dashboard, a packet of light running out along it */
.xp-dest::before, .xp-dest::after { content: ''; position: absolute; top: 50%; pointer-events: none; }
.xp-dest::before { width: 64px; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, rgba(123, 47, 247, 0.08), rgba(123, 47, 247, 0.45)); }
.xp-dest::after { width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #FF9F43; box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.22), 0 0 18px 4px rgba(255, 159, 67, 0.55); opacity: 0; }
.xp-col.l .xp-dest::before { left: 100%; transform: scaleX(-1); }
.xp-col.r .xp-dest::before { right: 100%; }
.xp-col.l .xp-dest::after { left: calc(100% + 54px); animation: xpPacketL 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.xp-col.r .xp-dest::after { right: calc(100% + 54px); animation: xpPacketR 2.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.xp-col .xp-dest:nth-child(2)::after { animation-delay: -1.3s; }
.xp-col.r .xp-dest:nth-child(1)::after { animation-delay: -0.65s; }
.xp-col.r .xp-dest:nth-child(2)::after { animation-delay: -1.95s; }
@keyframes xpPacketL { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(-58px); opacity: 0; } }
@keyframes xpPacketR { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(58px); opacity: 0; } }

/* The dashboard at the centre, in the site's dark glass, with a slow halo */
.xp-hub { position: relative; display: grid; justify-items: center; gap: 16px; }
.xp-hub::before { content: ''; position: absolute; inset: -12% -8% 4%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(249, 42, 117, 0.35), transparent), radial-gradient(closest-side at 60% 70%, rgba(255, 159, 67, 0.22), transparent); filter: blur(30px); animation: xpHalo 7s ease-in-out infinite; }
@keyframes xpHalo { 50% { transform: scale(1.08); opacity: 0.8; } }
.xp-screen { position: relative; width: 100%; padding: 14px; border-radius: 22px; color: #fff; overflow: hidden;
    background: radial-gradient(300px circle at 90% -10%, rgba(255, 92, 147, 0.35), transparent 60%), linear-gradient(165deg, #232A4C, #16052F 80%);
    box-shadow: 0 50px 90px -40px rgba(22, 5, 47, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.xp-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.xp-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.xp-bar span { margin-left: 8px; font: 600 11.5px/1 var(--font); color: rgba(226, 229, 245, 0.75); }
.xp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.xp-kpis div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.xp-kpis small { display: block; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(186, 192, 222, 0.75); }
.xp-kpis b { display: block; margin-top: 5px; font: 700 17px/1 var(--font); letter-spacing: -0.02em; }
.xp-kpis em { display: block; margin-top: 5px; font-style: normal; font-size: 10.5px; color: #7EF0B8; }
.xp-charts { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-top: 8px; }
.xp-charts > div { height: 112px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.xp-bars { display: flex; align-items: flex-end; gap: 6px; }
.xp-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #FF8DB5, #F92A75); height: var(--h); transform-origin: bottom; animation: xpGrow 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.4s); }
.xp-bars i:nth-child(3) { background: linear-gradient(180deg, #FFC08F, #FF9F43); }
@keyframes xpGrow { 50% { transform: scaleY(0.82); } }
.xp-line svg { width: 100%; height: 100%; overflow: visible; }
.xp-line path { fill: none; stroke: #7EF0B8; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: xpDraw 4.5s ease-in-out infinite; }
.xp-line path.area { stroke: none; fill: url(#xpArea); stroke-dasharray: none; animation: none; opacity: 0.9; }
@keyframes xpDraw { 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -260; } }
.xp-hub-label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font: 600 13.5px/1 var(--font); color: #fff;
    background: var(--panel); box-shadow: 0 16px 34px -16px rgba(22, 5, 47, 0.8); }
.xp-hub-label i { color: #FF9F43; }

/* The months it skips: the usual first build against this one */
.xp-race { display: grid; gap: 14px; max-width: 1040px; margin: 0 auto; padding: 28px 30px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 60px -40px rgba(29, 22, 92, 0.45), 0 0 0 1px var(--line); }
.xp-lane { display: grid; grid-template-columns: 230px minmax(0, 1fr) 150px; gap: 20px; align-items: center; }
.xp-lane > span { font: 600 14.5px/1.35 var(--font); color: var(--ink); }
.xp-lane > span small { display: block; margin-top: 2px; font-weight: 500; font-size: 12.5px; color: var(--ink-3); }
.xp-lane > strong { text-align: right; font: 700 20px/1.1 var(--font); letter-spacing: -0.02em; color: var(--ink); }
.xp-lane.new > strong { color: var(--accent); }
.xp-track { display: flex; gap: 4px; height: 38px; }
.xp-track i { flex: var(--f, 1); display: block; min-width: 0; padding: 0 8px; border-radius: 9px; overflow: hidden; text-align: center;
    font: 600 12px/38px var(--font); font-style: normal; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg) 8px 16px); }
.xp-lane.new .xp-track i { color: #fff; background: var(--grad); box-shadow: 0 10px 22px -12px rgba(123, 47, 247, 0.9); }
.xp-lane.new .xp-track i:nth-child(2) { background: linear-gradient(135deg, #D9A400, #E97627); box-shadow: 0 10px 22px -12px rgba(233, 118, 39, 0.9); }
.xp-lane.new .xp-track i:nth-child(3) { background: linear-gradient(135deg, #0E9F6E, #047857); box-shadow: 0 10px 22px -12px rgba(14, 159, 110, 0.9); }
.xp-lane.new .xp-track .rest { flex: 7; color: var(--ink-3); background: none; box-shadow: none; border: 1.5px dashed var(--line-2); text-align: left; padding-left: 14px; line-height: 35px; }
.xp-lane.new .xp-track .rest::before { content: '\f00c'; font: 900 11px/1 'Font Awesome 6 Pro'; margin-right: 8px; color: var(--good); }

.xp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 40px; }
.xp-note { font-size: 14px; color: var(--ink-3); }
.xp-note i { margin-right: 6px; color: var(--accent); }

/* The site's dark mode: the same glass, dark */
[data-theme="dark"] .xp-dest { background: rgba(19, 23, 39, 0.78); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line); }
[data-theme="dark"] .xp-dest::before { background: linear-gradient(90deg, rgba(255, 92, 147, 0.1), rgba(255, 92, 147, 0.55)); }
[data-theme="dark"] .xp-race { box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line); }
[data-theme="dark"] .xp-screen { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .xp-hub-label { background: #26104A; box-shadow: 0 0 0 1px var(--line-2); }

@media (max-width: 1100px) {
    .xp-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .xp-hub { grid-column: 1 / -1; grid-row: 1; max-width: 520px; width: 100%; justify-self: center; margin-bottom: 18px; }
    .xp-col { display: contents; }
    .xp-dest::before, .xp-dest::after { display: none; }
    .xp-lane { grid-template-columns: 180px minmax(0, 1fr) 120px; }
}
@media (max-width: 720px) {
    .xp-stage { grid-template-columns: minmax(0, 1fr); }
    .xp-race { padding: 22px 18px; }
    .xp-lane { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
    .xp-lane > span { grid-column: 1; }
    .xp-lane > strong { grid-column: 2; grid-row: 1; font-size: 17px; }
    .xp-track { grid-column: 1 / -1; height: auto; flex-wrap: wrap; }
    .xp-track i { flex: 1 1 auto; font-size: 11.5px; padding: 0 10px; line-height: 30px; }
    .xp-lane.new .xp-track .rest { flex: 1 1 100%; line-height: 27px; }
    .export-section .section-head p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .xp-dest::after, .xp-bars i, .xp-line path, .xp-hub::before { animation: none !important; }
    .xp-line path { stroke-dashoffset: 0; }
    .hx-row { animation: none; transform: none; }
}