/* css/welcome.css
   ---------------------------------------------------------------------------
   The entry card that greets a first-time visitor once the desktop is revealed.

   This is the OS breaking its own rules on purpose, so the break is quarantined
   here the way the Messages radius exception is quarantined in css/messages.css:
   soft corners, a soft drop shadow and a dimmed backdrop instead of the usual
   3px black border and hard shadow. The typeface stays VT323, which is what
   still makes it read as Retrium OS rather than as a stray SaaS modal.

   Nothing here may leak: every selector is scoped under #welcome-overlay or
   #welcome-card. The card also deliberately uses no <button> element. Both
   desktop themes restyle `button` globally with !important, which would drop an
   ember slab where the round translucent close control is, so the two controls
   are role="button" spans and js/welcome.js gives them their keyboard handling.
   Keep it that way rather than fighting the themes with more !important.
   --------------------------------------------------------------------------- */

/* --- Dimmed backdrop --- */
/* Opacity rather than display, so the card can fade both ways and so
   pointer-events can be switched off the moment it starts leaving. Nothing is
   left over the desktop once it is gone. */
#welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500; /* Over the dock, the top bar and its menus; under the boot
                     screen, the sacrifice overlay and the theme overlays. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 15, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

#welcome-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms ease, visibility 0s;
}

/* --- The card --- */
/* The width is set by the measure rather than by taste. VT323 at 21px advances
   exactly 8.4px per character, so 580px minus the 44px of body padding is 64
   characters a line — the top of the comfortable range for a monospace face.
   Going wider than this needs a max-width on .welcome-copy, which would leave
   dead space beside the paragraph; do not just raise the number. */
#welcome-card {
  position: relative;
  width: min(580px, 100%);
  max-height: calc(100vh - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  background: #040e21;
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
  outline: none;
}

/* --- Banner --- */
/* The image is flush at the top and inherits the card's top corners through
   the card's own overflow clip, so no second radius is declared here. It is
   pixel art, but it is being scaled down rather than up, so it is left to the
   browser's smooth filter: `image-rendering: pixelated` on a downscale only
   adds aliasing. */
#welcome-card .welcome-banner {
  position: relative;
  display: block;
  line-height: 0;
}

/* Cropped rather than shown whole, because the card would otherwise get taller
   every time it gets wider and the shape would stay portrait.

   `object-position` is the load-bearing part. The artwork ends in a 58px band of
   dark grass that is the same value as the panel below it (measured at
   rgb(5,14,31) against the panel's rgb(4,14,33)), so the picture bleeds into the
   text block with no seam. `cover` defaults to a centred crop, which trimmed 66px
   off the bottom — the whole band and then some — and left a hard edge where lit
   grass met the panel. Pinning to the bottom spends the entire crop on sky, which
   the composition has to spare. Never let this trim the bottom, at any width.

   The phone shows the full image — see the media query at the end of this file. */
#welcome-card .welcome-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 500;
  object-fit: cover;
  object-position: 50% 100%;
}

/* --- Close control --- */
/* A deliberate partial return to the retro language inside a card that breaks
   it everywhere else. The span carries the OS's own `ctrl ctrl-close` classes,
   so this is literally the same control as every window title bar — same 18px
   red circle, same 2px black ring, same black glyph, and it follows the desktop
   themes exactly as the rest of the OS's close buttons do. `.ctrl` has no hover
   or active state, so neither does this. Only what a title bar cannot supply is
   set here: where it sits, and enough separation to survive the bright sky it
   floats over. Do not restate .ctrl's own declarations below; the point is that
   the two cannot drift apart. */
#welcome-card .welcome-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  /* Hard-edged, like every other shadow in the OS. The black ring from .ctrl
     does most of the work against the clouds; this stops the circle floating. */
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

/* .ctrl is 18px, which is a small target for the one control a first-time
   visitor has to find, especially on a phone. The circle stays 18px so it still
   reads as the OS's button; only the hit area grows, to 40px. */
#welcome-card .welcome-dismiss::before {
  content: "";
  position: absolute;
  inset: -11px;
}

#welcome-card .welcome-dismiss:focus-visible,
#welcome-card .welcome-secondary:focus-visible {
  outline: 2px solid #8fd3ff;
  outline-offset: 2px;
}

/* --- Text panel --- */
#welcome-card .welcome-body {
  padding: 20px 22px 22px;
  font-family: "VT323", monospace;
}

#welcome-card .welcome-copy {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
  color: #c8d4e8;
}

#welcome-card .welcome-copy strong {
  /* VT323 has one weight, so the emphasis is brightness, not a synthesized
     faux-bold. Same reasoning as the Messages thread rows. */
  font-weight: inherit;
  color: #f2f6ff;
}

#welcome-card .welcome-credit {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.4;
  color: #93a4c2;
}

#welcome-card .welcome-credit a {
  color: #8fd3ff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#welcome-card .welcome-credit a:hover {
  color: #c6e8ff;
}

/* --- Secondary action --- */
/* Separated by a hairline the way the reference separates its second link. */
#welcome-card .welcome-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#welcome-card .welcome-secondary {
  display: inline-block;
  font-size: 19px;
  color: #93a4c2;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#welcome-card .welcome-secondary:hover {
  color: #c8d4e8;
}

/* --- Phones --- */
/* The phone proportions are settled and must not move. Everything the desktop
   rules changed for shape has to be undone here, and `min(580px, 100%)` already
   resolves to 100% at these widths, so only the banner crop needs reverting. */
@media (max-width: 600px) {
  #welcome-overlay {
    padding: 12px;
  }

  #welcome-card {
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }

  /* A narrow card is tall enough already, so the phone gets the whole picture
     rather than the desktop's landscape crop. */
  #welcome-card .welcome-banner img {
    aspect-ratio: auto;
  }

  #welcome-card .welcome-body {
    padding: 16px 18px 18px;
  }

  #welcome-card .welcome-copy {
    font-size: 19px;
  }

  #welcome-card .welcome-credit,
  #welcome-card .welcome-secondary {
    font-size: 18px;
  }
}