/*
 * The page in green, for Linux: the same page and the same layout, with the
 * brass swapped for terminal green and faint scan lines over the ground, and
 * the download swapped for word that it is still being built. Put on and taken
 * off by linux.js, which spreads the change from the press.
 */

/* The way in, under the Windows button: small and plain. */
.linux-ask {
  margin: calc(14 * var(--u, 1px)) 0 0;
}

.linux-link {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: calc(14 * var(--u, 1px));
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  cursor: pointer;
}

.linux-link:hover,
.linux-link:focus-visible {
  color: var(--cream);
}

.linux-link::before {
  content: '>_ ';
  color: var(--brass);
  font-family: ui-monospace, 'Cascadia Mono', 'DejaVu Sans Mono', Menlo, Consolas, monospace;
  text-decoration: none;
  display: inline-block;
  margin-right: 4px;
}

/* The colours. `--brass` is the page's accent, whatever colour it is. */
html.linux {
  --ground: #0a120d;
  --surface: #101c15;
  --raised: #16261c;
  --edge: rgba(126, 231, 135, 0.18);
  --brass: #7ee787;
  --brass-deep: #3fb950;
  --cream: #e6f4ea;
  --muted: #a7c4b0;
  --faint: #7f9a88;
}

/* The scan lines are a tile linux.js draws to the screen's own pixels. */
html.linux body {
  background:
    var(--linux-scan, none) 0 0 / var(--linux-scan-size, auto) repeat,
    radial-gradient(1200px 600px at 50% -200px, rgba(63, 185, 80, 0.16), transparent 70%),
    var(--ground);
}

/* The record turned green with the rest: its label and its sheen. */
html.linux .brand img {
  filter: hue-rotate(80deg) saturate(1.1);
}

html.linux .hero .icon {
  filter: hue-rotate(80deg) saturate(1.1) drop-shadow(0 10px 30px rgba(63, 185, 80, 0.35));
}

html.linux .button.primary,
html.linux .button.primary:hover {
  color: #06210f;
  box-shadow: 0 8px 24px rgba(63, 185, 80, 0.3);
}

html.linux .button .version {
  border-left-color: rgba(6, 33, 15, 0.25);
}

/* What the page says for each: the Windows download, or Linux on its way. */
html:not(.linux) .only-linux,
html.linux .only-windows {
  display: none !important;
}

/* "for Linux", under the name. */
.for-linux {
  display: block;
  margin-top: calc(10 * var(--u, 1px));
  color: var(--brass);
  font:
    600 min(calc(21 * var(--u, 1px)), max(17px, 2.4vw)) / 1.2 ui-monospace,
    'Cascadia Mono',
    'DejaVu Sans Mono',
    Menlo,
    Consolas,
    monospace;
  letter-spacing: 0.04em;
}

/* In place of a download: a terminal saying it is still being built. */
.linux-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--u, 1px));
  margin-top: calc(28 * var(--u, 1px));
}

.linux-term {
  width: min(100%, calc(460 * var(--u, 1px)));
  padding: calc(12 * var(--u, 1px)) calc(18 * var(--u, 1px));
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #07100b;
  color: var(--cream);
  font:
    calc(14 * var(--u, 1px)) / 1.7 ui-monospace,
    'Cascadia Mono',
    'DejaVu Sans Mono',
    Menlo,
    Consolas,
    monospace;
  text-align: left;
}

.linux-term p {
  margin: 0;
}

.linux-prompt {
  color: var(--brass);
}

.linux-output {
  color: var(--muted);
}

.linux-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  background: var(--brass);
  vertical-align: text-bottom;
  animation: linux-blink 1.05s steps(1) infinite;
}

@keyframes linux-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .linux-cursor {
    animation: none;
  }
}

/*
 * While it changes. The browser's own cross-fade is off: the blob is a clip on
 * the new picture of the page going in, and on the old one, raised above the
 * new, going out.
 */
html[data-linux-going]::view-transition-old(root),
html[data-linux-going]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html[data-linux-going='out']::view-transition-old(root) {
  z-index: 1;
}

/*
 * The light along the edge and the characters, live above both pictures, and
 * above the page for the moment the characters take to go afterwards.
 */
.linux-light {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  pointer-events: none;
  view-transition-name: linux-light;
}

::view-transition-group(linux-light),
::view-transition-new(linux-light) {
  animation: none;
}

::view-transition-old(linux-light) {
  display: none;
}