/* ════════════════════════════════════════════
   WORLD ART TREASURY — styles.css
   ════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --nav-h: 68px;
  --pills-h: 50px;
  --radius: 12px;
  --transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Region colour tokens */
  --ea-bg1: #0d1b2a;
  --ea-bg2: #1a2f44;
  --ea-accent: #c8384a;
  --ea-text: #f0e6d3;

  --sa-bg1: #2d0a00;
  --sa-bg2: #4a1200;
  --sa-accent: #e8912a;
  --sa-text: #faebd7;

  --af-bg1: #1a0d00;
  --af-bg2: #2e1800;
  --af-accent: #d4830a;
  --af-text: #f5e6c8;

  --eu-bg1: #0f0f1e;
  --eu-bg2: #1e1e3a;
  --eu-accent: #c9a84c;
  --eu-text: #e8e0d0;

  --me-bg1: #0a1520;
  --me-bg2: #112233;
  --me-accent: #d4af37;
  --me-text: #f0e8d0;

  --la-bg1: #1a0800;
  --la-bg2: #2e1000;
  --la-accent: #e85d04;
  --la-text: #fff0e0;

  --oc-bg1: #020c14;
  --oc-bg2: #041a28;
  --oc-accent: #0096c7;
  --oc-text: #e0f0f8;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #0a0a0a;
  color: #e8e0d0;
  overflow-x: hidden;
  line-height: 1.7;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* ════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════ */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.3s;
}

.nav-logo {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #e8e0d0;
  white-space: nowrap;
  flex-shrink: 0;
}

.logo-ask {
  color: #f0d080;
  font-style: italic;
  letter-spacing: 0.01em;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 28px;
  margin-left: auto;
  padding-right: 16px;
}

.nav-links a {
  color: rgba(240,224,208,0.7);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.nav-links a:hover { color: #f0d080; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: #e8e0d0;
  font-size: 1.2rem;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 4px;
}

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 30% 40%, #1a1040 0%, #080810 60%),
              radial-gradient(ellipse at 80% 70%, #0d1a10 0%, transparent 60%);
}

/* Floating particles */
.hero-particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute;
  border-radius: 50%;
  animation: floatUp linear infinite;
}
.p1 { width:4px;height:4px;background:#c9a84c;left:15%;bottom:-20px;animation-duration:12s;animation-delay:0s;opacity:0.7; }
.p2 { width:6px;height:6px;background:#c8384a;left:35%;bottom:-20px;animation-duration:15s;animation-delay:3s;opacity:0.5; }
.p3 { width:3px;height:3px;background:#4a9eff;left:55%;bottom:-20px;animation-duration:10s;animation-delay:1.5s;opacity:0.6; }
.p4 { width:5px;height:5px;background:#d4830a;left:70%;bottom:-20px;animation-duration:13s;animation-delay:5s;opacity:0.5; }
.p5 { width:4px;height:4px;background:#0096c7;left:82%;bottom:-20px;animation-duration:11s;animation-delay:2s;opacity:0.7; }
.p6 { width:3px;height:3px;background:#e85d04;left:25%;bottom:-20px;animation-duration:14s;animation-delay:7s;opacity:0.6; }

@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-105vh) rotate(360deg); opacity: 0; }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 780px;
}

.hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #c9a84c;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: rgba(201,168,76,0.5);
  display: inline-block;
}

#hero h1 {
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  font-weight: 300;
  line-height: 1.05;
  color: #f5f0e8;
  margin-bottom: 28px;
}

#hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, #c9a84c, #f0d080, #c9a84c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(240,224,208,0.65);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.8;
}

.cta-btn {
  display: inline-block;
  padding: 14px 40px;
  border: 1px solid rgba(201,168,76,0.5);
  color: #c9a84c;
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: all 0.3s;
  border-radius: 2px;
}
.cta-btn:hover {
  background: rgba(201,168,76,0.12);
  border-color: #c9a84c;
  color: #f0d080;
  transform: translateY(-2px);
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(240,224,208,0.35);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(201,168,76,0.5), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.3; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.1); }
}

/* ════════════════════════════════════════════
   REGION PILLS (sticky)
   ════════════════════════════════════════════ */
.region-pills {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 8px 32px;
  background: rgba(6,6,6,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.region-pills::-webkit-scrollbar { display: none; }

.pill {
  flex-shrink: 0;
  padding: 5px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(240,224,208,0.6);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.25s;
  white-space: nowrap;
}
.pill:hover, .pill.active { background: rgba(201,168,76,0.18); border-color: rgba(201,168,76,0.5); color: #f0d080; }

/* ════════════════════════════════════════════
   REGION SECTIONS — SHARED
   ════════════════════════════════════════════ */
.region-section {
  position: relative;
  padding: 100px 0 80px;
  overflow: hidden;
}

.region-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.region-inner {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
}

.region-header {
  max-width: 640px;
  margin-bottom: 60px;
}

.region-num {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 12px;
}

.region-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 8px;
}

.region-countries {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 18px;
}

.region-desc {
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.8;
  max-width: 580px;
}

/* ── Art Grid ── */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* ── Art Card ── */
.art-card {
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(30px);
}
.art-card.visible {
  animation: cardReveal 0.6s forwards;
}

@keyframes cardReveal {
  to { opacity: 1; transform: translateY(0); }
}

.art-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.art-card:hover .card-visual { filter: brightness(1.08); }

.card-visual {
  width: 100%;
  aspect-ratio: 4/3;
  transition: filter 0.3s;
  position: relative;
  overflow: hidden;
}

/* Real image card */
.card-visual-img {
  background: #111;
}
.card-visual-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}
.art-card:hover .card-visual-img img {
  transform: scale(1.05);
}

/* Real image modal */
.modal-visual-img {
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.modal-visual-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.card-info {
  padding: 16px 18px;
}

.card-region-badge {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 6px;
}

.card-title {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.3;
}

.card-meta {
  font-size: 0.75rem;
  opacity: 0.5;
  font-style: italic;
}

/* ════════════════════════════════════════════
   SECTION 1 — EAST ASIAN
   ════════════════════════════════════════════ */
.ea-section { background: linear-gradient(160deg, var(--ea-bg1) 0%, var(--ea-bg2) 100%); color: var(--ea-text); }

.ea-bg {
  background:
    radial-gradient(ellipse at 90% 10%, rgba(200,56,74,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 10% 90%, rgba(26,79,122,0.15) 0%, transparent 40%);
}

/* Mountain silhouette */
.ea-mountain {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 300px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-top: 1px solid rgba(255,255,255,0.04);
}

.ea-wave-svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: auto;
}

/* Cherry blossoms */
.blossom {
  position: absolute;
  border-radius: 50% 0 50% 0;
  animation: blossomFall linear infinite;
  pointer-events: none;
}

.blossom::before, .blossom::after {
  content:'';
  position: absolute;
  inset: 0;
  border-radius: 50% 0 50% 0;
  background: rgba(255,182,193,0.3);
  transform: rotate(90deg);
}

.b1 { width:10px;height:10px;background:rgba(255,182,193,0.3);left:8%;top:-20px;animation-duration:12s;animation-delay:0s; }
.b2 { width:8px;height:8px;background:rgba(255,160,170,0.25);left:23%;top:-20px;animation-duration:16s;animation-delay:3s; }
.b3 { width:12px;height:12px;background:rgba(255,192,203,0.3);left:45%;top:-20px;animation-duration:10s;animation-delay:7s; }
.b4 { width:7px;height:7px;background:rgba(255,170,180,0.25);left:68%;top:-20px;animation-duration:14s;animation-delay:1s; }
.b5 { width:10px;height:10px;background:rgba(255,182,193,0.3);left:82%;top:-20px;animation-duration:11s;animation-delay:5s; }
.b6 { width:9px;height:9px;background:rgba(255,160,170,0.25);left:58%;top:-20px;animation-duration:13s;animation-delay:9s; }

@keyframes blossomFall {
  0%   { transform: translateY(0) rotate(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(50vh) rotate(180deg) translateX(30px); }
  90%  { opacity: 0.6; }
  100% { transform: translateY(110vh) rotate(360deg) translateX(-20px); opacity: 0; }
}

.ea-section .region-title { color: #f5e6e8; }
.ea-section .art-card { border-color: rgba(200,56,74,0.15); }
.ea-section .art-card:hover { border-color: rgba(200,56,74,0.4); box-shadow: 0 20px 50px rgba(200,56,74,0.15); }
.ea-section .card-region-badge { color: #e8a0a8; }

/* ════════════════════════════════════════════
   SECTION 2 — SOUTH ASIAN
   ════════════════════════════════════════════ */
.sa-section { background: linear-gradient(160deg, var(--sa-bg1) 0%, var(--sa-bg2) 60%, #1a0800 100%); color: var(--sa-text); }

.sa-bg {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(232,145,42,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 20%, rgba(180,50,50,0.1) 0%, transparent 40%);
}

.mandala-svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: min(900px, 130%);
  height: auto;
  animation: slowSpin 80s linear infinite;
  pointer-events: none;
}

@keyframes slowSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.sa-section .region-title { color: #ffecd0; }
.sa-section .art-card { border-color: rgba(232,145,42,0.18); }
.sa-section .art-card:hover { border-color: rgba(232,145,42,0.45); box-shadow: 0 20px 50px rgba(232,145,42,0.2); }
.sa-section .card-region-badge { color: #e8a870; }

/* ════════════════════════════════════════════
   SECTION 3 — AFRICAN
   ════════════════════════════════════════════ */
.af-section { background: linear-gradient(160deg, var(--af-bg1) 0%, var(--af-bg2) 100%); color: var(--af-text); }

.af-bg {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(212,131,10,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 80%, rgba(160,60,0,0.12) 0%, transparent 45%);
}

/* Kente-inspired geometric overlay */
.af-geo-overlay {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(212,131,10,0.04) 0px, transparent 1px, transparent 39px, rgba(212,131,10,0.04) 40px),
    repeating-linear-gradient(90deg, rgba(212,131,10,0.04) 0px, transparent 1px, transparent 39px, rgba(212,131,10,0.04) 40px),
    repeating-linear-gradient(45deg, rgba(180,60,0,0.03) 0px, transparent 1px, transparent 59px, rgba(180,60,0,0.03) 60px);
}

.af-section .region-title { color: #ffe0b0; }
.af-section .art-card { border-color: rgba(212,131,10,0.18); }
.af-section .art-card:hover { border-color: rgba(212,131,10,0.45); box-shadow: 0 20px 50px rgba(212,131,10,0.2); }
.af-section .card-region-badge { color: #e8c080; }

/* ════════════════════════════════════════════
   SECTION 4 — EUROPEAN
   ════════════════════════════════════════════ */
.eu-section { background: linear-gradient(160deg, var(--eu-bg1) 0%, var(--eu-bg2) 100%); color: var(--eu-text); }

.eu-bg {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(80,60,30,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 100%, rgba(40,40,80,0.18) 0%, transparent 50%);
}

/* Baroque corner ornaments */
.eu-orn {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.06;
  background:
    radial-gradient(circle at center, rgba(201,168,76,0.8) 0%, transparent 60%);
}
.eu-orn-tl { top: 0; left: 0; border-radius: 0 0 100% 0; }
.eu-orn-tr { top: 0; right: 0; border-radius: 0 0 0 100%; }
.eu-orn-bl { bottom: 0; left: 0; border-radius: 0 100% 0 0; }
.eu-orn-br { bottom: 0; right: 0; border-radius: 100% 0 0 0; }

/* Thin gold border lines */
.eu-section::before {
  content:'';
  position: absolute;
  top: 30px; bottom: 30px;
  left: 30px; right: 30px;
  border: 1px solid rgba(201,168,76,0.06);
  pointer-events: none;
  z-index: 1;
}

.eu-section .region-title { color: #f5ecd0; }
.eu-section .art-card { border-color: rgba(201,168,76,0.15); }
.eu-section .art-card:hover { border-color: rgba(201,168,76,0.4); box-shadow: 0 20px 50px rgba(201,168,76,0.15); }
.eu-section .card-region-badge { color: #c9a84c; }

/* ════════════════════════════════════════════
   SECTION 5 — MIDDLE EASTERN
   ════════════════════════════════════════════ */
.me-section { background: linear-gradient(160deg, var(--me-bg1) 0%, var(--me-bg2) 100%); color: var(--me-text); }

.me-bg {
  background:
    radial-gradient(ellipse at 60% 30%, rgba(20,60,80,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(212,175,55,0.06) 0%, transparent 50%);
}

.me-geo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}

.me-section .region-title { color: #f5ecd0; }
.me-section .art-card { border-color: rgba(212,175,55,0.18); }
.me-section .art-card:hover { border-color: rgba(212,175,55,0.5); box-shadow: 0 20px 50px rgba(212,175,55,0.15); }
.me-section .card-region-badge { color: #d4af37; }

/* ════════════════════════════════════════════
   SECTION 6 — LATIN AMERICAN
   ════════════════════════════════════════════ */
.la-section { background: linear-gradient(160deg, var(--la-bg1) 0%, var(--la-bg2) 60%, #120000 100%); color: var(--la-text); }

.la-bg {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(232,93,4,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 10%, rgba(255,200,0,0.07) 0%, transparent 40%);
}

/* Aztec sun element */
.aztec-sun-bg {
  position: absolute;
  top: 50%; right: 5%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 2px solid rgba(232,93,4,0.06);
  box-shadow:
    0 0 0 20px rgba(232,93,4,0.03),
    0 0 0 40px rgba(232,93,4,0.02),
    0 0 0 60px rgba(232,93,4,0.015),
    0 0 0 80px rgba(232,93,4,0.01);
  opacity: 0.7;
}

.la-section .region-title { color: #fff0d0; }
.la-section .art-card { border-color: rgba(232,93,4,0.2); }
.la-section .art-card:hover { border-color: rgba(232,93,4,0.5); box-shadow: 0 20px 50px rgba(232,93,4,0.25); }
.la-section .card-region-badge { color: #f0a060; }

/* ════════════════════════════════════════════
   SECTION 7 — OCEANIC
   ════════════════════════════════════════════ */
.oc-section { background: linear-gradient(180deg, var(--oc-bg1) 0%, var(--oc-bg2) 100%); color: var(--oc-text); }

.oc-bg {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0,150,199,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(0,60,100,0.15) 0%, transparent 45%);
}

.oc-wave-svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: auto;
  animation: waveDrift 8s ease-in-out infinite alternate;
}

@keyframes waveDrift { from { transform: translateX(-1%); } to { transform: translateX(1%); } }

.oc-section .region-title { color: #d0f0ff; }
.oc-section .art-card { border-color: rgba(0,150,199,0.2); }
.oc-section .art-card:hover { border-color: rgba(0,150,199,0.5); box-shadow: 0 20px 50px rgba(0,150,199,0.2); }
.oc-section .card-region-badge { color: #70c8e8; }

/* ════════════════════════════════════════════
   CSS ART — Card Visual Styles
   ════════════════════════════════════════════ */

/* East Asian */
.v-great-wave {
  background: linear-gradient(160deg, #0a1a3a 0%, #1a3a6a 40%, #2a5a90 100%);
  position: relative;
  overflow: hidden;
}
.v-great-wave::before {
  content:'';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(220,230,255,0.15) 0%, transparent 40%),
    linear-gradient(0deg, rgba(255,255,255,0.08) 0%, transparent 30%);
}
.v-great-wave::after {
  content:'';
  position: absolute;
  bottom: 0; left: -10%;
  width: 120%;
  height: 55%;
  border-radius: 50% 50% 0 0;
  border-top: 3px solid rgba(255,255,255,0.3);
  box-shadow: 0 -8px 20px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.05);
}

.v-bamboo {
  background: linear-gradient(180deg, #0a1206 0%, #141e0a 100%);
  position: relative;
}
.v-bamboo::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 10px, rgba(60,100,30,0.3) 11px, rgba(60,100,30,0.3) 13px, transparent 14px),
    repeating-linear-gradient(90deg, transparent 50px, rgba(40,80,20,0.25) 51px, rgba(40,80,20,0.25) 53px, transparent 54px),
    repeating-linear-gradient(90deg, transparent 90px, rgba(70,110,35,0.3) 91px, rgba(70,110,35,0.3) 93px, transparent 94px);
}
.v-bamboo::after {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 3px, transparent 24px);
}

.v-celadon {
  background: radial-gradient(ellipse at 40% 35%, #6a9e90 0%, #3d7065 30%, #1d4038 80%, #0d2020 100%);
  position: relative;
}
.v-celadon::before {
  content:'';
  position: absolute;
  top:15%; left:25%; right:25%; bottom:10%;
  border-radius: 45% 45% 50% 50%;
  border: 1px solid rgba(140,200,180,0.25);
  box-shadow: inset 0 20px 40px rgba(255,255,255,0.08), inset 0 -10px 20px rgba(0,0,0,0.3);
}
.v-celadon::after {
  content:'';
  position: absolute;
  top:10%; left:30%; width: 12%; height: 18%;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  filter: blur(4px);
}

.v-sakura {
  background: linear-gradient(140deg, #f5e6e8 0%, #e8ccd0 50%, #d4a8b0 100%);
  position: relative;
}
.v-sakura::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(200,100,120,0.25) 8px, transparent 9px),
    radial-gradient(circle at 60% 20%, rgba(200,100,120,0.2) 6px, transparent 7px),
    radial-gradient(circle at 75% 60%, rgba(200,100,120,0.25) 10px, transparent 11px),
    radial-gradient(circle at 40% 70%, rgba(200,100,120,0.2) 7px, transparent 8px),
    radial-gradient(circle at 15% 65%, rgba(200,100,120,0.2) 5px, transparent 6px);
}

/* South Asian */
.v-rajput {
  background: linear-gradient(135deg, #4a1000 0%, #7a2800 40%, #a03c00 100%);
  position: relative;
}
.v-rajput::before {
  content:'';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,200,80,0.3);
}
.v-rajput::after {
  content:'';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,200,80,0.15);
  background: radial-gradient(ellipse at 50% 30%, rgba(255,200,80,0.12) 0%, transparent 60%);
}

.v-madhubani {
  background: linear-gradient(160deg, #f5e8d0 0%, #e8d0a0 100%);
  position: relative;
}
.v-madhubani::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(80,140,60,0.15) 30px, transparent 31px),
    radial-gradient(circle at 50% 50%, rgba(80,140,60,0.08) 60px, transparent 61px),
    radial-gradient(circle at 50% 50%, rgba(80,140,60,0.05) 90px, transparent 91px),
    radial-gradient(ellipse at 50% 50%, transparent 30px, rgba(150,60,30,0.1) 31px, rgba(150,60,30,0.1) 35px, transparent 36px);
}

.v-pattachitra {
  background: linear-gradient(150deg, #5c0a00 0%, #8a1500 50%, #6a0f00 100%);
  position: relative;
}
.v-pattachitra::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,200,0,0.06) 0px, transparent 2px, transparent 18px, rgba(255,200,0,0.06) 20px);
}
.v-pattachitra::after {
  content:'';
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(255,200,0,0.2);
  border-radius: 4px;
}

.v-tanjore {
  background: radial-gradient(ellipse at 50% 30%, #8a6000 0%, #3a2800 60%, #1a1200 100%);
  position: relative;
}
.v-tanjore::before {
  content:'';
  position: absolute;
  top:15%; left:30%; right:30%; bottom:20%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,200,0,0.25) 0%, rgba(200,150,0,0.1) 50%, transparent 70%);
  box-shadow: 0 0 30px rgba(255,180,0,0.15);
}

/* African */
.v-benin {
  background: linear-gradient(150deg, #1a0800 0%, #3a1800 50%, #2a1000 100%);
  position: relative;
}
.v-benin::before {
  content:'';
  position: absolute;
  top:10%; left:20%; right:20%; bottom:10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #c07830 0%, #8a5020 50%, #4a2808 100%);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 -5px 15px rgba(0,0,0,0.4);
}
.v-benin::after {
  content:'';
  position: absolute;
  top:22%; left:35%; width:10%; height:8%;
  border-radius: 50%;
  background: rgba(255,200,150,0.25);
  filter: blur(3px);
}

.v-kente {
  background: #1a0800;
  position: relative;
}
.v-kente::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      #c8a020 0px, #c8a020 18px,
      #1a0000 18px, #1a0000 24px,
      #1a8020 24px, #1a8020 42px,
      #1a0000 42px, #1a0000 48px,
      #c83020 48px, #c83020 66px,
      #1a0000 66px, #1a0000 72px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.4) 0px, rgba(0,0,0,0.4) 6px,
      transparent 6px, transparent 24px);
  opacity: 0.8;
}

.v-ndebele {
  background: #0a0a0a;
  position: relative;
}
.v-ndebele::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,
      #c00030 0px, #c00030 16px,
      #f0f0f0 16px, #f0f0f0 22px,
      #0030c0 22px, #0030c0 38px,
      #f0c000 38px, #f0c000 44px,
      #008000 44px, #008000 60px,
      #000000 60px, #000000 66px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 30px,
      rgba(0,0,0,0.2) 30px, rgba(0,0,0,0.2) 32px);
  opacity: 0.7;
}

.v-akan {
  background: radial-gradient(ellipse at 50% 40%, #8a7020 0%, #4a3a00 60%, #1a1400 100%);
  position: relative;
}
.v-akan::before {
  content:'';
  position: absolute;
  top:20%; left:50%; transform:translateX(-50%);
  width:50%; height:60%;
  background: rgba(200,180,60,0.12);
  clip-path: polygon(50% 0%, 80% 30%, 100% 50%, 80% 70%, 50% 100%, 20% 70%, 0% 50%, 20% 30%);
  border: 1px solid rgba(200,180,60,0.25);
}

/* European */
.v-renaissance {
  background: radial-gradient(ellipse at 50% 30%, #3a2010 0%, #1a0c04 70%, #080402 100%);
  position: relative;
}
.v-renaissance::before {
  content:'';
  position: absolute;
  top:8%; left:25%; right:25%; bottom:8%;
  border-radius: 50% 50% 45% 45%;
  border: 1px solid rgba(200,160,80,0.18);
  background: radial-gradient(ellipse at 45% 35%, rgba(200,160,100,0.12) 0%, transparent 60%);
}

.v-gothic {
  background: linear-gradient(180deg, #0a0818 0%, #141030 50%, #0a0818 100%);
  position: relative;
}
.v-gothic::before {
  content:'';
  position: absolute;
  top:5%; left:50%; transform:translateX(-50%);
  width:2px; height:90%;
  background: linear-gradient(to bottom, rgba(201,168,76,0.4) 0%, rgba(201,168,76,0.1) 100%);
}
.v-gothic::after {
  content:'';
  position: absolute;
  top:5%; left:50%; transform:translateX(-50%);
  width:60%; height:2px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,0.4), transparent);
}

.v-baroque {
  background: radial-gradient(ellipse at 40% 30%, #2a1800 0%, #0e0804 80%, #050402 100%);
  position: relative;
}
.v-baroque::before {
  content:'';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 35% 25%, rgba(255,200,120,0.18) 0%, transparent 45%);
}
.v-baroque::after {
  content:'';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201,168,76,0.1);
}

.v-impressionist {
  background: linear-gradient(150deg, #1a2a10 0%, #2a3a20 50%, #1a2a18 100%);
  position: relative;
}
.v-impressionist::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,220,100,0.15) 0%, transparent 25%),
    radial-gradient(circle at 60% 30%, rgba(100,180,255,0.1) 0%, transparent 20%),
    radial-gradient(circle at 50% 70%, rgba(80,160,80,0.15) 0%, transparent 30%);
  filter: blur(2px);
}

/* Middle Eastern */
.v-persian {
  background: linear-gradient(135deg, #0a1828 0%, #142438 50%, #0a1020 100%);
  position: relative;
}
.v-persian::before {
  content:'';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,175,55,0.2);
  background: radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 60%);
}
.v-persian::after {
  content:'';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(212,175,55,0.1);
}

.v-iznik {
  background: linear-gradient(135deg, #0c2040 0%, #1a3a70 50%, #0c2040 100%);
  position: relative;
}
.v-iznik::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 25px, transparent 26px),
    radial-gradient(circle at 50% 50%, rgba(0,150,255,0.08) 0px, rgba(0,150,255,0.08) 45px, transparent 46px),
    radial-gradient(circle at 50% 50%, rgba(212,175,55,0.06) 0px, rgba(212,175,55,0.06) 65px, transparent 66px);
}
.v-iznik::after {
  content:'';
  position: absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:40%; height:40%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 20px rgba(0,120,255,0.1);
}

.v-calligraphy {
  background: #080808;
  position: relative;
}
.v-calligraphy::before {
  content:'';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 30%, rgba(212,175,55,0.06) 50%, transparent 70%);
}
.v-calligraphy::after {
  content:'';
  position: absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:70%; height:3px;
  background: linear-gradient(to right, transparent, rgba(212,175,55,0.5), rgba(212,175,55,0.8), rgba(212,175,55,0.5), transparent);
  box-shadow: 0 -12px 0 rgba(212,175,55,0.15), 0 12px 0 rgba(212,175,55,0.15);
}

.v-carpet {
  background: #0a0814;
  position: relative;
}
.v-carpet::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(140,30,30,0.25) 0px, transparent 1px, transparent 19px, rgba(140,30,30,0.25) 20px),
    repeating-linear-gradient(90deg,  rgba(140,30,30,0.25) 0px, transparent 1px, transparent 19px, rgba(140,30,30,0.25) 20px),
    repeating-linear-gradient(45deg,  rgba(212,175,55,0.06) 0px, transparent 2px, transparent 28px, rgba(212,175,55,0.06) 30px);
}
.v-carpet::after {
  content:'';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,175,55,0.12);
}

/* Latin American */
.v-aztec {
  background: radial-gradient(ellipse at 50% 50%, #2a1400 0%, #0e0600 100%);
  position: relative;
}
.v-aztec::before {
  content:'';
  position: absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:70%; height:70%;
  border-radius: 50%;
  border: 2px solid rgba(232,93,4,0.25);
  box-shadow:
    0 0 0 8px rgba(232,93,4,0.08),
    0 0 0 16px rgba(232,93,4,0.05),
    0 0 0 24px rgba(232,93,4,0.03);
}
.v-aztec::after {
  content:'';
  position: absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:20%; height:20%;
  border-radius: 50%;
  background: rgba(232,93,4,0.35);
  box-shadow: 0 0 20px rgba(232,93,4,0.3);
}

.v-maya {
  background: linear-gradient(150deg, #0a1a08 0%, #142808 50%, #0a1a00 100%);
  position: relative;
}
.v-maya::before {
  content:'';
  position: absolute;
  top:10%; left:20%; right:20%; bottom:10%;
  clip-path: polygon(50% 0%, 80% 20%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%, 20% 20%);
  background: radial-gradient(ellipse at 40% 35%, rgba(80,160,60,0.3) 0%, rgba(20,80,10,0.4) 60%, rgba(0,30,0,0.6) 100%);
  border: 1px solid rgba(80,200,60,0.15);
}

.v-andean {
  background: #0a0808;
  position: relative;
}
.v-andean::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg,
      #c00000 0px, #c00000 12px,
      #f0c000 12px, #f0c000 24px,
      #0040c0 24px, #0040c0 36px,
      #00a000 36px, #00a000 48px,
      #c00060 48px, #c00060 60px,
      #f06000 60px, #f06000 72px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.45) 0px, rgba(0,0,0,0.45) 4px,
      transparent 4px, transparent 24px);
  opacity: 0.65;
}

.v-oaxacan {
  background: linear-gradient(135deg, #f0e0c0 0%, #e8c8a0 100%);
  position: relative;
}
.v-oaxacan::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(200,50,0,0.3) 12px, transparent 13px),
    radial-gradient(circle at 70% 30%, rgba(0,120,200,0.3) 10px, transparent 11px),
    radial-gradient(circle at 50% 60%, rgba(0,140,0,0.3) 14px, transparent 15px),
    radial-gradient(circle at 20% 70%, rgba(200,140,0,0.3) 8px, transparent 9px),
    radial-gradient(circle at 80% 70%, rgba(160,0,160,0.3) 11px, transparent 12px);
}

/* Oceanic */
.v-aboriginal {
  background: linear-gradient(150deg, #1a0a00 0%, #2a1200 50%, #1a0a00 100%);
  position: relative;
}
.v-aboriginal::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(200,100,0,0.5) 3px, transparent 4px),
    radial-gradient(circle at 35% 30%, rgba(200,100,0,0.4) 4px, transparent 5px),
    radial-gradient(circle at 55% 55%, rgba(200,100,0,0.5) 3px, transparent 4px),
    radial-gradient(circle at 70% 35%, rgba(200,100,0,0.4) 4px, transparent 5px),
    radial-gradient(circle at 80% 65%, rgba(200,100,0,0.5) 3px, transparent 4px),
    radial-gradient(circle at 50% 20%, rgba(255,180,50,0.5) 4px, transparent 5px),
    radial-gradient(circle at 30% 70%, rgba(255,180,50,0.5) 3px, transparent 4px),
    radial-gradient(circle at 60% 80%, rgba(200,80,0,0.4) 4px, transparent 5px),
    radial-gradient(circle at 15% 20%, rgba(255,220,100,0.4) 3px, transparent 4px),
    radial-gradient(circle at 85% 20%, rgba(200,100,0,0.5) 3px, transparent 4px),
    radial-gradient(circle at 40% 85%, rgba(255,150,30,0.4) 4px, transparent 5px),
    radial-gradient(circle at 75% 80%, rgba(200,80,0,0.4) 3px, transparent 4px);
}
.v-aboriginal::after {
  content:'';
  position: absolute;
  top:25%; left:25%; right:25%; bottom:25%;
  border-radius: 50%;
  border: 2px solid rgba(200,100,0,0.2);
  box-shadow: 0 0 0 8px rgba(200,100,0,0.06), 0 0 0 16px rgba(200,100,0,0.04);
}

.v-polynesian {
  background: linear-gradient(150deg, #02101e 0%, #041828 100%);
  position: relative;
}
.v-polynesian::before {
  content:'';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,150,200,0.07) 0px, transparent 2px, transparent 18px, rgba(0,150,200,0.07) 20px),
    repeating-linear-gradient(-45deg, rgba(0,100,150,0.05) 0px, transparent 2px, transparent 28px, rgba(0,100,150,0.05) 30px);
}
.v-polynesian::after {
  content:'';
  position: absolute;
  bottom: 20%; left: 50%; transform:translateX(-50%);
  width: 40%; height: 30%;
  border-radius: 50% 50% 0 0;
  border: 1px solid rgba(0,180,230,0.2);
  background: rgba(0,120,180,0.05);
}

.v-maori {
  background: linear-gradient(150deg, #0c0808 0%, #180e0a 100%);
  position: relative;
}
.v-maori::before {
  content:'';
  position: absolute;
  top:15%; left:20%; right:20%; bottom:15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, rgba(100,60,20,0.5) 0%, rgba(40,20,8,0.7) 50%, transparent 70%);
  border: 1px solid rgba(180,120,60,0.2);
}
.v-maori::after {
  content:'';
  position: absolute;
  top:25%; left:30%; right:30%; bottom:25%;
  border-radius: 50%;
  border: 2px solid rgba(180,120,60,0.15);
  box-shadow: 0 0 0 6px rgba(120,80,30,0.08);
}

.v-hawaiian {
  background: radial-gradient(ellipse at 50% 40%, #1a0a00 0%, #0a0400 100%);
  position: relative;
}
.v-hawaiian::before {
  content:'';
  position: absolute;
  top:10%; left:15%; right:15%; bottom:10%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: radial-gradient(ellipse at 40% 40%, #c04000 0%, #6a1e00 60%, transparent 80%);
  border: 1px solid rgba(255,120,0,0.15);
}

/* ════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.modal.open {
  visibility: visible;
  pointer-events: all;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.35s;
  cursor: pointer;
}
.modal.open .modal-overlay { opacity: 1; }

.modal-card {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(900px, 94vw);
  max-height: 90vh;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  overflow: hidden;
  transform: scale(0.92) translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25,0.8,0.25,1), opacity 0.4s;
}
.modal.open .modal-card { transform: scale(1) translateY(0); opacity: 1; }

.modal-visual {
  flex: 0 0 45%;
  min-height: 350px;
}

.modal-body {
  flex: 1;
  padding: 40px 36px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-region-tag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  color: rgba(240,224,208,0.6);
  margin-bottom: 14px;
}

.modal-body h3 {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 10px;
  color: #f5f0e8;
}

.modal-meta-line {
  font-size: 0.82rem;
  color: rgba(240,224,208,0.55);
  margin-bottom: 8px;
}

.modal-medium {
  font-size: 0.78rem;
  color: rgba(240,224,208,0.45);
  font-style: italic;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.modal-desc-text {
  font-size: 0.95rem;
  line-height: 1.85;
  color: rgba(240,224,208,0.75);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(240,224,208,0.7);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
footer {
  background: #060606;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 60px 40px;
  text-align: center;
}
.footer-inner { max-width: 800px; margin: 0 auto; }
.footer-brand { font-size: 1.1rem; color: #e8e0d0; letter-spacing: 0.1em; margin-bottom: 14px; }
.footer-tagline { font-size: 0.88rem; color: rgba(240,224,208,0.45); margin-bottom: 28px; line-height: 1.7; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 28px; }
.footer-nav a { color: rgba(240,224,208,0.4); text-decoration: none; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.25s; }
.footer-nav a:hover { color: #c9a84c; }
.footer-copy { font-size: 0.7rem; color: rgba(240,224,208,0.2); letter-spacing: 0.05em; }

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .modal-card { flex-direction: column; }
  .modal-visual { min-height: 220px; flex: 0 0 220px; }
  .modal-body { padding: 28px 24px; }
}

@media (max-width: 768px) {
  #navbar { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(8,8,8,0.97);
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .region-inner { padding: 0 20px; }
  .art-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .region-section { padding: 70px 0 60px; }
  footer { padding: 40px 20px; }
}

@media (max-width: 480px) {
  .art-grid { grid-template-columns: 1fr; }
  .modal-card { max-height: 95vh; border-radius: 12px; }
  .modal-body h3 { font-size: 1.4rem; }
}