/* aigile.lol pre-teaser (AIG-1320), on top of site/style.css: the live board fills the window behind a light veil
   (it is the star: cards are bars, nothing to read), a dust sheet with soft folds over it, and one solid card on top. */
body.pre{min-height:100vh;min-height:100dvh}

/* Behind the glass */
.pre-back{position:fixed;inset:0;z-index:0;overflow:hidden;padding:16px;pointer-events:none;filter:blur(1px) saturate(.95)}
.pre-back .live{max-width:none;margin:0;padding:0;height:100%;text-align:start}
.pre-back .live-stat,.pre-back .live-last,.pre-back .live-msg{display:none!important}
.pre-back .live-scroll{overflow:hidden;padding:0;height:100%}
.pre-back .lv-cols{height:100%;align-items:stretch;min-width:0}
.pre-back .lv-col{min-width:104px;min-height:100%;overflow:hidden;padding:10px}
.pre-back .lv-col h3{font-size:12px}
.pre-back .lv-card{height:16px;border-radius:8px;margin-bottom:8px}
.pre-back .lv-card.p-high,.pre-back .lv-card.p-urgent{height:20px}
.pre-fake{position:absolute;inset:16px}

/* The dust sheet: a little of the page colour over the board, a fine weave and a few soft folds that drift slowly */
.pre-sheet{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg,transparent 0 18%,rgba(255,255,255,.07) 24%,transparent 31%,transparent 52%,rgba(0,0,0,.06) 58%,transparent 64%,transparent 78%,rgba(255,255,255,.05) 84%,transparent 90%),
    repeating-linear-gradient(45deg,rgba(127,127,127,.035) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,rgba(127,127,127,.03) 0 1px,transparent 1px 5px),
    linear-gradient(color-mix(in srgb,var(--bg) 30%,transparent),color-mix(in srgb,var(--bg) 50%,transparent));
  background-size:220% 100%,auto,auto,auto;animation:presheet 26s ease-in-out infinite alternate}
@keyframes presheet{from{background-position:0 0,0 0,0 0,0 0}to{background-position:100% 0,0 0,0 0,0 0}}

/* On top: tools in the top corner, the card in the middle, the footer at the bottom. In the page order the button
   comes straight after the heading, then the language and theme buttons, then the footer. */
.pre-page{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;grid-template-areas:"tools" "main" "foot"}
.pre-tools{grid-area:tools;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:16px}
.pre-main{grid-area:main;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:8px 16px 24px}
.pre-card{width:100%;max-width:34rem;text-align:center;padding:32px 28px;border-radius:20px;border:1px solid var(--line);
  background:var(--raised);background:color-mix(in srgb,var(--raised) 93%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg)}
.pre-logo{width:88px;height:88px;border-radius:18px;box-shadow:var(--shadow-lg)}
.pre-card h1{font-size:clamp(1.75rem,6.5vw,2.6rem);margin:18px 0 22px}
.pre-btn{font-size:18px;min-height:56px;cursor:pointer}
.pre-line{margin:22px auto 0;max-width:28rem;color:var(--text);font-size:17px}
.pre-card .people-count{margin-top:14px}
.pre-peek{margin:0;max-width:34rem;text-align:center;font-size:14px;color:var(--text);padding:4px 14px;border-radius:999px;background:color-mix(in srgb,var(--bg) 88%,transparent)}
.pre-foot{grid-area:foot;border-top:0;margin:0 auto 16px;padding:8px 16px;max-width:calc(100% - 32px);border-radius:16px;color:var(--text);background:color-mix(in srgb,var(--bg) 88%,transparent)}
@media (max-width:480px){.pre-card{padding:24px 18px}.pre-tools{padding:12px 16px}}
@media (prefers-reduced-motion:reduce){.pre-sheet{animation:none}}