/* ===================================================================
   Kabiguru Shikhsayatan — Premium visual layer
   Visual/UX polish only: no content, links, structure or copy changes
   live here. This file only adds presentation on top of the existing
   Tailwind utility classes already used across the views.
   =================================================================== */

:root {
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-soft: 0 4px 20px -4px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 12px 32px -8px rgba(30, 58, 138, 0.12);
  --shadow-card-hover: 0 24px 48px -12px rgba(30, 58, 138, 0.22);
  --shadow-dark-card: 0 12px 32px -8px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------------------
   Base — soften the previous "sharp corners everywhere" reset
   into an intentional, premium rounded system instead. Sharp
   utility edges (dividers, thin rules, pills that were already
   rounded-full) are untouched since they never relied on this.
   ------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.texture-dots,
section.bg-white,
section.bg-bglight {
  background-image: radial-gradient(#dbeafe 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

h1, h2, h3, h4, .font-heading {
  letter-spacing: -0.01em;
}

p {
  line-height: 1.75;
}

::selection {
  background: #1E3A8A;
  color: #fff;
}

/* Elegant scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #FAFAFA; }
::-webkit-scrollbar-thumb { background: #C7D2E8; border-radius: 999px; border: 2px solid #FAFAFA; }
::-webkit-scrollbar-thumb:hover { background: #1E3A8A; }

/* -------------------------------------------------------------
   Scroll reveal — existing .reveal/.reveal-left/.reveal-right kept
   exactly as-is (same trigger classes, same JS hook), just with a
   softer premium easing curve. New .reveal-scale / .reveal-blur
   variants are additive, for elements that opt in.
   ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
  will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}
.reveal-left.active { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}
.reveal-right.active { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
}
.reveal-scale.active { opacity: 1; transform: scale(1); }

.reveal-blur {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium), filter 0.9s var(--ease-premium);
}
.reveal-blur.active { opacity: 1; transform: translateY(0); filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}

/* Stagger delays — referenced throughout the views (delay-100, delay-200…)
   but were previously undefined, so the stagger never actually ran. */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }
.delay-600 { transition-delay: 600ms !important; }
.delay-700 { transition-delay: 700ms !important; }
.delay-800 { transition-delay: 800ms !important; }

/* -------------------------------------------------------------
   Cards — applied via a small additive class (see views) rather
   than a blanket selector, so nothing unrelated (dividers, topbar
   borders, dropdown panels) is affected.
   ------------------------------------------------------------- */
.card-premium {
  border-radius: 20px;
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium);
  box-shadow: var(--shadow-soft);
}
.card-premium:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.card-premium-dark {
  border-radius: 20px;
  transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium), background-color 0.5s var(--ease-premium);
}
.card-premium-dark:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-dark-card);
}

.card-round-lg { border-radius: 20px; }
.card-round { border-radius: 14px; }

/* Glass surfaces — low-opacity, used sparingly (nav on scroll, hero
   content panel, floating chips) per the "no flashy" brief. */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.glass-dark {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------
   Navbar — glass-on-scroll handled by JS toggling this class.
   ------------------------------------------------------------- */
#navbar {
  transition: background-color 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium), padding 0.35s var(--ease-premium), backdrop-filter 0.4s var(--ease-premium);
}
#navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--shadow-soft);
}

/* Active nav link underline (JS adds .nav-active to the current-page link) */
#navbar nav a,
#mobileMenu nav a {
  position: relative;
}
#navbar nav > a.nav-active,
#navbar nav > div > button.nav-active {
  color: #1E3A8A;
}
#navbar nav > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #1E3A8A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-premium);
}
#navbar nav > a:hover::after,
#navbar nav > a.nav-active::after {
  transform: scaleX(1);
}

/* Dropdown panels — fade + lift instead of a plain opacity snap */
header .group > div.absolute {
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease-premium), transform 0.3s var(--ease-premium), visibility 0.3s;
  border-radius: 14px;
  overflow: hidden;
}
header .group:hover > div.absolute {
  transform: translateY(0);
}

/* Mobile menu panel polish */
#mobileMenu {
  box-shadow: -20px 0 60px -20px rgba(15, 23, 42, 0.25);
}
#mobileMenu a {
  transition: color 0.25s ease, padding-left 0.25s ease;
}
#mobileMenu a:hover {
  color: #1E3A8A;
  padding-left: 4px;
}

/* -------------------------------------------------------------
   Buttons — additive premium treatment (magnetic hover handled in
   JS, ripple via ::after, all layered on top of existing classes).
   ------------------------------------------------------------- */
.btn-premium {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
  will-change: transform;
}
.btn-premium:hover {
  box-shadow: 0 14px 30px -10px rgba(30, 58, 138, 0.45);
}
.btn-premium:active { transform: scale(0.97); }

.btn-premium .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: btn-ripple-anim 0.65s ease-out forwards;
}
@keyframes btn-ripple-anim {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Outline buttons on dark backgrounds keep their existing colors —
   only shape/interaction is enhanced. */
.btn-premium.btn-outline:hover { box-shadow: 0 14px 30px -10px rgba(255, 255, 255, 0.25); }

/* -------------------------------------------------------------
   Images — soft rounding + hover zoom container. Applied via a
   class on the existing wrapping element; the <img> itself is
   untouched (same src, same alt).
   ------------------------------------------------------------- */
.img-frame {
  border-radius: 20px;
  overflow: hidden;
}
.img-hover-zoom {
  overflow: hidden;
  border-radius: 20px;
}
.img-hover-zoom img {
  transition: transform 0.7s var(--ease-premium);
}
.img-hover-zoom:hover img {
  transform: scale(1.06);
}

/* Skeleton shimmer, available for slow-loading images if opted in */
.img-skeleton {
  background: linear-gradient(100deg, #EEF1F7 30%, #F8FAFC 50%, #EEF1F7 70%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -------------------------------------------------------------
   Forms — floating label pattern (Tailwind `peer`, no extra JS).
   Field name/order/required-ness is unchanged; only label position
   and input chrome are visual.
   ------------------------------------------------------------- */
.field-premium input,
.field-premium textarea,
.field-premium select {
  border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.field-premium input:focus,
.field-premium textarea:focus,
.field-premium select:focus {
  box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.1);
}
.field-premium label {
  transition: all 0.2s var(--ease-premium);
}

/* -------------------------------------------------------------
   Section dividers — a very subtle wave/gradient seam between
   alternating section backgrounds, purely decorative (no markup
   content change needed beyond one thin element already present
   as section borders in places; this only restyles those).
   ------------------------------------------------------------- */
.section-seam {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 58, 138, 0.15), transparent);
  border: none !important;
}

/* -------------------------------------------------------------
   Dot-grid texture — a very faint, premium background texture for
   plain light sections. Kept subtle on purpose (per the "not flashy"
   brief): low-opacity dots, no visible seams at the section edges.
   Fades out toward the bottom so it never competes with content.
   ------------------------------------------------------------- */
.texture-dots {
  position: relative;
}
.texture-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(30, 58, 138, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
  pointer-events: none;
  z-index: 0;
}
.texture-dots > * {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------
   Focus-visible — accessible, premium focus ring everywhere,
   including on elements that don't otherwise define one.
   ------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #1E3A8A;
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------------------------
   Floating decorative shapes (hero backgrounds) — pure CSS, no
   images, very low opacity per the "not flashy" brief.
   ------------------------------------------------------------- */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  animation: float-shape 10s ease-in-out infinite;
}
.floating-shape.delay-a { animation-delay: -3s; }
.floating-shape.delay-b { animation-delay: -6s; }
@keyframes float-shape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -24px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .floating-shape { animation: none; }
}

/* Animated scroll indicator on the hero */
.scroll-indicator {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  position: relative;
}
.scroll-indicator::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 8px;
  margin-left: -2px;
  background: #fff;
  border-radius: 999px;
  animation: scroll-dot 1.8s ease-in-out infinite;
}
@keyframes scroll-dot {
  0% { opacity: 1; transform: translateY(0); }
  70% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 0; transform: translateY(14px); }
}

/* -------------------------------------------------------------
   Testimonials / quote cards
   ------------------------------------------------------------- */
.quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
}

/* -------------------------------------------------------------
   Gallery hover + lightbox transition polish
   ------------------------------------------------------------- */
.gallery-tile {
  border-radius: 18px;
  overflow: hidden;
}
.gallery-tile img { transition: transform 0.7s var(--ease-premium), filter 0.4s ease; }
.gallery-tile:hover img { transform: scale(1.08); }

/* -------------------------------------------------------------
   FAQ / accordion — smooth height reveal instead of instant hide/show
   ------------------------------------------------------------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-premium), opacity 0.4s ease, margin-top 0.4s var(--ease-premium);
  opacity: 0;
}
.active-faq .faq-answer {
  max-height: 30rem;
  opacity: 1;
  margin-top: 1rem;
}
.active-faq i.ph-caret-down { transform: rotate(180deg); }
.active-faq { border-color: #1E3A8A !important; }

/* Image hover zoom (legacy hook kept for compatibility) */
.img-hover-zoom { }

/* -------------------------------------------------------------
   Utility: rounded corners for card-style bordered blocks that
   already exist across the site, restyled through explicit classes
   added in the views (card-premium / card-round / img-frame) rather
   than a blanket reset — see notes above.
   ------------------------------------------------------------- */

/* Form inputs base (kept from before, now rounded rather than sharp) */
input, textarea, select {
  outline: none;
}