/* Samurai hero: three stacked layers, title in the middle. */
.sh-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: #1a0b0c url("assets/poster.jpg") center / cover no-repeat; /* shown until WebGL is ready */
  isolation: isolate;
}
.sh-bg,
.sh-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sh-bg { z-index: 1; }
.sh-title { z-index: 2; }
.sh-fg { z-index: 3; pointer-events: none; }

.sh-title {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.86));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}
.sh-title span { display: inline-block; }
/* the samurai fades in first, then the title fades in softly and a slow light sheen keeps moving across it */
.sh-title {
  opacity: 0; filter: blur(14px);
  transition: opacity 2.2s ease 1.2s, filter 2.4s ease 1.2s;
  background-image: linear-gradient(100deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.66) 40%, rgba(255,255,255,.97) 50%, rgba(255,255,255,.66) 60%, rgba(255,255,255,.66) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  animation: shSheen 8s ease-in-out 4s infinite;
  will-change: transform;
}
.sh-ready .sh-title, .sh-static .sh-title { opacity: 1; filter: none; }
@keyframes shSheen { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }

/* fade in from black once the scene is ready */
.sh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #0d0506;
  pointer-events: none;
  transition: opacity 1.8s ease;
}
.sh-ready::after { opacity: 0; }

/* no WebGL / failed load: keep the poster, show the title */
.sh-static .sh-bg,
.sh-static .sh-fg { display: none; }
.sh-static::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .sh-title { transition: opacity 0.6s ease; filter: none; animation: none; }
}