/* Research group sites · Department of Physics, CUI Lahore
   Shared by every group page under /Research/Groups/. See /Research/Groups/README.md.
   Design "Ring + Statement": heavy statement type and colour blocks, carried by one ring shape
   (a tokamak, an accelerator, an orbit) that is the hero, every photo mask, every button and bullet. */

:root{
  --navy:#0b1e34;--navy2:#13294a;--paper:#f1f4f8;--white:#fff;--ink:#0b1e34;--muted:#44566c;--soft:#b9c7d6;
  --steel:#2f5d8a;--sky:#a9c8e6;--gold:#ffc451;
  --m:clamp(20px,4vw,64px);--axis:clamp(0px,18vw,300px);
  --ease:cubic-bezier(.32,.72,0,1);--spring:cubic-bezier(.34,1.4,.64,1)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--paper);font:400 clamp(1.0625rem,1rem + .25vw,1.1875rem)/1.5 Chillax,"Segoe UI",system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}
.d{font-family:Chivo,"Arial Black",system-ui,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.88}
.skip{position:absolute;left:var(--m);top:-60px;z-index:30;background:var(--gold);color:var(--ink);padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}

/* Buttons: a pill with the arrow in its own ring */
.btn{display:inline-flex;align-items:center;gap:14px;padding:8px 8px 8px 26px;border-radius:999px;background:var(--gold);color:var(--ink);text-decoration:none;font-weight:600;transition:transform .5s var(--ease)}
.btn i{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--gold);font-style:normal;transition:transform .6s var(--spring)}
.btn:hover i,.btn:focus-visible i{transform:translateX(4px) rotate(-45deg) scale(1.06)}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--ink);color:var(--paper)}.btn.dark i{background:var(--gold);color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;padding:0 var(--m) 56px;display:grid;grid-template-rows:auto 1fr auto}
.bar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:88px;font-weight:500}
.wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.wordmark img{width:28px;height:28px;border-radius:50%;background:var(--paper)}
.bar nav{display:flex;gap:28px}
.bar nav a,.u{position:relative;text-decoration:none}
.bar nav a::after,.u::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.bar nav a:hover::after,.bar nav a:focus-visible::after,.u:hover::after,.u:focus-visible::after{transform:scaleX(1)}
.orbit{position:absolute;right:-30vh;top:46%;width:118vh;height:118vh;translate:0 -50%;pointer-events:none}
.orbit .disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--navy2);animation:turn 80s linear infinite}
.orbit .disc img{width:100%;height:100%;object-fit:cover;opacity:.6}
.orbit .hole{position:absolute;inset:27%;border-radius:50%;background:var(--navy)}
.orbit .track{position:absolute;inset:-6%;border-radius:50%;border:2px solid rgba(169,200,230,.35);animation:turn 40s linear infinite reverse}
.orbit .track::before,.orbit .track::after{content:"";position:absolute;top:50%;left:-9px;width:18px;height:18px;border-radius:50%;background:var(--gold)}
.orbit .track::after{left:auto;right:30%;top:-6px;width:12px;height:12px;background:var(--sky)}
@keyframes turn{to{rotate:360deg}}
.hero-word{position:relative;z-index:2;align-self:end;margin-left:var(--axis)}
.hero h1{font-size:clamp(3rem,7vw,8.5rem)}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 span b{display:block;font-weight:900}
.js .hero h1 span b{transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
.js .hero h1 span:nth-child(2) b{animation-delay:.14s}
@keyframes rise{to{transform:none}}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:32px;margin:40px 0 0 var(--axis)}
.hero-foot p{max-width:42ch;font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.4}
.js .hero-foot p{opacity:0;animation:fade .9s .5s var(--ease) forwards}
.js .hero-foot .btn{opacity:0;animation:fade .9s .65s var(--ease) forwards}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Overview: statement and facts ---------- */
.facts{background:var(--paper);color:var(--ink);padding:160px var(--m)}
.facts-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:40px;align-items:end;margin-left:var(--axis)}
.facts h2{font-size:clamp(2.5rem,1.4rem + 4.4vw,6rem)}
.facts-top a{display:inline-block;margin-top:14px;font-weight:600}
.row{display:flex;justify-content:space-between;gap:32px;margin-top:110px;flex-wrap:wrap}
.row>div{display:grid;grid-template-columns:22px auto;column-gap:16px;align-items:start}
.row>div::before{content:"";grid-row:1/3;width:22px;height:22px;margin-top:6px;border-radius:50%;border:5px solid var(--steel)}
.row dt,.row dd{grid-column:2}
.row>div:nth-child(2)::before{border-color:var(--gold)}.row>div:nth-child(3)::before{border-color:var(--sky)}
.row dt{font:900 clamp(1.75rem,1.1rem + 2.2vw,3.25rem)/1 Chivo,"Arial Black",sans-serif;letter-spacing:-.04em;text-transform:uppercase}
.row dd{margin-top:8px;max-width:20ch}

/* ---------- Lines: round photos that open as they scroll in ---------- */
.lines{background:var(--paper);color:var(--ink);padding:0 var(--m) 160px;display:grid;gap:120px}
.line{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,110px);align-items:center}
.line:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.line:nth-child(even) .lens{order:2}
.lens{aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--navy);clip-path:circle(50% at 50% 50%);transition:clip-path 1.4s var(--ease)}
.lens img{width:100%;height:100%;object-fit:cover;transition:scale 1.8s var(--ease)}
.rv-on .lens:not(.open){clip-path:circle(18% at 50% 50%)}.rv-on .lens:not(.open) img{scale:1.25}
.line h3{font:900 clamp(2rem,1.2rem + 3vw,4.25rem)/.9 Chivo,"Arial Black",sans-serif;letter-spacing:-.05em;text-transform:uppercase;margin-bottom:24px}
.line ul,.pick ul{list-style:none;padding:0;display:grid;gap:12px}
.line li{display:flex;gap:14px;align-items:baseline}
.line li::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:3px solid var(--steel);translate:0 1px}
.line .btn{margin-top:28px}

/* ---------- Band: topics running through rings ---------- */
.band{position:relative;overflow:hidden;background:var(--gold);color:var(--ink);padding:44px 0}
.track-run{display:flex;gap:40px;width:max-content;align-items:center;animation:run 60s linear infinite}
.band:hover .track-run{animation-play-state:paused}
.track-run span{font:900 clamp(2rem,1.2rem + 3vw,4rem)/1 Chivo,"Arial Black",sans-serif;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.track-run i{flex:none;width:clamp(48px,6vw,84px);aspect-ratio:1;border-radius:50%;border:clamp(8px,1vw,14px) solid var(--ink)}
.track-run i:nth-of-type(3n){border-color:var(--steel)}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- Topics: a ledger with a round preview ---------- */
.ledger{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);padding:160px var(--m);align-items:start}
.ledger h2{font-size:clamp(2rem,1.2rem + 3vw,4.25rem);margin-bottom:16px}
.ledger .note{max-width:46ch;margin-bottom:40px;color:var(--soft)}
.ledger ol{list-style:none;padding:0}
.ledger li{position:relative;z-index:0}
.ledger li a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 4px;text-decoration:none;transition:padding .4s var(--ease)}
.ledger li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy2);border-radius:999px;transform:scaleX(.02);opacity:0;transform-origin:left;transition:transform .45s var(--ease),opacity .2s}
.ledger li:hover a,.ledger li.on a,.ledger li a:focus-visible{padding-left:24px}
.ledger li:hover::before,.ledger li.on::before{transform:none;opacity:1}
.ledger em{display:inline-flex;align-items:center;gap:8px;font-style:normal;color:var(--soft);white-space:nowrap}
.ledger em::before{content:"";width:10px;height:10px;border-radius:50%;border:3px solid var(--c,var(--sky))}
.c-gold{--c:var(--gold)}.c-sky{--c:var(--sky)}.c-steel{--c:#6f9bc8}.c-paper{--c:var(--paper)}
.view{position:sticky;top:12vh;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--navy2)}
.view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;rotate:-8deg;scale:1.12;transition:opacity .45s var(--ease),rotate .9s var(--ease),scale .9s var(--ease)}
.view img.on{opacity:1;rotate:0deg;scale:1}
.view::after{content:"";position:absolute;inset:8%;border-radius:50%;border:2px solid rgba(255,196,81,.7);animation:turn 30s linear infinite}

/* ---------- Pictures: round prints with their source ---------- */
.pictures{background:var(--navy2);padding:160px var(--m)}
.pictures h2{font-size:clamp(2rem,1.2rem + 3vw,4.25rem);margin:0 0 64px var(--axis)}
.prints{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 28px}
.prints figure img{aspect-ratio:1;width:100%;object-fit:cover;border-radius:50%;transition:transform .9s var(--ease)}
.prints figure:hover img{transform:scale(1.04) rotate(-3deg)}
.prints figcaption{margin-top:16px;font-size:.9375rem;line-height:1.4}
.prints figcaption b{display:block;font-weight:600}
.prints figcaption span{color:var(--soft)}

/* ---------- Join: letter and the line picker ---------- */
.join{background:var(--sky);color:var(--ink);padding:160px var(--m);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px)}
.join h2{font-size:clamp(2.5rem,1.4rem + 4.4vw,6rem)}
.join .letter p{margin-top:24px;max-width:46ch}
.join mark{background:var(--ink);color:var(--gold);padding:0 8px;border-radius:999px}
.join .sign{font-weight:600}.join .sign span{display:block;font-weight:400;color:var(--muted)}
.pick{background:var(--white);border-radius:44px;padding:44px;align-self:start}
.pick fieldset{border:0;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pick legend{font-weight:600;margin-bottom:14px}
.pick label{position:relative}
.pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pick label span{display:inline-block;padding:11px 22px;border-radius:999px;background:var(--paper);transition:background .3s var(--ease),color .3s,transform .5s var(--spring)}
.pick label:hover span{transform:translateY(-3px)}
.pick input:checked+span{background:var(--ink);color:var(--paper)}
.pick input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.pick ul{margin:0 0 30px;gap:10px}
.pick ul[hidden]{display:none}
.pick li{display:flex;gap:12px;animation:fade .5s var(--ease) both}
.pick li::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;border-radius:50%;background:var(--steel)}
.pick .addr{margin-top:16px;font-size:.9375rem;color:var(--muted)}

/* ---------- People ---------- */
.people{background:var(--paper);color:var(--ink);padding:160px var(--m)}
.people h2{font-size:clamp(2.5rem,1.4rem + 4.4vw,6rem);margin-left:var(--axis)}
.people .note{margin:20px 0 0 var(--axis);color:var(--muted)}
.people h3{font:900 clamp(1.375rem,1.1rem + 1vw,2rem)/1 Chivo,"Arial Black",sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:72px 0 32px}
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:44px 24px}
.face i{display:block;aspect-ratio:1;border-radius:50%;margin-bottom:16px;background:var(--sky);transition:transform .7s var(--spring)}
.face:nth-child(3n+2) i{background:var(--steel)}.face:nth-child(3n) i{background:var(--gold)}
.face:hover i{transform:scale(1.05) rotate(-4deg)}
.face b{display:block;font-weight:600}.face span{display:block;color:var(--muted)}
.people .pubs{margin:72px 0 0 var(--axis);font-weight:600}

/* ---------- Footer ---------- */
footer{position:relative;overflow:hidden;padding:140px var(--m) 32px}
footer .mark{position:absolute;right:-20vw;top:-30vw;width:70vw;aspect-ratio:1;border-radius:50%;border:clamp(40px,7vw,110px) solid var(--navy2);animation:turn 120s linear infinite}
footer h2{position:relative;font-size:clamp(2.5rem,1.4rem + 4.4vw,6rem);margin-bottom:56px}
footer .cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
footer .cols a{text-decoration:none}footer .cols a:hover{color:var(--gold)}
footer .name{position:relative;font-size:23vw;color:var(--gold);white-space:nowrap;margin:96px 0 24px}
footer .credits{position:relative;max-width:62ch;font-size:.9375rem;color:var(--soft)}
footer small{position:relative;display:block;margin-top:24px;color:var(--soft);font-size:.875rem}

/* ---------- Entrances (content stays visible if script never runs) ---------- */
.rv-on .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-on .rv.in{opacity:1;transform:none}
.no-motion .rv,.no-motion .hero h1 span b,.no-motion .hero-foot p,.no-motion .hero-foot .btn{opacity:1!important;transform:none!important;animation:none!important}

@media (max-width:1000px){.prints{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  :root{--axis:0px}
  .bar nav{display:none}
  .orbit{right:auto;left:50%;top:30%;width:90vh;height:90vh;translate:-50% -50%}
  .hero h1{font-size:9.6vw}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .facts-top,.line,.line:nth-child(even),.ledger,.join,footer .cols{grid-template-columns:1fr}
  .line:nth-child(even) .lens{order:0}
  .view{display:none}
  .pick{border-radius:28px;padding:28px}
  .row{display:grid;grid-template-columns:1fr 1fr}
  .facts,.lines,.ledger,.pictures,.join,.people{padding-top:96px;padding-bottom:96px}
  .lines{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero h1 span b,.js .hero-foot p,.js .hero-foot .btn{transform:none;opacity:1}
  .rv-on .lens:not(.open){clip-path:none}.rv-on .lens:not(.open) img{scale:1}
  .rv-on .rv{opacity:1;transform:none}
}