@font-face {
  font-family: "LXGW WenKai GB";
  src: url("./assets/fonts/LXGWWenKaiGB-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LXGW WenKai GB";
  src: url("./assets/fonts/LXGWWenKaiGB-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LXGW WenKai GB";
  src: url("./assets/fonts/LXGWWenKaiGB-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Smiley Sans";
  src: url("./assets/fonts/SmileySans-Oblique.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fff;
  --ink: #292824;
  --hero-max: 1540px;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "LXGW WenKai GB", "Smiley Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
img { -webkit-user-drag: none; user-select: none; }
button { font: inherit; }
/* --- Page --- */
.site { background: #fff; }
.hero {
  --dot-radius: .85px;
  --dot-edge: 1px;
  --dot-ink: rgba(66, 72, 79, .14);
  position: relative;
  height: 100svh;
  height: 100dvh;
  background-color: #fff;
  background-image: radial-gradient(circle, var(--dot-ink) var(--dot-radius), transparent var(--dot-edge));
  background-size: 32px 32px;
  background-position: 16px 16px;
  animation: dot-paper-rise 24s linear infinite;
}
@keyframes dot-paper-rise { to { background-position: 16px -16px; } }
@media (min-width: 641px) {
  .hero { --dot-radius: 1.3px; --dot-edge: 1.55px; --dot-ink: rgba(66, 72, 79, .2); }
}
.hero-stage {
  position: relative;
  width: min(100%, var(--hero-max));
  height: 100%;
  margin: 0 auto;
}

.pencil-lines { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.pencil-curve { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #777063; stroke-width: .85; opacity: .065; will-change: transform; }
.pencil-curve path { vector-effect: non-scaling-stroke; }
.pencil-echo { opacity: .3; stroke-width: .45; }

.logo-wrap,
.avatar-wrap,
.section-link,
.doodle { position: absolute; scale: 1.08; will-change: transform, translate; }
.identity-zone {
  position: absolute;
  left: 4.4%;
  top: 17%;
  width: min(21.4vw, 330px);
  z-index: 4;
}
.logo-wrap { position: relative; width: 100%; }
.logo { display: block; width: 100%; height: auto; }
.avatar-wrap {
  left: 21.6%;
  top: 43%;
  width: min(18vw, 250px);
  z-index: 4;
}
.avatar { display: block; width: 100%; height: auto; opacity: 1; filter: url(#avatar-opaque); }

.section-links { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.section-link {
  display: block;
  pointer-events: auto;
  text-decoration: none;
  transform-origin: 50% 50%;
  transition: filter 180ms ease;
}
.section-link img { display: block; width: 100%; height: auto; }
.section-link:hover,
.section-link:focus-visible { filter: contrast(1.05) brightness(.98); }
.section-link::after {
  content: "";
  position: absolute;
  inset: 12% 10%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(54,49,42,.07), transparent 68%);
  transform: scale(.8);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: -1;
}
.section-link:hover::after,
.section-link:focus-visible::after { opacity: .55; transform: scale(1); }

/* Spring hover is driven by JS; no hard snap transition here. */
.physics-hover {
  transform-origin: 50% 50%;
  will-change: transform, translate;
  backface-visibility: hidden;
}
.logo-wrap.physics-hover, .avatar-wrap.physics-hover { pointer-events: auto; }
.section-link:focus-visible { outline: 1px dashed #8e8980; outline-offset: 8px; border-radius: 4px; }
.section-link.physics-hover { cursor: grab; }
.elastic-drag { touch-action: none; cursor: grab; }
.elastic-drag.is-dragging { cursor: grabbing; z-index: 20; }
.elastic-drag.is-tethered { filter: contrast(1.07) brightness(.985); }

/* Anchor beside the logo; independent spring motion, always a flat PNG. */
.page-curl {
  display: block;
  position: absolute;
  left: 98%; top: -30%;
  width: min(21.78vw, 251.68px);
  z-index: 3;
  rotate: 2.2deg;
  opacity: 1;
  pointer-events: auto;
  transition: filter 180ms ease;
}
.page-curl img { display: block; width: 100%; height: auto; }
.page-curl:hover,
.page-curl:focus-visible { filter: contrast(1.05) brightness(.98); }
.page-curl:focus-visible { outline: 1px dashed #8e8980; outline-offset: 6px; }

.section-link--about {
  width: min(25vw, 385px);
  left: 54.7%;
  top: 13.5%;
  rotate: -.35deg;
}
.section-link--work {
  width: min(27.8vw, 428px);
  left: 49.7%;
  top: 37%;
  rotate: .45deg;
}
.section-link--resume {
  width: min(23vw, 355px);
  left: 61.4%;
  top: 72%;
  rotate: -.25deg;
}

.doodle { z-index: 2; object-fit: contain; opacity: .9; pointer-events: none; }
.doodle--house { width: clamp(72px, 7vw, 108px); right: 6.7%; top: 24svh; }
.doodle--city { width: clamp(55px, 5vw, 78px); right: 13.7%; top: 43svh; }
.doodle--bulb { width: clamp(43px, 4.1vw, 63px); right: 18.7%; top: 57svh; }
.doodle--sparkles { width: clamp(52px, 5vw, 76px); right: 7.6%; top: 74svh; }
.doodle--hello { width: clamp(82px, 7.4vw, 112px); left: 7%; top: 72svh; }
.doodle--quincy { width: clamp(82px, 7.2vw, 112px); left: 10.5%; top: 55svh; }
.doodle--star { width: clamp(42px, 4.2vw, 64px); left: 36%; top: 35svh; }
.doodle--squiggle { width: clamp(106px, 10.3vw, 158px); left: 28%; top: 79svh; }
.doodle--gear { width: clamp(43px, 4.2vw, 64px); left: 43.5%; top: 89svh; }


/* Main titles stay fully opaque; supporting doodles have a quieter hierarchy. */
.logo-wrap, .avatar-wrap, .section-link { opacity: 1; }
.doodle--house, .doodle--hello { opacity: .94; }
.doodle--star, .doodle--sparkles { opacity: .92; }

/* One paper card, with a completely transparent backdrop. */
.paper-card {
  --card-angle: -2.4deg;
  rotate: calc(var(--card-angle) + var(--card-lean, 0deg));
  translate: var(--card-x, 0px) var(--card-y, 0px);
  transform-origin: 50% 55%;
  position: fixed;
  inset: 0;
  width: min(780px, 72vw, calc((100dvh - 84px) * .98));
  height: min(820px, calc(100dvh - 84px));
  max-width: none;
  max-height: calc(100svh - 84px);
  max-height: calc(100dvh - 84px);
  margin: auto max(5vw, calc((100vw - 1540px) / 2 + 65px)) auto auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
  isolation: isolate;
  color: #30363d;
  filter: drop-shadow(0 12px 15px rgba(35, 41, 49, .14)) drop-shadow(0 2px 3px rgba(35, 41, 49, .09));
}
.paper-card::backdrop { background: transparent; backdrop-filter: none; }
.paper-card::before {
  content: "";
  position: absolute;
  inset: -10px -11px -12px;
  z-index: -1;
  background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 32%, rgba(27,40,56,.012)), #f0f2f4;
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px rgba(120,120,120,.045);
  clip-path: polygon(.3% .5%, 7% .2%, 13% .7%, 19% .3%, 24% .8%, 31% .15%, 37% .6%, 44% .25%, 51% .75%, 58% .2%, 65% .65%, 72% .3%, 79% .7%, 86% .25%, 93% .6%, 99.6% .35%, 99.9% 8%, 99.4% 15%, 99.85% 22%, 99.5% 30%, 99.9% 38%, 99.45% 46%, 99.85% 54%, 99.5% 62%, 99.95% 70%, 99.55% 78%, 99.9% 86%, 99.5% 93%, 99.8% 99.4%, 92% 99.7%, 85% 99.3%, 78% 99.85%, 71% 99.4%, 64% 99.9%, 57% 99.45%, 50% 99.85%, 43% 99.35%, 36% 99.8%, 29% 99.4%, 22% 99.75%, 15% 99.3%, 8% 99.7%, 1% 99.35%, .5% 92%, .15% 85%, .6% 78%, .25% 70%, .65% 63%, .2% 55%, .55% 48%, .1% 40%, .6% 33%, .25% 25%, .65% 18%, .2% 11%, .55% 5%);
  filter: url(#torn-edge);
}
.paper-card::after {
  content: "";
  position: absolute;
  inset: -9px -10px -11px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 4%, #fff 4% 19%, transparent 19% 35%, rgba(255,255,255,.8) 35% 57%, transparent 57% 77%, #fff 77% 95%, transparent 95%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 0 6%, #fff 6% 16%, transparent 16% 40%, rgba(255,255,255,.9) 40% 63%, transparent 63% 83%, #fff 83% 97%, transparent 97%) bottom / 100% 1px no-repeat,
    linear-gradient(0deg, transparent 0 5%, #fff 5% 27%, transparent 27% 59%, #fff 59% 78%, transparent 78%) left / 1px 100% no-repeat,
    linear-gradient(0deg, transparent 0 4%, #fff 4% 24%, transparent 24% 56%, #fff 56% 80%, transparent 80%) right / 1px 100% no-repeat;
}
.paper-card[open] { animation: card-unfold 850ms steps(1, end) both; }
/* A twice-folded small sheet: first the vertical fold reverses (width opens),
   then the horizontal fold (height opens), then it flattens and settles. */
@keyframes card-unfold {
  0% { opacity: .9; clip-path: inset(35% 34%); transform: perspective(1200px) translateY(26px) rotateX(58deg) rotateY(-30deg) scale(.52); }
  9% { opacity: 1; clip-path: inset(35% 34%); transform: perspective(1200px) translateY(22px) rotateX(52deg) rotateY(-22deg) scale(.55); }
  18% { clip-path: inset(34% 22%); transform: perspective(1200px) translateY(18px) rotateX(44deg) rotateY(-12deg) scale(.62); }
  27% { clip-path: inset(33% 8%); transform: perspective(1200px) translateY(14px) rotateX(36deg) rotateY(6deg) scale(.7); }
  36% { clip-path: inset(32% -12px); transform: perspective(1200px) translateY(11px) rotateX(28deg) rotateY(-2deg) scale(.78); }
  45% { clip-path: inset(24% -12px); transform: perspective(1200px) translateY(8px) rotateX(18deg) rotateY(1deg) scale(.85); }
  54% { clip-path: inset(14% -12px); transform: perspective(1200px) translateY(5px) rotateX(-11deg) scale(.91); }
  63% { clip-path: inset(6% -12px); transform: perspective(1200px) translateY(3px) rotateX(7deg) scale(.955); }
  72% { clip-path: inset(-14px); transform: perspective(1200px) translateY(1px) rotateX(-4deg) scale(.985); }
  81% { clip-path: inset(-18px); transform: perspective(1200px) rotateX(2deg) scale(1.006); }
  90% { clip-path: inset(-20px); transform: perspective(1200px) rotateX(-.8deg) scale(.997); }
  100% { opacity: 1; clip-path: none; transform: none; }
}
/* Crumple the open card into a ball; JS then hides it and tosses the ball. */
.paper-card.is-crumpling { animation: card-crumple 650ms steps(1, end) both; }
@keyframes card-crumple {
  0% { clip-path: none; transform: none; opacity: 1; }
  12% { clip-path: inset(2% 3%); transform: scale(.96, .94) skewX(2deg) rotate(-1.5deg); }
  25% { clip-path: inset(5% 7%); transform: scale(.86, .78) rotate(2.5deg) skewY(-2.5deg); }
  37% { clip-path: inset(9% 12% round 14px); transform: scale(.72, .6) rotate(-4.5deg) skewX(3deg); }
  50% { clip-path: inset(15% 19% round 26px); transform: scale(.56, .45) rotate(6deg) skewY(2deg); }
  62% { clip-path: inset(23% 27% round 40px); transform: scale(.4, .33) rotate(-8deg); }
  75% { clip-path: inset(30% 35% round 60px); transform: scale(.26) rotate(10deg) skewX(-3deg); }
  87% { clip-path: inset(37% 42% round 80px); transform: scale(.15) rotate(-13deg); }
  100% { clip-path: inset(42% 46% round 90px); transform: scale(.09) rotate(15deg); opacity: .85; }
}
.card-fold {
  position: absolute; inset: -10px -11px -12px; z-index: 3; pointer-events: none; opacity: 0;
  background: #f0f2f4;
}
.card-fold::before, .card-fold::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
}
/* Vertical crease from the first fold; fades as the width opens. */
.card-fold::before {
  background: linear-gradient(90deg, transparent 47%, rgba(74,85,99,.20) 49.6%, rgba(255,255,255,.75) 50.4%, transparent 53%);
}
/* Horizontal crease from the second fold; appears then fades as the height opens. */
.card-fold::after {
  background: linear-gradient(180deg, transparent 47%, rgba(74,85,99,.20) 49.6%, rgba(255,255,255,.75) 50.4%, transparent 53%);
}
.paper-card[open] .card-fold { animation: fold-veil 850ms steps(1, end) both; }
@keyframes fold-veil {
  0%, 54% { opacity: 1; }
  63% { opacity: .85; }
  72% { opacity: .5; }
  81% { opacity: .22; }
  90%, 100% { opacity: 0; }
}
.paper-card[open] .card-fold::before { animation: crease-v 850ms steps(1, end) both; }
@keyframes crease-v {
  0% { opacity: 1; }
  18% { opacity: .75; }
  27% { opacity: .45; }
  36% { opacity: .18; }
  45%, 100% { opacity: 0; }
}
.paper-card[open] .card-fold::after { animation: crease-h 850ms steps(1, end) both; }
@keyframes crease-h {
  0%, 27% { opacity: 0; }
  36% { opacity: .9; }
  45% { opacity: .7; }
  54% { opacity: .4; }
  63% { opacity: .15; }
  72%, 100% { opacity: 0; }
}
.card-sketch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; fill: none; stroke: #8b949e; stroke-width: 1; }
.card-sketch-line { opacity: .09; }
.card-sketch-star { opacity: .11; transform: rotate(-7deg); transform-origin: 670px 470px; }
.card-sketch-hatch { opacity: .12; stroke-width: .7; }
.card-close {
  position: absolute;
  right: 8px; top: 5px;
  width: 36px; height: 36px;
  z-index: 2;
  padding: 0;
  background: transparent; border: 0;
  color: #7d8590; font-size: 27px; font-weight: 300;
  cursor: pointer; transition: transform 180ms ease, color 180ms ease;
}
.card-close:hover { color: var(--ink); transform: rotate(9deg); }
.card-close:focus-visible { outline: 1px dashed #8e8980; outline-offset: 0; border-radius: 50%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.card-page { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: transparent; }

#crayon-trail {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 3; mix-blend-mode: multiply;
}

/* Crumpled paper ball and trash bin used by the card close sequence. */
.paper-ball {
  position: fixed; left: 0; top: 0;
  width: 54px; height: 54px;
  z-index: 39; pointer-events: none;
  border-radius: 47% 53% 55% 45% / 52% 46% 54% 48%;
  background:
    repeating-linear-gradient(28deg, transparent 0 7px, rgba(90,88,80,.16) 7px 8.5px),
    repeating-linear-gradient(-42deg, transparent 0 9px, rgba(90,88,80,.12) 9px 10.5px),
    radial-gradient(circle at 34% 30%, #f7f6f2, #dcd9d2 68%, #c4c1b9);
  box-shadow: inset -6px -8px 12px rgba(80,78,70,.25), 0 10px 14px rgba(35,33,29,.18);
}
.trash-bin {
  position: fixed; right: 34px; bottom: 22px;
  width: 74px; z-index: 40; pointer-events: none;
  opacity: 0; transform: translateY(14px) rotate(-2deg);
  transition: opacity .18s steps(2, end), transform .18s steps(2, end);
}
.trash-bin svg { display: block; width: 100%; height: auto; overflow: visible; }
.trash-bin.is-visible { opacity: 1; transform: translateY(0) rotate(-2deg); }
.trash-bin-lid { transform-origin: 20px 24px; transition: transform .14s steps(2, end); }
.trash-bin.is-shake .trash-bin-lid { transform: rotate(-26deg) translateY(-5px); }
.trash-bin.is-shake svg { animation: bin-wobble 480ms steps(1, end); }
@keyframes bin-wobble {
  0% { transform: rotate(0); }
  25% { transform: rotate(4deg); }
  50% { transform: rotate(-3.5deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
.trash-bin.is-leaving { opacity: 0; transform: translateY(10px) rotate(-2deg); transition: opacity .3s ease, transform .3s ease; }

/* Intro: a full white sheet tears into two halves along a jagged seam and
   flies apart, revealing the desk. Held keyframe pairs keep the same
   stop-motion feel as the card animations. */
.intro {
  position: fixed; inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}
.intro-paper {
  position: absolute;
  left: -4vw;
  width: 108vw;
  height: 58vh;
  will-change: transform;
}
.intro-paper svg { display: block; width: 100%; height: 100%; overflow: visible; }
.intro-paper--top { top: -4vh; }
.intro-paper--bottom { bottom: -4vh; }
.intro-fill { fill: #fff; }
.intro-shadow { fill: none; stroke: rgba(0,0,0,.18); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; opacity: .52; }
.intro-depth { fill: none; stroke: rgba(0,0,0,.10); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; opacity: .34; }
.intro-fiber { fill: none; stroke: rgba(90,90,90,.33); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 4 1 6 3 5 1 8; opacity: .9; }
.intro-fiber-light { fill: none; stroke: rgba(255,255,255,.95); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 7 2 8 1 5; }
.intro.pretear .intro-paper--top { transform: translateY(-2px); }
.intro.pretear .intro-paper--bottom { transform: translateY(2px); }
.intro.play .intro-paper--top { animation: intro-tear-top 1.3s linear forwards; }
.intro.play .intro-paper--bottom { animation: intro-tear-bottom 1.34s linear 30ms forwards; }
@keyframes intro-tear-top {
  0%, 10% { transform: translate3d(0, 0, 0) rotate(0deg); }
  13%, 20% { transform: translate3d(-18px, -10px, 0) rotate(-.8deg); }
  24%, 31% { transform: translate3d(24px, -46px, 0) rotate(1.25deg); }
  35%, 42% { transform: translate3d(-30px, -104px, 0) rotate(-1.55deg); }
  46%, 54% { transform: translate3d(34px, -182px, 0) rotate(1.7deg); }
  58%, 65% { transform: translate3d(-39px, -292px, 0) rotate(-1.8deg); }
  69%, 76% { transform: translate3d(46px, -438px, 0) rotate(2deg); }
  81%, 87% { transform: translate3d(-52px, -658px, 0) rotate(-2.15deg); }
  100% { transform: translate3d(62px, -122vh, 0) rotate(2.45deg); }
}
@keyframes intro-tear-bottom {
  0%, 10% { transform: translate3d(0, 0, 0) rotate(0deg); }
  13%, 21% { transform: translate3d(18px, 10px, 0) rotate(.8deg); }
  25%, 32% { transform: translate3d(-24px, 44px, 0) rotate(-1.2deg); }
  36%, 43% { transform: translate3d(30px, 99px, 0) rotate(1.5deg); }
  47%, 55% { transform: translate3d(-34px, 176px, 0) rotate(-1.65deg); }
  59%, 66% { transform: translate3d(39px, 282px, 0) rotate(1.8deg); }
  70%, 77% { transform: translate3d(-46px, 424px, 0) rotate(-1.95deg); }
  82%, 88% { transform: translate3d(52px, 642px, 0) rotate(2.1deg); }
  100% { transform: translate3d(-62px, 122vh, 0) rotate(-2.4deg); }
}

@media (max-width: 980px) {
  .identity-zone { left: 4%; top: 11%; width: 30%; }
  .avatar-wrap { left: 18%; top: 39%; width: 22%; }
  .section-link--about { width: 38%; left: 52%; top: 15%; }
  .section-link--work { width: 43%; left: 43%; top: 39%; }
  .section-link--resume { width: 38%; left: 52%; top: 70%; }
  .doodle--house { right: 4%; top: 26%; }
  .doodle--city { right: 5%; top: 46%; }
  .doodle--bulb { right: 15%; top: 56%; }
  .doodle--sparkles { right: 4%; top: 84%; }
  .doodle--hello { left: 8%; top: 69%; }
  .doodle--quincy { left: 6.5%; top: 48%; }
  .doodle--star { left: 41%; top: 29%; }
  .doodle--squiggle { left: 29%; top: 77%; }
  .doodle--gear { left: 44%; top: 90%; }
  .paper-card { width: min(780px, 80vw, calc((100dvh - 84px) * .98)); margin-right: 5vw; }
  .page-curl { width: min(29.645vw, 223.85px); left: 98%; top: -28%; }
}

@media (max-width: 640px) {
  .identity-zone { left: 5%; top: 6%; width: min(48vw, 30svh); }
  .avatar-wrap { left: 52%; top: 16%; width: min(33vw, 20svh, 136px); }
  .section-link--about { width: min(63vw, 40svh); left: 27%; top: 39%; }
  .section-link--work { width: min(69vw, 44svh); left: 10%; top: 56%; }
  .section-link--resume { width: min(62vw, 40svh); left: 27%; top: 77%; }
  .doodle--house { width: min(60px, 9svh); right: 7%; top: 29%; }
  .doodle--city { width: min(43px, 7svh); right: 7%; top: 47%; }
  .doodle--bulb { display: none; }
  .doodle--sparkles { width: min(43px, 7svh); right: 5%; top: 64%; }
  .doodle--hello { width: min(65px, 10svh); left: 7%; top: 48%; }
  .doodle--quincy { width: min(64px, 10svh); left: 7%; top: 30%; }
  .doodle--star { width: min(34px, 5svh); left: 83%; top: 92%; }
  .doodle--squiggle { width: min(86px, 13svh); left: 7%; top: 88%; }
  .doodle--gear { width: min(34px, 5svh); left: 67%; top: 92%; }
  .paper-card { width: calc(100vw - 48px); height: calc(100dvh - 68px); margin: auto; max-height: calc(100dvh - 68px); rotate: calc(var(--card-angle) * .5 + var(--card-lean, 0deg)); }
  .card-close { top: 0; right: 0; }
  .page-curl { width: min(44.77vw, 181.5px, 26.4svh); left: 90%; top: -12%; }
  .trash-bin { right: 18px; bottom: 14px; width: 58px; }
}

@media (max-height: 480px) and (min-width: 641px) {
  .identity-zone { top: 10%; width: min(21vw, 35svh); }
  .avatar-wrap { left: 23%; top: 36%; width: min(16vw, 36svh); }
  .section-link--about { top: 12%; width: min(25vw, 48svh); }
  .section-link--work { top: 38%; width: min(28vw, 48svh); }
  .section-link--resume { top: 72%; width: min(23vw, 48svh); }
  .doodle--house { top: 29%; width: 52px; }
  .doodle--city { top: 49%; width: 40px; }
  .doodle--bulb { top: 58%; width: 34px; }
  .doodle--hello { top: 72%; width: 48px; }
  .doodle--quincy { left: 8%; top: 44%; width: 60px; }
  .doodle--star { left: 37%; top: 29%; width: 34px; }
  .doodle--squiggle { left: 29%; top: 82%; width: 86px; }
  .doodle--gear { top: 87%; width: 32px; }
  .doodle--sparkles { top: 79%; width: 40px; }
  .page-curl { width: min(20.933vw, 37.51svh); top: -24%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
  .physics-hover { transform: none !important; }
  .section-link, .card-close { transition: none; }
  .paper-card[open] { animation: none; }
  .paper-card[open] .card-fold,
  .paper-card[open] .card-fold::before,
  .paper-card[open] .card-fold::after { animation: none; }
  .paper-card.is-crumpling { animation: none; }
  .paper-card { rotate: 0deg; translate: none; }
  .doodle, .pencil-curve { transform: none !important; }
  .page-curl { transition: none; }
  .intro { display: none; }
}