/* Reinken House — splash
   Design tokens taken from Figma (node 80:205 / 80:266). */

:root {
  --cream: #d3cbc0;        /* border + logomark */
  --overlay: #808080;      /* gray veil over the image */
  --overlay-alpha: 0.6;
  --border-width: 10px;
  --page: #ffffff;         /* shows through only before the image paints */
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page);
}

body {
  /* No text on the page, but keep a sane inherited stack for a11y tools. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- stage */

.stage {
  position: fixed;
  inset: 0;
  display: block;
}

/* Fallback image layer, and the poster the canvas fades in over. Same source
   and same framing as the shader uses, so the handover is invisible. */
.stage__still {
  position: absolute;
  inset: 0;
  background-image: url("/assets/rose_full.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 600ms ease;
}

/* Set by main.js once the texture is uploaded and the first frame is drawn. */
.stage__canvas.is-ready { opacity: 1; }

/* ---------------------------------------------------------- gray overlay */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--overlay);
  opacity: var(--overlay-alpha);
  pointer-events: none;
}

/* -------------------------------------------------------------- logomark */

.logomark {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  pointer-events: none;
}

.logomark img {
  display: block;
  /* 513 / 1024 of the desktop frame; width follows the 321:513 ratio. */
  height: min(50vh, 55vw);
  width: auto;
}

@media (max-width: 768px) {
  /* 375 / 874 of the mobile frame. */
  .logomark img { height: min(43vh, 100vw); }
}

/* ------------------------------------------------------------ 10px frame */

.frame {
  position: fixed;
  inset: 0;
  z-index: 10;
  border: var(--border-width) solid var(--cream);
  pointer-events: none;
}

/* ---------------------------------------------------- reduced motion / a11y */

@media (prefers-reduced-motion: reduce) {
  .stage__canvas { transition: none; }
}