/* Self Entitlement: the clock hero. Page-specific; album.css has the shared layout. */
:root {
  --ink: #070b16;
  --cream: #ebe6d9;
  --cream-dim: rgba(235, 230, 217, 0.68);
  --muted: #7d8aa6;
  --rule: rgba(235, 230, 217, 0.1);
  --gold: #e9b949;
  --topbar: #ebe6d9;
}

.hero.clock {
  /* The still cover is the fallback when the shader can't run. */
  background: #070b16 url(../assets/se/cover.webp) center 32% / auto 122% no-repeat;
}

.hero.clock.is-live { background-image: none; }

#clock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Night at the bottom so the title reads over the street. */
.hero.clock::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(7, 11, 22, 0.92), rgba(7, 11, 22, 0.5) 45%, rgba(7, 11, 22, 0));
  pointer-events: none;
  z-index: 1;
}

.hero.clock .hero-title,
.hero.clock .hint { z-index: 2; }

.hero.clock .hero-title h1 {
  color: var(--gold);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.8);
}

.hero.clock .hero-title .band { color: var(--cream-dim); }

.hero.clock .hint {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(2.5rem, 7vh, 5rem);
  margin: 0;
  max-width: 14rem;
  text-align: right;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--cream-dim);
  opacity: 0.8;
  transition: opacity 1.2s ease 0.4s;
  pointer-events: none;
}

.hero.clock.is-touched .hint { opacity: 0; }

@media (max-width: 820px) {
  .hero.clock .hint { display: none; }
}