/* Pixi Studio — landing module: the welcome screen and its two cards */

  #landingPage{display:none;height:calc(100% - 45px);width:100%;overflow:auto}
  #landingPage.on{display:flex}
  body.landing header{display:none}
  body.landing #landingPage{height:100%}

  .land{margin:auto;width:100%;max-width:980px;padding:40px 24px 28px;
    display:flex;flex-direction:column;gap:28px}
  .land-top{text-align:center;display:flex;flex-direction:column;gap:9px;align-items:center}
  .land-logo{font-weight:700;font-size:26px;letter-spacing:-.01em;display:flex;align-items:center;gap:12px}
  .land-logo .dot{width:16px;height:16px;border-radius:50%;
    background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent));
    box-shadow:0 0 16px rgba(94,208,255,.5)}
  .land-sub{margin:0;color:var(--muted);font-size:14px;line-height:1.6;max-width:44ch}

  .land-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .land-card{display:flex;flex-direction:column;gap:0;padding:0;text-align:left;cursor:pointer;
    background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
    font-family:var(--sans);color:inherit;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
  .land-card:hover{border-color:var(--accent);transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(0,0,0,.4)}
  .land-card:active{transform:translateY(0)}
  .land-meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}
  .land-meta h2{margin:0;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
  .land-meta p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
  .land-count{font-size:11px;color:var(--muted-2);font-family:var(--mono);margin-top:2px;min-height:14px}

  /* Ten real tiles from the library, one swapped every couple of seconds. They
     are all filled before the cards are shown — a grid that populates while you
     watch it takes far too long to say what is on offer, which was the whole
     complaint. See landPrime in js/landing.js. */
  .mont{position:relative;aspect-ratio:16/7;background:#0b0e14;display:grid;gap:2px;
    grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr)}
  .mont img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;
    transition:opacity .5s ease;background:#0b0e14}
  .mont img.in{opacity:1}
  .mont::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(11,14,20,0) 55%,rgba(22,29,40,.9) 100%)}

  /* Until the cards are ready there is nothing worth showing, so they are held
     back rather than assembled in public. They keep their space: the reveal is a
     fade, not a jump. Capped at LAND_MAX_WAIT so a slow CDN cannot hold it. */
  .land-cards{transition:opacity .45s ease}
  .land.loading .land-cards{opacity:0;pointer-events:none}
  .land.loading .land-top{opacity:1}

  /* Only has anything to say while the cards are being made. Afterwards it goes,
     but keeps its height so the reveal does not shove the page around. */
  .land-foot{display:flex;flex-direction:column;gap:8px;align-items:center;
    transition:opacity .4s ease}
  .land:not(.loading) .land-foot{opacity:0;pointer-events:none}
  .land-bar{width:min(320px,60%);height:2px;border-radius:2px;background:var(--line);overflow:hidden}
  .land-bar i{display:block;height:100%;width:0;border-radius:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}
  .land-note{font-size:11.5px;color:var(--muted-2)}

  @media (max-width:760px){
    .land-cards{grid-template-columns:1fr}
    .land{padding:26px 16px 20px;gap:20px}
    .mont{aspect-ratio:16/6}
  }