/* THE VAULT · the house on a desk · shared/vault-desktop.css
   The house is built for the phone in the hand. This file is what changes
   when it stands on a laptop or a desktop screen. Every rule sits inside a
   media query a phone never matches, so the phone's house does not move by
   one pixel. Pages link it with media="(min-width: 900px)", so a phone does
   not wait for it either.

   2026-09-23 · THE ROOM (900px and up, the portal and the saga hub). The
   page's own art, blurred and dimmed, fills the room around the 480px
   column, so the column reads as a lit object instead of a phone
   screenshot. A page names its art on <html>:
       <html style="--desk-art:url('...')">
   Use art the page already loads, so the room costs no extra download.

   2026-10-03 · THE DESK. Kevin: "time to work on the desktop version of the
   site". A desk is a screen at least 1024px wide AND held landscape: a
   laptop, a desktop, a tablet on its side. No phone reaches it, held either
   way (the widest are about 930px on their side), and a tablet held upright
   keeps the phone's house. A page says how it stands on a desk with one
   word on its <html>, and everything below follows from it:

       data-desk="wide"    the page opens to the width of the screen. The
                           film, the top bar and the page itself go wide; the
                           page lays out its own content in its own
                           @media (min-width:1024px) and (orientation:landscape)
                           block, inside --desk-gutter (the margin that keeps
                           every line on the house's 1280px measure).
       data-desk="screen"  the page stays a portrait screen: a story told
                           one panel at a time (the Legendarium's sky, an
                           entry). It stands in the middle of the room, lit
                           by its own art, the whole height of the window.
                           Nothing inside it changes.
       data-desk="room"    the page already lays itself out on a desk (the
                           screening room, the hear room); this file only
                           opens its door as a card.

   On all three, on a desk, the sheets (the wire, the seats, your road, the
   door) open as cards in the middle of the room instead of rising from the
   bottom edge, and they have no grip: there is no thumb to pull them down.
   The film's grain and scanlines, the ball, the paint and every colour are
   the reel's own (shared/vault-reel.css); nothing here repaints them. */

/* THE ROOM, exactly as on 23 Sep: the wide pages, from 900px */
@media (min-width: 900px) {
  html[data-desk="wide"][style*="--desk-art"]::before {
    content: "";
    position: fixed;
    inset: -60px;
    z-index: -1;
    pointer-events: none;
    background: var(--desk-art, none) center / cover no-repeat;
    filter: blur(42px) saturate(.85) brightness(.42);
    transform: scale(1.06);
  }
  html[data-desk="wide"][style*="--desk-art"]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 90% at 50% 45%, rgba(5, 5, 6, 0) 30%, rgba(5, 5, 6, .82) 100%);
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  /* the measure: content keeps to 1280px, and never closer than 40px to an edge */
  :root {
    --desk-max: 1280px;
    --desk-gutter: max(40px, calc((100vw - var(--desk-max)) / 2));
  }

  /* ---------- SCREEN: the room, around a page that stays a column ---------- */
  html[data-desk="screen"][style*="--desk-art"]::before {
    content: "";
    position: fixed;
    inset: -60px;
    z-index: -1;
    pointer-events: none;
    background: var(--desk-art, none) center / cover no-repeat;
    filter: blur(42px) saturate(.85) brightness(.42);
    transform: scale(1.06);
  }
  html[data-desk="screen"][style*="--desk-art"]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 90% at 50% 45%, rgba(5, 5, 6, 0) 30%, rgba(5, 5, 6, .82) 100%);
  }
  html[data-desk="screen"] body {
    background: transparent;
  }

  /* ---------- WIDE: the page opens to the screen ---------- */
  /* the body is no longer a 480px card: the room shows through it, and
     each part of the page sets its own ground */
  html[data-desk="wide"] body {
    max-width: none;
    box-shadow: none;
    background: transparent;
  }
  /* the film frames the whole screen: the letterbox, the scanlines, the grain */
  html[data-desk="wide"][data-film] .reel-bars,
  html[data-desk="wide"][data-film] .reel-fx {
    max-width: none;
  }
  /* the top bar runs the width of the screen; its doors keep to the measure */
  html[data-desk="wide"] .top {
    max-width: none;
    padding-left: var(--desk-gutter);
    padding-right: calc(var(--desk-gutter) - 8px);
  }
  html[data-desk="wide"] .top-actions {
    gap: 6px;
  }
  /* the menu stands on the left, in line with the logo, like the closing
     titles of a film on a wide screen */
  html[data-desk="wide"] .vreel-sheet {
    left: var(--desk-gutter);
    transform: none;
    max-width: 560px;
    padding-left: 0;
    padding-right: 0;
  }
  html[data-desk="wide"] .vreel-item {
    font-size: 30px;
  }
  html[data-desk="wide"] .vreel-sub {
    font-size: 19px;
  }

  /* ---------- the sheets, as cards in the middle of the room ----------
     The house's sheets (shared/vault-sheets.css, the pages' own) and the
     door (shared/vault-threshold.js, whose styles arrive at runtime, after
     this file: every rule names html[data-desk] first, so it wins on
     weight, not on order). */
  html[data-desk] .sheet {
    top: 50%;
    bottom: auto;
    width: calc(100% - 64px);
    max-width: 540px;
    max-height: min(88vh, 920px);
    padding-bottom: 28px;
    border: 1px solid rgba(255, 170, 0, .26);
    border-radius: 20px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .78);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) translateY(26px) scale(.985);
    transition: transform .36s cubic-bezier(.55, 0, .8, .2), opacity .3s ease, visibility 0s linear .36s;
  }
  html[data-desk] .sheet.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, visibility 0s;
  }
  /* the seats' confirm sits at the card's foot, so the card keeps no padding under it */
  html[data-desk] .sheet.has-confirm {
    padding-bottom: 0;
  }
  html[data-desk] .sheet-grip {
    visibility: hidden;
    height: 0;
    margin: 0 auto 30px;
  }
  /* the door */
  html[data-desk] .vth {
    align-items: center;
  }
  html[data-desk] .vth-sheet {
    max-width: 500px;
    max-height: calc(100% - 64px);
    margin-bottom: 0;
    border: 1px solid rgba(255, 170, 0, .26);
    border-radius: 20px;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .78);
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.985);
    transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
  }
  html[data-desk] .vth.on .vth-sheet {
    opacity: 1;
    transform: none;
  }
  html[data-desk] .vth.out .vth-sheet {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.99);
    transition: transform .36s cubic-bezier(.55, 0, .8, .2), opacity .3s ease;
  }
  html[data-desk] .vth-sheet.sizing {
    transition: transform .62s cubic-bezier(.16, 1, .3, 1), opacity .4s ease, height .5s cubic-bezier(.22, 1, .28, 1);
  }
  html[data-desk] .vth-body {
    padding-bottom: 30px;
  }
  html[data-desk] .vth-grip {
    visibility: hidden;
  }
}

/* a device that asks for less motion: the cards appear and leave in place */
@media (min-width: 1024px) and (orientation: landscape) and (prefers-reduced-motion: reduce) {
  html[data-desk] .sheet,
  html[data-desk] .sheet.show {
    transform: translate(-50%, -50%);
    transition: opacity .2s ease, visibility 0s linear .2s;
  }
  html[data-desk] .sheet.show {
    transition: opacity .2s ease, visibility 0s;
  }
  html[data-desk] .vth-sheet,
  html[data-desk] .vth.on .vth-sheet,
  html[data-desk] .vth.out .vth-sheet {
    transform: none;
    transition: opacity .2s ease;
  }
}