/* HOMEPAGE TEAM: a clean 3D triptych. Loaded after team-poster.css and overrides it.
   - the section is held inside the page width (the old .wrap had no width, so text sat on the edge)
   - photos sit at the top of each card, faces fully visible; the name card sits below the photo
   - the side cards angle towards the middle; cards rise in one by one, tilt to the cursor,
     and a glass shine follows the mouse (assets/v5d/team-home.js) */
.team-stage{padding:clamp(70px,9vh,110px) 0 clamp(60px,8vh,100px)}
.team-stage .wrap{width:min(1240px,calc(100% - 48px));margin:0 auto}
.team-stage .team-stage-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:clamp(32px,4vw,64px);min-height:0;align-items:center}
.team-stage .team-statement{padding:0}

.team-stage .team-poster{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);align-items:end;perspective:1500px;filter:none;padding:30px 0 40px}
.team-stage .team-poster::before{inset:-6% -10%;background:radial-gradient(ellipse 60% 55% at 50% 45%,#1678d355,transparent 70%)}

.team-stage .portrait-panel{--base:0deg;--lift:0px;--rx:0deg;--ry:0deg;
  position:relative;display:flex;flex-direction:column;height:auto;min-width:0;overflow:hidden;border-radius:20px;
  transform:translateY(var(--lift)) rotateY(calc(var(--base) + var(--ry))) rotateX(var(--rx));transform-style:flat;
  background:linear-gradient(180deg,#123a66,#081a31 70%);border:1px solid #7cc4ff66;
  box-shadow:inset 0 1px 0 #c5ebff40,0 30px 60px -20px #000b,0 0 34px #2f8fff22;filter:none;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .5s,opacity .8s}
.team-stage .portrait-stefan{--base:12deg}
.team-stage .portrait-henrieta{--lift:-28px;z-index:2}
.team-stage .portrait-miro{--base:-12deg}
.team-stage .portrait-panel img{position:static;display:block;width:100%;height:auto;aspect-ratio:4/5;max-width:none;left:auto;top:auto;
  object-fit:cover;object-position:50% 0;transform:none;filter:saturate(.92) contrast(1.03);
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.team-stage .portrait-stefan img{object-position:50% 22%}
.team-stage .portrait-panel::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(380px circle at var(--gx,50%) var(--gy,30%),#9fdcff30,transparent 60%)}
.team-stage .portrait-panel:hover::after,.team-stage .portrait-panel:focus-visible::after{opacity:1}
.team-stage .portrait-panel::before{inset:6px;border-radius:15px;z-index:5}

/* the name card sits under the face, overlapping only the faded bottom of the photo */
.team-stage .portrait-caption{position:relative;left:auto;right:auto;bottom:auto;transform:none;margin:-34px 10px 10px;z-index:3;
  display:grid;gap:4px;padding:14px 14px 15px;border-radius:13px}
.team-stage .portrait-caption strong{font-size:clamp(18px,1.6vw,22px)}
.team-stage .portrait-caption .portrait-summary{font-size:12.5px;line-height:1.55;margin-top:6px}
.team-stage .portrait-caption .portrait-more{margin-top:8px}
/* heading: three short lines, then "Together, we create magic." in the serif accent */
.team-stage .team-statement h2{color:#eef6fb}
.team-stage .team-magic{margin:18px 0 30px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(28px,2.8vw,42px);line-height:1.15;color:#57a6ff}
/* the name is a button: click it to reveal the person's description */
.team-stage .portrait-name{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit}
.team-stage .portrait-name strong{font-size:clamp(18px,1.6vw,22px)}
.team-stage .portrait-name i{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid #8fcfff66;transition:transform .35s,background .3s}
.team-stage .portrait-name i::before,.team-stage .portrait-name i::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#9fdcff;border-radius:2px}
.team-stage .portrait-name i::after{transform:rotate(90deg);transition:transform .35s}
.team-stage .portrait-name:hover i,.team-stage .portrait-name:focus-visible i{background:#2f8fff33}
.team-stage .portrait-name[aria-expanded="true"] i::after{transform:rotate(0deg)}
.team-stage .portrait-name:focus-visible{outline:2px solid #8cd5ff;outline-offset:4px;border-radius:6px}
.team-stage .portrait-more-text:not([hidden]){animation:tmReveal .45s cubic-bezier(.2,.8,.2,1)}
@keyframes tmReveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* full description and email under each photo */
.team-stage .portrait-caption>span{font-size:11px;color:#a6d8ff;letter-spacing:.04em}
.team-stage .portrait-bio{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#d1dfef}
.team-stage .portrait-email{display:inline-block;margin-top:8px;padding-top:0;font-size:12px;font-weight:600;color:#8cd5ff;text-decoration:none;overflow-wrap:normal}
.team-stage .portrait-email:hover{color:#d3f0ff;text-decoration:underline}
.team-stage .team-poster{align-items:start}
.team-stage .portrait-panel{cursor:default}

.team-stage .portrait-panel:hover,.team-stage .portrait-panel:focus-visible{
  transform:translateY(calc(var(--lift) - 12px)) rotateY(calc(var(--base) * .3 + var(--ry))) rotateX(var(--rx)) translateZ(40px);
  box-shadow:inset 0 1px 0 #d6f1ff60,0 40px 70px -20px #000c,0 0 50px #3fa6ff55;z-index:3;filter:none}
.team-stage .poster-signature{bottom:0}

/* NEON CARD SPIN-IN (assets/v5d/team-home.js): each card appears as a glowing edge line, then spins
   round to face you; the neon frame keeps a soft pulse. Light particles drift behind. */
.team-stage.tm-ready:not(.tm-in) .portrait-panel{opacity:0}
.tm-burst{position:absolute;inset:-12% -8%;z-index:0;pointer-events:none}
.tm-line{position:absolute;z-index:3;width:4px;margin-left:-2px;border-radius:4px;pointer-events:none;transform:scaleY(0);opacity:0;
  background:linear-gradient(180deg,transparent,#c8f8ff 15%,#5ee9f5 50%,#c8f8ff 85%,transparent);box-shadow:0 0 14px 3px #2fe0f2,0 0 40px 8px #2f8fff88;
  animation:tmLine 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes tmLine{0%{transform:scaleY(0);opacity:0}35%{transform:scaleY(1);opacity:1}55%{opacity:1}100%{transform:scaleY(1);opacity:0}}
.tm-dot{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#e6fbff,#5ee9f5 40%,transparent 70%);box-shadow:0 0 10px #2fe0f2;animation:tmDot var(--t) ease-in-out infinite;animation-delay:var(--dl)}
.tm-in .tm-dot{opacity:.8;transition:opacity 1.5s .8s}
@keyframes tmDot{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-30px)}}
/* the neon frame: a soft pulsing glow on every card */
.team-stage.tm-in .portrait-panel{animation:tmNeon 3.6s ease-in-out 2.4s infinite}
@keyframes tmNeon{0%,100%{box-shadow:inset 0 1px 0 #c5ebff40,0 30px 60px -20px #000b,0 0 22px #2fe0f233,0 0 0 1px #5ee9f555}50%{box-shadow:inset 0 1px 0 #c5ebff60,0 30px 60px -20px #000b,0 0 40px #2fe0f277,0 0 0 1px #8ff2ffaa}}

/* BETTER BACKGROUND: a dark blue scene with big diagonal glass shapes lit along their edges,
   a soft spotlight behind the cards, and drifting light particles */
.team-stage{background:
    radial-gradient(ellipse 42% 60% at 70% 48%,rgba(30,110,220,.28),transparent 70%),
    radial-gradient(ellipse 60% 40% at 70% 100%,rgba(20,90,180,.22),transparent 70%),
    linear-gradient(180deg,#030914,#051226 50%,#030914)}
.team-stage::before,.team-stage::after{content:'';position:absolute;pointer-events:none;z-index:0}
.team-stage::before{left:38%;top:-20%;width:62%;height:140%;
  background:
    linear-gradient(125deg,transparent 0 30%,rgba(60,150,255,.07) 30% 30.4%,rgba(30,90,180,.05) 30.4% 46%,rgba(110,200,255,.22) 46% 46.25%,transparent 46.25%),
    linear-gradient(55deg,transparent 0 52%,rgba(60,150,255,.06) 52% 52.3%,rgba(30,90,180,.05) 52.3% 66%,rgba(110,200,255,.2) 66% 66.25%,transparent 66.25%);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 55% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 60% 55% at 55% 50%,#000 30%,transparent 80%)}
.team-stage::after{left:0;right:0;bottom:0;height:35%;background:linear-gradient(180deg,transparent,rgba(47,143,255,.07));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.team-stage .wrap{position:relative;z-index:1}
.tm-seed{position:absolute;left:50%;top:46%;width:clamp(120px,12vw,170px);aspect-ratio:3/4;transform:translate(-50%,-50%);display:grid;place-items:center;align-content:center;gap:6px;
  border-radius:16px;border:1px solid #9fdcff99;background:linear-gradient(160deg,#1d4f8f,#0a1a33 70%);box-shadow:0 0 40px #2f8fff88,0 0 90px #2f8fff44,inset 0 1px 0 #ffffff40;
  animation:tmFloat 3.2s ease-in-out infinite}
.tm-seed img{width:44%;filter:drop-shadow(0 0 12px #57a6ff)}
.tm-seed b{font-size:15px;letter-spacing:-.02em;color:#eef6fb}
.tm-seed small{font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.3em;text-transform:uppercase;color:#8cc4ff}
@keyframes tmFloat{0%,100%{transform:translate(-50%,-52%) rotate(-3deg)}50%{transform:translate(-50%,-48%) rotate(3deg)}}
.tm-in .tm-seed{animation:tmSeedGo .7s .35s cubic-bezier(.5,0,.75,0) forwards}
@keyframes tmSeedGo{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.25);filter:brightness(2.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.tm-flash{position:absolute;left:50%;top:46%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%) scale(0);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#ffffff 0,#c8f2ff 18%,#57a6ff 40%,rgba(47,143,255,0) 70%);mix-blend-mode:screen}
.tm-in .tm-flash{animation:tmFlash 1.1s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tmFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}
.tm-mini{position:absolute;left:var(--x);top:var(--y);width:calc(46px * var(--s));aspect-ratio:3/4;border-radius:6px;opacity:.0;
  border:1px solid #8fcfff55;background:linear-gradient(160deg,#2f8fff33,#0a1a3388);box-shadow:0 0 14px #2f8fff33;
  transform:rotate(var(--r));animation:tmDrift var(--t) linear infinite;animation-delay:var(--dl)}
.tm-in .tm-mini{opacity:.55;transition:opacity 1.2s .9s}
@keyframes tmDrift{0%{transform:translate(0,0) rotate(var(--r))}50%{transform:translate(18px,-26px) rotate(calc(var(--r) + 14deg))}100%{transform:translate(0,0) rotate(var(--r))}}
.team-stage .portrait-panel{z-index:1}

@media(max-width:1000px){.team-stage .team-stage-grid{grid-template-columns:1fr;gap:36px}.team-stage .team-statement{max-width:640px}}
@media(max-width:700px){
  .team-stage .wrap{width:calc(100% - 32px)}
  .team-stage .team-poster{grid-template-columns:1fr;width:min(100%,420px);margin:0 auto;gap:22px;perspective:none;padding-bottom:50px}
  .team-stage .portrait-panel,.team-stage .portrait-henrieta{--base:0deg;--lift:0px}
}
@media(prefers-reduced-motion:reduce){.team-stage .portrait-panel{transition:none}.team-stage.tm-ready .portrait-panel{opacity:1;transform:translateY(var(--lift)) rotateY(var(--base))}}

/* One complete team composition below the fixed navigation. */
@media(min-width:1001px){
  #team.team-stage{box-sizing:border-box;min-height:calc(100svh - 90px);padding:34px 0 28px;display:flex;align-items:center;scroll-margin-top:90px}
  #team.team-stage .wrap{width:min(1400px,calc(100% - 80px))}
  #team .team-stage-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(30px,4vw,64px)}
  #team .team-statement h2{font-size:clamp(32px,5.6svh,54px);line-height:1.07;letter-spacing:-.035em}
  #team .team-magic{font-size:clamp(25px,3.7svh,36px);margin:16px 0 24px}
  #team .team-poster{padding:24px 0 36px;gap:16px}
  #team .portrait-panel img{height:clamp(170px,36svh,330px);aspect-ratio:auto;object-fit:cover}
  #team .portrait-henrieta{--lift:-18px}
  #team .portrait-caption{margin:-26px 9px 9px;padding:12px}
  #team .portrait-name strong{font-size:clamp(16px,1.35vw,21px)}
  #team .portrait-email{overflow-wrap:anywhere}
  #team .portrait-more-text:not([hidden]){max-height:19svh;overflow:auto}
}

/* Give visitors a full extra screen of scroll to meet the team. */
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
  #team.team-stage{display:block;min-height:210svh;padding:0;overflow:clip}
  #team.team-stage .wrap{position:sticky;top:90px;min-height:calc(100svh - 90px);box-sizing:border-box;padding:30px 0;align-content:center}
}