/* ==========================================================================
   Sentary — Premium Sanitary Products
   Custom styles layered on top of Tailwind (CDN, utility layer) + Bootstrap
   JS-only components. Tailwind handles layout/spacing/color utilities;
   this file covers things Tailwind's CDN build can't express: keyframes,
   glassmorphism, tilt/parallax primitives, Swiper skinning, custom cursor.
   ========================================================================== */

:root{
  --ink:#0b0e13;
  --ink-soft:#12161f;
  --charcoal:#1b202b;
  --gold:#c8a15b;
  --gold-soft:#e4cd9a;
  --cream:#f8f5ef;
  --cream-dim:#efe9df;
  --muted:#8b93a1;
}

html{ scroll-behavior:smooth; }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
.font-serif-display{ font-family:'Playfair Display', serif; }

/* Preloader ---------------------------------------------------------- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-mark{
  font-family:'Playfair Display',serif;
  font-size:2rem; letter-spacing:.35em; color:var(--gold-soft);
  animation:pulseFade 1.6s ease-in-out infinite;
}
@keyframes pulseFade{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* Custom scrollbar ----------------------------------------------------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold),#a9813c); border-radius:10px; }

/* Selection -------------------------------------------------------------*/
::selection{ background:var(--gold); color:var(--ink); }

/* Glassmorphism ---------------------------------------------------------*/
.glass{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
}
.glass-dark{
  background:rgba(11,14,19,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.08);
}
#navbar{ transition:background-color .5s ease, backdrop-filter .5s ease, padding .4s ease, box-shadow .4s ease; }
#navbar.nav-scrolled{
  background:rgba(11,14,19,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 40px -10px rgba(0,0,0,.35);
}

/* Gradient text -----------------------------------------------------------*/
.text-gradient-gold{
  background:linear-gradient(100deg,#f3dfae,var(--gold) 45%,#a9813c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Nav link underline --------------------------------------------------*/
.nav-link-underline{ position:relative; }
.nav-link-underline::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--gold); transition:width .35s cubic-bezier(.4,0,.2,1);
}
.nav-link-underline:hover::after{ width:100%; }

/* Mega menu -------------------------------------------------------------*/
.mega-menu{
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
}
.mega-menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }

/* Buttons -----------------------------------------------------------------*/
.btn-gold{
  background:linear-gradient(100deg,var(--gold-soft),var(--gold));
  color:var(--ink); font-weight:600;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
  box-shadow:0 8px 30px -10px rgba(200,161,91,.6);
}
.btn-gold:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 16px 40px -12px rgba(200,161,91,.75); }
.btn-outline-light{
  border:1px solid rgba(255,255,255,.5); color:#fff;
  transition:background-color .35s ease, border-color .35s ease, transform .35s ease;
}
.btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-3px); }

/* Floating animation ------------------------------------------------------*/
@keyframes floatY{
  0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform:translateY(-18px) rotate(var(--rot,0deg)); }
}
.float-anim{ animation:floatY 6s ease-in-out infinite; }
.float-anim-slow{ animation:floatY 9s ease-in-out infinite; }

/* Hero floating product cards --------------------------------------------*/
.hero-float-card{
  transition:transform .2s ease-out;
  will-change:transform;
}

/* 3D tilt card ------------------------------------------------------------*/
.tilt-card{ transform-style:preserve-3d; transition:transform .15s ease-out, box-shadow .3s ease; }
.tilt-card .tilt-inner{ transform:translateZ(30px); }

/* Category / product card image zoom -------------------------------------*/
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .5s ease; }
.img-zoom:hover img{ transform:scale(1.12); }

/* Hover image swap ----------------------------------------------------- */
.swap-img-wrap{ position:relative; overflow:hidden; }
.swap-img-wrap img.img-secondary{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease, transform .7s ease;
}
.swap-img-wrap:hover img.img-secondary{ opacity:1; transform:scale(1.08); }
.swap-img-wrap:hover img.img-primary{ opacity:0; }
.swap-img-wrap img.img-primary{ transition:opacity .55s ease; }

/* Product badges ----------------------------------------------------------*/
.badge-pill{
  font-size:.66rem; letter-spacing:.06em; font-weight:700; text-transform:uppercase;
  padding:.32rem .7rem; border-radius:999px; backdrop-filter:blur(6px);
}

/* Wishlist heart ---------------------------------------------------------*/
.wishlist-btn svg{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), fill .3s ease, stroke .3s ease; }
.wishlist-btn.is-active svg{ fill:#e4626f; stroke:#e4626f; transform:scale(1.15); }
.wishlist-btn:active svg{ transform:scale(.85); }

/* Card lift ----------------------------------------------------------------*/
.card-lift{ transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; }
.card-lift:hover{ transform:translateY(-10px); box-shadow:0 30px 60px -20px rgba(11,14,19,.35); }

/* Section reveal targets (GSAP sets initial state via JS, this is fallback)*/
.reveal-up{ opacity:0; transform:translateY(50px); }

/* Stat counter -------------------------------------------------------------*/
.stat-num{ font-variant-numeric:tabular-nums; }

/* Swiper skin ---------------------------------------------------------------*/
.swiper-pagination-bullet{ background:var(--gold) !important; opacity:.35; }
.swiper-pagination-bullet-active{ opacity:1 !important; }
.swiper-button-next, .swiper-button-prev{ color:var(--gold) !important; }
.swiper-button-next:after, .swiper-button-prev:after{ font-size:1.15rem !important; }

/* Testimonial avatar initials ------------------------------------------------*/
.avatar-initial{
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--gold),#8a672f);
}

/* Masonry gallery --------------------------------------------------------- */
.masonry{ column-gap:1.25rem; }
.masonry .masonry-item{ break-inside:avoid; margin-bottom:1.25rem; }

/* Lightbox ------------------------------------------------------------------*/
#lightbox{
  position:fixed; inset:0; z-index:9998; background:rgba(6,8,11,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
}
#lightbox.is-open{ opacity:1; visibility:visible; }
#lightbox img{ max-height:86vh; max-width:90vw; box-shadow:0 30px 80px rgba(0,0,0,.6); }

/* Bootstrap modal — hand-rolled positioning (JS bundle loaded without Bootstrap CSS) */
.modal{
  position:fixed; inset:0; z-index:1055; display:none; outline:0;
  overflow-x:hidden; overflow-y:auto;
}
.modal.show{ display:block; }
.modal-dialog{
  position:relative; width:auto; pointer-events:none;
  margin:1.75rem auto; max-width:500px;
}
.modal-dialog-centered{
  display:flex; align-items:center; min-height:calc(100% - 3.5rem);
}
.modal-lg{ max-width:800px; }
@media (max-width:900px){ .modal-lg{ max-width:calc(100% - 2rem); } }
.modal-content{
  position:relative; display:flex; flex-direction:column; width:100%;
  pointer-events:auto; background-color:#fff; background-clip:padding-box;
  outline:0; border:none; border-radius:1.25rem; overflow:hidden;
}
.modal-backdrop{
  position:fixed; inset:0; z-index:1050; background-color:rgba(11,14,19,.7);
  opacity:0; transition:opacity .15s linear;
}
.modal-backdrop.show{ opacity:1; }
body.modal-open{ overflow:hidden; }

/* Marquee (experience center / brand strip) ---------------------------------*/
.marquee-track{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Floating contact buttons ---------------------------------------------------*/
.fab{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.4); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.fab:hover{ transform:scale(1.1) translateY(-2px); }

/* Back to top ------------------------------------------------------------------*/
#backToTop{ opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease, transform .3s ease; }
#backToTop.is-visible{ opacity:1; visibility:visible; }

/* Hotspot dots (experience center) ------------------------------------------------*/
.hotspot{
  width:16px; height:16px; border-radius:50%; background:var(--gold-soft);
  box-shadow:0 0 0 0 rgba(228,205,154,.7); animation:hotspotPulse 2.4s infinite;
}
@keyframes hotspotPulse{
  0%{ box-shadow:0 0 0 0 rgba(228,205,154,.55); }
  70%{ box-shadow:0 0 0 18px rgba(228,205,154,0); }
  100%{ box-shadow:0 0 0 0 rgba(228,205,154,0); }
}
.hotspot-tip{
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.hotspot-group:hover .hotspot-tip{ opacity:1; visibility:visible; transform:translateY(0); }

/* Utility: line clamp ---------------------------------------------------------*/
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Focus visibility for accessibility -------------------------------------------*/
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* Reduced motion ---------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}