:root{
  --bg-duration: 90s;
  --bg-size: auto;
}
html,body{height:100%;margin:0}
body{min-height:100vh;overflow:hidden}

/* Full-viewport tiled background layer that scrolls diagonally */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  background-image: url("images/bg.png");
  background-repeat: repeat;
  background-size: var(--bg-size);
  animation: scrollDiagonal var(--bg-duration) linear infinite;
  will-change: background-position;
}

/* Page content sits above the animated background */
.content{
  position:relative;
  z-index:1;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
  pointer-events:auto;
}

.content p{opacity:.85;max-width:40ch}

/* Site header (lowercase title) */
.site-header{
  position:relative;
  z-index:1;
  text-align:center;
  margin-top:0.5rem;
}
.site-title{
  margin:0;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:0.04em;
  color:inherit;
  text-transform:none;
}

@keyframes scrollDiagonal{
  from{background-position:0 0}
  to{background-position:200% 200%}
}

/* Respect users who request reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg{animation:none}
}

/* Journal viewer */
.journal-viewer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.25rem;
}
.journal-stage{
  position:relative;
  width:min(720px,90vw);
  max-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.journal-stage img{
  display:block;
  width:100%;
  height:auto;
  max-height:80vh;
  object-fit:contain;
  transition: none;
  opacity:1;
}
.journal-stage img.fading{
  /* kept for compatibility but it will not animate when transitions are disabled */
  opacity:0;
  transform:translateX(-10px) scale(.995);
}

/* Right-half clickable zone */
.journal-clickzone{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  right:0;
  cursor:pointer;
}
.journal-clickzone:hover{cursor:pointer}

/* Left half clickable zone for previous */
.journal-clickzone-left{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  left:0;
  cursor:pointer;
}
.journal-clickzone-left:hover{cursor:pointer}

/* Small hint overlay on the right edge */
.journal-hint{
  position:absolute;
  right:8px;
  bottom:8px;
  background:rgba(0,0,0,0.45);
  color:#fff;
  padding:.25rem .5rem;
  border-radius:6px;
  font-size:0.85rem;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .journal-stage img{transition:none}
}

/* Allow certain journal pages to render at their true size */
.journal-stage.true-size{
  width:auto;
  max-width:none;
  max-height:none;
  overflow:visible;
  border-radius:0;
}
.journal-stage.true-size img{
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:none;
}

/* Floating fish in the top-left */
.fish-container{
  position:fixed;
  top:50%;
  left:12px;
  transform:translateY(-50%);
  z-index:2;
  width:96px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.fish-container img{
  display:block;
  width:100%;
  height:auto;
  cursor:pointer;
  transition:transform 160ms ease;
}
.fish-container img:active{transform:scale(.98)}