@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

body {
  background-color: #F0F4F8;
  color: #061221;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(18, 50, 73, 0.1);
}

.hero-bg {
  background: linear-gradient(135deg, #123249 0%, #061221 100%);
  position: relative;
  overflow: hidden;
}

@keyframes popIn {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.animate-pop-in { animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.25s ease-out forwards; }

@keyframes toastIn {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-toast-in { animation: toastIn 0.25s ease-out forwards; }

/* ---- Scroll-reveal system: elements start hidden, JS adds .is-visible
   when they enter the viewport (see reveal.js). Respects reduced-motion. ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ---- Sticky nav: gains depth once the page scrolls (see reveal.js) ---- */
.nav-shell { transition: box-shadow 0.3s ease, padding 0.3s ease; }
.nav-shell.is-scrolled { box-shadow: 0 8px 24px -8px rgba(6, 18, 33, 0.18); }

/* ---- Smooth micro-interactions for interactive elements ---- */
.btn-smooth { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.btn-smooth:hover { transform: translateY(-2px); }
.btn-smooth:active { transform: translateY(0) scale(0.98); }

.link-underline { position: relative; }
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px;
  background: currentColor; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-underline:hover::after { width: 100%; }

/* Slow ambient drift for the hero's background accent — subtle, not distracting */
@keyframes driftSlow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-2%, 2%) rotate(3deg); }
}
.animate-drift-slow { animation: driftSlow 18s ease-in-out infinite; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@media print {
  body { background: white !important; color: black !important; }
  .no-print { display: none !important; }
  .print-only { display: block !important; }
}
/* ===== Makar Mahotsav 2027 — nav button + 2nd hero ===== */
.makar-nav-btn{
  background: linear-gradient(115deg, #C1440E 0%, #F2994A 100%);
  background-size: 180% 180%;
  animation: makarNavShift 5s ease infinite;
}
.makar-nav-btn:hover{ filter: brightness(1.08); }
@keyframes makarNavShift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

.makar-hero{
  background: radial-gradient(circle at 50% 120%, #1c3157 0%, #12203B 46%, #0B1526 100%);
  perspective: 1000px;
}
.makar-sun{
  position:absolute; left:50%; bottom:-30%;
  width:540px; height:540px; transform:translateX(-50%);
  border-radius:50%; filter:blur(2px); opacity:.8; pointer-events:none;
  background: radial-gradient(circle at 50% 40%, #F5B942 0%, #F2994A 45%, transparent 72%);
  animation: makarSunPulse 8s ease-in-out infinite;
}
@keyframes makarSunPulse{
  0%,100%{ opacity:.7;  transform:translateX(-50%) scale(1); }
  50%    { opacity:.92; transform:translateX(-50%) scale(1.04); }
}
.makar-stars{
  position:absolute; inset:0; pointer-events:none; opacity:.65;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 14%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px   1px   at 87% 38%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px   1px   at 38% 9%,  rgba(255,255,255,.3)  50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 30%, rgba(255,255,255,.4) 50%, transparent 51%);
}

.makar-kites{ position:absolute; inset:0; pointer-events:none; }
.makar-kite{ position:absolute; will-change:transform; }
.makar-kite svg{ width:100%; height:100%; display:block; }
.makar-kite.mk1{ width:54px; top:11%; left:5%;  animation: makarDriftA 11s ease-in-out infinite; }
.makar-kite.mk2{ width:38px; top:17%; left:88%; animation: makarDriftB 9s  ease-in-out infinite; }
.makar-kite.mk3{ width:30px; top:72%; left:10%; animation: makarDriftA 13s ease-in-out infinite reverse; }
.makar-kite.mk4{ width:44px; top:6%;  left:52%; animation: makarDriftB 10.5s ease-in-out infinite; }
@keyframes makarDriftA{ 0%,100%{ transform:translate(0,0) rotate(-6deg); } 50%{ transform:translate(13px,-20px) rotate(4deg); } }
@keyframes makarDriftB{ 0%,100%{ transform:translate(0,0) rotate(5deg); }  50%{ transform:translate(-16px,17px) rotate(-4deg); } }

.makar-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(246,239,224,0.08);
  border:1px solid rgba(246,239,224,0.16);
  color:#F6EFE0; font-size:.78rem; font-weight:600;
  padding:7px 13px; border-radius:100px;
}
@media (min-width:768px){ .makar-pill{ font-size:.84rem; } }

.makar-countdown-card{
  background:rgba(246,239,224,0.06);
  border:1px solid rgba(246,239,224,0.16);
  border-radius:18px; padding:26px 22px;
  backdrop-filter:blur(6px);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.makar-countdown-card:hover{
  border-color:#F5B942;
  box-shadow:0 22px 48px rgba(0,0,0,.34);
}
.makar-cd-box{
  background:rgba(246,239,224,0.06);
  border:1px solid rgba(246,239,224,0.14);
  border-radius:11px; padding:11px 4px; text-align:center;
}
.makar-cd-num{ font-weight:800; font-size:1.35rem; line-height:1.1; color:#F6EFE0; }
.makar-cd-lbl{
  font-size:.58rem; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(246,239,224,0.6); margin-top:3px;
}
@media (min-width:768px){ .makar-cd-num{ font-size:1.7rem; } .makar-cd-lbl{ font-size:.64rem; } }

@media (prefers-reduced-motion: reduce){
  .makar-sun, .makar-kite, .makar-nav-btn{ animation:none !important; }
}