/* Scrapbook layer for the homepage: a trail of credential stickers between the
   hero and the parallax scenes, plus taped Latest projects prints. Active when
   evo.js sets html[data-evo].

   One system: real objects (books, prints, receipt, die-cut photos) carry the
   variety; every claim sits on the same label sticker — cream die-cut edge,
   ink face, cream type, hand font for the word that matters. */

:root {
  --evo-spring: cubic-bezier(.34, 1.56, .64, 1);
  --evo-out: cubic-bezier(.22, .8, .22, 1);
  --evo-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --evo-stock: #fbf9f4;
  --evo-ink: #1a1917;
  --evo-sh-near: rgba(28, 22, 14, .26);
  --evo-sh-far: rgba(28, 22, 14, .15);
  --evo-floor: rgba(25, 25, 25, .2);
}
:root[data-theme="dark"] {
  --evo-sh-near: rgba(0, 0, 0, .5);
  --evo-sh-far: rgba(0, 0, 0, .38);
  --evo-floor: rgba(0, 0, 0, .5);
}

@property --lift { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ---------- zone ---------- */
.evo-zone {
  grid-column: 1 / -1;
  position: relative;
  width: min(100%, 1180px);
  justify-self: center;
  z-index: 5; /* notes stack above the section that follows */
}

/* ---------- a piece: one credential, built from depth layers ---------- */
.evo-piece {
  --px: 0; --py: 0; --shadow-x: 0px; --shadow-y: 0px;
  position: absolute; left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  zoom: var(--s, 1);
  /* entrance: the whole piece fades and settles as one object, no overshoot */
  opacity: 0; translate: 0 18px;
  transition:
    --lift .6s var(--evo-spring),
    opacity .7s var(--evo-out) var(--d, 0ms),
    translate 1.1s var(--evo-out) var(--d, 0ms);
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* lift on hover only where hover is real; on touch the tap itself lifts it */
@media (hover: hover) { .evo-piece:hover { --lift: 1; } }
.evo-piece.is-in { opacity: 1; translate: none; }
.evo-piece:focus-visible, .evo-piece.is-open { --lift: 1; z-index: 2; }
.evo-piece:focus-visible .evo-label { outline: 2px solid var(--text, #1a1917); outline-offset: 7px; }

.evo-l {
  /* --k is the layer's height above the page: it sets parallax travel, how far
     it lifts on hover, and how far its shadow falls. */
  --hh: calc(var(--k) * (.42 + var(--lift) * .75));
  position: absolute;
  transform:
    translate3d(calc(var(--px) * var(--k) * 1px), calc(var(--py) * var(--k) * 1px - var(--lift) * var(--k) * .5px), 0)
    rotate(var(--r, 0deg))
    scale(calc(1 + var(--lift) * var(--k) * .0011));
  filter:
    drop-shadow(calc(var(--px) * var(--hh) * -.3px) calc(var(--hh) * .22px + 1px) calc(var(--hh) * .18px + .6px) var(--evo-sh-near))
    drop-shadow(calc(var(--px) * var(--hh) * -.9px) calc(var(--hh) * .85px + 2px) calc(var(--hh) * 1px + 3px) var(--evo-sh-far));
}
.evo-l > img { display: block; width: 100%; height: auto; }

/* soft floor shadow, travels away from the cursor like the scenes below */
.evo-floor {
  position: absolute; left: 12%; right: 12%; bottom: 2%; height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--evo-floor), transparent 70%);
  filter: blur(8px);
  transform: translate3d(var(--shadow-x), var(--shadow-y), 0) scale(calc(1 + var(--lift) * .08));
  opacity: calc(.75 - var(--lift) * .3);
  pointer-events: none;
}

/* ---------- the label sticker ---------- */
.evo-label {
  display: inline-flex; flex-direction: column; gap: 6px;
  padding: 9px 14px 11px 12px; border-radius: 10px;
  background: var(--evo-ink); color: var(--evo-stock);
  box-shadow: 0 0 0 4px var(--evo-stock);
  white-space: nowrap;
}
.evo-label .k {
  display: flex; align-items: center; gap: 7px;
  font: 700 9px/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase;
  color: rgba(251, 249, 244, .68);
}
.evo-label .h { font: 400 24px/.95 var(--hand); letter-spacing: .005em; }
.evo-label--num { flex-direction: row; align-items: center; gap: 11px; padding: 8px 15px 8px 12px; }
.evo-label--num .n { font: 400 50px/.78 var(--hand); color: var(--evo-stock); padding-top: 4px; }
.evo-label--num .k { font-size: 10px; line-height: 1.35; color: var(--evo-stock); }

/* ---------- objects ---------- */
.evo-book { position: relative; aspect-ratio: .625 / 1; border-radius: 2px 5px 5px 2px; background: #171718; }
.evo-book::before {
  content: ''; position: absolute; inset: 3px -4px -4px 2px; z-index: -1; border-radius: 1px;
  background: linear-gradient(90deg, #a89a84 0 5%, #efe8d7 7% 74%, #c5b89f 76% 100%);
}
.evo-book img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 2px 5px 5px 2px; }
.evo-book::after { /* spine crease */
  content: ''; position: absolute; left: 6%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), rgba(255, 255, 255, .18));
}

.evo-print { background: var(--evo-stock); padding: 6px 6px 7px; border-radius: 1px; }
.evo-print img { display: block; width: 100%; height: auto; }

.evo-receipt {
  height: 100%; box-sizing: border-box;
  background: url("img/paper-receipt.webp") center / 100% 100% no-repeat;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 9px; padding: 40px 30px 0 28px;
}
/* wordless print lines: the label carries the claim, the paper is just the object */
.evo-receipt i { display: block; height: 5px; border-radius: 3px; background: rgba(60, 58, 52, .26); }
.evo-receipt i:nth-child(3n + 1) { justify-self: end; }
.evo-receipt hr { border: 0; border-top: 1.5px dashed #a9a598; margin: 6px 0 4px; }

.evo-card {
  height: 100%; box-sizing: border-box; display: grid; place-items: center; border-radius: 3px;
  background: linear-gradient(160deg, #fdfcf8, var(--evo-stock) 60%, #f1eee6);
  box-shadow: inset 0 0 0 1px rgba(26, 25, 23, .06);
}
.evo-card img { display: block; width: 64%; height: auto; }

.evo-tape {
  display: block; width: 104px; height: 30px;
  background: url("img/tape-cream.webp") center / 100% 100% no-repeat;
  opacity: .94;
}

/* ---------- trail: one at a time, zigzagging down ---------- */
.evo-trail { height: 860px; margin-top: 10px; }

/* ---------- the note: tap a piece, a taped card is set down beside it ---------- */
.evo-note {
  position: absolute; z-index: 20; box-sizing: border-box; width: 320px;
  padding: 24px 22px 16px; border-radius: 2px;
  background: var(--evo-stock); color: var(--evo-ink);
  box-shadow: 0 1px 2px var(--evo-sh-near), 0 18px 36px -12px var(--evo-sh-far), 0 34px 70px -24px var(--evo-sh-far);
  outline: none; cursor: auto; text-align: left;
  scroll-margin: 90px 0 96px; /* clear the sticky header and bottom bar when brought into view */
  rotate: -1deg;
  opacity: 0; translate: 0 -12px; scale: 1.05;
  transition: opacity .25s var(--evo-out), translate .55s var(--evo-spring), scale .55s var(--evo-spring);
}
.evo-note.is-shown { opacity: 1; translate: 0 0; scale: 1; }
.evo-note.is-leaving { opacity: 0; translate: 0 6px; scale: .98; transition-duration: .2s; }
.evo-note-tape { position: absolute; left: 50%; top: -13px; width: 96px; height: 26px; margin-left: -48px; rotate: -3deg; }
.evo-note-close {
  position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent;
  font: 300 26px/1 var(--sans); color: rgba(26, 25, 23, .45); cursor: pointer;
}
.evo-note-close:hover { color: var(--evo-ink); background: rgba(26, 25, 23, .06); }
.evo-note-close:focus-visible { outline: 2px solid var(--evo-ink); outline-offset: -6px; }
.evo-note-k {
  display: block; padding-right: 32px;
  font: 700 9.5px/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: rgba(26, 25, 23, .52);
}
.evo-note-title { margin: 7px 10px 10px 0; font: 400 27px/1 var(--hand); letter-spacing: .005em; color: var(--evo-ink); }
.evo-note-body { margin: 0 0 13px; font: 400 14.5px/1.5 var(--sans); color: rgba(26, 25, 23, .8); }
.evo-note-links { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 6px; border-top: 1.5px dashed rgba(26, 25, 23, .2); }
.evo-note-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  font: 650 13.5px/1.2 var(--sans); color: var(--evo-ink);
  text-decoration: underline; text-decoration-color: rgba(26, 25, 23, .28); text-underline-offset: 3px;
}
.evo-note-link span { display: inline-block; transition: translate .35s var(--evo-spring); }
.evo-note-link:hover { text-decoration-color: currentColor; }
.evo-note-link:hover span { translate: 3px 0; }

/* phones: the same card, as a sheet from the bottom edge */
.evo-note--sheet {
  position: fixed; z-index: 10001; left: 0; right: 0; top: auto;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100% - 20px)); margin-inline: auto;
  padding: 26px 22px 14px; border-radius: 6px;
  rotate: 0deg; opacity: 1; scale: 1; translate: 0 115%;
  transition: translate .42s var(--evo-out);
}
.evo-note--sheet.is-shown { translate: 0 0; }
.evo-note--sheet.is-leaving { opacity: 1; translate: 0 115%; transition-duration: .26s; }
.evo-note--sheet .evo-note-body { font-size: 15px; }
.evo-note--sheet .evo-note-link { min-height: 44px; font-size: 14.5px; }
.evo-note-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20, 18, 14, .32); opacity: 0; transition: opacity .3s;
  -webkit-tap-highlight-color: transparent;
}
.evo-note-backdrop.is-shown { opacity: 1; }

/* ---------- the new portrait: a cutout that dissolves into the page ---------- */
:root[data-evo] .landing-portrait img {
  height: auto;
  /* the photo is cropped at its sides and bottom; soften every cut edge */
  --fade-y: linear-gradient(to bottom, #000 66%, transparent 96%);
  --fade-x: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: var(--fade-y), var(--fade-x);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade-y), var(--fade-x);
  mask-composite: intersect;
}

/* ---------- latest projects: taped prints instead of cards ---------- */
:root[data-evo] .landing-latest-grid { gap: clamp(26px, 2.6vw, 34px) clamp(16px, 2vw, 26px); padding-top: 12px; }
:root[data-evo] .landing-latest-card {
  --r: 0deg; --tr: -3deg; --tx: 0px; --d: 0ms;
  position: relative; overflow: visible;
  padding: 7px 7px 0; border: 0; border-radius: 1px;
  background: var(--evo-stock); color: var(--evo-ink);
  box-shadow: 0 1px 1.5px var(--evo-sh-near), 0 7px 14px -6px var(--evo-sh-far);
  transform-origin: 50% 0; rotate: var(--r);
  transition:
    opacity .7s var(--evo-out) var(--d), translate 1.1s var(--evo-out) var(--d),
    transform .55s var(--evo-spring), rotate .55s var(--evo-spring), box-shadow .4s var(--evo-out);
}
:root[data-evo] .landing-latest-card::before { /* the tape */
  content: ''; position: absolute; z-index: 2; top: -11px; left: calc(50% - 34px + var(--tx));
  width: 68px; height: 22px; rotate: var(--tr);
  background: url("img/tape-cream.webp") center / 100% 100% no-repeat; opacity: .93;
  pointer-events: none;
}
:root[data-evo] .landing-latest-thumb { border-radius: 0; background: #e8e5de; }
:root[data-evo] .landing-latest-card h3 {
  padding: 7px 2px 8px; font: 400 18px/1.05 var(--hand); letter-spacing: .005em; color: var(--evo-ink);
  white-space: normal; text-wrap: balance;
}
/* hover: the print hinges off its tape */
:root[data-evo] .landing-latest-card:hover,
:root[data-evo] .landing-latest-card:focus-visible {
  transform: perspective(900px) rotateX(9deg);
  rotate: calc(var(--r) * .35);
  box-shadow: 0 2px 3px var(--evo-sh-near), 0 22px 30px -12px var(--evo-sh-far);
}
:root[data-evo] .landing-latest-card:hover .landing-latest-thumb img,
:root[data-evo] .landing-latest-card:focus-visible .landing-latest-thumb img { transform: none; }
/* entrance: same calm rise as the stickers */
:root[data-evo] .landing-latest:not(.is-in) .landing-latest-card { opacity: 0; translate: 0 18px; }
:root[data-evo] .landing-latest-card:nth-child(1)  { --r: -1.4deg; --tr: -4deg; --tx: -6px;  --d: 200ms; }
:root[data-evo] .landing-latest-card:nth-child(2)  { --r: 1.1deg;  --tr: 3deg;  --tx: 8px;   --d: 260ms; }
:root[data-evo] .landing-latest-card:nth-child(3)  { --r: -.6deg;  --tr: -2deg; --tx: 0px;   --d: 320ms; }
:root[data-evo] .landing-latest-card:nth-child(4)  { --r: 1.6deg;  --tr: 5deg;  --tx: -10px; --d: 380ms; }
:root[data-evo] .landing-latest-card:nth-child(5)  { --r: -1.1deg; --tr: -3deg; --tx: 6px;   --d: 440ms; }
:root[data-evo] .landing-latest-card:nth-child(6)  { --r: .9deg;   --tr: 2deg;  --tx: -4px;  --d: 500ms; }
:root[data-evo] .landing-latest-card:nth-child(7)  { --r: -1.7deg; --tr: -5deg; --tx: 10px;  --d: 560ms; }
:root[data-evo] .landing-latest-card:nth-child(8)  { --r: .5deg;   --tr: 4deg;  --tx: -8px;  --d: 620ms; }
:root[data-evo] .landing-latest-card:nth-child(9)  { --r: -.9deg;  --tr: -1deg; --tx: 4px;   --d: 680ms; }
:root[data-evo] .landing-latest-card:nth-child(10) { --r: 1.3deg;  --tr: 3deg;  --tx: -2px;  --d: 740ms; }
:root[data-theme="dark"][data-evo] .landing-latest-card { box-shadow: 0 1px 1.5px var(--evo-sh-near), 0 8px 16px -6px var(--evo-sh-far); }
:root[data-theme="dark"][data-evo] .landing-latest-card:hover { box-shadow: 0 2px 3px var(--evo-sh-near), 0 24px 34px -12px var(--evo-sh-far); }


/* ---------- narrow screens: stack the pieces ---------- */
@media (max-width: 900px) {
  .evo-trail { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; padding: 10px 0 20px; }
  .evo-piece { position: relative; left: auto; top: auto; --s: .72; }
}

@media (prefers-reduced-motion: reduce) {
  .evo-piece { translate: none; transition: opacity .4s var(--d, 0ms); }
  .evo-l { transform: rotate(var(--r, 0deg)); }
  .evo-note, .evo-note--sheet, :root[data-evo] .landing-latest-card { transition: opacity .2s; }
  .evo-note { translate: 0 0; scale: 1; }
  .evo-note--sheet:not(.is-shown) { opacity: 0; }
  :root[data-evo] .landing-latest:not(.is-in) .landing-latest-card { translate: none; }
}