/* "Print my CV": the page fades to cream and a small printer prints the whole sheet, so the idea reads at a glance.
   When it's done, the sheet grows to where cv.html shows it, so the page opens without a jump. */
.cv-print { position: fixed; inset: 0; z-index: 4000; overflow: hidden; background: rgba(245,239,225,0); transition: background .35s; }
.cv-print.show { background: #F5EFE1; }

/* The whole scene at A4 size (794px wide), scaled down by js/cv-transition.js to fit the screen */
.cv-stage { position: absolute; left: 50%; top: 0; width: 794px; transform-origin: top center; }
.cv-stage.grow { transition: transform .6s cubic-bezier(.6,0,.2,1); }

/* The printer: an ink slot across the top, with its status in mono */
.cv-printer { position: relative; margin: 0 -24px; opacity: 0; transition: opacity .3s .15s; }
.cv-print.show .cv-printer { opacity: 1; }
.cv-slot { display: block; height: 12px; border-radius: 99px; background: #1C1A17; box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); }
.cv-status { position: absolute; right: 6px; top: -30px; font: 18px "JetBrains Mono", ui-monospace, monospace; color: #8A8377; }
.cv-print.done .cv-status { color: #1C1A17; }
.cv-print.show .cv-stage.grow .cv-printer { opacity: 0; transition: opacity .25s; }

/* The sheet comes out of the slot top first, in little steps, like a real printer */
.cv-paper { height: 1123px; margin-top: -4px; padding: 68px 68px 60px; background: #FBF8F1; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
  font-family: "Inter Tight", system-ui, sans-serif; color: #1C1A17; clip-path: inset(0 0 100% 0); }
.cv-print.show .cv-paper { animation: cv-feed 2.3s steps(14, end) .2s forwards; }
@keyframes cv-feed { to { clip-path: inset(0 0 -60px 0); } } /* -60px keeps the shadow */

.cv-name { min-height: 1em; font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.035em; }
.cv-name .star { color: #3446C9; }
.cv-role { margin-top: 8px; font: 13px "JetBrains Mono", ui-monospace, monospace; opacity: 0; animation: cv-in .3s 1.3s forwards; }
.cv-part { margin-top: 34px; opacity: 0; animation: cv-in .3s var(--d) forwards; }
.cv-h { padding-bottom: 6px; margin-bottom: 14px; border-bottom: 1px solid #1C1A17; font: 500 12px "JetBrains Mono", ui-monospace, monospace; color: #8A8377; }
.cv-part i { display: block; height: 9px; margin-top: 11px; border-radius: 5px; background: #E3DBCB; }
@keyframes cv-in { to { opacity: 1; } }

/* "Get my CV" next to "Find me on LinkedIn" in Contact */
.contact-mail + .contact-mail { margin-left: 28px; }
