/* Portfolio: natural document flow with one-time 3D entrances. */
.portfolio-experience {
  --paper:#fbf8ef;
  color:#e9ebf3;
  font-family:var(--font-body);
  line-height:normal;
  position:relative;
  overflow:clip;
  background:radial-gradient(ellipse at 50% 55%,#1b26433b,transparent 65%),#070911;
  padding:132px 5% 100px;
}
.portfolio-experience * { box-sizing:border-box; }
.portfolio-experience h1,.portfolio-experience h2,.portfolio-experience h3,.portfolio-experience p { margin:0; }
.portfolio-experience .sr-only { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.portfolio-experience :focus-visible { outline:2px solid #a9b6ff;outline-offset:7px; }
.portfolio-experience .stage { max-width:1320px;margin:auto; }
.portfolio-experience .stage-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:30px; }
.portfolio-experience .eyebrow { font:10px/1.5 var(--font-mono);letter-spacing:.15em; }
.portfolio-experience .stage-heading .eyebrow { color:#969caf;display:flex;gap:16px;align-items:center; }
.portfolio-experience .tiny-cross { font-size:17px;color:#9dacff; }
.portfolio-experience .edition { color:#626a7b; }
.portfolio-experience .stage-heading h1 { font-weight:400;font-size:clamp(38px,4.7vw,75px);line-height:1.08;letter-spacing:-.065em;margin-top:14px; }
.portfolio-experience .stage-heading h1>span { color:#a7b1d0; }
.portfolio-experience .intro { font-size:13px;color:#969eaf;line-height:1.7;padding-bottom:4px; }
.portfolio-experience .deck { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:100px; }
.portfolio-experience .project-entry { min-width:0;perspective:1400px;perspective-origin:50% 30%; }
.portfolio-experience .project-card { position:relative;width:100%;aspect-ratio:1024/1400;margin:0;transform-style:preserve-3d;--client:#d6a038;--block:#193864;--depth:0; }
.portfolio-experience .project-card.mykey { --client:#658b3e;--block:#94b95d; }
.portfolio-experience .project-card.sandk { --client:#d7a338;--block:#e9b94f; }
.portfolio-experience .project-caption { margin-top:32px; }
.portfolio-experience .card-pose {
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  position:relative;
  transition:transform .18s ease-out;
}

.portfolio-experience .card-front {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}

.portfolio-experience .card-front {
  transform:translateZ(2px);
  container-type:inline-size;
}

.portfolio-experience .paper {
  position:absolute;
  inset:0;
  background:var(--paper);
  background-image:radial-gradient(ellipse at 14% 8%,#fffefb,transparent 70%),linear-gradient(115deg,#fffef855,transparent 60%,#d9ceb125);
  box-shadow:0 38px 68px #0009,0 1px 0 #fff8 inset;
  border-radius:2px;
}

.portfolio-experience .card-edge {
  position:absolute;
  inset:0;
  border:1px solid #fff5;
  pointer-events:none;
  transform:translateZ(3px);
}

.portfolio-experience .card-copy {
  position:absolute;
  left:6.5%;
  top:3.8%;
  right:5%;
  color:#080a0b;
  transform:translateZ(calc(12px * var(--depth)));
}

.portfolio-experience .card-category {
  font:500 1.92cqw/1.5 var(--font-mono);
  letter-spacing:.2em;
  color:var(--client);
  display:flex;
  align-items:center;
  gap:2.6cqw;
  white-space:nowrap;
}

.portfolio-experience .card-category i {
  display:block;
  width:10cqw;
  height:.18cqw;
  background:var(--client);
}

.portfolio-experience .card-copy h2 {
  font:bold 11.65cqw/.9 Georgia,'Times New Roman',serif;
  letter-spacing:-.065em;
  margin-top:3.5cqw;
}

/* Keep the C&C subtitle clear of the raised browser and navy accent. */
.portfolio-experience .cc .card-copy h2 {
  font-size:10.4cqw;
}

.portfolio-experience .mykey .card-copy h2 {
  font-size:9.8cqw;
  line-height:.98;
}

.portfolio-experience .sandk .card-copy h2 {
  font-size:8.7cqw;
  line-height:1.06;
  letter-spacing:-.055em;
}

.portfolio-experience .card-tagline {
  font:400 1.85cqw var(--font-mono);
  letter-spacing:.17em;
  margin-top:2.5cqw;
  white-space:nowrap;
  color:#42434b;
}

.portfolio-experience .browser-crop {
  position:absolute;
  left:4.7%;
  top:37.15%;
  width:90.3%;
  height:42.7%;
  overflow:hidden;
  border-radius:1.8cqw;
  transform:translateZ(calc(31px * var(--depth)));
  box-shadow:0 12px 19px #1119;
  border:1px solid #ffffff50;
  background:#121827;
}

.portfolio-experience .browser-crop img {
  position:absolute;
  width:110.82%;
  max-width:none;
  height:auto;
  left:-5.3%;
  top:-87.05%;
  pointer-events:none;
}

.portfolio-experience .color-block {
  position:absolute;
  background:var(--block);
  transform:translateZ(calc(6px * var(--depth)));
}

.portfolio-experience .color-block-top {
  top:34.5%;
  right:2%;
  width:63%;
  height:27%;
}

.portfolio-experience .color-block-bottom {
  top:66%;
  left:2.6%;
  width:48%;
  height:16.3%;
}

.portfolio-experience .phone-crop {
  position:absolute;
  top:61%;
  left:70.3%;
  width:24.8%;
  height:37.1%;
  overflow:hidden;
  border-radius:4.2cqw;
  transform:translateZ(calc(79px * var(--depth))) rotateZ(-2deg);
  box-shadow:2px 11px 18px #0007;
  background:#161818;
  border:1px solid #fff7;
}

.portfolio-experience .phone-crop img {
  position:absolute;
  width:404.72%;
  max-width:none;
  height:auto;
  left:-284.58%;
  top:-164.58%;
  pointer-events:none;
}

.portfolio-experience .mykey .phone-crop {
  height:38.1%;
  top:60.8%;
}

.portfolio-experience .mykey .phone-crop img {
  top:-159.2%;
}

.portfolio-experience .sandk .phone-crop {
  height:36.6%;
}

.portfolio-experience .sandk .phone-crop img {
  top:-167.4%;
}

.portfolio-experience .card-client {
  position:absolute;
  left:6.7%;
  right:25%;
  top:86.1%;
  color:#0c0d10;
  transform:translateZ(calc(15px * var(--depth)));
}

.portfolio-experience .card-client i {
  display:block;
  width:5.5cqw;
  height:.32cqw;
  background:var(--client);
  margin-bottom:1.6cqw;
}

.portfolio-experience .card-client h3 {
  font:bold 7cqw/.93 Georgia,'Times New Roman',serif;
  letter-spacing:-.055em;
  white-space:nowrap;
}

.portfolio-experience .card-client>span {
  font:400 1.75cqw var(--font-mono);
  letter-spacing:.2em;
  display:block;
  margin-top:1.6cqw;
  color:#50525a;
}

.portfolio-experience .sandk .card-client {
  top:88%;
}

.portfolio-experience .sandk .card-client h3 {
  font-size:8.2cqw;
}

.portfolio-experience .project-caption>.eyebrow {
  font-size:8px;
  color:#8290ad;
  letter-spacing:.1em;
  display:block;
  margin-bottom:8px;
}

.portfolio-experience .project-caption>a {
  font-size:19px;
  letter-spacing:-.035em;
  display:flex;
  gap:15px;
  align-items:center;
  width:fit-content;
}

.portfolio-experience .project-caption>a:hover {
  color:white;
}

.portfolio-experience .project-scope {
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#848d9e;
}


/* Preserve the approved artwork's final text placement. */
.portfolio-experience .sandk .card-copy h2 { font-size:7.8cqw;line-height:1.12;letter-spacing:-.06em; }
.portfolio-experience .card-client { top:84.7%; }
.portfolio-experience .sandk .card-client { top:88%; }
.portfolio-more .page-lede { max-width:760px;margin-top:24px; }

/* Only prepare cards after an observer has been successfully installed. */
.portfolio-experience .drop-pending .project-card { opacity:0;transform:translate3d(0,-190px,-280px) rotateX(48deg) rotateZ(-4deg) scale(.9); }
.portfolio-experience .drop-entering .project-card { animation:portfolio-drop 1250ms cubic-bezier(.2,.7,.25,1) var(--drop-delay,0ms) both;will-change:transform,opacity; }
@keyframes portfolio-drop {
  0% { opacity:0;transform:translate3d(0,-190px,-280px) rotateX(48deg) rotateZ(-4deg) scale(.9); }
  28% { opacity:1; }
  70% { transform:translate3d(0,12px,24px) rotateX(-5deg) rotateZ(.8deg) scale(1.015); }
  86% { transform:translate3d(0,-4px,0) rotateX(1.5deg) rotateZ(-.2deg); }
  100% { opacity:1;transform:none; }
}
@media(max-width:900px) {
  .portfolio-experience .stage-heading { display:block; }
  .portfolio-experience .intro { margin-top:18px; }
  .portfolio-experience .deck { gap:28px;margin-top:78px; }
  .portfolio-experience .project-caption>a { font-size:16px; }
}
@media(max-width:760px) {
  .portfolio-experience { padding:112px 8% 64px; }
  .portfolio-experience .stage-heading h1 { font-size:clamp(32px,7vw,50px); }
  .portfolio-experience .stage-heading .eyebrow { font-size:8px;gap:8px; }
  .portfolio-experience .intro { font-size:12px; }
  .portfolio-experience .deck { grid-template-columns:1fr;max-width:410px;margin:64px auto 0;gap:70px; }
  .portfolio-experience .project-caption>a { font-size:20px; }
  .portfolio-experience .project-caption { margin-top:26px; }
  .portfolio-experience .drop-pending .project-card { transform:translate3d(0,-70px,-100px) rotateX(23deg) rotateZ(-2deg); }
  .portfolio-experience .drop-entering .project-card { animation-name:portfolio-drop-mobile;animation-duration:950ms; }
}
@keyframes portfolio-drop-mobile {
  0% { opacity:0;transform:translate3d(0,-70px,-100px) rotateX(23deg) rotateZ(-2deg); }
  35% { opacity:1; }
  75% { transform:translate3d(0,5px,0) rotateX(-2deg); }
  100% { opacity:1;transform:none; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-experience .project-entry .project-card { animation:none;opacity:1;transform:none;will-change:auto; }
}
@media print {
  .portfolio-experience .project-entry .project-card { animation:none;opacity:1;transform:none; }
}