/* ============================================================
   ONRYO OS 95 - "infestation"
   The look of a 2003 desktop that has had a very bad afternoon.
   ============================================================ */

/* ---------- popup ad bodies ---------- */
.ad {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Comic Sans MS", "Trebuchet MS", var(--font);
  cursor: default;
  user-select: none;
  position: relative;
}
/* image banners: the window is fitted to the art, so just fill it */
.ad-imgwrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  cursor: pointer;   /* the whole banner is the link */
}
.ad-img { display: block; width: 100%; height: 100%; object-fit: contain; }

.ad-missing {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  background: #fff;
  color: #a00000;
  word-break: break-all;
}
.ad-missing span { color: #555; font-size: 11px; }

.ad-hd {
  flex: 0 0 auto;
  text-align: center;
  font-weight: bold;
  line-height: 1.1;
  padding: 6px 6px 4px;
  text-transform: uppercase;
}
.ad-bd {
  flex: 1 1 auto;
  min-height: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  padding: 2px 8px;
  overflow: hidden;
}
.ad-ft { flex: 0 0 auto; padding: 6px; text-align: center; }

/* the flashing call-to-action sticker */
.ad-cta {
  display: inline-block;
  padding: 5px 16px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  color: #fff;
  background: #d00000;
  border: 2px outset #ff6a6a;
  text-shadow: 1px 1px 0 #000;
  cursor: pointer;
  animation: ad-flash .55s steps(2, start) infinite;
}
@keyframes ad-flash {
  to { background: #ffd400; color: #b00000; text-shadow: 1px 1px 0 #fff; }
}

.ad-blink { animation: ad-blink 1s steps(2, start) infinite; }
@keyframes ad-blink { to { visibility: hidden; } }

.ad-rainbow {
  background: linear-gradient(90deg, #ff0000, #ff8a00, #ffee00, #00c853, #00b0ff, #d500f9, #ff0000);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ad-slide 2.2s linear infinite;
}
@keyframes ad-slide { to { background-position: 300% 0; } }

.ad-marquee { overflow: hidden; white-space: nowrap; }
.ad-marquee > span {
  display: inline-block;
  padding-left: 100%;
  animation: ad-scroll 7s linear infinite;
}
@keyframes ad-scroll { to { transform: translateX(-100%); } }

/* windows that will not sit still */
.win.ad-jitter { animation: ad-jitter .35s ease-in-out infinite alternate; }
@keyframes ad-jitter {
  from { transform: translate(0, 0) }
  to   { transform: translate(3px, -3px) }
}

/* fake chat popup */
.ad-chat { background: #fff; height: 100%; display: flex; flex-direction: column; font-family: var(--font); }
.ad-chat .hd { background: #000080; color: #fff; font-size: 11px; padding: 2px 5px; font-weight: bold; }
.ad-chat .log { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 4px 6px; font-size: 11px; line-height: 1.5; }
.ad-chat .log b { color: #c00080; }
.ad-chat .typing { color: #777; font-style: italic; }
.ad-chat .row { display: flex; gap: 4px; padding: 4px; border-top: 1px solid #c0c0c0; }
.ad-chat .row input {
  flex: 1 1 auto; min-width: 0; font-family: var(--font); font-size: 11px;
  border: 1px solid; border-color: #808080 #fff #fff #808080; padding: 2px;
}

/* fake progress / scan bars */
.ad-bar {
  height: 14px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #000;
  padding: 1px;
  margin: 6px 0;
}
.ad-bar > i { display: block; height: 100%; background: #000080; width: 0; transition: width .25s linear; }

/* the assistant itself now lives in cssfiles/assistant.css */

/* ---------- screen-wide effects ---------- */
#virus-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 17500;
  display: none;
}
#virus-fx.on { display: block; }
#virus-fx .glitch {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: rgba(255, 0, 128, .5);
  mix-blend-mode: screen;
  animation: fx-sweep 3.5s linear infinite;
}
@keyframes fx-sweep {
  from { top: -4%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { top: 104%; opacity: 0; }
}

/* the toolbar the infection installs in every window */
.ad-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: "Comic Sans MS", var(--font);
  color: #fff;
  background: linear-gradient(180deg, #7a00b0, #3a0060);
  border-bottom: 1px solid #000;
}
.ad-toolbar .sb {
  flex: 1 1 auto;
  background: #fff;
  border: 1px solid #000;
  height: 15px;
}
.ad-toolbar b { color: #ffe400; }

/* ---------- meltdown: the screen coming apart ---------- */
body.vx-glitch #desktop,
body.vx-glitch #taskbar {
  animation: vx-shake .09s steps(2) infinite;
}
@keyframes vx-shake {
  0%   { transform: translate(0, 0) skewX(0deg); filter: none; }
  25%  { transform: translate(-7px, 2px) skewX(-1.6deg); filter: hue-rotate(90deg); }
  50%  { transform: translate(5px, -3px) skewX(1.2deg); filter: invert(1); }
  75%  { transform: translate(-3px, 4px) skewX(2deg); filter: hue-rotate(-70deg) saturate(4); }
  100% { transform: translate(6px, 0) skewX(-1deg); filter: none; }
}

/* torn scanline sheets dragged across everything */
body.vx-glitch::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 17800;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 0, 128, .30) 0 3px,
      rgba(0, 255, 200, .22) 3px 6px,
      transparent 6px 13px);
  mix-blend-mode: difference;
  animation: vx-tear .1s steps(4) infinite;
}
@keyframes vx-tear {
  0%   { background-position: 0 0; opacity: .9; }
  33%  { background-position: 40px -18px; opacity: .55; }
  66%  { background-position: -30px 22px; opacity: 1; }
  100% { background-position: 12px -40px; opacity: .7; }
}

/* a solid band that slams down the screen */
body.vx-glitch::before {
  content: "";
  position: fixed;
  left: 0; right: 0;
  height: 22%;
  z-index: 17810;
  pointer-events: none;
  background: rgba(255, 255, 255, .55);
  mix-blend-mode: overlay;
  animation: vx-band .38s linear infinite;
}
@keyframes vx-band {
  from { top: -25%; }
  to   { top: 105%; }
}

/* panic button that is always reachable */
#virus-panic {
  position: fixed;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  z-index: 9750;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 6px;
  font-size: 12px;
  background: #c0c0c0;
  border: 2px outset #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.4);
}
#virus-panic.on { display: flex; }
#virus-panic svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .ad-cta, .ad-blink, .ad-rainbow, .win.ad-jitter,
  #virus-fx .glitch, .ad-marquee > span { animation: none; }
  .ad-rainbow { color: #d000d0; -webkit-text-fill-color: currentColor; }
  /* the meltdown still happens, it just does not strobe */
  body.vx-glitch #desktop, body.vx-glitch #taskbar { animation: none; filter: invert(1); }
  body.vx-glitch::after { animation: none; opacity: .5; }
  body.vx-glitch::before { display: none; }
}