/* splash.css — the 50/50 Lab | Studio door page. No shell, no nav.
   Tokens come from base.css. Two clickable halves, full viewport. */

body.page-splash { overflow: hidden; }
body.page-splash main { opacity: 1; }  /* the door IS the content — no fade gate */

.splash-main {
  position: fixed; inset: 0;
  display: flex;
}

.splash-half {
  flex: 1 1 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  padding: 24px;
  transition: background 300ms;
}
.splash-half img {
  max-width: min(420px, 80%);
  height: auto;
  transition: transform 300ms;
}
.splash-half:hover img { transform: scale(1.04); }
.splash-half:focus-visible { outline: 3px solid var(--warm); outline-offset: -3px; }

/* clear split: distinct backgrounds + a divider between the halves */
/* Splash logos carry black text, so the splash always sits on a light
   backdrop regardless of saved theme. */
.splash-lab {
  background: #fbfaf7;
  border-right: 1px solid #e4dfd4;
}
.splash-lab:hover { background: #f3eff9; }

.splash-studio {
  background: #f8f4ee;
}
.splash-studio:hover { background: #f6ecd9; }

@media (max-width: 768px) {
  .splash-main { flex-direction: column; }
  .splash-half { flex: 1 1 50%; }
  .splash-lab { border-right: none; border-bottom: 1px solid var(--border); }
  .splash-half img { max-width: min(300px, 76%); }
}