/* =========================================================
   MK Marriage Bureau — Home page glassmorphism theme
   Scoped entirely under body.mkb-home so no other page is affected.
   ========================================================= */

body.mkb-home{
  position:relative;
  background:
    radial-gradient(60% 50% at 8% 12%, rgba(201,162,75,.28) 0%, rgba(201,162,75,0) 70%),
    radial-gradient(55% 45% at 95% 8%, rgba(107,15,42,.22) 0%, rgba(107,15,42,0) 70%),
    radial-gradient(50% 40% at 85% 55%, rgba(231,205,139,.30) 0%, rgba(231,205,139,0) 70%),
    radial-gradient(60% 50% at 10% 85%, rgba(107,15,42,.18) 0%, rgba(107,15,42,0) 70%),
    linear-gradient(180deg,#fdf8ef 0%,#f7ecd8 45%,#fdf8ef 100%);
  overflow-x:hidden;
}

/* floating ambient blobs behind everything, giving the glass panels
   something colourful to blur */
body.mkb-home::before,
body.mkb-home::after{
  content:"";
  position:fixed;
  width:46vmax; height:46vmax;
  border-radius:50%;
  filter:blur(10px);
  z-index:-1;
  opacity:.55;
  pointer-events:none;
}
body.mkb-home::before{
  top:-16vmax; left:-14vmax;
  background:radial-gradient(circle at 30% 30%,var(--mkb-gold-light),transparent 70%);
  animation:mkbBlobFloat 22s ease-in-out infinite;
}
body.mkb-home::after{
  bottom:-18vmax; right:-16vmax;
  background:radial-gradient(circle at 60% 60%,var(--mkb-maroon),transparent 70%);
  animation:mkbBlobFloat 26s ease-in-out infinite reverse;
}
@keyframes mkbBlobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(4vmax,3vmax) scale(1.08); }
  66%{ transform:translate(-3vmax,4vmax) scale(.95); }
}

/* ---------- Glass utility ---------- */
body.mkb-home .mkb-glass{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 32px rgba(107,15,42,.14), inset 0 1px 0 rgba(255,255,255,.5);
  border-radius:20px;
}

/* ---------- Hero ---------- */
body.mkb-home .mkb-hero{
  background:
    linear-gradient(rgba(30,6,15,.55),rgba(74,10,28,.45)),
    url('../images/hero.png') center/cover no-repeat;
  min-height:600px;
}
body.mkb-home .mkb-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(251,246,238,0) 60%,rgba(251,246,238,1) 100%);
  pointer-events:none;
}
body.mkb-home .mkb-hero .container{ position:relative; z-index:2; }
body.mkb-home .mkb-hero h1{
  opacity:0; animation:mkbFadeDown .9s .15s ease forwards;
}
body.mkb-home .mkb-hero p.lead{
  opacity:0; animation:mkbFadeUp .9s .4s ease forwards;
}
@keyframes mkbFadeDown{ from{ opacity:0; transform:translateY(-24px); } to{ opacity:1; transform:translateY(0); } }
@keyframes mkbFadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Search panel ---------- */
body.mkb-home .mkb-search-panel{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  border-top:4px solid var(--mkb-gold);
  box-shadow:0 20px 45px rgba(107,15,42,.18), inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0; animation:mkbFadeUp .8s .55s ease forwards;
}
body.mkb-home .mkb-search-panel .form-select,
body.mkb-home .mkb-search-panel .form-control{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(107,15,42,.15);
}
body.mkb-home .mkb-search-panel .form-select:focus,
body.mkb-home .mkb-search-panel .form-control:focus{
  background:#fff;
  box-shadow:0 0 0 .2rem rgba(201,162,75,.25);
  border-color:var(--mkb-gold);
}

/* ---------- Section titles ---------- */
body.mkb-home .mkb-section-title h2{ position:relative; display:inline-block; }
body.mkb-home .mkb-section-title h2::after{
  content:"";
  display:block; margin:.55rem auto 0; width:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--mkb-gold),var(--mkb-maroon));
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}
body.mkb-home .mkb-section-title.mkb-in h2::after{ width:70px; }

/* ---------- Reveal-on-scroll ----------
   Base .mkb-reveal/.mkb-in transition now lives in main.css (shared
   site-wide). Home just uses a slightly larger rise + longer duration
   for its hand-placed reveals — override kept local to the home page. */
body.mkb-home .mkb-reveal{
  transform:translateY(34px);
  transition-duration:.7s;
}

/* ---------- Cards -> glass ---------- */
body.mkb-home .mkb-card,
body.mkb-home .mkb-profile-card{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 10px 28px rgba(107,15,42,.12), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .35s ease, box-shadow .35s ease;
}
body.mkb-home .mkb-card:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 20px 40px rgba(107,15,42,.2);
}
body.mkb-home .bg-mkb-cream{ background:transparent !important; }

/* ---------- Why-choose icons ---------- */
body.mkb-home .mkb-why-icon{
  box-shadow:0 8px 20px rgba(201,162,75,.35), inset 0 1px 0 rgba(255,255,255,.6);
  animation:mkbFloatIcon 4.5s ease-in-out infinite;
}
body.mkb-home .col-md-3:nth-child(2) .mkb-why-icon{ animation-delay:.3s; }
body.mkb-home .col-md-3:nth-child(3) .mkb-why-icon{ animation-delay:.6s; }
body.mkb-home .col-md-3:nth-child(4) .mkb-why-icon{ animation-delay:.9s; }
@keyframes mkbFloatIcon{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-8px) rotate(4deg); }
}

/* ---------- Step numbers ---------- */
body.mkb-home .mkb-step-num{
  box-shadow:0 0 0 0 rgba(107,15,42,.4);
  animation:mkbPulse 2.6s ease-out infinite;
}
body.mkb-home .col-md-3:nth-child(2) .mkb-step-num{ animation-delay:.4s; }
body.mkb-home .col-md-3:nth-child(3) .mkb-step-num{ animation-delay:.8s; }
body.mkb-home .col-md-3:nth-child(4) .mkb-step-num{ animation-delay:1.2s; }
@keyframes mkbPulse{
  0%{ box-shadow:0 0 0 0 rgba(107,15,42,.35); }
  70%{ box-shadow:0 0 0 14px rgba(107,15,42,0); }
  100%{ box-shadow:0 0 0 0 rgba(107,15,42,0); }
}

/* ---------- CTA ---------- */
body.mkb-home .mkb-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,rgba(107,15,42,.9),rgba(74,10,28,.9));
  backdrop-filter:blur(10px);
}
body.mkb-home .mkb-cta::before{
  content:"";
  position:absolute; inset:-40%;
  background:conic-gradient(from 0deg,transparent 0 300deg,rgba(201,162,75,.35) 340deg,transparent 360deg);
  animation:mkbSpin 8s linear infinite;
}
body.mkb-home .mkb-cta > *{ position:relative; z-index:1; }
@keyframes mkbSpin{ to{ transform:rotate(360deg); } }

body.mkb-home .btn-mkb-gold,
body.mkb-home .btn-mkb-primary{
  position:relative;
}
body.mkb-home .btn-mkb-gold:hover,
body.mkb-home .btn-mkb-primary:hover{
  box-shadow:0 0 0 6px rgba(201,162,75,.18);
}

/* ---------- Swiper nav buttons ---------- */
body.mkb-home .mkb-recent-prev,
body.mkb-home .mkb-recent-next{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);
}

@media (prefers-reduced-motion: reduce){
  body.mkb-home *, body.mkb-home *::before, body.mkb-home *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media (max-width:767px){
  body.mkb-home::before,body.mkb-home::after{ width:70vmax; height:70vmax; }
}