/* ===== Astro Rekha — custom styles, graphics & animations ===== */

:root{
  --gold:#e0a82e; --gold-light:#f5c84b; --gold-soft:#fff1c4;
  --night:#160a2b; --night-800:#1d0f38;
}

html,body{ scroll-behavior:smooth; }
::selection{ background:var(--gold); color:#160a2b; }

/* ---- Decorative cosmic background ---- */
body{
  background-color:var(--night);
  background-image:
    radial-gradient(ellipse at 12% 0%, rgba(122,71,160,0.28), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(224,168,46,0.12), transparent 50%),
    radial-gradient(ellipse at 50% 120%, rgba(58,33,104,0.55), transparent 60%);
  background-attachment:fixed;
}

/* ---- Animated starfield ---- */
.starfield{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.starfield span{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-soft); opacity:.5;
  box-shadow:0 0 6px 1px rgba(245,200,75,.7);
  animation:twinkle 4s ease-in-out infinite;
}
.starfield span:nth-child(1){ top:14%; left:8%;  animation-delay:.2s; }
.starfield span:nth-child(2){ top:22%; left:80%; animation-delay:1.1s; }
.starfield span:nth-child(3){ top:40%; left:30%; animation-delay:.6s; transform:scale(.6); }
.starfield span:nth-child(4){ top:65%; left:12%; animation-delay:1.6s; }
.starfield span:nth-child(5){ top:78%; left:65%; animation-delay:.9s; transform:scale(1.3); }
.starfield span:nth-child(6){ top:18%; left:50%; animation-delay:2.1s; transform:scale(.5); }
.starfield span:nth-child(7){ top:55%; left:88%; animation-delay:.3s; }
.starfield span:nth-child(8){ top:88%; left:40%; animation-delay:1.3s; transform:scale(.7); }
.starfield span:nth-child(9){ top:30%; left:70%; animation-delay:2.4s; }
.starfield span:nth-child(10){ top:48%; left:5%;  animation-delay:.8s; transform:scale(.6); }
.starfield span:nth-child(11){ top:8%;  left:35%; animation-delay:1.9s; transform:scale(.8);}
.starfield span:nth-child(12){ top:72%; left:30%; animation-delay:.5s; transform:scale(.5);}
.starfield span:nth-child(13){ top:35%; left:95%; animation-delay:1.4s;}
.starfield span:nth-child(14){ top:60%; left:55%; animation-delay:2.7s; transform:scale(.6);}
.starfield span:nth-child(15){ top:90%; left:85%; animation-delay:.7s; transform:scale(.9);}
@keyframes twinkle{ 0%,100%{ opacity:.15; } 50%{ opacity:.9; } }

/* keep content above the starfield */
header, main, footer{ position:relative; z-index:1; }

/* ---- Header scrolled state ---- */
#site-header.scrolled{
  background:rgba(22,10,43,.82);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.6);
  border-bottom:1px solid rgba(224,168,46,.15);
}

/* ---- Nav underline ---- */
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
  transition:width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

/* ---- Gold gradient text ---- */
.text-gradient-gold{
  background:linear-gradient(110deg,#fff1c4,#f5c84b 35%,#e0a82e 60%,#9a5e0c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- Rotating mandala / zodiac ring graphic ---- */
.mandala{ animation:spin 60s linear infinite; transform-origin:center; }
.mandala-rev{ animation:spin 90s linear infinite reverse; transform-origin:center; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Floating ---- */
.float{ animation:float 6s ease-in-out infinite; }
.float-slow{ animation:float 9s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* ---- Glow pulse ---- */
.glow-pulse{ animation:glow 3.5s ease-in-out infinite; }
@keyframes glow{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(224,168,46,.4)); }
  50%{ filter:drop-shadow(0 0 22px rgba(245,200,75,.8)); }
}

/* ---- Scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; }
.reveal.d3{ transition-delay:.3s; } .reveal.d4{ transition-delay:.4s; }

/* ---- Card glass ---- */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(224,168,46,.18);
  backdrop-filter:blur(6px);
}
.glass:hover{ border-color:rgba(245,200,75,.5); }

/* ornamental divider */
.divider{
  display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--gold);
}
.divider::before, .divider::after{
  content:""; height:1px; width:70px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.divider::after{ transform:rotate(180deg); }

/* shimmering border for featured */
.shine{ position:relative; overflow:hidden; }
.shine::before{
  content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,241,196,.25),transparent);
  transform:skewX(-20deg); transition:left .8s ease;
}
.shine:hover::before{ left:150%; }

/* shop filter chips */
.chip{ cursor:pointer; }
.chip-active{
  background:linear-gradient(90deg,var(--gold-light),var(--gold));
  color:#160a2b !important; border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(224,168,46,.7);
}

/* ---- Product / service media tiles ---- */
.ar-media{
  position:relative; overflow:hidden;
  aspect-ratio:5/4; width:100%;
  border-radius:1rem; isolation:isolate;
  background:linear-gradient(160deg,#1d0f38,#160a2b);
}
.ar-media img{ display:block; }
.ar-media-glow{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(22,10,43,.85) 4%, rgba(22,10,43,.15) 38%, transparent 60%);
}
.ar-media-tile{
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 38%, rgba(224,168,46,.28), transparent 62%),
    linear-gradient(160deg,#2a1850,#160a2b);
}

/* ---- Photo frame (about / story) ---- */
.photo-frame{ position:relative; border-radius:1.5rem; overflow:hidden; }
.photo-frame::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(245,200,75,.35), inset 0 -90px 90px -50px rgba(22,10,43,.95);
  pointer-events:none;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; }

/* ---- Hero cosmic backdrop ---- */
.hero-cosmos{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 8%, transparent 70%);
          mask-image:radial-gradient(ellipse at 70% 40%, #000 8%, transparent 70%);
  opacity:.5;
}

/* ---- Avatar ring ---- */
.avatar-ring{
  border-radius:9999px; object-fit:cover;
  box-shadow:0 0 0 2px rgba(245,200,75,.6), 0 6px 16px -6px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}