/* ============================================
   VANDANISM ART — Hero / Home Styles
   css/hero.css
   ============================================ */

/* --- HERO SECTION --- */
#home {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: var(--nav-h) 5% 0;
  position: relative;
  overflow: hidden;
}

.hero-bg-text {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px rgba(139,94,60,0.08);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero-decor {
  position: absolute;
  border-radius: 50%;
  opacity: 0.25;
}
.hero-decor-1 {
  width: 400px; height: 400px;
  background: var(--coral-pale);
  top: -100px; right: -80px;
}
.hero-decor-2 {
  width: 200px; height: 200px;
  background: var(--wood-pale);
  bottom: 80px; left: -60px;
}

/* --- HERO LAYOUT --- */
.hero-content {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- HERO LEFT --- */
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500;
  color: var(--coral);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 24px;
  animation: fadeUp 0.8s ease both;
}
.hero-tag::before {
  content: '';
  width: 32px; height: 1.5px;
  background: var(--coral);
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 16px;
  animation: fadeUp 0.8s 0.1s ease both;
}
.hero-title em {
  color: var(--coral);
  font-style: italic;
}

.hero-tagline {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  color: var(--wood);
  margin-bottom: 28px;
  animation: fadeUp 0.8s 0.2s ease both;
}

.hero-desc {
  font-size: 15px; line-height: 1.8;
  color: var(--ink-soft);
  max-width: 420px;
  margin-bottom: 40px;
  animation: fadeUp 0.8s 0.3s ease both;
}

.hero-btns {
  display: flex; gap: 16px; flex-wrap: wrap;
  animation: fadeUp 0.8s 0.4s ease both;
}

/* --- HERO RIGHT --- */
.hero-right { animation: fadeUp 0.8s 0.2s ease both; }

.hero-canvas {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 4px 60px 4px 60px;
  overflow: hidden;
  background: var(--cream-dark);
}

.placeholder-art {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #E8D5B7 0%, #D4A97A 30%, #C17A50 60%, #D9614C 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.placeholder-art svg { opacity: 0.3; }

.placeholder-label {
  position: absolute;
  bottom: 20px; left: 20px;
  background: rgba(245,239,224,0.85);
  backdrop-filter: blur(6px);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px; color: var(--ink-soft);
  font-family: 'Caveat', cursive;
}

/* --- HERO STATS --- */
.hero-stats {
  display: flex; gap: 32px;
  margin-top: 24px;
}
.stat { text-align: center; }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 600;
  color: var(--wood);
  display: block;
}
.stat-label {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-right { order: -1; }
}