/* ═══════════════════════════════════════
   REGIONS
═══════════════════════════════════════ */
#regions {
  background: var(--parch);
  padding: 100px 0;
  overflow: hidden;
}
.regions-header {
  padding: 0 80px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.regions-header .label {
  font-size: 0.66rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
  font-family: "Mulish", sans-serif;
}
.regions-header h2 {
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 2px;
}
.regions-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 0 80px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.regions-scroll::-webkit-scrollbar {
  display: none;
}
.region-card {
  flex-shrink: 0;
  width: 280px;
  height: 400px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  cursor: none;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.region-card:hover {
  width: 400px;
}
.rc-bg {
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}
.region-card:hover .rc-bg {
  transform: scale(1.06);
}
.bg1 {
  background: linear-gradient(
    160deg,
    #1a0a04 0%,
    #3d1808 40%,
    #6a2e10 70%,
    #9a4a1a 100%
  );
}
.bg2 {
  background: linear-gradient(
    160deg,
    #040a1a 0%,
    #0a1e3d 40%,
    #102e5a 70%,
    #1a4a7a 100%
  );
}
.bg3 {
  background: linear-gradient(
    160deg,
    #0a1a08 0%,
    #1a3d18 40%,
    #2a5a28 70%,
    #3a7a38 100%
  );
}
.bg4 {
  background: linear-gradient(
    160deg,
    #1a1204 0%,
    #3d2a08 40%,
    #6a4810 70%,
    #9a6a1a 100%
  );
}
.bg5 {
  background: linear-gradient(
    160deg,
    #12041a 0%,
    #2a0a3d 40%,
    #421060 70%,
    #5a1a7a 100%
  );
}
.bg6 {
  background: linear-gradient(
    160deg,
    #041a10 0%,
    #0a3d28 40%,
    #106a40 70%,
    #1a8a55 100%
  );
}
.bg7 {
  background: linear-gradient(
    160deg,
    #1a0808 0%,
    #3d1010 40%,
    #6a1818 70%,
    #8a2828 100%
  );
}
.bg8 {
  background: linear-gradient(
    160deg,
    #0a0a1a 0%,
    #181840 40%,
    #282870 70%,
    #38389a 100%
  );
}
.rc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    transparent 100%
  );
}
.rc-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px;
  transform: translateY(40px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.region-card:hover .rc-info {
  transform: translateY(0);
}
.rc-num {
  font-family: "Cinzel", serif;
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--gold-lt);
  opacity: 0.6;
  margin-bottom: 6px;
}
.rc-name {
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.rc-sub {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  margin-bottom: 14px;
  font-family: "EB Garamond", serif;
  font-style: italic;
}
.rc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.3s 0.1s;
}
.region-card:hover .rc-tags {
  opacity: 1;
}
.rc-tag {
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(200, 150, 42, 0.2);
  border: 1px solid rgba(200, 150, 42, 0.3);
  color: var(--gold-lt);
  padding: 3px 8px;
  font-family: "Mulish", sans-serif;
}