/* ============================================================
   AstroCET — style.css
   Astronomy Club · College of Engineering Trivandrum
   ============================================================ */

:root {
  --navy:   #080617;
  --navy2:  #0d0a22;
  --navy3:  #13102e;
  --purple: #7b2fbe;
  --purp2:  #9b4fde;
  --purp3:  #5a1d8e;
  --yellow: #f5c518;
  --yel2:   #ffd84d;
  --star:   #ede9d8;
  --muted:  #7a8fad;
  --line:   rgba(245,197,24,0.10);
  --linep:  rgba(123,47,190,0.20);
  --dhruva: #e8520a;
  --dhruva2:#ff7a3d;
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-mono: 'DM Mono', monospace;
  --font-body: 'DM Sans', sans-serif;
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { background:var(--navy); color:var(--star); font-family:var(--font-body); overflow-x:hidden; cursor:none }

/* ── CURSOR ── */
#cur,#cur2 { position:fixed; border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%) }
#cur  { width:6px; height:6px; background:var(--yellow); transition:transform .1s, background .2s }
#cur2 { width:28px; height:28px; border:1px solid rgba(245,197,24,.38); transition:all .18s cubic-bezier(.16,1,.3,1) }

/* ── BACKGROUND & PROGRESS ── */
#bg { position:fixed; inset:0; z-index:0; pointer-events:none }
#grain {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px
}
#progress {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg,var(--yellow),var(--dhruva),var(--purp2));
  z-index:9998; width:0%; transition:width .08s linear;
  box-shadow:0 0 8px rgba(245,197,24,.4)
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 64px;
  transition:padding .35s, background .35s, border-color .35s;
  border-bottom:1px solid transparent
}
nav.scrolled {
  padding:14px 64px;
  background:rgba(8,6,23,.97);
  border-bottom-color:rgba(123,47,190,.18);
  backdrop-filter:blur(14px)
}
.logo-wrap { display:flex; align-items:center; gap:13px; text-decoration:none }
.logo-img  { height: 60px; width:auto; object-fit:contain; opacity:.92; mix-blend-mode:screen }
.logo-name { font-family:var(--font-display); font-size:1.6rem; letter-spacing:.14em; color:var(--yellow); line-height:1 }
.logo-sub  { font-family:var(--font-mono); font-size:.44rem; letter-spacing:.38em; color:var(--muted); text-transform:uppercase; margin-top:2px }

.nav-links { display:flex; gap:38px; list-style:none }
.nav-links a {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.22em;
  color:var(--muted); text-decoration:none; text-transform:uppercase;
  transition:color .25s; position:relative; padding-bottom:3px
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--yellow); transition:width .3s ease
}
.nav-links a:hover,
.nav-links a.active { color:var(--star) }
.nav-links a:hover::after,
.nav-links a.active::after { width:100% }

.nav-btn {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--navy); background:var(--yellow);
  padding:10px 24px; text-decoration:none;
  transition:background .25s, transform .2s; cursor:none; display:inline-block
}
.nav-btn:hover { background:var(--yel2); transform:translateY(-1px) }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:none; padding:4px }
.hamburger span { width:22px; height:1.5px; background:var(--muted); transition:all .3s }

.mobile-menu {
  display:none; position:fixed; inset:0;
  background:rgba(8,6,23,.98); z-index:199;
  flex-direction:column; justify-content:center; align-items:center;
  gap:30px; backdrop-filter:blur(16px)
}
.mobile-menu.open { display:flex }
.mobile-menu a {
  font-family:var(--font-display); font-size:2.5rem; letter-spacing:.1em;
  color:var(--muted); text-decoration:none; transition:color .3s, letter-spacing .3s
}
.mobile-menu a:hover { color:var(--yellow); letter-spacing:.18em }

/* ── LAYOUT UTILITIES ── */
section { position:relative; z-index:2 }
.tag {
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.4em;
  color:var(--yellow); text-transform:uppercase;
  display:flex; align-items:center; gap:14px; margin-bottom:22px
}
.tag::before { content:''; width:26px; height:1px; background:var(--yellow); flex-shrink:0 }
.pad { padding:120px 8vw }
.glow-hr {
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(123,47,190,.5) 30%,rgba(245,197,24,.3) 50%,rgba(123,47,190,.5) 70%,transparent 100%);
  margin:0 8vw; position:relative; z-index:2
}

/* ── HERO ── */
.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:0 8vw; overflow:hidden }
.hero::after {
  content:''; position:absolute; top:0; right:0; width:55%; height:100%;
  background:radial-gradient(ellipse at 70% 40%,rgba(123,47,190,.06) 0%,transparent 70%);
  pointer-events:none
}
.hero-pre {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.45em;
  color:rgba(245,197,24,.55); text-transform:uppercase;
  margin-bottom:30px; opacity:0; animation:fup .9s .25s forwards
}
.hero-h1 {
  font-family:var(--font-display); font-size:clamp(5.5rem,13vw,13rem);
  line-height:.88; letter-spacing:.035em; margin-bottom:40px;margin-top: 60px;
}
.hero-h1 .line { overflow:hidden; display:block }
.hero-h1 .line span { display:block; opacity:0; transform:translateY(108%); animation:sup .9s cubic-bezier(.16,1,.3,1) forwards }
.l1 span { animation-delay:.3s }
.l2 span { animation-delay:.46s; color:var(--yellow) }
.l3 span { animation-delay:.62s }

.hero-body {
  font-size:1.02rem; color:var(--muted); max-width:400px; line-height:1.9;
  margin-bottom:54px; font-weight:300; opacity:0; animation:fup .9s 1.0s forwards
}
.hero-btns { display:flex; gap:22px; align-items:center; opacity:0; animation:fup .9s 1.18s forwards; flex-wrap:wrap }

.btn-p {
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); background:var(--yellow); padding:14px 36px; text-decoration:none;
  transition:background .25s, transform .2s, box-shadow .25s;
  cursor:none; border:none; display:inline-block; position:relative
}
.btn-p:hover { background:var(--yel2); transform:translateY(-2px); box-shadow:0 8px 32px rgba(245,197,24,.22) }

.btn-o {
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; display:flex; align-items:center; gap:12px; transition:color .25s
}
.btn-o::before { content:''; width:30px; height:1px; background:currentColor; transition:width .35s ease }
.btn-o:hover { color:var(--star) }
.btn-o:hover::before { width:54px }

.hero-side { position:absolute; right:8vw; top:50%; transform:translateY(-50%); opacity:0; animation:fup 1.1s 1.45s forwards }
.hero-badge { width:170px; height:170px; position:relative }
.hero-badge>svg { animation:rotateSlow 32s linear infinite }
.badge-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center }
.badge-center .num  { font-family:var(--font-display); font-size:2.6rem; color:var(--yellow); line-height:1 }
.badge-center .lbl  { font-family:var(--font-mono); font-size:.42rem; letter-spacing:.22em; color:var(--muted); text-transform:uppercase; margin-top:4px }

.hero-scroll {
  position:absolute; bottom:36px; left:8vw;
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.3em;
  color:rgba(136,153,187,.35); text-transform:uppercase;
  display:flex; align-items:center; gap:14px;
  opacity:0; animation:fup 1s 2s forwards
}
.scroll-bar {
  width:1px; height:42px;
  background:linear-gradient(to bottom,transparent,rgba(245,197,24,.5));
  animation:scrollPulse 2.4s ease-in-out infinite
}

/* ── VISION ── */
.vision { background:var(--navy2) }
.vision-inner { display:grid; grid-template-columns:1fr 1.25fr; gap:90px; align-items:start }
.vision-text h2 { font-family:var(--font-serif); font-size:clamp(2.5rem,4.2vw,3.8rem); font-weight:400; line-height:1.15; margin-bottom:34px }
.vision-text h2 em { font-style:italic; color:var(--yellow) }
.vision-text p { color:var(--muted); line-height:1.95; font-weight:300; font-size:.98rem; margin-bottom:18px }
.vision-pillars { display:flex; flex-direction:column; gap:2px }
.pillar {
  background:var(--navy3); border:1px solid var(--linep);
  padding:26px 30px; display:flex; gap:22px; align-items:flex-start;
  transition:background .35s, border-color .35s, transform .3s; cursor:none
}
.pillar:hover { background:rgba(26,18,70,.9); border-color:rgba(245,197,24,.25); transform:translateX(4px) }
.pillar-num { font-family:var(--font-display); font-size:2rem; color:var(--purp2); opacity:.45; line-height:1; flex-shrink:0; width:36px }
.pillar h3  { font-family:var(--font-serif); font-size:1.08rem; font-weight:400; margin-bottom:7px; color:var(--star) }
.pillar p   { font-size:.86rem; color:var(--muted); line-height:1.72; font-weight:300 }

/* ── DHRUVA ── */
.dhruva-logo-container {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dh-main-logo {
  max-width: 450px; /* Adjust this to make the logo larger or smaller */
  width: 90%;      /* Responsive width for mobile */
  height: auto;
  filter: drop-shadow(0 0 15px rgba(80, 10, 232, 0.3)); /* Adds a subtle orange glow */
}

/* On mobile, make the logo a bit smaller */
@media(max-width: 600px) {
  .dh-main-logo {
    max-width: 280px;
  }
}
.dhruva { background:var(--navy); position:relative; overflow:hidden }
.dhruva-bg {
  position:absolute; inset:0;
  background:linear-gradient(rgba(6,4,16,.88) 0%, rgba(6,4,16,.82) 40%, rgba(6,4,16,.92) 100%);
  z-index:0
}
.dhruva-inner { position:relative; z-index:1 }
.dhruva-wordmark {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-size:clamp(8rem,19vw,24rem); letter-spacing:.07em;
  color:rgba(232,82,10,.028); pointer-events:none; white-space:nowrap; user-select:none; z-index:0
}
.dhruva-header { text-align:center; max-width:740px; margin:0 auto 80px; position:relative; z-index:1 }
.dhruva-header .tag { justify-content:center }
.dhruva-header .tag::before { display:none }
.dhruva-header h2 { font-family:var(--font-serif); font-size:clamp(2.5rem,5.2vw,4.2rem); font-weight:400; line-height:1.13; margin-bottom:22px }
.dhruva-header h2 em { font-style:italic; color:var(--dhruva) }
.dhruva-header p { color:var(--muted); font-weight:300; line-height:1.95; font-size:.98rem }
.dhruva-date-chip {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(232,82,10,.08); border:1px solid rgba(232,82,10,.28);
  padding:8px 22px; margin-bottom:22px;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.24em;
  color:var(--dhruva2); text-transform:uppercase
}
.dhruva-meta { display:flex; justify-content:center; gap:0; margin-top:40px; flex-wrap:wrap; border:1px solid rgba(232,82,10,.16) }
.dmeta { text-align:center; padding:22px 46px; border-right:1px solid rgba(232,82,10,.16) }
.dmeta:last-child { border-right:none }
.dmeta .val { font-family:var(--font-display); font-size:2.5rem; color:var(--dhruva); letter-spacing:.08em; line-height:1 }
.dmeta .key { font-family:var(--font-mono); font-size:.46rem; letter-spacing:.3em; color:var(--muted); text-transform:uppercase; margin-top:6px }

.dhruva-highlights { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-bottom:68px; position:relative; z-index:1 }
.dh-card {
  background:rgba(255,255,255,.022); border:1px solid rgba(232,82,10,.13);
  padding:36px 26px; transition:background .35s, border-color .35s, transform .3s;
  position:relative; overflow:hidden; cursor:none
}
.dh-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--dhruva),var(--dhruva2));
  transform:scaleX(0); transform-origin:left; transition:transform .45s ease
}
.dh-card:hover { background:rgba(232,82,10,.055); border-color:rgba(232,82,10,.32); transform:translateY(-4px) }
.dh-card:hover::after { transform:scaleX(1) }
.dh-icon { width:40px; height:40px; margin-bottom:22px }
.dh-icon svg { width:100%; height:100% }
.dh-card h4 { font-family:var(--font-serif); font-size:1.08rem; font-weight:400; margin-bottom:10px; color:var(--star) }
.dh-card p  { font-size:.83rem; color:var(--muted); line-height:1.78; font-weight:300 }

.section-sublabel {
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.38em;
  color:var(--dhruva); text-transform:uppercase; margin-bottom:20px;
  display:flex; align-items:center; gap:14px; position:relative; z-index:1
}
.section-sublabel::before { content:''; width:22px; height:1px; background:var(--dhruva) }

.comps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-bottom:64px; position:relative; z-index:1 }
.comp-item {
  background:rgba(255,255,255,.022); border:1px solid var(--linep);
  padding:28px 22px; text-align:center;
  transition:background .3s, border-color .3s, transform .3s; cursor:none
}
.comp-item:hover { background:rgba(123,47,190,.09); border-color:rgba(155,79,222,.38); transform:translateY(-3px) }
.comp-icon { font-size:1.8rem; margin-bottom:16px; line-height:1; display:block }
.comp-item h4 { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em; color:var(--star); margin-bottom:8px; text-transform:uppercase }
.comp-item p  { font-size:.78rem; color:var(--muted); line-height:1.62; font-weight:300 }

.workshops-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; position:relative; z-index:1 }
.ws-card {
  background:rgba(255,255,255,.022); border:1px solid rgba(245,197,24,.1);
  padding:38px 32px; position:relative; overflow:hidden;
  transition:background .3s, border-color .3s; cursor:none
}
.ws-card:hover { background:rgba(245,197,24,.035); border-color:rgba(245,197,24,.28) }
.ws-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; bottom:0;
  background:var(--yellow); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s cubic-bezier(.16,1,.3,1)
}
.ws-card:hover::before { transform:scaleY(1) }
.ws-num { font-family:var(--font-display); font-size:4rem; color:var(--yellow); opacity:.06; position:absolute; top:10px; right:18px; line-height:1; pointer-events:none }
.ws-card h4 { font-family:var(--font-serif); font-size:1.25rem; font-weight:400; margin-bottom:13px; color:var(--star) }
.ws-card p  { font-size:.85rem; color:var(--muted); line-height:1.82; font-weight:300; margin-bottom:20px }
.ws-tag { display:inline-block; font-family:var(--font-mono); font-size:.44rem; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); border:1px solid rgba(245,197,24,.2); padding:5px 13px }

/* ── OUTREACH ── */
.outreach { background:var(--navy2) }
.outreach-inner { display:grid; grid-template-columns:1.15fr 1fr; gap:88px; align-items:center }
.outreach-text h2 { font-family:var(--font-serif); font-size:clamp(2.2rem,4.2vw,3.5rem); font-weight:400; line-height:1.18; margin-bottom:26px }
.outreach-text h2 em { color:var(--yellow); font-style:italic }
.outreach-text p { color:var(--muted); line-height:1.92; font-weight:300; margin-bottom:16px; font-size:.98rem }
.outreach-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:38px }
.ostat { background:var(--navy3); border:1px solid var(--linep); padding:20px 18px; transition:border-color .3s }
.ostat:hover { border-color:rgba(245,197,24,.2) }
.ostat .val   { font-family:var(--font-display); font-size:2.5rem; color:var(--yellow); line-height:1; letter-spacing:.04em }
.ostat .label { font-family:var(--font-mono); font-size:.44rem; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; margin-top:6px }
.outreach-cards { display:flex; flex-direction:column; gap:2px }
.outreach-card {
  background:var(--navy3); border:1px solid var(--linep);
  padding:22px 26px; display:flex; gap:18px; align-items:flex-start;
  transition:background .3s, border-color .3s, transform .3s; cursor:none
}
.outreach-card:hover { background:rgba(26,18,70,.9); border-color:rgba(245,197,24,.18); transform:translateX(4px) }
.oc-icon  { width:36px; height:36px; flex-shrink:0; border:1px solid rgba(245,197,24,.18); display:flex; align-items:center; justify-content:center; font-size:.95rem }
.oc-title { font-family:var(--font-serif); font-size:1rem; font-weight:400; margin-bottom:5px }
.oc-desc  { font-size:.8rem; color:var(--muted); line-height:1.68; font-weight:300 }

/* ── EVENTS ── */
.events { background:var(--navy) }
.events-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:58px }
.events-header h2 { font-family:var(--font-serif); font-size:clamp(2.2rem,3.6vw,3.2rem); font-weight:400 }
.events-list { display:flex; flex-direction:column; gap:2px }
.event-row {
  background:var(--navy2); border:1px solid var(--linep);
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:44px; padding:28px 38px;
  transition:background .3s, border-color .3s; cursor:none;
  position:relative; overflow:hidden
}
.event-row::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--purple); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s cubic-bezier(.16,1,.3,1)
}
.event-row:hover { background:var(--navy3); border-color:rgba(123,47,190,.3) }
.event-row:hover::before { transform:scaleY(1) }
.ev-main h3 { font-family:var(--font-serif); font-size:1.15rem; font-weight:400; margin-bottom:7px }
.ev-main p  { font-size:.85rem; color:var(--muted); font-weight:300; line-height:1.68 }
.ev-badge { font-family:var(--font-mono); font-size:.46rem; letter-spacing:.18em; text-transform:uppercase; padding:6px 15px; border:1px solid; white-space:nowrap }
.b-comp { color:#a78fff; border-color:rgba(167,143,255,.28) }
.b-pub  { color:var(--yellow); border-color:rgba(245,197,24,.28) }
.b-talk { color:#f87171; border-color:rgba(248,113,113,.28) }
.b-work { color:var(--purp2); border-color:rgba(155,79,222,.28) }
.b-fest { color:var(--dhruva2); border-color:rgba(255,122,61,.28) }

/* ── PROJECTS ── */
.projects { background:var(--navy2) }
.projects-header { margin-bottom:68px }
.projects-header h2 { font-family:var(--font-serif); font-size:clamp(2.2rem,3.6vw,3.2rem); font-weight:400; margin-bottom:14px }
.projects-header p  { color:var(--muted); font-weight:300; font-size:.98rem; max-width:520px; line-height:1.82 }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px }
.proj-card { background:var(--navy); padding:46px 42px; position:relative; overflow:hidden; cursor:none; transition:background .35s }
.proj-card:hover { background:#0d0a22 }
.proj-card.fp { background:var(--purp3) }
.proj-card.fp:hover { background:#6a1ea0 }
.proj-status { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.48rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; color:var(--yellow) }
.sdot { width:6px; height:6px; border-radius:50%; background:var(--yellow); animation:pulse 2.2s ease-in-out infinite }
.proj-art { width:100%; height:180px; margin-bottom:30px; border:1px solid rgba(123,47,190,.18); overflow:hidden }
.proj-art svg { width:100%; height:100% }
.proj-card h3   { font-family:var(--font-serif); font-size:1.9rem; font-weight:400; line-height:1.2; margin-bottom:17px }
.proj-card p    { font-size:.88rem; color:var(--muted); line-height:1.88; font-weight:300; margin-bottom:26px }
.proj-tags      { display:flex; flex-wrap:wrap; gap:8px }
.ptag { font-family:var(--font-mono); font-size:.44rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid rgba(123,47,190,.28); padding:5px 13px; transition:border-color .25s, color .25s }
.proj-card:hover .ptag { border-color:rgba(123,47,190,.45); color:rgba(200,180,255,.7) }
.proj-deco   { position:absolute; right:-6px; bottom:-15px; opacity:.04; font-family:var(--font-display); font-size:8.5rem; color:var(--yellow); user-select:none; pointer-events:none; line-height:1 }
.proj-corner { position:absolute; top:38px; right:38px; font-family:var(--font-mono); font-size:.62rem; color:var(--yellow); opacity:0; transform:translate(4px,-4px); transition:opacity .3s, transform .3s }
.proj-card:hover .proj-corner { opacity:1; transform:translate(0,0) }

/* ── TEAM ── */
.team { background:var(--navy) }
.team-header { margin-bottom:62px }
.team-header h2 { font-family:var(--font-serif); font-size:clamp(2.2rem,3.6vw,3.2rem); font-weight:400 }
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px }
.member { background:var(--navy2); overflow:hidden; position:relative; cursor:none; transition:background .3s }
.member:hover { background:var(--navy3) }
.member-art { height:178px; overflow:hidden; position:relative }
.member-art svg { width:100%; height:100%; transition:transform .5s ease }
.member:hover .member-art svg { transform:scale(1.04) }
.member-info { padding:20px 20px 26px }
.member-role { font-family:var(--font-mono); font-size:.46rem; letter-spacing:.26em; color:var(--yellow); text-transform:uppercase; margin-bottom:6px }
.member-name { font-family:var(--font-serif); font-size:1.08rem; font-weight:400; margin-bottom:5px }
.member-dept { font-size:.76rem; color:var(--muted); font-weight:300 }
.member-bar  { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--yellow),var(--purple)); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,1,.3,1) }
.member:hover .member-bar { transform:scaleX(1) }

/* ── GALLERY ── */
.gallery { background:var(--navy2); overflow:hidden; padding-top:110px; padding-bottom:0 }
.gallery-header { padding:0 8vw; margin-bottom:50px }
.gallery-header h2 { font-family:var(--font-serif); font-size:clamp(2rem,3.2vw,2.9rem); font-weight:400 }
.gallery-track { overflow:hidden; position:relative }
.gallery-track::before,
.gallery-track::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:3; pointer-events:none }
.gallery-track::before { left:0;  background:linear-gradient(90deg,var(--navy2),transparent) }
.gallery-track::after  { right:0; background:linear-gradient(-90deg,var(--navy2),transparent) }
.gstrip { display:flex; gap:2px; width:max-content; animation:gscroll 36s linear infinite }
.gstrip:hover { animation-play-state:paused }
.gitem { width:295px; height:198px; flex-shrink:0; position:relative; overflow:hidden; background:var(--navy3) }
.gitem svg { width:100%; height:100%; transition:transform .55s ease }
.gitem:hover svg { transform:scale(1.07) }
.glabel { position:absolute; bottom:0; left:0; right:0; padding:14px 16px; background:linear-gradient(to top,rgba(8,6,23,.95),transparent); font-size:.76rem; font-weight:300; letter-spacing:.04em; opacity:0; transition:opacity .3s }
.gitem:hover .glabel { opacity:1 }

/* ── FOOTER ── */
footer { padding:72px 8vw 44px; border-top:1px solid rgba(123,47,190,.18); background:var(--navy); position:relative; z-index:2 }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:54px }
.f-brand .name { font-family:var(--font-display); font-size:1.55rem; letter-spacing:.16em; color:var(--yellow); margin-bottom:16px }
.f-brand p { font-size:.86rem; color:var(--muted); line-height:1.82; font-weight:300; max-width:260px }
.f-col h4 { font-family:var(--font-mono); font-size:.5rem; letter-spacing:.32em; color:var(--yellow); text-transform:uppercase; margin-bottom:20px }
.f-col ul { list-style:none }
.f-col ul li { margin-bottom:11px }
.f-col ul li a { font-size:.86rem; color:var(--muted); text-decoration:none; font-weight:300; transition:color .25s }
.f-col ul li a:hover { color:var(--star) }
.footer-bot { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid rgba(123,47,190,.1); font-family:var(--font-mono); font-size:.48rem; letter-spacing:.14em; color:rgba(136,153,187,.28); text-transform:uppercase }

/* ── SCROLL REVEAL ── */
.reveal       { opacity:0; transform:translateY(28px);  transition:opacity .8s ease, transform .8s ease }
.reveal.visible { opacity:1; transform:translateY(0) }
.reveal-left  { opacity:0; transform:translateX(-28px); transition:opacity .8s ease, transform .8s ease }
.reveal-left.visible  { opacity:1; transform:translateX(0) }
.reveal-right { opacity:0; transform:translateX(28px);  transition:opacity .8s ease, transform .8s ease }
.reveal-right.visible { opacity:1; transform:translateX(0) }
.stagger > * { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s ease }
.stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.04s }
.stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.13s }
.stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.22s }
.stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.31s }
.stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:.40s }
.stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:.49s }

/* ── KEYFRAMES ── */
@keyframes fup        { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes sup        { to   { opacity:1; transform:translateY(0) } }
@keyframes rotateSlow { to   { transform:rotate(360deg) } }
@keyframes scrollPulse{ 0%,100% { opacity:.4 } 50% { opacity:1 } }
@keyframes gscroll    { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes pulse      { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(245,197,24,.4) } 50% { opacity:.7; box-shadow:0 0 0 5px rgba(245,197,24,0) } }

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  .dhruva-highlights { grid-template-columns:repeat(2,1fr) }
  .comps-grid        { grid-template-columns:repeat(2,1fr) }
  .dmeta             { padding:20px 28px }
}
@media (max-width:960px) {
  nav, nav.scrolled { padding:16px 24px }
  .nav-links, .nav-btn { display:none }
  .hamburger { display:flex }
  .pad { padding:88px 6vw }
  .hero { padding:0 6vw }
  .hero-side { display:none }
  .vision-inner, .outreach-inner { grid-template-columns:1fr; gap:52px }
  .dhruva-highlights { grid-template-columns:repeat(2,1fr) }
  .comps-grid        { grid-template-columns:repeat(2,1fr) }
  .workshops-grid    { grid-template-columns:1fr }
  .outreach-stats    { grid-template-columns:repeat(4,1fr) }
  .team-grid         { grid-template-columns:repeat(2,1fr) }
  .event-row         { grid-template-columns:1fr; gap:12px }
  .projects-grid     { grid-template-columns:1fr }
  .footer-top        { grid-template-columns:1fr 1fr }
  .footer-bot        { flex-direction:column; gap:10px; text-align:center }
  body               { cursor:auto }
  #cur, #cur2        { display:none }
}
@media (max-width:600px) {
  .team-grid, .footer-top, .dhruva-highlights { grid-template-columns:1fr }
  .comps-grid, .outreach-stats { grid-template-columns:1fr 1fr }
  .dhruva-meta { flex-direction:column }
  .dmeta { border-right:none; border-bottom:1px solid rgba(232,82,10,.16) }
  .dmeta:last-child { border-bottom:none }
}