/*
Theme Name: Royal India Child
Template: astra
Version: 4.0.0
*/

:root {
  --indigo-dark: #1a1b41;
  --indigo-vivid: #4c51bf;
  --yellow-bright: #f7c548;
  --white-frosted: rgba(255, 255, 255, 0.85);
  --radius: 24px;
  --shadow: 0 10px 30px rgba(26, 27, 65, 0.08);
}

/* MANDALA & BACKGROUND FIX */
body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--indigo-dark);
  background-color: #fafaff; 
  margin: 0;
}

/* Force Astra containers to be transparent so Mandala shows */
.site, .site-content, .ast-container {
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 50 L50 0 M50 50 L100 50 M50 50 L50 100 M50 50 L0 50 M50 50 L85 15 M50 50 L85 85 M50 50 L15 85 M50 50 L15 15' stroke='%231a1b41' stroke-width='2' fill='none'/%3E%3Ccircle cx='50' cy='50' r='30' stroke='%231a1b41' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* SWIPER HERO */
.hero-swiper {
  width: 100%;
  height: 85vh; /* Huge montage */
  background: #000;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  display: flex; align-items: flex-end; padding: 60px 20px;
}
.hero-text { color: #fff; max-width: 800px; margin: 0 auto; text-align: center; }

/* BRAND CARDS */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: -60px auto 60px; /* Overlap hero */
  position: relative;
  z-index: 10;
  padding: 0 20px;
}
.brand-card {
  background: var(--white-frosted);
  backdrop-filter: blur(10px);
  padding: 30px 20px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s;
  text-decoration: none;
  color: var(--indigo-dark);
  border: 1px solid rgba(255,255,255,0.4);
}
.brand-card:hover { transform: translateY(-5px); background: #fff; }

/* UTILS */
.ri-btn {
  display: inline-block; padding: 12px 28px;
  border-radius: 99px; font-weight: bold; text-decoration: none;
  background: var(--yellow-bright); color: var(--indigo-dark);
}
.reveal { opacity: 0; transform: translateY(20px); transition: 0.8s; }
.reveal.active { opacity: 1; transform: translateY(0); }