/* ═══════════════════════════════════════════════
   hero.css — Full-screen image slider
═══════════════════════════════════════════════ */

.hero {
  position: relative;
  height: 100svh;   /* svh: safer on mobile (excludes browser chrome) */
  min-height: 500px;
  overflow: hidden;
}

/* ── Slides container ── */
.slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.slide.active {
  opacity: 1;
}

/* ── CSS placeholder gradients (replace with real images) ── */
/* slide-1: real image in use — solid fallback only */
.slide-1 { background: #2a2035; }
.slide-2 { background: linear-gradient(140deg, #1a2830 0%, #243545 25%, #2e4a3a 55%, #4a6e58 75%, #8aac98 100%); }
/* slide-3: real image in use — solid fallback */
.slide-3 { background: #221820; }
.slide-4 { background: linear-gradient(150deg, #18202a 0%, #243040 30%, #3a4858 60%, #6a8298 80%, #b0c4d4 100%); }
.slide-5 { background: linear-gradient(155deg, #201a14 0%, #382a1e 30%, #5a4030 60%, #8a7060 80%, #c4a888 100%); }

/* ── Grain texture overlay ── */
.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

/* ── Real image (used when <img> is inside .slide) ── */
.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Region label (bottom-right, vertical) ── */
.slide-label {
  position: absolute;
  bottom: 5rem;
  right: 3rem;
  font-family: var(--ff-serif-en);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  color: rgba(248, 246, 242, 0.35);
  font-style: italic;
  writing-mode: vertical-rl;
  pointer-events: none;
}

/* ── Gradient overlay (text readability) ── */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--space-lg) 6rem;
  background: linear-gradient(
    to top,
    rgba(20, 16, 30, 0.65) 0%,
    rgba(20, 16, 30, 0.1)  50%,
    transparent             100%
  );
  pointer-events: none;
}

.hero-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.55em;
  color: var(--lila-pale);
  margin-bottom: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  opacity: 0.75;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 0.5px;
  background: var(--kinshu);
  flex-shrink: 0;
}

.hero-heading {
  font-family: var(--ff-serif-jp);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 200;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--washi);
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

.hero-heading-en {
  font-family: var(--ff-serif-en);
  font-size: clamp(0.85rem, 1.5vw, 1.15rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.18em;
  color: rgba(248, 246, 242, 0.55);
}

/* ── Dot navigation ── */
.slide-dots {
  position: absolute;
  bottom: 2.5rem;
  left: var(--space-lg);
  display: flex;
  gap: 0.7rem;
  z-index: 10;
}

.dot {
  width: 24px;
  height: 0.5px;
  background: rgba(248, 246, 242, 0.3);
  border: none;
  padding: 6px 0;    /* larger hit area */
  cursor: pointer;
  transition: width 0.35s var(--ease-out), background 0.35s;
  background-clip: content-box;
}
.dot.active {
  width: 44px;
  background: var(--kinshu);
  background-clip: content-box;
}
.dot:focus-visible {
  outline: 2px solid var(--lila-soft);
  outline-offset: 4px;
}