/* =====================================================================
   /team — a development team, introduced like a deploy.
   Intro terminal -> curtain lift -> hero -> one sticky card per person
   that stacks over the last -> stack marquee -> call to action.
   Hidden "before" states only exist under html.js, so with JavaScript
   off (or reduced motion on) the whole page is simply visible.
   ===================================================================== */

.tp{
  --hdr:88px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --grid-line:rgba(18,166,232,.34);
  --boot-bg:#04070D;
  position:relative;
}
@media(max-width:1024px){.tp{--hdr:78px;}}
@media(max-width:900px){.tp{--hdr:70px;}}
@media(max-width:480px){.tp{--hdr:64px;}}

/* the global `section{}` rule adds a border and 90px padding; each block below sets its own */
:where(.tp) section{border-top:none;padding:0;}
.tp a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px;}

/* ---------------------------------------------------------------------
   Intro
   --------------------------------------------------------------------- */
.boot{display:none;}
html.tp-booting{overflow:hidden;}
html.js.tp-booting .boot{display:block;position:fixed;inset:0;z-index:1000;cursor:pointer;color:#9FB4D1;}
.boot-panels{position:absolute;inset:0;display:flex;}
.boot-panels i{flex:1 1 0;margin-right:-1px;background:var(--boot-bg);border-bottom:2px solid #12A6E8;
  transition:transform .95s var(--ease-io);transition-delay:calc(var(--k,0) * 70ms);}
.boot-panels i:nth-child(1){--k:0}.boot-panels i:nth-child(2){--k:1}.boot-panels i:nth-child(3){--k:2}
.boot-panels i:nth-child(4){--k:3}.boot-panels i:nth-child(5){--k:4}
.boot.leaving .boot-panels i{transform:translateY(-102%);}
.boot.leaving{pointer-events:none;}

.boot-term{position:absolute;left:50%;top:50%;width:min(560px,88vw);transform:translate(-50%,-50%);
  font-family:'JetBrains Mono',monospace;font-size:.88rem;line-height:1.75;transition:opacity .35s, transform .5s var(--ease);}
.boot.leaving .boot-term{opacity:0;transform:translate(-50%,-56%);}
.boot-log{margin:0;min-height:16.5em;font:inherit;white-space:pre-wrap;}
.boot-log .p{color:#12A6E8;}
.boot-log .ok{color:#5BD68A;}
.boot-log .dim{color:#5C6F8C;}
.boot-log .who{color:#EAF2FB;}
.boot-log .caret{display:inline-block;width:.55em;height:1.05em;margin-left:2px;background:#12A6E8;vertical-align:-.18em;animation:tp-blink 1s steps(1) infinite;}
.boot-bar{height:3px;margin-top:18px;background:#0E1626;border-radius:3px;overflow:hidden;}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0A64BE,#12A6E8);transition:width .3s linear;}
.boot-hint{margin-top:14px;font-size:.72rem;color:#3B4A63;}
@keyframes tp-blink{50%{opacity:0;}}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.tp-hero{position:relative;overflow:hidden;isolation:isolate;
  min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,9vh,110px) 0 clamp(96px,14vh,150px);
  --mx:70%;--my:30%;}

.tp-grid{position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(520px 420px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.14) 100%);
          mask-image:radial-gradient(520px 420px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.14) 100%);}

.tp-hero-in{width:100%;}
.tp-title{font-size:clamp(2.7rem,7.2vw,6.2rem);line-height:1.02;letter-spacing:-.038em;font-weight:700;max-width:13em;}
.tp-title .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;}
.tp-title .ln > span{display:inline-block;}
.tp-sub{margin-top:30px;max-width:30em;font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);}

.tp-roster{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.tp-roster a{display:flex;align-items:center;gap:10px;padding:5px 18px 5px 5px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:.92rem;font-weight:500;
  transition:border-color .25s, transform .3s var(--ease), box-shadow .3s;}
.tp-roster a:hover,.tp-roster a:focus-visible{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 26px -14px var(--accent);}
.tp-roster img,.tp-roster .ro-initial{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--surface-2);}
.tp-roster .ro-initial{display:flex;align-items:center;justify-content:center;font-weight:700;}

.tp-down{position:absolute;left:50%;bottom:26px;margin-left:-22px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--surface);}
.tp-down:hover{color:var(--text);border-color:var(--blue);}
html.tp-ready .tp-down svg{animation:tp-bob 2.2s ease-in-out 2s infinite;}
@keyframes tp-bob{50%{transform:translateY(4px);}}

/* drifting code, faint, parallaxed by scroll + cursor */
.tp-frags{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.frag{position:absolute;margin:0;padding:14px 18px;font:500 .76rem/1.65 'JetBrains Mono',monospace;color:var(--muted);
  white-space:pre;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  opacity:.72;transform:translate3d(var(--fx,0px),var(--fy,0px),0);will-change:transform;}
.frag b{color:var(--blue);font-weight:500;}
.frag.f1{top:10%;right:3%;}
.frag.f2{top:33%;left:62%;}
.frag.f3{top:55%;right:3%;}
.frag.f4{top:74%;left:58%;}
.frag.f5{top:4%;left:54.5%;}
@media(max-width:1180px){.frag.f2,.frag.f4,.frag.f5{display:none;}}
@media(max-width:820px){.tp-frags{display:none;}}

/* entrance: title lines rise out of a mask, the rest fades up */
html.js .tp-title .ln > span{transform:translateY(108%);}
html.js.tp-ready .tp-title .ln > span{transform:none;transition:transform 1.15s var(--ease);transition-delay:calc(var(--l,0) * 120ms + 260ms);}
html.js .rv{opacity:0;transform:translateY(20px);}
html.js.tp-ready .rv{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--l,0) * 110ms + 300ms);}
html.js .frag{opacity:0;}
html.js.tp-ready .frag{opacity:.72;transition:opacity 1.4s ease 1.1s;}

/* ---------------------------------------------------------------------
   The stack
   --------------------------------------------------------------------- */
.tp-stack{position:relative;padding:36px 0 110px;}
.tp-stack .wrap{padding-bottom:6vh;}

.tp-card{position:relative;margin-bottom:28px;scroll-margin-top:calc(var(--hdr) + 12px);}

.tp-card-in{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  min-height:clamp(430px,calc(100svh - var(--hdr) - 130px),600px);
  background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transform-origin:50% 0;transform:scale(calc(1 - var(--p,0) * .055));
  --mx:50%;--my:50%;}
/* darkens as the next person slides over */
.tp-card-in::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;background:#000;pointer-events:none;opacity:calc(var(--p,0) * .58);}
/* cursor-follow glow in the person's colour */
.tp-card-in::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--accent);opacity:0;transition:opacity .35s;
  -webkit-mask-image:radial-gradient(380px circle at var(--mx) var(--my),#000,transparent 70%);
          mask-image:radial-gradient(380px circle at var(--mx) var(--my),#000,transparent 70%);}
.tp-card-in:hover::before{opacity:.13;}

/* photo: scan-line reveals the colour picture from top to bottom */
.tp-photo{position:relative;min-height:340px;}
.tp-photo-frame{position:absolute;inset:14px;border-radius:14px;overflow:hidden;background:var(--surface-2);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out;}
.ph-layer{position:absolute;inset:0;overflow:hidden;}
.ph-layer img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:50% 22%;
  transform:translate3d(0,var(--py,0px),0);will-change:transform;}
.ph-base img{filter:grayscale(1) brightness(.5) contrast(1.15);}
.ph-empty{display:flex;align-items:center;justify-content:center;font:700 5rem 'Space Grotesk',sans-serif;color:var(--muted);}
.ph-scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);box-shadow:0 0 22px 5px var(--accent);opacity:0;z-index:3;}
.ph-corners i{position:absolute;width:22px;height:22px;border:2px solid var(--accent);z-index:3;opacity:.9;}
.ph-corners i:nth-child(1){top:12px;left:12px;border-right:0;border-bottom:0;}
.ph-corners i:nth-child(2){top:12px;right:12px;border-left:0;border-bottom:0;}
.ph-corners i:nth-child(3){bottom:12px;left:12px;border-right:0;border-top:0;}
.ph-corners i:nth-child(4){bottom:12px;right:12px;border-left:0;border-top:0;}

html.js .tp-card:not(.in) .ph-color{clip-path:inset(0 0 100% 0);}
html.js .tp-card:not(.in) .ph-corners i{opacity:0;transform:scale(1.7);}
html.js .tp-card.in .ph-color{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--ease-io) .15s;}
html.js .tp-card.in .ph-scan{animation:tp-scan 1.6s var(--ease-io) .15s both;}
html.js .tp-card.in .ph-corners i{opacity:.9;transform:none;transition:opacity .6s ease .9s,transform .9s var(--ease) .9s;}
@keyframes tp-scan{0%{top:0;opacity:1;}90%{opacity:1;}100%{top:100%;opacity:0;}}

/* text side */
.tp-body{position:relative;z-index:2;min-width:0;padding:34px 40px 30px 26px;display:flex;flex-direction:column;justify-content:center;}
.tp-name{font-size:clamp(2.4rem,4vw,3.8rem);line-height:1;letter-spacing:-.04em;font-weight:700;overflow:hidden;padding-bottom:.12em;}
.tp-name > span{display:flex;flex-wrap:wrap;}
.tp-name .ch{display:inline-block;}
html.js .tp-card:not(.in) .tp-name .ch{transform:translateY(112%) rotate(9deg);transform-origin:0 100%;}
html.js .tp-card.in .tp-name .ch{transform:none;transition:transform 1s var(--ease);transition-delay:calc(var(--c,0) * 50ms + 380ms);}

.tp-role{display:flex;align-items:center;gap:12px;margin-top:8px;font-weight:600;font-size:1.02rem;}
.tp-role::before{content:"";flex:none;width:28px;height:2px;background:var(--accent);transform-origin:0 50%;}
.tp-bio{margin-top:12px;max-width:54ch;color:var(--muted);font-size:.96rem;line-height:1.68;}

.tp-focus{list-style:none;margin-top:16px;}
.tp-focus li{display:flex;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:.93rem;}
.tp-focus li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-2px);}

.tp-skills{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.tp-skills li{font:500 .74rem 'JetBrains Mono',monospace;padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--muted);
  transition:border-color .2s,color .2s,translate .25s var(--ease);}
.tp-skills li:hover{border-color:var(--accent);color:var(--text);translate:0 -2px;}

.tp-links{display:flex;gap:9px;margin-top:16px;}
.tp-links a{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:border-color .2s,color .2s,translate .25s var(--ease);}
.tp-links a:hover{border-color:var(--accent);color:var(--text);translate:0 -2px;}

html.js .tp-card:not(.in) .b-rv{opacity:0;transform:translateY(16px);}
html.js .tp-card:not(.in) .tp-role::before{transform:scaleX(0);}
html.js .tp-card.in .b-rv{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--k,0) * 90ms + 750ms);}
html.js .tp-card.in .tp-role::before{transform:none;transition:transform .9s var(--ease) .8s;}
/* once the reveal has played (JS adds .settled), drop the staggered delays so hovers respond instantly */
html.js .tp-card.in.settled .b-rv{transition:border-color .2s,color .2s,translate .25s var(--ease);transition-delay:0s;}

/* Stacking: only where a card + its neighbours comfortably fit the screen */
@media (min-width:1180px) and (min-height:640px){
  .tp-card{position:sticky;top:calc(var(--hdr) + 18px + var(--i,0) * 14px);margin-bottom:34px;}
}

/* Narrower screens: same content and transitions, cards simply flow */
@media(max-width:1179px){
  .tp-card-in{min-height:0;}
  .tp-body{padding:30px 30px 28px 22px;}
}
@media(max-width:820px){
  .tp-card-in{grid-template-columns:1fr;transform:none;}
  .tp-card-in::after{display:none;}
  .tp-photo{min-height:0;height:min(440px,112vw);}
  .tp-body{padding:22px 22px 28px;}
  .tp-name{font-size:clamp(2.4rem,11vw,3.2rem);}
}

/* ---------------------------------------------------------------------
   Stack marquee
   --------------------------------------------------------------------- */
.tp-marquee{padding:64px 0;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mq{display:flex;overflow:hidden;user-select:none;}
.mq + .mq{margin-top:10px;}
.mq-track{display:flex;flex:none;width:max-content;animation:tp-mq 46s linear infinite;}
.mq-b .mq-track{animation-direction:reverse;animation-duration:58s;}
.mq ul{list-style:none;display:flex;flex:none;}
.mq li{display:flex;align-items:center;white-space:nowrap;padding:0 .5em;
  font:700 clamp(2rem,5vw,4rem)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.2px var(--muted);transition:color .3s,-webkit-text-stroke-color .3s;}
.mq li::after{content:"";display:block;width:.28em;height:.28em;margin-left:1em;border-radius:50%;background:var(--blue);opacity:.7;}
.mq li:hover{color:var(--text);-webkit-text-stroke-color:var(--text);}
.mq:hover .mq-track{animation-play-state:paused;}
@keyframes tp-mq{to{transform:translateX(-50%);}}

/* ---------------------------------------------------------------------
   Call to action
   --------------------------------------------------------------------- */
.tp-cta{padding:clamp(80px,12vw,130px) 0 clamp(90px,13vw,140px);text-align:center;}
.tp-cta-title{font-size:clamp(2.2rem,5.6vw,4.6rem);line-height:1.04;letter-spacing:-.035em;}
.tp-cta p{max-width:34em;margin:20px auto 32px;color:var(--muted);font-size:1.05rem;}
.tp-cta .btn-row{justify-content:center;}
.tp-magnet{transition:transform .25s ease-out,background .18s;}
html.js .tp-io{opacity:0;transform:translateY(28px);}
html.js .tp-io.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--l,0) * 120ms);}

/* ---------------------------------------------------------------------
   Side rail (desktop): which person you're on
   --------------------------------------------------------------------- */
.tp-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:none;flex-direction:column;gap:16px;
  opacity:0;pointer-events:none;transition:opacity .4s;}
.tp-rail.show{opacity:1;pointer-events:auto;}
@media(min-width:1240px){.tp-rail{display:flex;}}
.tp-rail a{position:relative;display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--muted);
  transition:transform .3s var(--ease),background .3s,border-color .3s;}
.tp-rail a.on{background:var(--accent);border-color:var(--accent);transform:scale(1.4);}
.tp-rail a span{position:absolute;right:24px;top:50%;transform:translate(8px,-50%);opacity:0;pointer-events:none;white-space:nowrap;
  font-size:.78rem;padding:3px 10px;border-radius:6px;background:var(--surface);border:1px solid var(--line);transition:opacity .2s,transform .25s var(--ease);}
.tp-rail a:hover span,.tp-rail a:focus-visible span{opacity:1;transform:translate(0,-50%);}

/* ---------------------------------------------------------------------
   Reduced motion: everything visible, nothing moving
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .tp *,.tp *::before,.tp *::after{animation:none !important;transition:none !important;}
  .tp-card{position:relative !important;top:auto !important;}
  .tp-card-in{transform:none !important;}
  .tp-card-in::after{display:none;}
  .ph-color{clip-path:none !important;}
  .ph-scan{display:none;}
  .boot{display:none !important;}
  .frag{transform:none !important;}
  .mq-track{animation:none !important;}
}