/* WinLuisPlus: malware article walkthrough (html.wt-on).
   Each section becomes a window from the year the malware appeared, with that era's taskbar.
   Read view (no .wt-on) is the plain article, untouched. Animations play once, when a window opens. */

.wt-bar, .wt-taskbar, .wt-icon { display: none; }
html.wt-on .wt-bar { display: flex; }
html.wt-on .wt-taskbar { display: flex; }
html.wt-on .wt-icon { display: inline-flex; }
html.wt-on .art-toc { display: none; }
html.wt-on body { padding-bottom: 42px; }
html.wt-on .to-top { bottom: 58px; }

/* ---------- hero: the file on the desktop + the view switch ---------- */
.wt-hero { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 26px; }
.wt-icon { flex-direction: column; align-items: center; gap: 6px; width: 140px; padding: 6px; border-radius: 4px; text-decoration: none; color: #fff; }
.wt-icon svg { width: 52px; height: 52px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.wt-icon span { font: 500 13px/1.3 var(--font); text-align: center; overflow-wrap: anywhere; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.6); padding: 1px 4px; }
.wt-icon:hover span, .wt-icon:focus-visible span { background: #316ac5; text-shadow: none; }
.wt-toggle { cursor: pointer; font: 500 15px/1 var(--font); color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.wt-toggle svg { width: 17px; height: 17px; }

/* ---------- windows ---------- */
html.wt-on .article { --cp: clamp(18px, 3vw, 36px); }
html.wt-on .wt-win { padding: 0 var(--cp) var(--cp) !important; overflow: hidden; border-radius: var(--wr, 8px); }
html.wt-on .wt-win::before { display: none !important; }
html.wt-on .wt-win.article-figure { padding: 0 0 14px !important; background: #0b1020; }
html.wt-on .wt-win.article-figure .shot { border-radius: 0; }
html.wt-on .wt-win.callout { padding: 0 18px 16px !important; }
.wt-bar {
  position: relative; z-index: 2; align-items: center; gap: 8px; height: 32px;
  margin: 0 calc(-1 * var(--cp)) clamp(16px, 2.4vw, 24px); padding: 0 0 0 10px;
  font: 600 13px/1 var(--font); color: #fff; user-select: none;
}
.wt-win--pic .wt-bar { margin: 0 0 0; }
.wt-win.callout .wt-bar { margin: 0 -18px 14px; }
.wt-bar__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-bar__btns { display: flex; align-self: stretch; }
.wt-bar__btns i { position: relative; display: grid; place-items: center; width: 44px; }
.wt-min::before { content: ""; width: 10px; height: 1.5px; background: currentColor; }
.wt-max::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; }
.wt-x::before, .wt-x::after { content: ""; position: absolute; width: 13px; height: 1.5px; background: currentColor; rotate: 45deg; }
.wt-x::after { rotate: -45deg; }
.wt-bar__ico { flex: none; width: 16px; height: 16px; border-radius: 2px; background: linear-gradient(#fff 0 0) 3px 4px / 10px 1.5px no-repeat, linear-gradient(#fff 0 0) 3px 8px / 10px 1.5px no-repeat, linear-gradient(#fff 0 0) 3px 12px / 7px 1.5px no-repeat, #5b8def; }
.wt-bar--props .wt-bar__ico { background: radial-gradient(circle, #fff 0 2.5px, transparent 3px), #8a94a8; border-radius: 50%; }
.wt-bar--pic .wt-bar__ico { background: linear-gradient(160deg, #7fd0ff 0 45%, #3fae5a 46%); }
.wt-bar--warn .wt-bar__ico { background: #ffcf2e; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); border-radius: 0; }

/* opening: the window grows in from the taskbar, then its contents appear one after another */
html.wt-on .wt-win.reveal { transform: translateY(28px) scale(.965); transform-origin: 50% 100%; transition: opacity .5s var(--ease), transform .6s var(--ease); }
html.wt-on .wt-win.reveal.in { transform: none; }
html.wt-on .wt-win.reveal > :not(.wt-bar) { opacity: 0; translate: 0 10px; transition: opacity .45s var(--ease), translate .5s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + .15s); }
html.wt-on .wt-win.reveal.in > :not(.wt-bar) { opacity: 1; translate: 0 0; }
/* pictures draw from the top down, like a page loading on an old connection */
html.wt-on .wt-win.reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s linear .3s; }
html.wt-on .wt-win.reveal.in img { clip-path: inset(0 0 0 0); }
html.wt-on[data-wt-era="2000"] .wt-win.reveal img, html.wt-on[data-wt-era="2004"] .wt-win.reveal img { transition-timing-function: steps(12, end); transition-duration: 1.4s; }

/* ---------- taskbar ---------- */
.wt-taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; height: 42px;
  align-items: center; gap: 4px; padding: 0 0 0 4px; font: 500 13px/1 var(--font);
  transition: transform .35s var(--ease), opacity .3s;
}
.wt-taskbar.is-gone { opacity: 0; transform: translateY(100%); pointer-events: none; }
.wt-start { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 6px; text-decoration: none; color: inherit; }
.wt-start__logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: #1f2bd6; color: #fff; font: 800 8px/1 var(--font); letter-spacing: .02em; }
.wt-tray { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.wt-tray::-webkit-scrollbar { display: none; }
.wt-task { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 180px; padding: 0 10px; border-radius: 3px; color: inherit; text-decoration: none; transition: background-color .2s; }
.wt-task__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-task__ico { flex: none; width: 14px; height: 12px; border-radius: 2px; border: 1.5px solid currentColor; border-top-width: 4px; opacity: .85; }
.wt-taskbar .wt-toggle { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 3px; background: rgba(255,255,255,.12); color: inherit; font-size: 13px; }
.wt-clock { flex: none; padding: 0 12px; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.wt-taskbar a:focus-visible, .wt-taskbar button:focus-visible { outline: 2px solid #9cc2ff; outline-offset: -2px; }

/* ---------- eras ---------- */
/* 2000: Windows 2000 / ME grey */
html.wt-on[data-wt-era="2000"] .wt-win { --wr: 0; border: 3px solid #c3c3c3; box-shadow: inset 1px 1px #fff, inset -1px -1px #404040, 0 22px 44px -22px #000; }
html.wt-on[data-wt-era="2000"] .wt-bar { height: 24px; padding-left: 4px; margin-top: 0; font-size: 12.5px; background: linear-gradient(90deg, #808080, #c0c0c0); color: #d4d0c8; }
html.wt-on[data-wt-era="2000"] .wt-win.is-focus .wt-bar, html.wt-on[data-wt-era="2000"] .wt-win:not(.card) .wt-bar { background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; }
html.wt-on[data-wt-era="2000"] .wt-bar__btns { align-items: center; gap: 2px; padding-right: 3px; }
html.wt-on[data-wt-era="2000"] .wt-bar__btns i { width: 18px; height: 16px; background: #c3c3c3; color: #000; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff; }
html.wt-on[data-wt-era="2000"] .wt-bar__btns i.wt-x { margin-left: 2px; }
html.wt-on[data-wt-era="2000"] .wt-min::before { width: 7px; height: 2px; translate: 0 4px; }
html.wt-on[data-wt-era="2000"] .wt-max::before { width: 8px; height: 7px; border-top-width: 2px; border-width: 1px; }
html.wt-on[data-wt-era="2000"] .wt-x::before, html.wt-on[data-wt-era="2000"] .wt-x::after { width: 9px; height: 1.8px; }
.wt-taskbar[data-era="2000"] { background: #c3c3c3; color: #111; box-shadow: inset 0 1px 0 #fff; }
.wt-taskbar[data-era="2000"] .wt-start, .wt-taskbar[data-era="2000"] .wt-task, .wt-taskbar[data-era="2000"] .wt-toggle { border-radius: 0; background: #c3c3c3; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff; }
.wt-taskbar[data-era="2000"] .wt-start { font-weight: 700; }
.wt-taskbar[data-era="2000"] .wt-task.is-here { background: #e3e3e3; box-shadow: inset 1px 1px #404040, inset -1px -1px #fff; font-weight: 700; }
.wt-taskbar[data-era="2000"] .wt-clock { height: 32px; display: inline-flex; align-items: center; margin-right: 3px; box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; }

/* 2004: Windows XP blue */
html.wt-on[data-wt-era="2004"] .wt-win { --wr: 9px 9px 3px 3px; border: 3px solid #7a96df; border-top: 0; }
html.wt-on[data-wt-era="2004"] .wt-win.is-focus, html.wt-on[data-wt-era="2004"] .wt-win:not(.card) { border-color: #0054e3; }
html.wt-on[data-wt-era="2004"] .wt-bar { height: 30px; margin-left: calc(-1 * var(--cp) - 3px); margin-right: calc(-1 * var(--cp) - 3px); font-size: 13.5px; font-weight: 700; text-shadow: 1px 1px #0a1f5c; background: linear-gradient(180deg, #a7bdef, #7a96df 18%, #8aa5e6 80%, #6f8bd6); }
html.wt-on[data-wt-era="2004"] .wt-win--pic .wt-bar { margin-left: -3px; margin-right: -3px; }
html.wt-on[data-wt-era="2004"] .wt-win.callout .wt-bar { margin-left: -21px; margin-right: -21px; }
html.wt-on[data-wt-era="2004"] .wt-win.is-focus .wt-bar, html.wt-on[data-wt-era="2004"] .wt-win:not(.card) .wt-bar { background: linear-gradient(180deg, #3d93ff, #0a5fe0 12%, #0060f0 45%, #0050d8 88%, #003cb4); }
html.wt-on[data-wt-era="2004"] .wt-bar__btns { align-items: center; gap: 2px; padding-right: 5px; }
html.wt-on[data-wt-era="2004"] .wt-bar__btns i { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; background: linear-gradient(135deg, #5b9bff, #2563e6); }
html.wt-on[data-wt-era="2004"] .wt-bar__btns i.wt-x { background: linear-gradient(135deg, #f0835d, #d6371a); }
.wt-taskbar[data-era="2004"] { background: linear-gradient(#3d82f2, #245edb 8%, #1f51c4 92%, #1941a5); color: #fff; }
.wt-taskbar[data-era="2004"] .wt-start { height: 42px; margin-left: -4px; padding: 0 22px 0 12px; border-radius: 0 14px 14px 0; background: linear-gradient(#55b04f, #3c963a 50%, #2f7f2f); font-style: italic; font-weight: 700; font-size: 15px; text-shadow: 1px 1px rgba(0,0,0,.4); }
.wt-taskbar[data-era="2004"] .wt-task { background: #3c81f3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.wt-taskbar[data-era="2004"] .wt-task.is-here { background: #1e52b7; box-shadow: inset 1px 1px 2px rgba(0,0,0,.4); }
.wt-taskbar[data-era="2004"] .wt-clock { height: 42px; display: inline-flex; align-items: center; background: linear-gradient(#1290e9, #0f7fd8); box-shadow: inset 1px 0 #0b5fb0; }

/* 2008: Vista / 7 glass */
html.wt-on[data-wt-era="2008"] .wt-win { --wr: 8px; border: 6px solid rgba(140, 170, 210, .35); border-top: 0; }
html.wt-on[data-wt-era="2008"] .wt-win.is-focus, html.wt-on[data-wt-era="2008"] .wt-win:not(.card) { border-color: rgba(150, 190, 240, .55); }
html.wt-on[data-wt-era="2008"] .wt-bar { margin-left: calc(-1 * var(--cp) - 6px); margin-right: calc(-1 * var(--cp) - 6px); height: 30px; padding-left: 12px; font-weight: 500; background: linear-gradient(rgba(170, 200, 240, .42), rgba(110, 150, 200, .32)); text-shadow: 0 0 10px rgba(0,0,0,.6); }
html.wt-on[data-wt-era="2008"] .wt-win--pic .wt-bar { margin-left: -6px; margin-right: -6px; }
html.wt-on[data-wt-era="2008"] .wt-win.callout .wt-bar { margin-left: -24px; margin-right: -24px; }
html.wt-on[data-wt-era="2008"] .wt-bar__btns { align-items: flex-start; padding-right: 6px; }
html.wt-on[data-wt-era="2008"] .wt-bar__btns i { width: 28px; height: 19px; border: 1px solid rgba(0,0,0,.45); border-top: 0; background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.1) 50%, rgba(255,255,255,.2)); }
html.wt-on[data-wt-era="2008"] .wt-bar__btns i:first-child { border-bottom-left-radius: 5px; }
html.wt-on[data-wt-era="2008"] .wt-bar__btns i.wt-x { width: 44px; border-bottom-right-radius: 5px; background: linear-gradient(#e8a598, #c7432c 50%, #d4583c); }
.wt-taskbar[data-era="2008"] { background: linear-gradient(rgba(70,84,110,.98), rgba(22,30,46,.98)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.wt-taskbar[data-era="2008"] .wt-start { padding: 0; width: 38px; justify-content: center; border-radius: 999px; background: radial-gradient(circle at 50% 30%, #6fb7ff, #1b5fb8 70%); }
.wt-taskbar[data-era="2008"] .wt-start__txt { display: none; }
.wt-taskbar[data-era="2008"] .wt-start__logo { background: transparent; }
.wt-taskbar[data-era="2008"] .wt-task.is-here { background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

/* 2016 and 2017: Windows 10, dark; WannaCry and Petya get a red accent */
html.wt-on[data-wt-era="2016"] .wt-win, html.wt-on[data-wt-era="2017"] .wt-win { --wr: 0; border: 1px solid #3a3f4a; }
html.wt-on[data-wt-era="2016"] .wt-win.is-focus, html.wt-on[data-wt-era="2016"] .wt-win:not(.card) { border-color: #2f7bff; }
html.wt-on[data-wt-era="2017"] .wt-win.is-focus, html.wt-on[data-wt-era="2017"] .wt-win:not(.card) { border-color: #d13438; }
html.wt-on[data-wt-era="2016"] .wt-bar, html.wt-on[data-wt-era="2017"] .wt-bar { font-weight: 400; font-size: 12.5px; background: #1f1f1f; color: #9aa0aa; }
html.wt-on[data-wt-era="2016"] .wt-win.is-focus .wt-bar, html.wt-on[data-wt-era="2017"] .wt-win.is-focus .wt-bar,
html.wt-on[data-wt-era="2016"] .wt-win:not(.card) .wt-bar, html.wt-on[data-wt-era="2017"] .wt-win:not(.card) .wt-bar { color: #fff; }
html.wt-on[data-wt-era="2016"] .wt-bar__btns i, html.wt-on[data-wt-era="2017"] .wt-bar__btns i { width: 46px; }
html.wt-on[data-wt-era="2016"] .wt-win.is-focus .wt-x, html.wt-on[data-wt-era="2017"] .wt-win.is-focus .wt-x { background: #e81123; }
.wt-taskbar[data-era="2016"], .wt-taskbar[data-era="2017"] { background: #101722; color: #e8edf5; padding-left: 0; }
.wt-taskbar[data-era="2017"] { background: #1a0d10; }
.wt-taskbar[data-era="2016"] .wt-start, .wt-taskbar[data-era="2017"] .wt-start { height: 42px; width: 48px; padding: 0; justify-content: center; }
.wt-taskbar[data-era="2016"] .wt-start__txt, .wt-taskbar[data-era="2017"] .wt-start__txt { display: none; }
.wt-taskbar[data-era="2016"] .wt-task, .wt-taskbar[data-era="2017"] .wt-task { height: 42px; border-radius: 0; }
.wt-taskbar[data-era="2016"] .wt-task.is-here { background: rgba(255,255,255,.1); box-shadow: inset 0 -2px 0 #6fb1ff; }
.wt-taskbar[data-era="2017"] .wt-task.is-here { background: rgba(255,255,255,.08); box-shadow: inset 0 -2px 0 #ff6b6b; }

/* 2019: XP Horror Edition, the same XP, gone red */
html.wt-on[data-wt-era="2019"] .wt-win { --wr: 9px 9px 3px 3px; border: 3px solid #5a1a1a; border-top: 0; }
html.wt-on[data-wt-era="2019"] .wt-win.is-focus, html.wt-on[data-wt-era="2019"] .wt-win:not(.card) { border-color: #a00; }
html.wt-on[data-wt-era="2019"] .wt-bar { height: 30px; margin-left: calc(-1 * var(--cp) - 3px); margin-right: calc(-1 * var(--cp) - 3px); font-weight: 700; text-shadow: 1px 1px #200; background: linear-gradient(180deg, #7a3a3a, #5a1a1a); color: #f3caca; }
html.wt-on[data-wt-era="2019"] .wt-win--pic .wt-bar { margin-left: -3px; margin-right: -3px; }
html.wt-on[data-wt-era="2019"] .wt-win.callout .wt-bar { margin-left: -21px; margin-right: -21px; }
html.wt-on[data-wt-era="2019"] .wt-win.is-focus .wt-bar, html.wt-on[data-wt-era="2019"] .wt-win:not(.card) .wt-bar { background: linear-gradient(180deg, #ff5a5a, #c00 12%, #d40000 45%, #b00000 88%, #700); color: #fff; }
html.wt-on[data-wt-era="2019"] .wt-bar__btns { align-items: center; gap: 2px; padding-right: 5px; }
html.wt-on[data-wt-era="2019"] .wt-bar__btns i { width: 21px; height: 21px; border: 1px solid #fcc; border-radius: 3px; background: linear-gradient(135deg, #e25555, #8a0000); }
.wt-taskbar[data-era="2019"] { background: linear-gradient(#a52020, #6e0b0b 10%, #5a0606 90%, #3d0303); color: #ffd9d9; }
.wt-taskbar[data-era="2019"] .wt-start { height: 42px; margin-left: -4px; padding: 0 20px 0 12px; border-radius: 0 14px 14px 0; background: linear-gradient(#3a3a3a, #1c1c1c); font-style: italic; font-weight: 700; font-size: 15px; }
.wt-taskbar[data-era="2019"] .wt-task { background: rgba(255,90,90,.16); }
.wt-taskbar[data-era="2019"] .wt-task.is-here { background: rgba(0,0,0,.35); }

/* ---------- phones: icons only in the taskbar ---------- */
@media (max-width: 700px) {
  .wt-task { max-width: none; width: 38px; padding: 0; justify-content: center; }
  .wt-task__t { display: none; }
  .wt-start__txt, .wt-clock { display: none; }
  .wt-taskbar[data-era="2004"] .wt-start, .wt-taskbar[data-era="2019"] .wt-start { padding-right: 14px; }
  html.wt-on .wt-bar__btns i { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html.wt-on .wt-win.reveal, html.wt-on .wt-win.reveal > :not(.wt-bar), html.wt-on .wt-win.reveal img { transform: none !important; translate: none !important; opacity: 1 !important; clip-path: none !important; }
}