/* ============================================================
   TITLE SCREEN AND WORK ORDER FRAME
   The animated title screen (rolling floor plan, rising water,
   dripping lines, tape noise) and the layout that holds the work
   order and pause tickets.
   ============================================================ */

/* ---------- Floor plan behind the title ---------- */

/* Two copies of the plan scroll sideways at different speeds for a depth
   effect. The plan is the level the player is about to play, but it is
   faded so far that it only hints at a map. It is painted by
   paintSplashPlan() in src/render/splash-plan.js. */
.splash-plan{
  position:absolute; left:0; top:0; width:100%; height:100%; z-index:0;
  overflow:hidden; pointer-events:none; opacity:.085;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 26%,#000 74%,rgba(0,0,0,.35) 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0%,#000 26%,#000 74%,rgba(0,0,0,.35) 100%);
}
.splash-plan.far{ opacity:.03; filter:blur(2px); }
.splash-plan canvas{ display:block; width:200%; height:100%; }
.splash-plan       canvas{ animation:planroll 96s linear infinite; }
.splash-plan.far   canvas{ animation:planroll 61s linear infinite; }
/* Each canvas is twice the frame width and holds the plan twice. Moving it
   by -50% is exactly one copy, so the loop has no visible seam. */
@keyframes planroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Tape effects ---------- */

/* Dark horizontal bands. */
.splash-bands{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.45;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 5px,rgba(0,0,0,.55) 5px 7px);
}
/* Faint light lines, with a short sideways glitch every 7.5 seconds. */
.splash-track{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(228,230,168,.045) 0 2px,transparent 2px 9px);
  animation:splashjit 7.5s steps(1) infinite;
}
@keyframes splashjit{
  0%,95.9%{ transform:none; }
  96%{ transform:translateX(4px); }
  97%{ transform:translateX(-6px); }
  98%{ transform:translateX(2px); }
  99%{ transform:translateX(-2px); }
}

.screen.splash{
  background:#07060a;
  backdrop-filter:none;
  overflow:hidden;
}

/* ---------- Rising water ---------- */

/* The water box is always full height and pinned to the bottom. Only its
   bottom 40% is painted (see background-size), and scaleY from the bottom
   edge moves the waterline up and down. A transform is used instead of
   animating height so the browser does not redo layout on every frame. */
.splash-water{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  transform-origin:50% 100%;
  background:linear-gradient(180deg,#8fc4cc 0 3px,#3c5a60 4px 55%,#1d2f34 100%);
  background-size:100% 50%;
  background-position:bottom;
  background-repeat:no-repeat;
  animation:rise 20s cubic-bezier(.2,.3,.3,1) infinite alternate;
}

/* The wavy crest line. bottom:40% puts it on the top edge of the painted
   band, so it moves with the waterline. */
.splash-water::before{
  content:""; position:absolute; left:-50%; bottom:50%; margin-bottom:-3px;
  width:200%; height:6px;
  background:repeating-linear-gradient(90deg,#8fc4cc 0 18px,transparent 18px 36px);
  animation:drift 3.4s linear infinite; opacity:.55;
}
/* 0.30 and 1 put the waterline at 12% and 40% of the frame height. */
@keyframes rise{ from{transform:scaleY(.30)} to{transform:scaleY(1)} }
@keyframes drift{ to{transform:translateX(36px)} }

/* ---------- Title text ---------- */

.splash-plate{ position:relative; z-index:2; text-align:center; padding:0 24px; }
.screen.splash h1{
  font-size:clamp(34px,8.4vw,84px);
  letter-spacing:.26em;
  margin:0 0 12px;
  text-indent:.26em;                 /* balances the trailing letter-spacing so the title looks centred */
  text-shadow:0 0 26px rgba(228,230,168,.28);
  font-weight: 900;
}
.screen.splash h2{
  font-size:22px;
  color:#8fc4cc;
  margin-bottom:50px;
  text-shadow:0 0 26px var(--yellow);
  font-weight: 500;
  /* text-transform: uppercase; */
}

.splash-plate .go{
  margin:34px 0 0; font-size:14px; letter-spacing:.3em; font-weight: 900;
  animation:pulse 2.2s ease-in-out infinite;
}
.splash-plate .go b{ color:var(--ink); background:var(--yellow); font-weight: 900; padding:2px 8px; }
@keyframes pulse{ 50%{ opacity:.35 } }

/* The title menu: three entries in a column. The selected one is filled, the
   same "filled is active" rule the tabs and settings buttons use. */
.title-menu{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:30px 0 0; }
.title-menu button{
  min-width:260px; width: 350px; padding:10px 22px; font-size:15px; font-weight:900; letter-spacing:.3em;
  background:rgba(6,5,3,.6); color:var(--yellow-dim);
  border:1px solid rgba(228,230,168,.35); cursor:pointer;
}
.title-menu button small{ font-size:10px; letter-spacing:.2em; margin-left:8px; opacity:.7; }
.title-menu button.sel, .title-menu button:focus-visible{
  background:var(--yellow); color:var(--ink); border-color:var(--yellow);
}
@media (hover:hover){
  .title-menu button:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
}
.splash-plate .title-menu + .go{ margin-top:18px; animation:none; opacity:.8; }
@media (max-height:480px){
  .title-menu{ margin-top:12px; gap:5px; }
  .title-menu button{ padding:6px 18px; font-size:12px; }
}

/* ---------- Work order and pause ticket frame ---------- */

/* The wrapper that centres a ticket and its button row. It scrolls if the
   window is too short to show everything. */
.order-wrap{
  width:min(94vw,960px);
  max-height:94vh; overflow-y:auto; scrollbar-width:thin;
  max-height:calc(94dvh - var(--safe-t) - var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
#screen-binder{ background:rgba(6,5,3,.95); }
/* Two columns: the main body and a 250px stub on the right. */
.order{
  width:100%;
  display:grid; grid-template-columns:1fr 250px;
  border:1px solid rgba(228,230,168,.32);
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px),
    rgba(12,10,6,.96);
  box-shadow:0 0 60px rgba(0,0,0,.9), inset 0 0 40px rgba(228,230,168,.05);
}