/* Styles for the Hematha digital business card: a midnight navy page in crimson and silver, the 3D card's two faces
   (red front with the company's name, rice-ivory back with the Director's details and QR), the call
   prompt, the action buttons and the "Visit the mill" panel.
   Card faces are drawn in "card pixels": var(--u) is 1/1050 of the card's width, so the printed
   layout (1050 × 600, i.e. 3.5 × 2 in at 300 dpi) scales exactly with the card. */

:root {
  --dark-950: #140c06;
  --dark-900: #1f140b;
  --dark-800: #2a1a0e;
  --dark-700: #3d2614;
  --gold-100: #fbe9b0;
  --gold-300: #ecd08a;
  --gold-400: #d9b25a;
  --gold-500: #c9a24f;
  --gold-600: #a7782c;
  --ivory: #f6efdc;
  --ink: #310303;
  --brown: #4a2a26;
  --card-red: #660707;
  --card-red-deep: #440504;
  --silver: #c9d0d0;
  --brown-soft: #8a6a64;
  --navy: #090f22;
  --on-navy: #f1efea;
  --on-navy-soft: rgba(214, 220, 228, 0.72);
  --red-on-navy: #f0605b;
  --crimson: #870909;
  --silver-line: rgba(130, 142, 142, 0.55);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  /* The company name, in the heavy slab serif of the mill's letterhead */
  --brand: "Roboto Slab", "Rockwell", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--on-navy);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

button {
  font: inherit;
}

/* Holds the shared gradient, emblem and icons; must not be display:none or the gradient disappears */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Page background ---------- */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #0e1630 0%, #090f22 45%, #070c1b 100%);
}

.bg-glow,
.bg-grains,
.bg-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A low sunrise behind the card */
.bg-glow {
  background:
    radial-gradient(70% 30% at 50% 20%, rgba(150, 170, 220, 0.14), transparent 70%),
    radial-gradient(120% 55% at 50% 108%, rgba(120, 135, 180, 0.08), transparent 60%);
}

/* Rice grains scattered faintly across the background */
.bg-grains {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23c9d0d0'%3E%3Cellipse cx='20' cy='24' rx='3' ry='8' transform='rotate(35 20 24)'/%3E%3Cellipse cx='92' cy='14' rx='3' ry='8' transform='rotate(-20 92 14)'/%3E%3Cellipse cx='136' cy='58' rx='3' ry='8' transform='rotate(70 136 58)'/%3E%3Cellipse cx='58' cy='76' rx='3' ry='8' transform='rotate(-55 58 76)'/%3E%3Cellipse cx='112' cy='112' rx='3' ry='8' transform='rotate(15 112 112)'/%3E%3Cellipse cx='28' cy='130' rx='3' ry='8' transform='rotate(-80 28 130)'/%3E%3Cellipse cx='76' cy='148' rx='3' ry='8' transform='rotate(50 76 148)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 72%);
}

.bg-vignette {
  box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.55);
}

/* Paddy field along the bottom of the page: layers of stalks drawn by js/page.js, swaying gently */
.paddy-field {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  pointer-events: none;
}

.paddy-layer {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: sway 7s ease-in-out infinite alternate;
}

.paddy-layer svg {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
}

@media (max-width: 640px) {
  .paddy-field {
    height: 120px;
  }
}

.paddy-layer:nth-child(2) {
  animation-duration: 5.5s;
  animation-delay: -2s;
}

.paddy-layer:nth-child(3) {
  animation-duration: 4.6s;
  animation-delay: -1s;
}

@keyframes sway {
  from {
    transform: skewX(-2deg);
  }
  to {
    transform: skewX(2.2deg);
  }
}

/* ---------- Layout ---------- */

.wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 40px 16px 150px;
}

@media (min-width: 640px) {
  .wrap {
    padding-top: 56px;
  }
}

.rise {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ---------- Logo slots ----------
   The logo fills its slot and keeps its own proportions (README "Changing the logo"). */

.logo-slot {
  display: inline-grid;
  place-items: center;
  flex: none;
}

.logo-slot > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- Header ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  margin: 18px 0 0;
  padding-left: 0.5em;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 0;
  font-weight: inherit;
}

/* "HEMATHA" like a film title: sharp-spurred capitals (Grenze) with a silver face and a red rim,
   standing on a deep dark 3D extrusion. Two copies of the word share one grid cell: the extrusion below
   (built from text-shadow layers) and the face on top. */
.hero-name {
  display: grid;
  justify-items: center;
  padding: 0 0 0.26em 0.03em; /* room for the extrusion below, and the letter-spacing's balance */
  font-family: "Grenze", var(--brand);
  font-size: clamp(48px, 16vw, 92px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hero-name-depth,
.hero-name-face {
  grid-area: 1 / 1;
}

.hero-name-depth {
  color: #1c0806;
  -webkit-text-stroke: 0.035em #1c0806;
  text-shadow:
    0 0.014em 0 #300d09,
    0 0.028em 0 #2e0c09,
    0 0.042em 0 #2b0c08,
    0 0.056em 0 #290b08,
    0 0.070em 0 #270b07,
    0 0.084em 0 #250a07,
    0 0.098em 0 #220907,
    0 0.112em 0 #200906,
    0 0.126em 0 #1e0806,
    0 0.140em 0 #1c0805,
    0 0.154em 0 #190705,
    0 0.168em 0 #170605,
    0 0.182em 0 #150604,
    0 0.196em 0 #130504,
    0 0.210em 0 #100503,
    0 0.224em 0 #0e0403,
    0 0.238em 0 #6a140d,
    0 0.3em 0.22em rgba(0, 0, 0, 0.7);
}

.hero-name-face {
  background: linear-gradient(180deg, #ffffff 0%, #dde2e2 55%, #a3acac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.022em #d42a1e;
}

.hero-sub {
  /* "PARABOILED PVT. LTD." in the title's silver, with a little depth of its own */
  margin-top: 6px;
  padding-left: 0.16em;
  font-family: "Grenze", var(--brand);
  font-size: clamp(15px, 4.6vw, 21px);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #dde2e2 55%, #a3acac 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #5a120c) drop-shadow(0 1.5px 0 #1c0806) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}

.hero-products {
  margin: 14px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red-on-navy);
}

.hero-products span {
  margin: 0 8px;
  color: #9aa7a6;
}

.grain-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.grain-divider span {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--silver-line));
}

.grain-divider span:last-child {
  background: linear-gradient(270deg, transparent, var(--silver-line));
}

.grain-divider svg {
  width: 7px;
  height: 16px;
  fill: #9aa7a6;
}

.hero-person {
  margin: 12px 0 0;
  font-family: var(--display);
  font-size: 17px;
  font-style: italic;
  color: var(--on-navy);
}

.hero-person span {
  margin: 0 4px;
  color: #9aa7a6;
}

/* ---------- The 3D card ---------- */

.card-section {
  width: 100%;
  margin-top: 30px;
}

.vcard {
  container-type: inline-size;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  /* One "card pixel": 1/1050 of the card's width */
  --u: calc(100cqw / 1050);
}

.vcard-stage {
  position: relative;
  padding-bottom: 44px;
  perspective: 1400px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: grab;
}

.vcard-stage.is-grabbing {
  cursor: grabbing;
}

/* Shadow on the "table" under the card; js/card.js narrows it as the card turns edge-on */
/* Golden paddy behind the glass card (assets/paddy.svg), seen through it. It stays still while the card
   turns, its stems show below the card, and on wider screens it reaches out past the card's sides. */
.vcard-paddy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1050 / 600;
  pointer-events: none;
}

/* On phones the card fills the screen's width, so the sprigs are smaller and stand inside it, whole */
.vcard-paddy-sprig {
  position: absolute;
  bottom: -10%;
  height: 68%;
  width: auto;
  opacity: 0.3;
  transform-origin: 50% 100%;
}

.vcard-paddy-sprig--left {
  left: 4%;
  transform: rotate(-8deg);
}

.vcard-paddy-sprig--right {
  right: 4%;
  transform: scaleX(-1) rotate(-8deg);
}

@media (min-width: 640px) {
  .vcard-paddy-sprig {
    bottom: -15%;
    height: 94%;
  }

  .vcard-paddy-sprig--left {
    left: -16%;
    transform: rotate(-12deg);
  }

  .vcard-paddy-sprig--right {
    right: -16%;
    transform: scaleX(-1) rotate(-12deg);
  }
}
.vcard-floor-shadow {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 88%;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  filter: blur(16px);
  pointer-events: none;
}

/* Soft shadow just under the card, lifting it off the page */
.vcard-drop-shadow {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 3%;
  aspect-ratio: 1050 / 600;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(24px);
  pointer-events: none;
}

.vcard-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1050 / 600;
  border-radius: calc(var(--u) * 30);
  transform-style: preserve-3d;
  outline: none;
}

.vcard-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(135, 9, 9, 0.45);
}

.vcard-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--u) * 30);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.face--back {
  transform: rotateY(180deg);
}

/* Lighting laid over each face by js/card.js: shade as it turns away, a moving sheen, the metallic
   shine on the rim and a thin gold outline */
.face-light,
.light-shade,
.light-sheen,
.light-glint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.light-shade {
  background: rgba(200, 215, 245, 0.35);
  opacity: 0;
}

.light-sheen,
.light-glint {
  mix-blend-mode: screen;
}

.light-outline {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Rim shine: a bright highlight on the rim, like light catching a polished metal edge. It sits on the
   top-left and bottom-right corners at rest (300deg / 120deg are the corner directions of a 1050×600
   card) and js/card.js moves --shine-angle as the card turns. */
@property --shine-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 300deg;
}

.card-corner-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--rim, 2px);
  background: conic-gradient(
    from calc(var(--shine-angle) - 14deg),
    transparent 0deg,
    rgba(225, 232, 232, 0.55) 8deg,
    rgba(255, 255, 255, 1) 14deg,
    rgba(225, 232, 232, 0.55) 20deg,
    transparent 28deg 180deg,
    rgba(225, 232, 232, 0.55) 188deg,
    rgba(255, 255, 255, 1) 194deg,
    rgba(225, 232, 232, 0.55) 200deg,
    transparent 208deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.card-corner-shine--bloom {
  --rim: 9px;
  opacity: 0.3;
}

/* ----- Front face: liquid glass, red and silver frame, logo and the company's name ----- */

.front-bg {
  position: absolute;
  inset: 0;
  /* Liquid glass on the navy page: nearly clear, so the navy shows through. What shows it is glass is the
     light it catches: a bright rim with a brighter top edge, a glare in the top corner, a long reflection
     across it, a cool glow from inside the far corner, and the thickness of the glass along the edge.
     (Browsers do not blur what is behind a card turned in 3D, so there is no backdrop blur.) */
  background:
    radial-gradient(130% 95% at 0% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 36%, transparent 58%),
    linear-gradient(112deg, transparent 50%, rgba(255, 255, 255, 0.16) 51%, rgba(255, 255, 255, 0.03) 61%, transparent 62%),
    radial-gradient(110% 110% at 100% 100%, rgba(140, 165, 235, 0.2), transparent 55%),
    rgba(190, 205, 240, 0.06);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 1.6) rgba(255, 255, 255, 0.6),
    inset 0 calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * -1) rgba(255, 255, 255, 0.8),
    inset 0 calc(var(--u) * -3) calc(var(--u) * 3) calc(var(--u) * -1) rgba(255, 255, 255, 0.3),
    inset 0 0 0 calc(var(--u) * 10) rgba(255, 255, 255, 0.035),
    inset 0 0 calc(var(--u) * 50) rgba(160, 185, 255, 0.14);
}

.front-frame {
  position: absolute;
  inset: calc(var(--u) * 24);
  border: calc(var(--u) * 2) solid rgba(240, 96, 91, 0.6);
  border-radius: calc(var(--u) * 14);
}

.front-frame::after {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 8);
  border: calc(var(--u) * 1) solid rgba(214, 220, 228, 0.32);
  border-radius: calc(var(--u) * 8);
}

/* Small gold diamonds at the middle of each side of the frame */
.front-frame i {
  position: absolute;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  background: linear-gradient(135deg, #ff7a74, #c41a16);
  transform: rotate(45deg);
}

.front-frame i:nth-child(1) {
  top: 50%;
  left: calc(var(--u) * -7.5);
  margin-top: calc(var(--u) * -6.5);
}

.front-frame i:nth-child(2) {
  top: 50%;
  right: calc(var(--u) * -7.5);
  margin-top: calc(var(--u) * -6.5);
}

.front-frame i:nth-child(3) {
  left: 50%;
  top: calc(var(--u) * -7.5);
  margin-left: calc(var(--u) * -6.5);
}

.front-frame i:nth-child(4) {
  left: 50%;
  bottom: calc(var(--u) * -7.5);
  margin-left: calc(var(--u) * -6.5);
}

/* The goddess at the top, the mill's name below her */
.front-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 8);
  text-align: center;
}

.front-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-slot--card {
  width: calc(var(--u) * 196);
  height: calc(var(--u) * 218);
}

.wordmark {
  display: block;
  width: calc(var(--u) * 380);
  height: auto;
  overflow: visible;
}

.wordmark-text {
  font-family: var(--brand);
  font-size: 100px;
  font-weight: 800;
  letter-spacing: 6px;
  text-anchor: middle;
}

.front-mill {
  font-family: var(--brand);
  margin: calc(var(--u) * 4) 0 0;
  padding-left: 0.42em;
  font-size: calc(var(--u) * 22);
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-navy);
}

.front-ltd {
  font-family: var(--brand);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  margin: calc(var(--u) * 10) 0 0;
  font-size: calc(var(--u) * 19);
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--red-on-navy);
}

.front-ltd span {
  width: calc(var(--u) * 72);
  height: max(1px, calc(var(--u) * 1.5));
  background: linear-gradient(90deg, transparent, var(--red-on-navy));
}

.front-ltd span:last-child {
  margin-left: calc(var(--u) * -6);
  background: linear-gradient(270deg, transparent, var(--red-on-navy));
}

.front-products {
  margin: calc(var(--u) * 14) 0 0;
  font-size: calc(var(--u) * 17);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}

.front-place {
  margin: calc(var(--u) * 10) 0 0;
  font-family: var(--display);
  font-size: calc(var(--u) * 21);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--on-navy-soft);
}

/* ----- Back face: rice ivory, the Director's details and a red panel with the QR code ----- */

.back-bg {
  position: absolute;
  inset: 0;
  /* Liquid glass on the navy page: nearly clear, so the navy shows through. What shows it is glass is the
     light it catches: a bright rim with a brighter top edge, a glare in the top corner, a long reflection
     across it, a cool glow from inside the far corner, and the thickness of the glass along the edge.
     (Browsers do not blur what is behind a card turned in 3D, so there is no backdrop blur.) */
  background:
    radial-gradient(130% 95% at 0% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06) 36%, transparent 58%),
    linear-gradient(112deg, transparent 50%, rgba(255, 255, 255, 0.16) 51%, rgba(255, 255, 255, 0.03) 61%, transparent 62%),
    radial-gradient(110% 110% at 100% 100%, rgba(140, 165, 235, 0.2), transparent 55%),
    rgba(190, 205, 240, 0.06);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 1.6) rgba(255, 255, 255, 0.6),
    inset 0 calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * -1) rgba(255, 255, 255, 0.8),
    inset 0 calc(var(--u) * -3) calc(var(--u) * 3) calc(var(--u) * -1) rgba(255, 255, 255, 0.3),
    inset 0 0 0 calc(var(--u) * 10) rgba(255, 255, 255, 0.035),
    inset 0 0 calc(var(--u) * 50) rgba(160, 185, 255, 0.14);
}

.back-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.back-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--u) * 50) calc(var(--u) * 400) calc(var(--u) * 44) calc(var(--u) * 66);
  color: var(--on-navy);
}

.back-brand {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
}

.logo-slot--mini {
  width: calc(var(--u) * 78);
  height: calc(var(--u) * 78);
}

.back-brand-text {
  font-family: var(--brand);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  font-size: calc(var(--u) * 13.5);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}

.back-brand-text b {
  font-family: var(--brand);
  font-size: calc(var(--u) * 27);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--on-navy);
}

.back-name {
  margin: auto 0 0;
  font-family: var(--display);
  font-size: calc(var(--u) * 50);
  font-weight: 600;
  font-variation-settings: "opsz" 96;
  line-height: 1.05;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--on-navy);
}

.back-title {
  margin: calc(var(--u) * 10) 0 0;
  font-size: calc(var(--u) * 17);
  font-weight: 800;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--red-on-navy);
}

.back-rule {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 16);
}

.back-rule svg {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 19);
  fill: #9aa7a6;
}

/* Three grains fanned out like a small sprig */
.back-rule svg:nth-child(1) {
  transform: rotate(-24deg);
}

.back-rule svg:nth-child(2) {
  transform: translateY(calc(var(--u) * -3));
}

.back-rule svg:nth-child(3) {
  transform: rotate(24deg);
}

.back-rule span {
  width: calc(var(--u) * 230);
  height: max(1px, calc(var(--u) * 2));
  margin-left: calc(var(--u) * 8);
  background: linear-gradient(90deg, #9aa7a6, transparent);
}

.back-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}

.back-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 18);
  margin: 0 0 calc(var(--u) * 8) calc(var(--u) * -8);
  padding: calc(var(--u) * 8) calc(var(--u) * 20) calc(var(--u) * 8) calc(var(--u) * 8);
  border: 0;
  border-radius: calc(var(--u) * 60);
  background-color: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background-color 0.25s;
}

.back-row:hover,
.back-row:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
}

.back-ico {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 50);
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.05) 74%),
    rgba(232, 241, 240, 0.12);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, 0.95),
    inset 0 0 0 calc(var(--u) * 3) rgba(140, 170, 168, 0.3),
    inset 0 calc(var(--u) * -6) calc(var(--u) * 9) calc(var(--u) * -5) rgba(28, 56, 54, 0.22),
    0 calc(var(--u) * 5) calc(var(--u) * 10) rgba(60, 20, 15, 0.16);
  color: var(--on-navy);
  transition: color 0.25s;
}

.back-row:hover .back-ico,
.back-row:focus-visible .back-ico {
  color: #ffffff;
  background: rgba(135, 9, 9, 0.82);
}

.back-ico svg {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
}

.back-phone {
  font-size: calc(var(--u) * 31);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-navy);
}

.back-address {
  font-size: calc(var(--u) * 21);
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-navy-soft);
}

/* Centred on the red panel */
.back-qr {
  position: absolute;
  top: 50%;
  left: calc(var(--u) * 880);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 20);
  padding: calc(var(--u) * 12);
  border: 0;
  border-radius: calc(var(--u) * 22);
  background-color: transparent;
  color: var(--silver);
  cursor: pointer;
  outline: none;
  transition: background-color 0.25s;
}

.back-qr:hover,
.back-qr:focus-visible {
  background-color: rgba(231, 201, 124, 0.1);
}

.qr-tile {
  display: block;
  width: calc(var(--u) * 252);
  height: calc(var(--u) * 252);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  background: #fdfbf6;
  box-shadow:
    0 0 0 calc(var(--u) * 3) #c9d0d0,
    0 0 0 calc(var(--u) * 7) rgba(201, 208, 208, 0.25),
    0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, 0.35);
}

.qr-tile svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-caption {
  padding-left: 0.26em;
  font-size: calc(var(--u) * 14.5);
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Call prompt over the card ---------- */

.card-prompt {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 18px;
  background: rgba(51, 3, 3, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: default;
  touch-action: auto;
  animation: prompt-in 0.16s ease-out;
}

@keyframes prompt-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.card-prompt-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  text-align: center;
}

.card-prompt-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ivory);
}

.prompt-btn,
.prompt-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.prompt-btn {
  padding: 11px 16px;
  font-size: 15px;
}

.prompt-btn svg,
.prompt-cancel svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.prompt-btn--gold {
  background: linear-gradient(135deg, #ffffff, #c9d0d0 50%, #8f9b9a);
  color: #440504;
}

.prompt-btn--line {
  border: 1px solid rgba(214, 220, 220, 0.55);
  color: var(--silver);
}

.prompt-btn--line:hover {
  background-color: rgba(214, 220, 220, 0.12);
}

.prompt-cancel {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--ivory);
  font-size: 14px;
}

.prompt-cancel:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Card controls ---------- */

.vcard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 2px;
  text-align: center;
}

.vcard-hint {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--on-navy-soft);
}

.vcard-buttons {
  display: flex;
  gap: 8px;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(214, 220, 228, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-navy);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}

.ghost-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
}

.ghost-btn svg {
  width: 14px;
  height: 14px;
}

.ghost-btn:focus-visible,
.save-btn:focus-visible,
.quick-item:focus-visible,
.visit-link:focus-visible {
  outline: 2px solid var(--on-navy);
  outline-offset: 3px;
}

/* The call prompt sits on the dark card */
.prompt-btn:focus-visible,
.prompt-cancel:focus-visible {
  outline: 2px solid var(--silver);
  outline-offset: 3px;
}

/* ---------- Save contact and quick actions ---------- */

.actions {
  width: 100%;
  margin-top: 26px;
}

.save-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  overflow: hidden;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #9d0b0a 0%, #790808 100%);
  color: #f2f4f4;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px -14px rgba(121, 8, 8, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(214, 220, 220, 0.25);
  cursor: pointer;
  transition: transform 0.2s;
}

.save-btn:hover {
  transform: translateY(-2px);
}

.save-btn:active {
  transform: none;
}

.save-btn svg {
  width: 20px;
  height: 20px;
}

/* A light sweep across the gold button every few seconds */
.save-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: btn-shine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-shine {
  0% {
    transform: translateX(-130%) skewX(-18deg);
  }
  55%,
  100% {
    transform: translateX(230%) skewX(-18deg);
  }
}

.quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 22px;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Grain-shaped buttons */
.quick-ring {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  /* A glass bead: clear body, glare at the top left, the cool tint of its edge, a shadow below */
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.14) 46%, rgba(255, 255, 255, 0.04) 72%),
    rgba(232, 241, 240, 0.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.3);
  backdrop-filter: blur(6px) saturate(1.3);
  color: var(--on-navy);
  box-shadow:
    inset 0 0 0 2px rgba(140, 170, 168, 0.28),
    inset 0 4px 6px -3px rgba(255, 255, 255, 0.95),
    inset 0 -7px 10px -6px rgba(28, 56, 54, 0.2),
    0 12px 22px -14px rgba(60, 20, 15, 0.4);
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s;
}

.quick-item:hover .quick-ring {
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.06) 46%, transparent 72%),
    rgba(135, 9, 9, 0.82);
  color: #ffffff;
}

.quick-ring svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.quick-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-navy-soft);
  transition: color 0.3s;
}

.quick-item:hover .quick-label {
  color: var(--on-navy);
}

/* ---------- Visit the mill ---------- */

.visit {
  width: 100%;
  margin-top: 36px;
  padding: 22px;
  border: 1px solid rgba(214, 220, 228, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.eyebrow--left {
  margin: 0;
  padding-left: 0;
  letter-spacing: 0.38em;
}

.visit-title {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 600;
  color: var(--on-navy);
}

.visit-address {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-navy-soft);
}

.visit-map {
  margin-top: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(214, 220, 228, 0.18);
  border-radius: 14px;
  background: #0e1630;
}

.visit-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.visit-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(214, 220, 228, 0.35);
  border-radius: 999px;
  color: var(--on-navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.25s, border-color 0.25s;
}

.visit-link:hover {
  border-color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.08);
}

.visit-link svg {
  width: 15px;
  height: 15px;
}

/* ---------- Footer and toast ---------- */

.footer {
  margin-top: auto;
  padding-top: 44px;
  text-align: center;
}

.footer-name {
  font-family: var(--brand);
  margin: 12px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-navy);
}

.footer-place {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--on-navy-soft);
}

/* ---------- The harvest ----------
   One story on one clock (--harvest, 32.9 s), drawn in index.html. The farmer drives in from the field
   with a trailer of paddy and stops at the mill (0-4 s); the trailer tips the paddy into the intake and
   the bucket elevator lifts it to the silos (5-11 s); the mill lights up; rice pours from the chute onto
   a heap in the bagging shed (9-15 s); 25 kg bags are filled from the heap and ride the conveyor, and two
   workers lift each bag onto their heads and carry it to the lorry (16.2-27.87 s), which then drives off
   (28.67-31.87 s). Meanwhile the tractor backs out for its next load and the empty lorry reverses in
   at the start. Scene units are 1000 x 430 (y from -130); translate values are in those units. It sits
   at the top of the page, across the full width of the screen. The bag and worker keyframes are worked
   out from the workers' trips, so they are long. */
.harvest {
  --harvest: 32.9s;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Full width of the screen, out of the page's 600px column */
  width: 100vw;
  /* At the top of the page: up into the page's top padding, which the chimney's steam rises into */
  margin: -28px calc(50% - 50vw) 0;
  text-align: center;
}

.harvest-stage {
  width: 100%;
  padding-top: 40px; /* room for the chimney's steam */
  overflow: hidden;
  pointer-events: none;
}

.harvest-scene {
  display: block;
  width: min(100%, 1000px);
  height: auto;
  aspect-ratio: 1000 / 430;
  margin: 0 auto;
  overflow: visible;
}

/* On phones the scene is shown larger, from the mill's elevator onwards (x 180-1000 of 1000); the field
   runs off the left */
@media (max-width: 640px) {
  .harvest-scene {
    width: 122%;
    margin-left: -22%;
  }
}

.mill-sign {
  font-family: var(--brand);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-anchor: middle;
}

/* Parts that turn, tip or grow do so about their own box */
.harvest-scene .wheel,
.mill-fan,
.chimney-smoke circle,
.tractor-smoke circle {
  transform-box: fill-box;
  transform-origin: center;
}

.trailer-bed {
  transform-box: fill-box;
  transform-origin: 0 100%; /* the hinge at the back of the trailer */
}

/* A worker's legs swing from the hip and his arm from the shoulder: the top-left of each */
.w-leg,
.w-arm {
  transform-box: fill-box;
  transform-origin: 0 0;
}

.field,
.trailer-load,
.rice-heap {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.field--back {
  animation: sway 7s ease-in-out infinite alternate;
}

.field--mid {
  animation: sway 5.5s ease-in-out -2s infinite alternate;
}

.field--front {
  animation: sway 4.6s ease-in-out -1s infinite alternate;
}

/* Always running: the mill's fan and chimney, the conveyor belt, the tractor's engine */
.mill-fan {
  animation: spin 2.2s linear infinite;
}

.chimney-smoke circle {
  opacity: 0;
  animation: chimney-puff 4s ease-out infinite;
}

.chimney-smoke circle:nth-child(2) {
  animation-delay: -1s;
}

.chimney-smoke circle:nth-child(3) {
  animation-delay: -2s;
}

.chimney-smoke circle:nth-child(4) {
  animation-delay: -3s;
}

.loader-belt {
  animation: belt 0.5s linear infinite;
}

.tractor-body {
  animation: engine-shake 0.32s ease-in-out infinite alternate;
}

.tractor-smoke circle {
  opacity: 0;
  animation: tractor-puff 1.5s ease-out infinite;
}

.tractor-smoke circle:nth-child(2) {
  animation-delay: 0.5s;
}

.tractor-smoke circle:nth-child(3) {
  animation-delay: 1s;
}

/* Streams of grain: dots spaced evenly, sliding by one gap per loop */
.grains-down--paddy {
  animation: grain-fall-6 0.22s linear infinite;
}

.grains-down--rice {
  animation: grain-fall-10 0.35s linear infinite;
}

.grains-up {
  animation: grain-lift 0.35s linear infinite;
}

/* The story */
.tractor {
  animation: tractor-trip var(--harvest) infinite;
}

.tractor-wheel--rear {
  animation: tractor-rear-roll var(--harvest) infinite;
}

.tractor-wheel--front {
  animation: tractor-front-roll var(--harvest) infinite;
}

.trailer-wheel {
  animation: trailer-roll var(--harvest) infinite;
}

.trailer-bed {
  animation: trailer-tip var(--harvest) ease-in-out infinite;
}

.trailer-load {
  animation: trailer-unload var(--harvest) infinite;
}

.paddy-pour,
.lift-grains,
.chute-rice,
.hopper-pour,
.sack,
.lorry-bag {
  opacity: 0;
}

.paddy-pour {
  animation: paddy-pour var(--harvest) infinite;
}

.lift-grains {
  animation: lift-grains var(--harvest) infinite;
}

.mill-window {
  animation: mill-lights var(--harvest) infinite;
}

.chute-rice {
  animation: chute-rice var(--harvest) infinite;
}

.rice-heap {
  animation: rice-heap var(--harvest) infinite, rice-heap-show var(--harvest) infinite;
}

.hopper-pour {
  animation: hopper-pour var(--harvest) linear infinite;
}

.lorry {
  animation: lorry-trip var(--harvest) infinite;
}

.lorry-wheel {
  animation: lorry-roll var(--harvest) infinite;
}

/* The workers stand at the end of the conveyor (also their pose when motion is reduced) */
.worker--a {
  transform: translate(800px, 284px) scale(-1, 1);
}

.worker--b {
  transform: translate(826px, 276px) scale(-0.94, 0.94);
}

.worker--a {
  animation: worker-a var(--harvest) linear infinite;
}

.worker--a .w-arm {
  animation: worker-a-arm var(--harvest) linear infinite;
}

.worker--a .w-leg--f {
  animation: worker-a-leg-f var(--harvest) linear infinite;
}

.worker--a .w-leg--b {
  animation: worker-a-leg-b var(--harvest) linear infinite;
}

.worker--b {
  animation: worker-b var(--harvest) linear infinite;
}

.worker--b .w-arm {
  animation: worker-b-arm var(--harvest) linear infinite;
}

.worker--b .w-leg--f {
  animation: worker-b-leg-f var(--harvest) linear infinite;
}

.worker--b .w-leg--b {
  animation: worker-b-leg-b var(--harvest) linear infinite;
}

.sack--0 {
  animation: sack-0 var(--harvest) linear infinite, sack-0-show var(--harvest) linear infinite;
}

.lorry-bag--0 {
  animation: lorry-bag-0 var(--harvest) linear infinite;
}

.sack--1 {
  animation: sack-1 var(--harvest) linear infinite, sack-1-show var(--harvest) linear infinite;
}

.lorry-bag--1 {
  animation: lorry-bag-1 var(--harvest) linear infinite;
}

.sack--2 {
  animation: sack-2 var(--harvest) linear infinite, sack-2-show var(--harvest) linear infinite;
}

.lorry-bag--2 {
  animation: lorry-bag-2 var(--harvest) linear infinite;
}

.sack--3 {
  animation: sack-3 var(--harvest) linear infinite, sack-3-show var(--harvest) linear infinite;
}

.lorry-bag--3 {
  animation: lorry-bag-3 var(--harvest) linear infinite;
}

.sack--4 {
  animation: sack-4 var(--harvest) linear infinite, sack-4-show var(--harvest) linear infinite;
}

.lorry-bag--4 {
  animation: lorry-bag-4 var(--harvest) linear infinite;
}

.sack--5 {
  animation: sack-5 var(--harvest) linear infinite, sack-5-show var(--harvest) linear infinite;
}

.lorry-bag--5 {
  animation: lorry-bag-5 var(--harvest) linear infinite;
}

.sack--6 {
  animation: sack-6 var(--harvest) linear infinite, sack-6-show var(--harvest) linear infinite;
}

.lorry-bag--6 {
  animation: lorry-bag-6 var(--harvest) linear infinite;
}

.sack--7 {
  animation: sack-7 var(--harvest) linear infinite, sack-7-show var(--harvest) linear infinite;
}

.lorry-bag--7 {
  animation: lorry-bag-7 var(--harvest) linear infinite;
}

.sack--8 {
  animation: sack-8 var(--harvest) linear infinite, sack-8-show var(--harvest) linear infinite;
}

.lorry-bag--8 {
  animation: lorry-bag-8 var(--harvest) linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes chimney-puff {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  12% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate(-22px, -48px) scale(2.2);
  }
}

@keyframes belt {
  to {
    stroke-dashoffset: -8;
  }
}

@keyframes engine-shake {
  to {
    transform: translateY(-0.8px);
  }
}

@keyframes tractor-puff {
  from {
    opacity: 0.85;
    transform: translate(0, 0) scale(0.5);
  }
  to {
    opacity: 0;
    transform: translate(-14px, -20px) scale(1.8);
  }
}

@keyframes grain-fall-6 {
  to {
    transform: translateY(6px);
  }
}

@keyframes grain-fall-10 {
  to {
    transform: translateY(10px);
  }
}

@keyframes grain-lift {
  to {
    transform: translateY(-12px);
  }
}

/* The tractor arrives, waits while the trailer tips, then backs out. Its wheels turn as far as it
   travels (900 units: 8.35 turns of the big wheel, 15.3 of the small one, 8.95 of the trailer's). */
@keyframes tractor-trip {
  0% {
    transform: translateX(-900px);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  12.401% {
    transform: translateX(0);
  }
  26.991% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  37.933% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(-900px);
  }
}
@keyframes tractor-rear-roll {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  12.401% {
    transform: rotate(3006deg);
  }
  26.991% {
    transform: rotate(3006deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  37.933% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes tractor-front-roll {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  12.401% {
    transform: rotate(5510deg);
  }
  26.991% {
    transform: rotate(5510deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  37.933% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes trailer-roll {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  12.401% {
    transform: rotate(3224deg);
  }
  26.991% {
    transform: rotate(3224deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  37.933% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes trailer-tip {
  0% {
    transform: rotate(0);
  }
  14.59% {
    transform: rotate(0);
  }
  18.237% {
    transform: rotate(-16deg);
  }
  23.343% {
    transform: rotate(-16deg);
  }
  26.261% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes trailer-unload {
  0% {
    transform: scaleY(1);
  }
  17.508% {
    transform: scaleY(1);
  }
  24.073% {
    transform: scaleY(0.12);
  }
  38.663% {
    transform: scaleY(0.12);
  }
  38.754% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes paddy-pour {
  0% {
    opacity: 0;
  }
  16.778% {
    opacity: 0;
  }
  18.237% {
    opacity: 1;
  }
  23.343% {
    opacity: 1;
  }
  24.802% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lift-grains {
  0% {
    opacity: 0;
  }
  18.967% {
    opacity: 0;
  }
  20.426% {
    opacity: 1;
  }
  30.638% {
    opacity: 1;
  }
  32.097% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes mill-lights {
  0% {
    fill: #5d0606;
  }
  21.155% {
    fill: #5d0606;
  }
  24.073% {
    fill: #f4f1ec;
  }
  87.143% {
    fill: #f4f1ec;
  }
  89.878% {
    fill: #5d0606;
  }
  100% {
    fill: #5d0606;
  }
}
@keyframes chute-rice {
  0% {
    opacity: 0;
  }
  28.45% {
    opacity: 0;
  }
  29.909% {
    opacity: 1;
  }
  43.04% {
    opacity: 1;
  }
  44.498% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rice-heap {
  0% {
    transform: scale(0.05);
  }
  29.179% {
    transform: scale(0.05);
  }
  43.769% {
    transform: scale(1);
  }
  44.681% {
    transform: scale(1);
  }
  46.201% {
    transform: scale(0.91);
  }
  48.936% {
    transform: scale(0.81);
  }
  56.109% {
    transform: scale(0.72);
  }
  57.781% {
    transform: scale(0.62);
  }
  63.769% {
    transform: scale(0.53);
  }
  65.441% {
    transform: scale(0.43);
  }
  69.179% {
    transform: scale(0.34);
  }
  74.483% {
    transform: scale(0.24);
  }
  77.401% {
    transform: scale(0.15);
  }
  100% {
    transform: scale(0.15);
  }
}
@keyframes rice-heap-show {
  0% {
    opacity: 0;
  }
  29.119% {
    opacity: 0;
  }
  29.179% {
    opacity: 1;
  }
  78.313% {
    opacity: 1;
  }
  79.225% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hopper-pour {
  0% {
    opacity: 0;
  }
  44.65% {
    opacity: 0;
  }
  44.681% {
    opacity: 1;
  }
  46.201% {
    opacity: 1;
  }
  46.231% {
    opacity: 0;
  }
  47.386% {
    opacity: 0;
  }
  47.416% {
    opacity: 1;
  }
  48.936% {
    opacity: 1;
  }
  48.967% {
    opacity: 0;
  }
  54.559% {
    opacity: 0;
  }
  54.59% {
    opacity: 1;
  }
  56.109% {
    opacity: 1;
  }
  56.14% {
    opacity: 0;
  }
  56.231% {
    opacity: 0;
  }
  56.261% {
    opacity: 1;
  }
  57.781% {
    opacity: 1;
  }
  57.812% {
    opacity: 0;
  }
  62.219% {
    opacity: 0;
  }
  62.249% {
    opacity: 1;
  }
  63.769% {
    opacity: 1;
  }
  63.799% {
    opacity: 0;
  }
  63.891% {
    opacity: 0;
  }
  63.921% {
    opacity: 1;
  }
  65.441% {
    opacity: 1;
  }
  65.471% {
    opacity: 0;
  }
  67.629% {
    opacity: 0;
  }
  67.66% {
    opacity: 1;
  }
  69.179% {
    opacity: 1;
  }
  69.21% {
    opacity: 0;
  }
  72.933% {
    opacity: 0;
  }
  72.964% {
    opacity: 1;
  }
  74.483% {
    opacity: 1;
  }
  74.514% {
    opacity: 0;
  }
  75.851% {
    opacity: 0;
  }
  75.881% {
    opacity: 1;
  }
  77.401% {
    opacity: 1;
  }
  77.432% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-trip {
  0% {
    transform: translateX(700px);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  10.213% {
    transform: translateX(0);
  }
  87.143% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  96.869% {
    transform: translateX(820px);
  }
  100% {
    transform: translateX(820px);
  }
}
@keyframes lorry-roll {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  10.213% {
    transform: rotate(-3342deg);
  }
  87.143% {
    transform: rotate(-3342deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5);
  }
  96.869% {
    transform: rotate(573deg);
  }
  100% {
    transform: rotate(573deg);
  }
}
@keyframes worker-a {
  0% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  49.24% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  50.456% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  50.486% {
    transform: translate(800px, 284px) scale(1, 1);
  }
  54.119% {
    transform: translate(920.5px, 284px) scale(1, 1);
  }
  55.486% {
    transform: translate(920.5px, 284px) scale(1, 1);
  }
  55.517% {
    transform: translate(920.5px, 284px) scale(-1, 1);
  }
  59.149% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  60.365% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  60.395% {
    transform: translate(800px, 284px) scale(1, 1);
  }
  62.903% {
    transform: translate(883.5px, 284px) scale(1, 1);
  }
  64.271% {
    transform: translate(883.5px, 284px) scale(1, 1);
  }
  64.301% {
    transform: translate(883.5px, 284px) scale(-1, 1);
  }
  66.809% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  68.024% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  68.055% {
    transform: translate(800px, 284px) scale(1, 1);
  }
  69.438% {
    transform: translate(846.5px, 284px) scale(1, 1);
  }
  70.805% {
    transform: translate(846.5px, 284px) scale(1, 1);
  }
  70.836% {
    transform: translate(846.5px, 284px) scale(-1, 1);
  }
  72.219% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  73.435% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  73.465% {
    transform: translate(800px, 284px) scale(1, 1);
  }
  76.254% {
    transform: translate(892.75px, 284px) scale(1, 1);
  }
  77.622% {
    transform: translate(892.75px, 284px) scale(1, 1);
  }
  77.652% {
    transform: translate(892.75px, 284px) scale(-1, 1);
  }
  80.441% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  81.657% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  81.687% {
    transform: translate(800px, 284px) scale(1, 1);
  }
  83.351% {
    transform: translate(855.75px, 284px) scale(1, 1);
  }
  84.719% {
    transform: translate(855.75px, 284px) scale(1, 1);
  }
  84.749% {
    transform: translate(855.75px, 284px) scale(-1, 1);
  }
  86.413% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
  100% {
    transform: translate(800px, 284px) scale(-1, 1);
  }
}
@keyframes worker-a-arm {
  0% {
    transform: rotate(0);
  }
  48.48% {
    transform: rotate(0);
  }
  49.24% {
    transform: rotate(-80deg);
  }
  50.456% {
    transform: rotate(-172deg);
  }
  54.119% {
    transform: rotate(-172deg);
  }
  54.871% {
    transform: rotate(-140deg);
  }
  55.486% {
    transform: rotate(-40deg);
  }
  56.398% {
    transform: rotate(0);
  }
  58.389% {
    transform: rotate(0);
  }
  59.149% {
    transform: rotate(-80deg);
  }
  60.365% {
    transform: rotate(-172deg);
  }
  62.903% {
    transform: rotate(-172deg);
  }
  63.655% {
    transform: rotate(-140deg);
  }
  64.271% {
    transform: rotate(-40deg);
  }
  65.182% {
    transform: rotate(0);
  }
  66.049% {
    transform: rotate(0);
  }
  66.809% {
    transform: rotate(-80deg);
  }
  68.024% {
    transform: rotate(-172deg);
  }
  69.438% {
    transform: rotate(-172deg);
  }
  70.19% {
    transform: rotate(-140deg);
  }
  70.805% {
    transform: rotate(-40deg);
  }
  71.459% {
    transform: rotate(0);
  }
  71.717% {
    transform: rotate(0);
  }
  72.219% {
    transform: rotate(-80deg);
  }
  73.435% {
    transform: rotate(-172deg);
  }
  76.254% {
    transform: rotate(-172deg);
  }
  77.006% {
    transform: rotate(-140deg);
  }
  77.622% {
    transform: rotate(-40deg);
  }
  78.533% {
    transform: rotate(0);
  }
  79.681% {
    transform: rotate(0);
  }
  80.441% {
    transform: rotate(-80deg);
  }
  81.657% {
    transform: rotate(-172deg);
  }
  83.351% {
    transform: rotate(-172deg);
  }
  84.103% {
    transform: rotate(-140deg);
  }
  84.719% {
    transform: rotate(-40deg);
  }
  85.631% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes worker-a-leg-f {
  0% {
    transform: rotate(0);
  }
  50.486% {
    transform: rotate(0deg);
  }
  50.85% {
    transform: rotate(24deg);
  }
  51.213% {
    transform: rotate(0deg);
  }
  51.576% {
    transform: rotate(-24deg);
  }
  51.939% {
    transform: rotate(0deg);
  }
  52.302% {
    transform: rotate(24deg);
  }
  52.666% {
    transform: rotate(0deg);
  }
  53.029% {
    transform: rotate(-24deg);
  }
  53.392% {
    transform: rotate(0deg);
  }
  53.755% {
    transform: rotate(24deg);
  }
  54.119% {
    transform: rotate(0deg);
  }
  55.517% {
    transform: rotate(0deg);
  }
  55.88% {
    transform: rotate(24deg);
  }
  56.243% {
    transform: rotate(0deg);
  }
  56.606% {
    transform: rotate(-24deg);
  }
  56.97% {
    transform: rotate(0deg);
  }
  57.333% {
    transform: rotate(24deg);
  }
  57.696% {
    transform: rotate(0deg);
  }
  58.059% {
    transform: rotate(-24deg);
  }
  58.422% {
    transform: rotate(0deg);
  }
  58.786% {
    transform: rotate(24deg);
  }
  59.149% {
    transform: rotate(0deg);
  }
  60.395% {
    transform: rotate(0deg);
  }
  60.709% {
    transform: rotate(24deg);
  }
  61.022% {
    transform: rotate(0deg);
  }
  61.335% {
    transform: rotate(-24deg);
  }
  61.649% {
    transform: rotate(0deg);
  }
  61.962% {
    transform: rotate(24deg);
  }
  62.276% {
    transform: rotate(0deg);
  }
  62.589% {
    transform: rotate(-24deg);
  }
  62.903% {
    transform: rotate(0deg);
  }
  64.301% {
    transform: rotate(0deg);
  }
  64.614% {
    transform: rotate(24deg);
  }
  64.928% {
    transform: rotate(0deg);
  }
  65.241% {
    transform: rotate(-24deg);
  }
  65.555% {
    transform: rotate(0deg);
  }
  65.868% {
    transform: rotate(24deg);
  }
  66.182% {
    transform: rotate(0deg);
  }
  66.495% {
    transform: rotate(-24deg);
  }
  66.809% {
    transform: rotate(0deg);
  }
  68.055% {
    transform: rotate(0deg);
  }
  68.4% {
    transform: rotate(24deg);
  }
  68.746% {
    transform: rotate(0deg);
  }
  69.092% {
    transform: rotate(-24deg);
  }
  69.438% {
    transform: rotate(0deg);
  }
  70.836% {
    transform: rotate(0deg);
  }
  71.182% {
    transform: rotate(24deg);
  }
  71.527% {
    transform: rotate(0deg);
  }
  71.873% {
    transform: rotate(-24deg);
  }
  72.219% {
    transform: rotate(0deg);
  }
  73.465% {
    transform: rotate(0deg);
  }
  73.814% {
    transform: rotate(24deg);
  }
  74.162% {
    transform: rotate(0deg);
  }
  74.511% {
    transform: rotate(-24deg);
  }
  74.859% {
    transform: rotate(0deg);
  }
  75.208% {
    transform: rotate(24deg);
  }
  75.557% {
    transform: rotate(0deg);
  }
  75.905% {
    transform: rotate(-24deg);
  }
  76.254% {
    transform: rotate(0deg);
  }
  77.652% {
    transform: rotate(0deg);
  }
  78.001% {
    transform: rotate(24deg);
  }
  78.349% {
    transform: rotate(0deg);
  }
  78.698% {
    transform: rotate(-24deg);
  }
  79.046% {
    transform: rotate(0deg);
  }
  79.395% {
    transform: rotate(24deg);
  }
  79.744% {
    transform: rotate(0deg);
  }
  80.092% {
    transform: rotate(-24deg);
  }
  80.441% {
    transform: rotate(0deg);
  }
  81.687% {
    transform: rotate(0deg);
  }
  82.103% {
    transform: rotate(24deg);
  }
  82.519% {
    transform: rotate(0deg);
  }
  82.935% {
    transform: rotate(-24deg);
  }
  83.351% {
    transform: rotate(0deg);
  }
  84.749% {
    transform: rotate(0deg);
  }
  85.165% {
    transform: rotate(24deg);
  }
  85.581% {
    transform: rotate(0deg);
  }
  85.997% {
    transform: rotate(-24deg);
  }
  86.413% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes worker-a-leg-b {
  0% {
    transform: rotate(0);
  }
  50.486% {
    transform: rotate(0deg);
  }
  50.85% {
    transform: rotate(-24deg);
  }
  51.213% {
    transform: rotate(0deg);
  }
  51.576% {
    transform: rotate(24deg);
  }
  51.939% {
    transform: rotate(0deg);
  }
  52.302% {
    transform: rotate(-24deg);
  }
  52.666% {
    transform: rotate(0deg);
  }
  53.029% {
    transform: rotate(24deg);
  }
  53.392% {
    transform: rotate(0deg);
  }
  53.755% {
    transform: rotate(-24deg);
  }
  54.119% {
    transform: rotate(0deg);
  }
  55.517% {
    transform: rotate(0deg);
  }
  55.88% {
    transform: rotate(-24deg);
  }
  56.243% {
    transform: rotate(0deg);
  }
  56.606% {
    transform: rotate(24deg);
  }
  56.97% {
    transform: rotate(0deg);
  }
  57.333% {
    transform: rotate(-24deg);
  }
  57.696% {
    transform: rotate(0deg);
  }
  58.059% {
    transform: rotate(24deg);
  }
  58.422% {
    transform: rotate(0deg);
  }
  58.786% {
    transform: rotate(-24deg);
  }
  59.149% {
    transform: rotate(0deg);
  }
  60.395% {
    transform: rotate(0deg);
  }
  60.709% {
    transform: rotate(-24deg);
  }
  61.022% {
    transform: rotate(0deg);
  }
  61.335% {
    transform: rotate(24deg);
  }
  61.649% {
    transform: rotate(0deg);
  }
  61.962% {
    transform: rotate(-24deg);
  }
  62.276% {
    transform: rotate(0deg);
  }
  62.589% {
    transform: rotate(24deg);
  }
  62.903% {
    transform: rotate(0deg);
  }
  64.301% {
    transform: rotate(0deg);
  }
  64.614% {
    transform: rotate(-24deg);
  }
  64.928% {
    transform: rotate(0deg);
  }
  65.241% {
    transform: rotate(24deg);
  }
  65.555% {
    transform: rotate(0deg);
  }
  65.868% {
    transform: rotate(-24deg);
  }
  66.182% {
    transform: rotate(0deg);
  }
  66.495% {
    transform: rotate(24deg);
  }
  66.809% {
    transform: rotate(0deg);
  }
  68.055% {
    transform: rotate(0deg);
  }
  68.4% {
    transform: rotate(-24deg);
  }
  68.746% {
    transform: rotate(0deg);
  }
  69.092% {
    transform: rotate(24deg);
  }
  69.438% {
    transform: rotate(0deg);
  }
  70.836% {
    transform: rotate(0deg);
  }
  71.182% {
    transform: rotate(-24deg);
  }
  71.527% {
    transform: rotate(0deg);
  }
  71.873% {
    transform: rotate(24deg);
  }
  72.219% {
    transform: rotate(0deg);
  }
  73.465% {
    transform: rotate(0deg);
  }
  73.814% {
    transform: rotate(-24deg);
  }
  74.162% {
    transform: rotate(0deg);
  }
  74.511% {
    transform: rotate(24deg);
  }
  74.859% {
    transform: rotate(0deg);
  }
  75.208% {
    transform: rotate(-24deg);
  }
  75.557% {
    transform: rotate(0deg);
  }
  75.905% {
    transform: rotate(24deg);
  }
  76.254% {
    transform: rotate(0deg);
  }
  77.652% {
    transform: rotate(0deg);
  }
  78.001% {
    transform: rotate(-24deg);
  }
  78.349% {
    transform: rotate(0deg);
  }
  78.698% {
    transform: rotate(24deg);
  }
  79.046% {
    transform: rotate(0deg);
  }
  79.395% {
    transform: rotate(-24deg);
  }
  79.744% {
    transform: rotate(0deg);
  }
  80.092% {
    transform: rotate(24deg);
  }
  80.441% {
    transform: rotate(0deg);
  }
  81.687% {
    transform: rotate(0deg);
  }
  82.103% {
    transform: rotate(-24deg);
  }
  82.519% {
    transform: rotate(0deg);
  }
  82.935% {
    transform: rotate(24deg);
  }
  83.351% {
    transform: rotate(0deg);
  }
  84.749% {
    transform: rotate(0deg);
  }
  85.165% {
    transform: rotate(-24deg);
  }
  85.581% {
    transform: rotate(0deg);
  }
  85.997% {
    transform: rotate(24deg);
  }
  86.413% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes worker-b {
  0% {
    transform: translate(826px, 276px) scale(-0.94, 0.94);
  }
  50.426% {
    transform: translate(826px, 276px) scale(-0.94, 0.94);
  }
  51.064% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  51.976% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  53.191% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  53.222% {
    transform: translate(805px, 276px) scale(0.94, 0.94);
  }
  56.14% {
    transform: translate(902px, 276px) scale(0.94, 0.94);
  }
  57.508% {
    transform: translate(902px, 276px) scale(0.94, 0.94);
  }
  57.538% {
    transform: translate(902px, 276px) scale(-0.94, 0.94);
  }
  60.456% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  60.821% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  62.036% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  62.067% {
    transform: translate(805px, 276px) scale(0.94, 0.94);
  }
  63.86% {
    transform: translate(865px, 276px) scale(0.94, 0.94);
  }
  65.228% {
    transform: translate(865px, 276px) scale(0.94, 0.94);
  }
  65.258% {
    transform: translate(865px, 276px) scale(-0.94, 0.94);
  }
  67.052% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  68.48% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  69.696% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  69.726% {
    transform: translate(805px, 276px) scale(0.94, 0.94);
  }
  72.926% {
    transform: translate(911.25px, 276px) scale(0.94, 0.94);
  }
  74.293% {
    transform: translate(911.25px, 276px) scale(0.94, 0.94);
  }
  74.324% {
    transform: translate(911.25px, 276px) scale(-0.94, 0.94);
  }
  77.523% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  78.739% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  78.769% {
    transform: translate(805px, 276px) scale(0.94, 0.94);
  }
  80.843% {
    transform: translate(874.25px, 276px) scale(0.94, 0.94);
  }
  82.211% {
    transform: translate(874.25px, 276px) scale(0.94, 0.94);
  }
  82.242% {
    transform: translate(874.25px, 276px) scale(-0.94, 0.94);
  }
  84.316% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  84.468% {
    transform: translate(805px, 276px) scale(-0.94, 0.94);
  }
  84.498% {
    transform: translate(805px, 276px) scale(0.94, 0.94);
  }
  85.106% {
    transform: translate(826px, 276px) scale(0.94, 0.94);
  }
  85.137% {
    transform: translate(826px, 276px) scale(-0.94, 0.94);
  }
  100% {
    transform: translate(826px, 276px) scale(-0.94, 0.94);
  }
}
@keyframes worker-b-arm {
  0% {
    transform: rotate(0);
  }
  51.216% {
    transform: rotate(0);
  }
  51.976% {
    transform: rotate(-80deg);
  }
  53.191% {
    transform: rotate(-172deg);
  }
  56.14% {
    transform: rotate(-172deg);
  }
  56.892% {
    transform: rotate(-140deg);
  }
  57.508% {
    transform: rotate(-40deg);
  }
  58.419% {
    transform: rotate(0);
  }
  60.061% {
    transform: rotate(0);
  }
  60.821% {
    transform: rotate(-80deg);
  }
  62.036% {
    transform: rotate(-172deg);
  }
  63.86% {
    transform: rotate(-172deg);
  }
  64.612% {
    transform: rotate(-140deg);
  }
  65.228% {
    transform: rotate(-40deg);
  }
  66.14% {
    transform: rotate(0);
  }
  67.72% {
    transform: rotate(0);
  }
  68.48% {
    transform: rotate(-80deg);
  }
  69.696% {
    transform: rotate(-172deg);
  }
  72.926% {
    transform: rotate(-172deg);
  }
  73.678% {
    transform: rotate(-140deg);
  }
  74.293% {
    transform: rotate(-40deg);
  }
  75.205% {
    transform: rotate(0);
  }
  76.763% {
    transform: rotate(0);
  }
  77.523% {
    transform: rotate(-80deg);
  }
  78.739% {
    transform: rotate(-172deg);
  }
  80.843% {
    transform: rotate(-172deg);
  }
  81.596% {
    transform: rotate(-140deg);
  }
  82.211% {
    transform: rotate(-40deg);
  }
  83.123% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes worker-b-leg-f {
  0% {
    transform: rotate(0);
  }
  50.426% {
    transform: rotate(0deg);
  }
  50.585% {
    transform: rotate(24deg);
  }
  50.745% {
    transform: rotate(0deg);
  }
  50.904% {
    transform: rotate(-24deg);
  }
  51.064% {
    transform: rotate(0deg);
  }
  53.222% {
    transform: rotate(0deg);
  }
  53.587% {
    transform: rotate(24deg);
  }
  53.951% {
    transform: rotate(0deg);
  }
  54.316% {
    transform: rotate(-24deg);
  }
  54.681% {
    transform: rotate(0deg);
  }
  55.046% {
    transform: rotate(24deg);
  }
  55.41% {
    transform: rotate(0deg);
  }
  55.775% {
    transform: rotate(-24deg);
  }
  56.14% {
    transform: rotate(0deg);
  }
  57.538% {
    transform: rotate(0deg);
  }
  57.903% {
    transform: rotate(24deg);
  }
  58.267% {
    transform: rotate(0deg);
  }
  58.632% {
    transform: rotate(-24deg);
  }
  58.997% {
    transform: rotate(0deg);
  }
  59.362% {
    transform: rotate(24deg);
  }
  59.726% {
    transform: rotate(0deg);
  }
  60.091% {
    transform: rotate(-24deg);
  }
  60.456% {
    transform: rotate(0deg);
  }
  62.067% {
    transform: rotate(0deg);
  }
  62.366% {
    transform: rotate(24deg);
  }
  62.665% {
    transform: rotate(0deg);
  }
  62.964% {
    transform: rotate(-24deg);
  }
  63.262% {
    transform: rotate(0deg);
  }
  63.561% {
    transform: rotate(24deg);
  }
  63.86% {
    transform: rotate(0deg);
  }
  65.258% {
    transform: rotate(0deg);
  }
  65.557% {
    transform: rotate(24deg);
  }
  65.856% {
    transform: rotate(0deg);
  }
  66.155% {
    transform: rotate(-24deg);
  }
  66.454% {
    transform: rotate(0deg);
  }
  66.753% {
    transform: rotate(24deg);
  }
  67.052% {
    transform: rotate(0deg);
  }
  69.726% {
    transform: rotate(0deg);
  }
  70.046% {
    transform: rotate(24deg);
  }
  70.366% {
    transform: rotate(0deg);
  }
  70.686% {
    transform: rotate(-24deg);
  }
  71.006% {
    transform: rotate(0deg);
  }
  71.326% {
    transform: rotate(24deg);
  }
  71.646% {
    transform: rotate(0deg);
  }
  71.966% {
    transform: rotate(-24deg);
  }
  72.286% {
    transform: rotate(0deg);
  }
  72.606% {
    transform: rotate(24deg);
  }
  72.926% {
    transform: rotate(0deg);
  }
  74.324% {
    transform: rotate(0deg);
  }
  74.644% {
    transform: rotate(24deg);
  }
  74.964% {
    transform: rotate(0deg);
  }
  75.283% {
    transform: rotate(-24deg);
  }
  75.603% {
    transform: rotate(0deg);
  }
  75.923% {
    transform: rotate(24deg);
  }
  76.243% {
    transform: rotate(0deg);
  }
  76.563% {
    transform: rotate(-24deg);
  }
  76.883% {
    transform: rotate(0deg);
  }
  77.203% {
    transform: rotate(24deg);
  }
  77.523% {
    transform: rotate(0deg);
  }
  78.769% {
    transform: rotate(0deg);
  }
  79.115% {
    transform: rotate(24deg);
  }
  79.46% {
    transform: rotate(0deg);
  }
  79.806% {
    transform: rotate(-24deg);
  }
  80.152% {
    transform: rotate(0deg);
  }
  80.498% {
    transform: rotate(24deg);
  }
  80.843% {
    transform: rotate(0deg);
  }
  82.242% {
    transform: rotate(0deg);
  }
  82.587% {
    transform: rotate(24deg);
  }
  82.933% {
    transform: rotate(0deg);
  }
  83.279% {
    transform: rotate(-24deg);
  }
  83.625% {
    transform: rotate(0deg);
  }
  83.97% {
    transform: rotate(24deg);
  }
  84.316% {
    transform: rotate(0deg);
  }
  84.498% {
    transform: rotate(0deg);
  }
  84.65% {
    transform: rotate(24deg);
  }
  84.802% {
    transform: rotate(0deg);
  }
  84.954% {
    transform: rotate(-24deg);
  }
  85.106% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes worker-b-leg-b {
  0% {
    transform: rotate(0);
  }
  50.426% {
    transform: rotate(0deg);
  }
  50.585% {
    transform: rotate(-24deg);
  }
  50.745% {
    transform: rotate(0deg);
  }
  50.904% {
    transform: rotate(24deg);
  }
  51.064% {
    transform: rotate(0deg);
  }
  53.222% {
    transform: rotate(0deg);
  }
  53.587% {
    transform: rotate(-24deg);
  }
  53.951% {
    transform: rotate(0deg);
  }
  54.316% {
    transform: rotate(24deg);
  }
  54.681% {
    transform: rotate(0deg);
  }
  55.046% {
    transform: rotate(-24deg);
  }
  55.41% {
    transform: rotate(0deg);
  }
  55.775% {
    transform: rotate(24deg);
  }
  56.14% {
    transform: rotate(0deg);
  }
  57.538% {
    transform: rotate(0deg);
  }
  57.903% {
    transform: rotate(-24deg);
  }
  58.267% {
    transform: rotate(0deg);
  }
  58.632% {
    transform: rotate(24deg);
  }
  58.997% {
    transform: rotate(0deg);
  }
  59.362% {
    transform: rotate(-24deg);
  }
  59.726% {
    transform: rotate(0deg);
  }
  60.091% {
    transform: rotate(24deg);
  }
  60.456% {
    transform: rotate(0deg);
  }
  62.067% {
    transform: rotate(0deg);
  }
  62.366% {
    transform: rotate(-24deg);
  }
  62.665% {
    transform: rotate(0deg);
  }
  62.964% {
    transform: rotate(24deg);
  }
  63.262% {
    transform: rotate(0deg);
  }
  63.561% {
    transform: rotate(-24deg);
  }
  63.86% {
    transform: rotate(0deg);
  }
  65.258% {
    transform: rotate(0deg);
  }
  65.557% {
    transform: rotate(-24deg);
  }
  65.856% {
    transform: rotate(0deg);
  }
  66.155% {
    transform: rotate(24deg);
  }
  66.454% {
    transform: rotate(0deg);
  }
  66.753% {
    transform: rotate(-24deg);
  }
  67.052% {
    transform: rotate(0deg);
  }
  69.726% {
    transform: rotate(0deg);
  }
  70.046% {
    transform: rotate(-24deg);
  }
  70.366% {
    transform: rotate(0deg);
  }
  70.686% {
    transform: rotate(24deg);
  }
  71.006% {
    transform: rotate(0deg);
  }
  71.326% {
    transform: rotate(-24deg);
  }
  71.646% {
    transform: rotate(0deg);
  }
  71.966% {
    transform: rotate(24deg);
  }
  72.286% {
    transform: rotate(0deg);
  }
  72.606% {
    transform: rotate(-24deg);
  }
  72.926% {
    transform: rotate(0deg);
  }
  74.324% {
    transform: rotate(0deg);
  }
  74.644% {
    transform: rotate(-24deg);
  }
  74.964% {
    transform: rotate(0deg);
  }
  75.283% {
    transform: rotate(24deg);
  }
  75.603% {
    transform: rotate(0deg);
  }
  75.923% {
    transform: rotate(-24deg);
  }
  76.243% {
    transform: rotate(0deg);
  }
  76.563% {
    transform: rotate(24deg);
  }
  76.883% {
    transform: rotate(0deg);
  }
  77.203% {
    transform: rotate(-24deg);
  }
  77.523% {
    transform: rotate(0deg);
  }
  78.769% {
    transform: rotate(0deg);
  }
  79.115% {
    transform: rotate(-24deg);
  }
  79.46% {
    transform: rotate(0deg);
  }
  79.806% {
    transform: rotate(24deg);
  }
  80.152% {
    transform: rotate(0deg);
  }
  80.498% {
    transform: rotate(-24deg);
  }
  80.843% {
    transform: rotate(0deg);
  }
  82.242% {
    transform: rotate(0deg);
  }
  82.587% {
    transform: rotate(-24deg);
  }
  82.933% {
    transform: rotate(0deg);
  }
  83.279% {
    transform: rotate(24deg);
  }
  83.625% {
    transform: rotate(0deg);
  }
  83.97% {
    transform: rotate(-24deg);
  }
  84.316% {
    transform: rotate(0deg);
  }
  84.498% {
    transform: rotate(0deg);
  }
  84.65% {
    transform: rotate(-24deg);
  }
  84.802% {
    transform: rotate(0deg);
  }
  84.954% {
    transform: rotate(24deg);
  }
  85.106% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes sack-0 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  44.681% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  46.201% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  49.24% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  49.848% {
    transform: translate(791.33px, 227.8px) rotate(-10.28deg) scale(1);
  }
  50.456% {
    transform: translate(800px, 234.8px) rotate(0deg) scale(1);
  }
  54.119% {
    transform: translate(920.5px, 234.8px) rotate(0deg) scale(1);
  }
  54.871% {
    transform: translate(920.5px, 222.75px) rotate(0deg) scale(1);
  }
  55.486% {
    transform: translate(920.5px, 231.75px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(920.5px, 231.75px) rotate(0deg) scale(1);
  }
}
@keyframes sack-0-show {
  0% {
    opacity: 0;
  }
  44.65% {
    opacity: 0;
  }
  44.681% {
    opacity: 1;
  }
  55.486% {
    opacity: 1;
  }
  55.517% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-0 {
  0% {
    opacity: 0;
  }
  55.486% {
    opacity: 0;
  }
  55.517% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-1 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  47.416% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  48.936% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  51.976% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  52.584% {
    transform: translate(793.83px, 222.75px) rotate(-10.28deg) scale(1);
  }
  53.191% {
    transform: translate(805px, 229.75px) rotate(0deg) scale(1);
  }
  56.14% {
    transform: translate(902px, 229.75px) rotate(0deg) scale(1);
  }
  56.892% {
    transform: translate(902px, 220.75px) rotate(0deg) scale(1);
  }
  57.508% {
    transform: translate(902px, 231.75px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(902px, 231.75px) rotate(0deg) scale(1);
  }
}
@keyframes sack-1-show {
  0% {
    opacity: 0;
  }
  47.386% {
    opacity: 0;
  }
  47.416% {
    opacity: 1;
  }
  57.508% {
    opacity: 1;
  }
  57.538% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-1 {
  0% {
    opacity: 0;
  }
  57.508% {
    opacity: 0;
  }
  57.538% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-2 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  54.59% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  56.109% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  59.149% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  59.757% {
    transform: translate(791.33px, 227.8px) rotate(-10.28deg) scale(1);
  }
  60.365% {
    transform: translate(800px, 234.8px) rotate(0deg) scale(1);
  }
  62.903% {
    transform: translate(883.5px, 234.8px) rotate(0deg) scale(1);
  }
  63.655% {
    transform: translate(883.5px, 222.75px) rotate(0deg) scale(1);
  }
  64.271% {
    transform: translate(883.5px, 231.75px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(883.5px, 231.75px) rotate(0deg) scale(1);
  }
}
@keyframes sack-2-show {
  0% {
    opacity: 0;
  }
  54.559% {
    opacity: 0;
  }
  54.59% {
    opacity: 1;
  }
  64.271% {
    opacity: 1;
  }
  64.301% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-2 {
  0% {
    opacity: 0;
  }
  64.271% {
    opacity: 0;
  }
  64.301% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-3 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  56.261% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  57.781% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  60.821% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  61.429% {
    transform: translate(793.83px, 222.75px) rotate(-10.28deg) scale(1);
  }
  62.036% {
    transform: translate(805px, 229.75px) rotate(0deg) scale(1);
  }
  63.86% {
    transform: translate(865px, 229.75px) rotate(0deg) scale(1);
  }
  64.612% {
    transform: translate(865px, 220.75px) rotate(0deg) scale(1);
  }
  65.228% {
    transform: translate(865px, 231.75px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(865px, 231.75px) rotate(0deg) scale(1);
  }
}
@keyframes sack-3-show {
  0% {
    opacity: 0;
  }
  56.231% {
    opacity: 0;
  }
  56.261% {
    opacity: 1;
  }
  65.228% {
    opacity: 1;
  }
  65.258% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-3 {
  0% {
    opacity: 0;
  }
  65.228% {
    opacity: 0;
  }
  65.258% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-4 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  62.249% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  63.769% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  66.809% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  67.416% {
    transform: translate(791.33px, 227.8px) rotate(-10.28deg) scale(1);
  }
  68.024% {
    transform: translate(800px, 234.8px) rotate(0deg) scale(1);
  }
  69.438% {
    transform: translate(846.5px, 234.8px) rotate(0deg) scale(1);
  }
  70.19% {
    transform: translate(846.5px, 222.75px) rotate(0deg) scale(1);
  }
  70.805% {
    transform: translate(846.5px, 231.75px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(846.5px, 231.75px) rotate(0deg) scale(1);
  }
}
@keyframes sack-4-show {
  0% {
    opacity: 0;
  }
  62.219% {
    opacity: 0;
  }
  62.249% {
    opacity: 1;
  }
  70.805% {
    opacity: 1;
  }
  70.836% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-4 {
  0% {
    opacity: 0;
  }
  70.805% {
    opacity: 0;
  }
  70.836% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-5 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  63.921% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  65.441% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  68.48% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  69.088% {
    transform: translate(793.83px, 222.75px) rotate(-10.28deg) scale(1);
  }
  69.696% {
    transform: translate(805px, 229.75px) rotate(0deg) scale(1);
  }
  72.926% {
    transform: translate(911.25px, 229.75px) rotate(0deg) scale(1);
  }
  73.678% {
    transform: translate(911.25px, 214.25px) rotate(0deg) scale(1);
  }
  74.293% {
    transform: translate(911.25px, 223.25px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(911.25px, 223.25px) rotate(0deg) scale(1);
  }
}
@keyframes sack-5-show {
  0% {
    opacity: 0;
  }
  63.891% {
    opacity: 0;
  }
  63.921% {
    opacity: 1;
  }
  74.293% {
    opacity: 1;
  }
  74.324% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-5 {
  0% {
    opacity: 0;
  }
  74.293% {
    opacity: 0;
  }
  74.324% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-6 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  67.66% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  69.179% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  72.219% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  72.827% {
    transform: translate(791.33px, 227.8px) rotate(-10.28deg) scale(1);
  }
  73.435% {
    transform: translate(800px, 234.8px) rotate(0deg) scale(1);
  }
  76.254% {
    transform: translate(892.75px, 234.8px) rotate(0deg) scale(1);
  }
  77.006% {
    transform: translate(892.75px, 214.25px) rotate(0deg) scale(1);
  }
  77.622% {
    transform: translate(892.75px, 223.25px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(892.75px, 223.25px) rotate(0deg) scale(1);
  }
}
@keyframes sack-6-show {
  0% {
    opacity: 0;
  }
  67.629% {
    opacity: 0;
  }
  67.66% {
    opacity: 1;
  }
  77.622% {
    opacity: 1;
  }
  77.652% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-6 {
  0% {
    opacity: 0;
  }
  77.622% {
    opacity: 0;
  }
  77.652% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-7 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  72.964% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  74.483% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  77.523% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  78.131% {
    transform: translate(793.83px, 222.75px) rotate(-10.28deg) scale(1);
  }
  78.739% {
    transform: translate(805px, 229.75px) rotate(0deg) scale(1);
  }
  80.843% {
    transform: translate(874.25px, 229.75px) rotate(0deg) scale(1);
  }
  81.596% {
    transform: translate(874.25px, 214.25px) rotate(0deg) scale(1);
  }
  82.211% {
    transform: translate(874.25px, 223.25px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(874.25px, 223.25px) rotate(0deg) scale(1);
  }
}
@keyframes sack-7-show {
  0% {
    opacity: 0;
  }
  72.933% {
    opacity: 0;
  }
  72.964% {
    opacity: 1;
  }
  82.211% {
    opacity: 1;
  }
  82.242% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-7 {
  0% {
    opacity: 0;
  }
  82.211% {
    opacity: 0;
  }
  82.242% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sack-8 {
  0% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  75.881% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(0.3);
  }
  77.401% {
    transform: translate(744.25px, 257.41px) rotate(-20.56deg) scale(1);
  }
  80.441% {
    transform: translate(782.65px, 243.01px) rotate(-20.56deg) scale(1);
  }
  81.049% {
    transform: translate(791.33px, 227.8px) rotate(-10.28deg) scale(1);
  }
  81.657% {
    transform: translate(800px, 234.8px) rotate(0deg) scale(1);
  }
  83.351% {
    transform: translate(855.75px, 234.8px) rotate(0deg) scale(1);
  }
  84.103% {
    transform: translate(855.75px, 214.25px) rotate(0deg) scale(1);
  }
  84.719% {
    transform: translate(855.75px, 223.25px) rotate(0deg) scale(1);
  }
  100% {
    transform: translate(855.75px, 223.25px) rotate(0deg) scale(1);
  }
}
@keyframes sack-8-show {
  0% {
    opacity: 0;
  }
  75.851% {
    opacity: 0;
  }
  75.881% {
    opacity: 1;
  }
  84.719% {
    opacity: 1;
  }
  84.749% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lorry-bag-8 {
  0% {
    opacity: 0;
  }
  84.719% {
    opacity: 0;
  }
  84.749% {
    opacity: 1;
  }
  99.392% {
    opacity: 1;
  }
  99.422% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--crimson);
  color: #f2f4f4;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .paddy-layer,
  .save-btn::after,
  .card-prompt {
    animation: none;
  }

  /* The harvest holds still: the tractor at the mill with its load, the rice heaped, the lorry loaded */
  .harvest-scene,
  .harvest-scene * {
    animation: none !important;
  }

  .lorry-bag {
    opacity: 1;
  }

  .save-btn::after {
    display: none;
  }
}