:root {
  color-scheme: light;
  --cream: #f6f2e9;
  --ink: #1d2223;
  --red: #f01512;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--cream);
  color: var(--ink);
}
* { box-sizing: border-box; }
/* Clip decorative off-screen artwork at the viewport without a nested scroll container. */
html { overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  background-image: radial-gradient(circle, #d6d0c5 1px, transparent 1.2px);
  background-size: 30px 30px;
}
.composition {
  position: relative;
  width: min(100%, 160svh);
  aspect-ratio: 1.6;
  container-type: inline-size;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
}
.title {
  position: absolute;
  z-index: 2;
  inset: 5.1% 4.4% auto;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.65cqw;
  white-space: nowrap;
  font-family: "Arial Black", "Arial", sans-serif;
  font-size: 9.5cqw;
  font-weight: 1000;
  letter-spacing: -.55cqw;
  line-height: 1;
  transform: scaleX(.9);
}
.title-the { color: var(--red); font-size: .68em; letter-spacing: -.2cqw; }
.stage {
  position: absolute;
  inset: 21% 3.5% 20%;
  border: .65cqw solid #fffdf6;
  border-radius: 4cqw;
  background: radial-gradient(ellipse at 48% 45%, #ffd84b 0%, #ffbf08 55%, #ff9d00 100%);
}
.snack-field { position: absolute; inset: 0; pointer-events: none; }
.piece {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  z-index: var(--depth);
  opacity: var(--opacity);
  filter: blur(var(--blur));
  animation: drift var(--speed) ease-in-out var(--delay) infinite alternate;
  pointer-events: none;
}
.piece img {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(var(--rotation)) scaleX(var(--flip));
}
.hero-frame {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.hero-frame.impact-active { animation: pour-impact var(--impact-duration) linear var(--impact-delay) 1; }
.hero {
  position: absolute;
  z-index: 5;
  height: 90%;
  aspect-ratio: 2 / 3;
  left: 50%;
  translate: -50% 0;
  top: 14%;
  transform-origin: 50% 95%;
  animation: sway 6s ease-in-out infinite alternate;
}
.hero-back, .hero-front { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Calibrated against THIS 1024 × 1536 hero, not the game's standalone pack.
   The shared curve follows the bottom of the silver front lip. The two copies
   are complementary clips of the same untouched PNG, so they stay aligned. */
.hero-back {
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 10%, 84% 10%, 78% 11.8%, 70% 13.2%, 62% 14.4%, 53% 14.9%, 45% 14.5%, 36% 13.8%, 28% 12.7%, 22% 11.5%, 0 11.5%);
}
.hero-front {
  z-index: 2;
  clip-path: polygon(0 11.5%, 22% 11.5%, 28% 12.7%, 36% 13.8%, 45% 14.5%, 53% 14.9%, 62% 14.4%, 70% 13.2%, 78% 11.8%, 84% 10%, 100% 10%, 100% 100%, 0 100%);
}
.catch-field {
  position: absolute; inset: 0; z-index: 1;
  /* Catch at the silver lip, so no falling piece can escape beneath the pack. */
  clip-path: polygon(0 -200vh, 100% -200vh, 100% 10%, 84% 10%, 78% 11.8%, 70% 13.2%, 62% 14.4%, 53% 14.9%, 45% 14.5%, 36% 13.8%, 28% 12.7%, 22% 11.5%, 0 11.5%);
}
.scatter-field { position: absolute; inset: 0; z-index: 3; }
.pour-dust {
  position: absolute;
  left: var(--dust-x);
  width: var(--dust-size);
  height: auto;
  visibility: hidden;
  pointer-events: none;
}
.inlet-dust {
  top: 0;
  animation: dust-into-sachet var(--dust-flight) cubic-bezier(.35, 0, .75, .55) var(--dust-delay) 1;
}
.scatter-dust {
  top: var(--scatter-y);
  animation: dust-scatter var(--dust-flight) linear var(--dust-delay) 1;
}
@keyframes dust-into-sachet {
  0% { visibility: visible; transform: translate(var(--dust-drift), var(--pour-start)) rotate(var(--dust-angle)); }
  99.9% { visibility: visible; transform: translate(0, var(--dust-floor)) rotate(var(--dust-spin)); }
  100% { visibility: hidden; transform: translate(0, var(--dust-floor)) rotate(var(--dust-spin)); }
}
/* Immediate downward velocity plus gravity: y/H = .2t + .8t².
   Short segments prevent the former near-horizontal first quarter from
   making crumbs look as if they were resting on a shelf across the opening. */
@keyframes dust-scatter {
  0% { visibility: visible; transform: translate(0, 0) rotate(var(--dust-angle)); }
  12.5% { transform: translate(calc(var(--scatter-x) * .125), calc(var(--scatter-fall) * .0375)) rotate(calc(var(--dust-spin) * .125)); }
  25% { transform: translate(calc(var(--scatter-x) * .25), calc(var(--scatter-fall) * .1)) rotate(calc(var(--dust-spin) * .25)); }
  37.5% { transform: translate(calc(var(--scatter-x) * .375), calc(var(--scatter-fall) * .1875)) rotate(calc(var(--dust-spin) * .375)); }
  50% { transform: translate(calc(var(--scatter-x) * .5), calc(var(--scatter-fall) * .3)) rotate(calc(var(--dust-spin) * .5)); }
  62.5% { transform: translate(calc(var(--scatter-x) * .625), calc(var(--scatter-fall) * .4375)) rotate(calc(var(--dust-spin) * .625)); }
  75% { transform: translate(calc(var(--scatter-x) * .75), calc(var(--scatter-fall) * .6)) rotate(calc(var(--dust-spin) * .75)); }
  87.5% { transform: translate(calc(var(--scatter-x) * .875), calc(var(--scatter-fall) * .7875)) rotate(calc(var(--dust-spin) * .875)); }
  99.9% { visibility: visible; transform: translate(var(--scatter-x), var(--scatter-fall)) rotate(var(--dust-spin)); }
  100% { visibility: hidden; transform: translate(var(--scatter-x), var(--scatter-fall)) rotate(var(--dust-spin)); }
}
.caught-piece {
  position: absolute;
  left: var(--landing-x);
  top: 0;
  width: var(--catch-size);
  height: auto;
  opacity: 1;
  visibility: hidden;
  rotate: var(--catch-angle);
  scale: var(--catch-flip) 1;
  animation:
    fall-into-sachet var(--flight-time) cubic-bezier(.35, 0, .75, .55) var(--catch-delay) 1,
    catch-tumble var(--flight-time) linear var(--catch-delay) 1;
}
.crumb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: auto;
  z-index: var(--depth);
  opacity: var(--opacity);
  filter: blur(var(--blur));
  animation: crumb-travel var(--speed) linear var(--delay) infinite;
}
@keyframes fall-into-sachet {
  /* Individual translate keeps the fall outside the independent rotation/flip,
     preserving its path while avoiding a new layout at every animation frame. */
  0% { translate: 0 var(--pour-start, -100svh); visibility: visible; transform: translateX(var(--catch-drift)); }
  /* Hide only once fully below the front lip. */
  99.9% { translate: 0 var(--dust-floor); visibility: visible; transform: translateX(0); }
  100% { translate: 0 var(--dust-floor); visibility: hidden; transform: translateX(0); }
}
/* Independent angular motion: tumbling does not speed up with gravity. */
@keyframes catch-tumble {
  0% { rotate: var(--catch-angle); }
  100% { rotate: var(--catch-end-angle); }
}
/* Arrival-timed tremor, overlaid on the unchanged slow sway. */
@keyframes pour-impact {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  8%, 30%, 52%, 74% { transform: translate(0.0275cqw, 0.06cqw) rotate(0.0175deg); }
  14%, 36%, 58%, 80% { transform: translate(-0.0325cqw, 0.0175cqw) rotate(-0.02deg); }
  20%, 42%, 64%, 86% { transform: translate(0.0175cqw, 0.0375cqw) rotate(0.01deg); }
  25%, 47%, 69%, 92% { transform: translate(-0.0125cqw, 0.0075cqw) rotate(-0.0075deg); }
}
@keyframes crumb-travel {
  0% { opacity: 0; transform: translate(2cqw, -1.5cqw) rotate(0deg); }
  18%, 78% { opacity: var(--opacity); }
  100% { opacity: 0; transform: translate(-3cqw, 2.5cqw) rotate(var(--turn)); }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(var(--travel-x), var(--travel-y)) rotate(var(--turn)); }
}
@keyframes sway { from { transform: rotate(-.6deg) translateY(0); } to { transform: rotate(.6deg) translateY(-.45cqw); } }
.paused .piece, .paused .hero, .paused .hero-frame, .paused .caught-piece, .paused .crumb, .paused .pour-dust { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .piece, .hero, .hero-frame, .caught-piece, .crumb, .pour-dust { animation: none; }
  .caught-piece, .pour-dust { display: none; }
}

/* The original landscape welcome, fitted to the portfolio card. */
html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
body { background-size: 1.875vw 1.875vw; background-image: radial-gradient(circle, #d6d0c5 .065vw, transparent .08vw); }
.welcome { width: 100%; height: 100%; overflow: hidden; }
.composition { width: 100%; height: 100%; aspect-ratio: auto; }

/* Selective colour at rest: warm skin, a faint sachet tint, and the red THE. */
.composition {
  background-color: #f0f0ee;
  background-image: radial-gradient(circle, #d0d0ce .065vw, transparent .08vw);
  background-size: 1.875vw 1.875vw;
  transition: background-color 450ms ease;
}
.stage, .snack-field, .hero-back, .hero-front, .catch-field, .scatter-field {
  filter: grayscale(1);
  transition: filter 450ms ease;
}
.hero-back, .hero-front { filter: grayscale(.9); }
.hero-hand {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  mask: url('assets/hand-mask.svg') center / 100% 100% no-repeat;
  filter: saturate(.55);
  opacity: .85;
  transition: opacity 450ms ease;
}
.preview-active { background-color: #f6f2e9; }
.preview-active .stage, .preview-active .snack-field,
.preview-active .hero-back, .preview-active .hero-front,
.preview-active .catch-field, .preview-active .scatter-field { filter: grayscale(0); }
.preview-active .hero-hand { opacity: 0; }
@media (hover: none) {
  .composition { background-color: #f6f2e9; }
  .stage, .snack-field, .hero-back, .hero-front, .catch-field, .scatter-field { filter: none; }
  .hero-hand { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .composition, .stage, .snack-field, .hero-back, .hero-front,
  .catch-field, .scatter-field, .hero-hand { transition: none; }
}