/* Junoon Karate Dojo — shared styles (Bushido Precision) */

:root{
  --crimson:#d10235;
  --crimson-dark:#920022;
  --navy:#3b5998;
  --silver:#c0c0c0;
}

html{ scroll-behavior:smooth; }
body{ background-color:#131313; color:#e5e2e1; }

/* selection */
::selection{ background-color:var(--crimson); color:#fff; }

/* Material symbols default weight */
.material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
.ms-fill{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }

/* Reusable brand utilities */
.crimson-gradient{ background:linear-gradient(180deg,#d10235 0%,#920022 100%); }
.metallic-border{ border:1px solid rgba(192,192,192,0.2); }
.premium-shadow{ box-shadow:0 20px 40px rgba(0,0,0,0.5); }
.silver-border{ border:1px solid rgba(192,192,192,0.2); }

/* Giant ghost text (e.g. PANKAJ behind portrait) */
.text-stroke{
  -webkit-text-stroke:1px rgba(192,192,192,0.28);
  color:transparent;
}

/* Subtle grain / vignette helper for hero */
.hero-vignette::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,0.65) 100%);
  pointer-events:none;
}

/* Scroll reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Animated thin accent underline */
.accent-bar{ width:88px; height:4px; background:var(--crimson); }

/* Nav link underline animation */
.nav-link{ position:relative; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--crimson); transition:width .25s ease;
}
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.nav-link.active{ color:#d10235; }

/* Sticky nav scrolled state */
#site-nav{ transition:background-color .3s ease, padding .3s ease, box-shadow .3s ease; }
#site-nav.scrolled{ background-color:rgba(14,14,14,0.92); box-shadow:0 8px 30px rgba(0,0,0,0.5); }

/* Mobile menu transition */
#mobile-menu{ transition:max-height .4s ease,opacity .3s ease; max-height:0; opacity:0; overflow:hidden; }
#mobile-menu.open{ max-height:520px; opacity:1; }

/* Floating action buttons */
.fab{
  width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.45); transition:transform .15s ease, filter .15s ease;
}
.fab:hover{ transform:translateY(-3px); filter:brightness(1.08); }

/* Belt chip swatches */
.belt-swatch{ width:100%; height:8px; }

/* Card hover lift */
.lift{ transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.lift:hover{ transform:translateY(-6px); }

/* Image grayscale -> color on hover */
.img-pop{ filter:grayscale(1); transition:filter .6s ease, transform .7s ease; }
.group:hover .img-pop, .img-pop:hover{ filter:grayscale(0); }

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

/* Respect reduced motion */
/* ===================================================================
   ADVANCED FEATURES
   =================================================================== */

/* Scroll progress bar (injected by site.js) */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,#afc6ff,#d10235);
  z-index:60; transition:width .1s linear; pointer-events:none;
}

/* Back-to-top button (injected by site.js into the floating stack) */
#to-top{
  width:54px; height:54px; display:none; align-items:center; justify-content:center;
  background:#2a2a2a; color:#e5e2e1; border:1px solid rgba(192,192,192,.25);
  box-shadow:0 10px 24px rgba(0,0,0,.45); cursor:pointer;
  transition:filter .15s ease, transform .15s ease;
}
#to-top:hover{ filter:brightness(1.18); transform:translateY(-3px); }
#to-top.show{ display:flex; animation:fadeUp .3s ease; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }

/* Testimonial carousel */
.carousel{ position:relative; overflow:hidden; }
.carousel-track{ display:flex; transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.carousel-track > *{ flex:0 0 100%; min-width:0; }
.carousel-dots{ display:flex; gap:10px; justify-content:center; }
.carousel-dot{ width:10px; height:10px; background:rgba(192,192,192,.35); border:0; cursor:pointer; transition:all .3s ease; }
.carousel-dot.active{ background:#d10235; width:28px; }

/* Gallery filter buttons */
.filter-btn{ transition:all .2s ease; }
.filter-btn.active{ background:#d10235 !important; color:#fff !important; border-color:#d10235 !important; }
.gitem.is-hidden{ display:none !important; }

/* Pricing billing toggle */
.bill-btn{ transition:all .25s ease; }
.bill-btn.active{ background:#d10235; color:#fff; }
.price-amount{ display:inline-block; transition:opacity .18s ease, transform .18s ease; }
.plan-featured{ position:relative; }

/* FAQ accordion */
.faq-item .faq-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-body{ max-height:340px; }
.faq-item .faq-icon{ transition:transform .3s ease; }
.faq-item.open .faq-icon{ transform:rotate(45deg); }
.faq-q{ cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  .carousel-track{ transition:none; }
  #to-top.show{ animation:none; }
}