/* ===== title.css ===== */

/* Load your custom font */
@font-face {
  font-family: 'OrangeFogue';
  src: url('../fonts/OrangeFogueDemoRegular-gwj7Y.ttf') format('truetype');
  font-display: swap;
}

/* Fullscreen title overlay */
#title-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1000;
  background:
    url('../img/title.png') center / cover no-repeat,
    #000; /* fallback */
}

/* Inner safe area aligned with 16:9 canvas */
#title-screen .title-inner {
  width: min(1280px, 95vw);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3vw;
  position: relative;
}

/* Title text base style */
.title-copy {
  font-family: 'OrangeFogue', system-ui, sans-serif;
  color: #5C4033;
  opacity: 0; /* JS will animate with story-enter / story-exit */

  /* 2px outline fallback */
  text-shadow:
    -2px 0 rgba(0,0,0,.5),  2px 0 rgba(0,0,0,.5),
     0 -2px rgba(0,0,0,.5), 0  2px rgba(0,0,0,.5),
    -2px -2px rgba(0,0,0,.5), 2px -2px rgba(0,0,0,.5),
    -2px  2px rgba(0,0,0,.5), 2px  2px rgba(0,0,0,.5);
}
@supports (-webkit-text-stroke: 1px black) {
  .title-copy {
    -webkit-text-stroke: 2px rgba(0,0,0,.5);
    text-shadow: none;
  }
}

/* Fade out the whole title overlay (JS adds .hide) */
#title-screen.hide {
  animation: fadeOut 450ms ease forwards;
  pointer-events: none;
}

/* FadeOut keyframes for overlay */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Stage and canvas sizing */
html, body {
  margin: 0;
  height: 100%;
  background: #000;
}
#root {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden; /* crop like background-size: cover */
}
#scene {
  display: block;
  background: #000;
  width: min(1280px, 95vw);
  height: calc((720 / 1280) * min(1280px, 95vw));
}