/* ═══════════════════════════════════════════════════════
   CASE STUDIES — Page-Specific CSS
   File: pages/case-studies.css | Shared styles: /styles.css
   Prefix: .cs-* for ALL NEW classes in this file.
   Verbatim-copied class names from source keep their original names.
   Token aliases (--fd, --fb, --ease etc.) are valid here — defined in styles.css.
   DO NOT redefine :root tokens.
═══════════════════════════════════════════════════════ */

/* ── FIRST RULE — lock viewport for panel layout ── */
html,body { overflow:hidden; }

/* ── Page-level token overrides ── */
:root {
  --pager-h:80px;
}

/* ── CURSOR ── */
#cur{position:fixed;z-index:9999;pointer-events:none;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px var(--teal);mix-blend-mode:screen;transform:translate(-50%,-50%);transition:width .3s,height .3s;}
#cur.big{width:22px;height:22px;}
#cur-ring{position:fixed;z-index:9998;pointer-events:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,212,200,.3);transform:translate(-50%,-50%);}

/* ── SPINE THREADS ── */
.threads{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.th{position:absolute;top:0;bottom:0;width:1px;filter:blur(1.5px);}
.th1{left:12%;background:linear-gradient(180deg,transparent,#00d4c8 25%,transparent 55%,#00d4c8 80%,transparent);opacity:.07;animation:thA 9s ease-in-out infinite;}
.th2{left:30%;width:1.5px;background:linear-gradient(180deg,#5a2890,transparent 35%,#c800a1 65%,transparent);opacity:.06;animation:thA 11s ease-in-out infinite 1.2s;}
.th3{left:68%;background:linear-gradient(180deg,transparent 10%,#00d4c8 40%,#c800a1 70%,transparent);opacity:.07;animation:thA 8s ease-in-out infinite 2.5s;}
.th4{left:86%;width:.8px;background:linear-gradient(180deg,transparent 20%,#5a2890 50%,#00d4c8 80%,transparent);opacity:.05;animation:thA 10s ease-in-out infinite .6s;}
@keyframes thA{0%,100%{opacity:.07}50%{opacity:.14}}

/* ── DEFAULT HERO TEXT ── */
#def{position:fixed;z-index:2;bottom:calc(var(--pager-h) + 40px);left:5%;transition:opacity .5s var(--ease),transform .5s var(--ease);}
#def.gone{opacity:0;transform:translateY(14px);pointer-events:none;}
.def-ey{font-family:var(--fm);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.def-ey::before{content:'';width:36px;height:1px;background:var(--teal);box-shadow:0 0 6px var(--teal);}
.def-h{font-family:var(--fd);font-size:clamp(48px,6.5vw,90px);line-height:.9;letter-spacing:.02em;margin-bottom:10px;}
.def-h .acc{display:block;background:linear-gradient(120deg,#00d4c8,#5a2890 50%,#c800a1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.def-sub{font-family:var(--fs);font-style:italic;font-size:clamp(16px,1.8vw,22px);color:rgba(255,255,255,.4);}

/* ═══════════════════════════════════
   PANEL VIEWPORT — clips to screen
   Panels occupy full height minus pager bar
═══════════════════════════════════ */
#panel-viewport{
  position:fixed;
  top:72px; left:0; right:0;
  bottom:var(--pager-h);
  z-index:10;
  overflow:hidden;
  display:flex;
}

/* Sliding track — only moved by goToPage(), never by CSS hover */
#panel-track{
  display:flex;
  height:100%;
  transition:transform .7s var(--ease);
  will-change:transform;
}

/* ── PANEL ── */
.panel{
  position:relative;
  height:100%;
  flex-shrink:0;
  overflow:hidden;
  cursor:none;
  transition:width .6s var(--ease);
}
.panel+.panel{border-left:1px solid rgba(255,255,255,.05);}

.panel-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity .6s var(--ease),transform .9s var(--ease);
  pointer-events:none;
}
.panel.hovered .panel-bg{opacity:1;transform:scale(1);}

.panel-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,34,.55) 0%,rgba(9,20,34,.05) 45%,rgba(9,20,34,.72) 100%);
  transition:background .5s;
}
.panel.hovered .panel-scrim{
  background:linear-gradient(180deg,rgba(9,20,34,.3) 0%,rgba(9,20,34,0) 45%,rgba(9,20,34,.76) 100%);
}

.panel-ghost{position:absolute;top:84px;left:20px;z-index:3;font-family:var(--fd);font-size:130px;line-height:1;color:rgba(255,255,255,.03);letter-spacing:.02em;pointer-events:none;transition:color .4s;user-select:none;}
.panel.hovered .panel-ghost{color:rgba(255,255,255,.07);}

/* ── SECTOR ICON — centre of panel, fades on hover ── */
.panel-icon{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:54px;
  opacity:.2;
  pointer-events:none;
  z-index:5;
  transition:opacity .42s var(--ease),transform .42s var(--ease);
  filter:drop-shadow(0 0 18px currentColor);
}
.panel.hovered .panel-icon{opacity:0;transform:translate(-50%,-62%);}

/* ── PER-CARD COLOUR GLOW — radial bloom from base of panel ── */
.panel::before{
  content:'';
  position:absolute;
  bottom:-10%;left:50%;
  transform:translateX(-50%);
  width:90%;height:55%;
  background:radial-gradient(ellipse at center,var(--glow-color,rgba(0,212,200,.22)) 0%,transparent 70%);
  pointer-events:none;
  z-index:1;
  opacity:.55;
  transition:opacity .5s var(--ease);
  filter:blur(18px);
}
.panel.hovered::before{opacity:1;}

.panel-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.06);overflow:hidden;z-index:5;}
.panel-line-fill{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);}
.panel.hovered .panel-line-fill{transform:scaleX(1);}

/* Panel content */
.panel-inner{position:absolute;bottom:0;left:0;right:0;padding:0 28px 32px;z-index:4;}

.panel-lbl-c{position:absolute;top:22%;left:50%;transform:translateX(-50%);writing-mode:vertical-lr;font-family:var(--fd);font-size:20px;letter-spacing:.07em;color:rgba(255,255,255,.25);white-space:nowrap;width:fit-content;z-index:4;transition:opacity .3s var(--ease),transform .3s var(--ease);}
.panel.hovered .panel-lbl-c{opacity:0;transform:translate(-50%,12px);}

.panel-exp{opacity:0;transform:translateY(20px);transition:opacity .38s var(--ease) .06s,transform .38s var(--ease) .06s;pointer-events:none;}
.panel.hovered .panel-exp{opacity:1;transform:translateY(0);pointer-events:auto;}

.p-ey{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.p-metric{font-family:var(--fd);font-size:clamp(48px,6vw,80px);letter-spacing:.02em;line-height:.88;margin-bottom:5px;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.p-metric-lbl{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:12px;}
.p-title{font-family:var(--fd);font-size:clamp(22px,2.5vw,38px);letter-spacing:.03em;line-height:.96;margin-bottom:10px;}
.p-copy{font-size:13px;line-height:1.7;color:rgba(255,255,255,.5);font-weight:300;margin-bottom:14px;max-width:340px;}
.p-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.ptag{font-family:var(--fm);font-size:10px;letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;border-radius:2px;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.45);background:rgba(255,255,255,.04);}
.p-btn{display:inline-flex;align-items:center;gap:10px;padding:11px 24px;border-radius:2px;font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;cursor:none;transition:transform .25s,box-shadow .25s;position:relative;z-index:10;-webkit-text-fill-color:unset;}
.p-btn::after{content:'\2192';transition:transform .3s;}
.p-btn:hover::after{transform:translateX(4px);}
.p-btn:hover{transform:translateY(-2px);}

/* ═══════════════════════════════════
   PAGER BAR — prominent bottom nav
═══════════════════════════════════ */
#pager{
  position:fixed;
  bottom:0;left:0;right:0;
  height:var(--pager-h);
  z-index:900;
  background:rgba(9,20,34,.95);
  backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  gap:20px;
}

/* Arrow buttons */
.pg-arrow{
  display:flex;align-items:center;gap:10px;
  padding:0 22px;
  height:44px;
  border-radius:2px;
  font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.55);
  cursor:none;
  transition:border-color .25s,background .25s,color .25s,opacity .3s,box-shadow .25s;
  white-space:nowrap;
  flex-shrink:0;
}
.pg-arrow .arrow-icon{font-size:16px;transition:transform .3s;}
.pg-arrow:hover{border-color:var(--teal);background:rgba(0,212,200,.08);color:var(--teal);box-shadow:0 0 16px rgba(0,212,200,.15);}
.pg-arrow:hover .arrow-icon-l{transform:translateX(-3px);}
.pg-arrow:hover .arrow-icon-r{transform:translateX(3px);}
.pg-arrow.disabled{opacity:.2;pointer-events:none;}

/* Centre section: dots + count */
.pager-centre{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  flex:1;
}

/* Page indicator dots */
#pg-dots{display:flex;gap:10px;align-items:center;}
.pgdot{
  width:24px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.15);
  transition:all .4s var(--ease);cursor:none;
}
.pgdot.on{background:var(--teal);box-shadow:0 0 8px var(--teal);width:36px;}

/* Panel dots */
#panel-dots{display:flex;gap:7px;align-items:center;}
.pdot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.08);
  transition:all .35s var(--ease);
}

/* Count + label */
.pager-info{
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  flex-shrink:0;min-width:100px;
}
#pg-count{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);}
#pg-hint{font-family:var(--fm);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.15);}

/* ═══════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════ */
@media(max-width:820px){
  html,body{overflow:auto;height:auto;cursor:auto;}
  #panel-viewport{position:relative;inset:unset;bottom:unset;overflow:visible;}
  #panel-track{flex-direction:column;transform:none!important;transition:none;width:100%!important;}
  .panel{flex:none!important;width:100%!important;height:100svh;border-left:none;border-bottom:1px solid rgba(255,255,255,.04);}
  .panel-bg{opacity:1!important;transform:none!important;}
  .panel-exp{opacity:1;transform:none;pointer-events:auto;}
  .panel-lbl-c{display:none;}
  #def,.threads,#cur,#cur-ring{display:none;}
  #pager{position:sticky;bottom:0;}
  .panel-inner{padding:0 20px 28px;}
  .p-title{font-size:clamp(20px,5vw,32px);}
  .p-metric{font-size:clamp(40px,10vw,64px);}
  .def-h{font-size:clamp(36px,8vw,56px);}
}

@media(max-width:480px){
  .pg-arrow span:not(.arrow-icon){display:none;}
  .pg-arrow{padding:0 14px;min-width:44px;min-height:44px;justify-content:center;}
  .pager-info{min-width:auto;}
  #pg-count{font-size:10px;letter-spacing:.1em;}
  #pg-hint{display:none;}
  #pager{padding:0 12px;gap:10px;}
  .p-copy{font-size:12px;max-width:100%;}
  .p-tags{gap:4px;}
  .ptag{font-size:10px;padding:2px 7px;}
}

@media(max-width:375px){
  .panel-inner{padding:0 14px 24px;}
  .p-btn{padding:10px 18px;font-size:10px;}
}