@import url('https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@500;700;800&family=Hind+Siliguri:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

:root{
  /* Brand palette — sourced from the Mirpur College Rover Scout Group crest */
  --forest-deep:#4A2172;     /* crest purple — primary */
  --forest-mid:#5E2C8F;      /* crest purple, lighter */
  --purple-x-deep:#2F1550;   /* extra-deep purple for depth/shadow */
  --canvas:#F5F3FA;
  --canvas-light:#FFFFFF;
  --ember:#1E8449;           /* crest green — primary accent */
  --ember-dark:#166A39;
  --red:#D62B27;             /* crest red — secondary accent */
  --red-dark:#B4211D;
  --charcoal:#241536;
  --rope:#6B6178;
  --gold:#1E8449;            /* alias kept for existing markup, mapped to crest green */
  --cream-text:#FFFFFF;
  --surface:#FFFFFF;
  --surface-border: rgba(74,33,114,0.15);
}
.dark{
  --forest-deep:#20102F;
  --forest-mid:#301A47;
  --purple-x-deep:#160A20;
  --canvas:#1B1225;
  --canvas-light:#150D1F;
  --ember:#2FAE68;
  --ember-dark:#22935A;
  --red:#EB4B47;
  --red-dark:#D62B27;
  --charcoal:#F3F0F8;
  --rope:#B3A8C2;
  --gold:#2FAE68;
  --cream-text:#FFFFFF;
  --surface:#241536;
  --surface-border: rgba(47,174,104,0.25);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; scroll-behavior:smooth; }

.sc-root{ font-family:'Hind Siliguri', sans-serif; color:var(--charcoal); background:var(--canvas-light); transition: background .25s ease, color .25s ease; min-height:100vh; overflow-x:hidden; }
.sc-display{ font-family:'Baloo Da 2', sans-serif; }
.sc-eyebrow{ font-family:'Oswald', sans-serif; letter-spacing:0.18em; text-transform:uppercase; }
.bg-forest{ background:var(--forest-deep); background-image:linear-gradient(135deg, var(--forest-deep) 0%, var(--forest-mid) 55%, var(--purple-x-deep) 100%); }
.bg-forest-mid{ background:var(--forest-mid); }
.bg-canvas{ background:var(--canvas); }
.bg-canvas-light{ background:var(--canvas-light); }
.bg-ember{ background:var(--ember); }
.bg-red{ background:var(--red); }
.text-forest{ color:var(--forest-deep); }
.dark .text-forest{ color:var(--cream-text); }
.text-ember{ color:var(--ember); }
.text-red{ color:var(--red); }
.text-cream{ color:var(--cream-text); }
.text-rope{ color:var(--rope); }
.text-gold{ color:var(--gold); }
.border-rope{ border-color:var(--rope); }
.border-gold{ border-color:var(--gold); }

.contour-bg{
  background-image: repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, rgba(255,255,255,0.07) 1px, transparent 2px, transparent 34px);
}

/* animated header gradient sheen */
.hero-sheen{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 15% 20%, rgba(30,132,73,0.35), transparent 45%),
              radial-gradient(circle at 85% 75%, rgba(214,43,39,0.28), transparent 45%);
  animation: sheenMove 12s ease-in-out infinite alternate;
}
@keyframes sheenMove{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(2%,-2%) scale(1.08); }
}

/* Signature element: stitched merit patch */
.patch{
  position:relative;
  border-radius:9999px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  border:3px dashed var(--gold);
  box-shadow: inset 0 0 0 6px var(--forest-deep), inset 0 0 0 9px var(--gold);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: patchFloat 5s ease-in-out infinite;
}
.patch:hover{ transform: rotate(-3deg) scale(1.06); box-shadow: inset 0 0 0 6px var(--red), inset 0 0 0 9px var(--gold); }
.patch-ember{ box-shadow: inset 0 0 0 6px var(--ember-dark), inset 0 0 0 9px var(--gold); }
@keyframes patchFloat{
  0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)); }
  50%{ transform: translateY(-6px) rotate(var(--rot,0deg)); }
}

.divider-rope{
  height:3px;
  background-repeat:repeat-x;
  background-image: linear-gradient(90deg, var(--rope) 50%, transparent 50%);
  background-size: 14px 3px;
  opacity:0.6;
}

.tab-active{ background:var(--ember); color:var(--cream-text); }
.tab-idle{ background:transparent; color:var(--cream-text); opacity:0.75; }

.card{
  background:var(--surface);
  border:1px solid var(--surface-border);
  border-radius:0.75rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(74,33,114,0.14);
  border-color: var(--ember);
}
.dark .card:hover{ box-shadow: 0 14px 30px rgba(0,0,0,0.4); }

.input-field{
  width:100%; padding:0.6rem 0.8rem; border-radius:0.5rem;
  border:1.5px solid var(--surface-border); background:var(--surface);
  color:var(--charcoal);
  font-family:'Hind Siliguri', sans-serif; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input-field:focus{ border-color:var(--ember); box-shadow:0 0 0 3px rgba(30,132,73,0.15); }
.btn-primary{
  background:var(--ember); color:var(--cream-text); font-weight:600;
  border-radius:0.5rem; padding:0.7rem 1.4rem; transition:background .2s, transform .2s, box-shadow .2s;
  border:none; cursor:pointer; font-family:'Hind Siliguri', sans-serif;
  box-shadow: 0 4px 14px rgba(30,132,73,0.35);
}
.btn-primary:hover{ background:var(--ember-dark); transform:translateY(-2px); box-shadow: 0 8px 20px rgba(30,132,73,0.45); }
.btn-red{
  background:var(--red); color:var(--cream-text); font-weight:600;
  border-radius:0.5rem; padding:0.7rem 1.4rem; transition:background .2s, transform .2s;
  border:none; cursor:pointer; font-family:'Hind Siliguri', sans-serif;
}
.btn-red:hover{ background:var(--red-dark); transform:translateY(-2px); }
.btn-ghost{
  border:1.5px solid var(--cream-text); color:var(--cream-text);
  border-radius:0.5rem; padding:0.65rem 1.3rem; background:transparent; cursor:pointer;
  font-family:'Hind Siliguri', sans-serif; transition: background .2s, transform .2s;
}
.btn-ghost:hover{ background:rgba(255,255,255,0.12); transform:translateY(-2px); }
.icon-btn{
  width:38px; height:38px; border-radius:9999px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--cream-text); color:var(--cream-text); background:transparent; flex-shrink:0; cursor:pointer;
  transition: background .2s, transform .2s;
}
.icon-btn:hover{ background:rgba(255,255,255,0.15); transform:scale(1.08); }
.search-panel{
  background:var(--surface); border:1px solid var(--surface-border); border-radius:0.75rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

button{ font-family:inherit; }
a{ text-decoration:none; color:inherit; }
img{ display:block; }

/* utility replacements for a few things not covered by Tailwind defaults */
.min-h-screen{ min-height:100vh; }

/* --- Logo mark --- */
.logo-mark{
  border-radius:9999px;
  object-fit:cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 4px 14px rgba(0,0,0,0.35);
  transition: transform .3s ease;
  flex-shrink:0;
}
.logo-mark:hover{ transform: rotate(-6deg) scale(1.05); }
.logo-mark-spin{ animation: logoSpin 18s linear infinite; }
@keyframes logoSpin{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* --- scroll reveal --- */
.reveal{ opacity:0; transform:translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }
.reveal-delay-4{ transition-delay:.32s; }

/* --- hero rope-compass float --- */
.float-slow{ animation: floatSlow 6s ease-in-out infinite; }
@keyframes floatSlow{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* --- animated underline on nav-ish text links --- */
.link-underline{ position:relative; }
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--red);
  transition: width .25s ease;
}
.link-underline:hover::after{ width:100%; }

/* --- badge shimmer for featured stat/patch --- */
.shimmer{
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmerMove 3.2s ease-in-out infinite;
}
@keyframes shimmerMove{
  0%{ background-position: -120% 0; }
  100%{ background-position: 220% 0; }
}

/* --- crest ribbon divider --- */
.divider-crest{
  height:6px; border-radius:3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--gold) 33%, var(--forest-deep) 66%, var(--red) 100%);
  background-size: 200% 100%;
  animation: crestFlow 6s linear infinite;
}
@keyframes crestFlow{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }

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

/* --- premium polish additions --- */

/* custom scrollbar (WebKit + Firefox) */
html{ scrollbar-width:thin; scrollbar-color:var(--ember) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--rope); border-radius:9999px; border:2px solid var(--canvas-light); }
::-webkit-scrollbar-thumb:hover{ background:var(--ember); }

/* accessible, on-brand focus rings (keyboard nav) instead of the default
   browser outline, without removing focus visibility */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
  border-radius:4px;
}
.icon-btn:focus-visible, .btn-primary:focus-visible, .btn-red:focus-visible, .btn-ghost:focus-visible{
  outline-offset:3px;
}

/* GPU hints for continuously-animated elements so scrolling stays smooth */
.hero-sheen, .patch, .shimmer, .divider-crest, .logo-mark-spin, .float-slow{ will-change: transform; }

/* smooth fade/slide-in for <main> every time the SPA renders a new page */
#root main{
  animation: pageIn .38s ease both;
}
@keyframes pageIn{
  0%{ opacity:0; transform: translateY(10px); }
  100%{ opacity:1; transform: translateY(0); }
}

/* thin animated progress-style accent under the sticky header, reinforces
   the "app-like" feel when switching pages */
.bg-forest.sticky{ box-shadow: 0 2px 18px rgba(0,0,0,0.18); }

/* --- initial skeleton loader (shown before app.js mounts) --- */
.skeleton-shell{ font-family:'Hind Siliguri', sans-serif; }
.skeleton{
  background: linear-gradient(100deg, var(--canvas) 30%, rgba(74,33,114,0.08) 50%, var(--canvas) 70%);
  background-size: 220% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: 0.6rem;
}
@keyframes skeletonPulse{
  0%{ background-position: 140% 0; }
  100%{ background-position: -60% 0; }
}
.skeleton-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.9rem 1.25rem; background:var(--forest-deep);
}
.skeleton-header .skeleton{ background:rgba(255,255,255,0.14); animation:none; }
.skeleton-logo{ width:36px; height:36px; border-radius:9999px; }
.skeleton-pill{ width:84px; height:32px; border-radius:9999px; }
.skeleton-hero{
  max-width:640px; margin:64px auto 40px; padding:0 20px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.skeleton-line{ height:22px; width:88%; }
.skeleton-line-wide{ height:32px; }
.skeleton-btn{ width:150px; height:44px; border-radius:0.5rem; margin-top:10px; }
.skeleton-grid{
  max-width:960px; margin:0 auto 60px; padding:0 20px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;
}
.skeleton-card{ height:140px; }
@media (prefers-reduced-motion: reduce){
  .skeleton{ animation:none; }
}