/* public/css/style.css
   Custom styles that complement Tailwind — animations, gradients,
   scrollbar hiding, and special effects. */

/* ── Font smoothing for Burmese (Noto Sans Myanmar) ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Myanmar:wght@300;400;500;600&display=swap');

/* ── Base resets ──────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ── Hero gradient background ─────────────────────────── */
.hero-gradient {
  background: linear-gradient(
    135deg,
    #fdf8f4 0%,
    #f7d6e0 30%,
    #fdf0f4 60%,
    #e8f5e9 100%
  );
}

/* ── Subtle decorative pattern for hero ───────────────── */
.hero-pattern {
  background-image:
    radial-gradient(circle at 20% 30%, #b76e7930 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #7a9e7e20 0%, transparent 50%);
}

/* ── Services hero banner ─────────────────────────────── */
.services-hero {
  background: linear-gradient(
    160deg,
    #f7d6e0 0%,
    #fdf8f4 50%,
    #f0f7f1 100%
  );
}

/* ── Scrollbar hiding (category nav) ──────────────────── */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width:    none;
}

/* ── Smooth scroll offset for sticky nav ─────────────── */
:target {
  scroll-margin-top: 6rem;
}

/* ── Service card hover glow ──────────────────────────── */
.service-card:hover {
  box-shadow:
    0 10px 30px -5px rgba(183, 110, 121, 0.15),
    0 4px 10px -3px rgba(183, 110, 121, 0.10);
}

/* ── Service item hover glow (services page) ─────────── */
.service-item:hover {
  box-shadow:
    0 8px 20px -4px rgba(183, 110, 121, 0.12),
    0 2px 6px -2px rgba(183, 110, 121, 0.08);
}

/* ── Navbar scroll effect (applied via JS) ────────────── */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 20px rgba(183, 110, 121, 0.12);
}

/* ── CTA primary button pulse ─────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.btn-primary:hover::after {
  transform: translateX(0);
}

/* ── Category tab active indicator ───────────────────── */
.category-tab.active {
  background-color: #b76e79 !important; /* rose-gold */
  color:            #ffffff !important;
}

/* ── Line clamp for service descriptions ─────────────── */
.line-clamp-2 {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ── Animate fade-in on page load ──────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-gradient h1,
.hero-gradient p,
.hero-gradient .btn-primary,
.hero-gradient a {
  animation: fadeInUp 0.7s ease both;
}

.hero-gradient h1     { animation-delay: 0.1s; }
.hero-gradient p      { animation-delay: 0.25s; }
.hero-gradient a      { animation-delay: 0.4s; }

/* ── Tailwind color extensions (CSS vars for reuse) ───── */
:root {
  --color-rose-gold: #b76e79;
  --color-rose-deep: #8b3a46;
  --color-blush:     #f7d6e0;
  --color-ivory:     #fdf8f4;
  --color-sage:      #7a9e7e;
}