:root {
  --matka: #C4401B; --haldi: #F4B223; --soil: #2A1810; --mehendi: #3F7A35; --jowar: #F7EEDC; --muted: #6E5847;
  --line: rgba(42,24,16,.14); --sky: var(--soil);
  --serif: "Fraunces", Georgia, serif; --sans: "Anek Latin", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--jowar); color: var(--soil); font: 18px/1.5 var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 650; font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.02em; line-height: .95; text-transform: lowercase; margin: 0; }
.dot { display: inline-block; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--matka); vertical-align: baseline; }
.dark .lines .dot, .order-sky .dot { background: var(--haldi); }

/* header */
.bar { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(20px, 5vw, 120px); pointer-events: none; }
.bar a { pointer-events: auto; }
.logo { height: 40px; width: auto; display: block; }
.logo.on-light, .dark .logo.on-dark { display: block; } .logo.on-dark, .dark .logo.on-light { display: none; }
.pill { font: 700 16px var(--sans); padding: .6em 1.2em; border-radius: 999px; background: var(--matka); color: var(--jowar); text-decoration: none; }
.dark .pill { background: var(--haldi); color: var(--soil); }

/* the film: a sticky stage scrubbed by scroll */
.film { height: 740vh; height: 740svh; position: relative; touch-action: pan-y pinch-zoom; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: clip; background: linear-gradient(#7198c9, #f2b3bc); }
canvas.gl { pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s; }
.gl canvas.gl { opacity: 1; }
.gl .sky > .sun, .gl .sky > .pod, .gl .horizon, .gl .rows { visibility: hidden; }
.gl .soil { background: none; }

/* SVG fallback stage (no WebGL or reduced motion) */
.sky { position: absolute; inset: 0 0 38%; }
.horizon { position: absolute; left: 0; right: 0; top: 62%; height: 2px; background: var(--haldi); transform: scaleX(var(--line, 0)); }
.sun { position: absolute; left: 50%; bottom: 0; width: min(46vw, 420px); aspect-ratio: 1; margin-left: max(-23vw, -210px); border-radius: 50%;
  background: var(--haldi); transform: translateY(calc((1 - var(--sun, 0) * .55) * 100%)); }
.haldi .sun, body:not(.dark) .sun { background: var(--matka); }
.pod { position: absolute; left: 50%; bottom: -12%; width: min(78vw, 640px); transform: translateX(-50%) scale(calc(.7 + .3 * var(--pod, 0))); opacity: var(--pod, 0); overflow: visible; }
.pod .beans { fill: color-mix(in srgb, var(--mehendi) 70%, var(--jowar)); transform: scale(calc(.9 + .1 * var(--open, 0))); transform-origin: 200px 0; }
.pod .shell { fill: var(--mehendi); stroke: var(--soil); stroke-width: 2; }
.pod .stem { fill: none; stroke: var(--mehendi); stroke-width: 6; stroke-linecap: round; }
.pod .top { transform: translateY(calc(var(--open, 0) * -52px)) rotate(calc(var(--open, 0) * -7deg)); transform-origin: 0 0; }
.pod .bottom { transform: translateY(calc(var(--open, 0) * 52px)) rotate(calc(var(--open, 0) * 7deg)); transform-origin: 0 0; }
.soil { position: absolute; inset: 62% 0 0; background: var(--soil); }
.rows { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--mehendi); opacity: .35; transform: scaleY(var(--rows, 0)); transform-origin: top; }

/* captions sit in the sky, facts sit in the soil */
.lines { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.lines li { position: absolute; left: 0; right: 0; top: 14vh; padding: 0 clamp(20px, 6vw, 120px); text-align: center; opacity: 0; }
.lines h1, .lines h2 { font-size: clamp(36px, 4.5vw, 66px); max-width: 20ch; margin: 0 auto; color: var(--soil); }
.dark .lines h1, .dark .lines h2 { color: var(--jowar); }
.mr { font: 700 clamp(30px, 5vw, 72px)/1.2 "Baloo 2", var(--sans); margin: 0 auto; max-width: 18ch; color: var(--soil); }
.lines h2, .mr { text-shadow: 0 0 40px color-mix(in srgb, var(--sky) 70%, transparent); }
.cue { position: absolute; left: 0; right: 0; bottom: 42%; margin: 0; text-align: center; font: 700 13px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--jowar); opacity: calc(1 - var(--line, 0) * 3); }
.facts { position: absolute; left: 0; right: 0; bottom: 0; list-style: none; margin: 0; padding: 22px clamp(20px, 5vw, 120px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  font: 700 14px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--haldi);
  background: linear-gradient(transparent, color-mix(in srgb, var(--soil) 85%, transparent)); }

/* order: a horizon of its own, the message in a Matka sky and the form in the soil */
.order-sky { background: var(--mehendi); color: var(--jowar); padding: clamp(72px, 12vw, 160px) clamp(20px, 5vw, 120px) 56px; }
.order-sky h2 { font-size: clamp(48px, 8vw, 104px); max-width: 12ch; }
.order-sky p { max-width: 34ch; margin: 1.2rem 0 0; font-size: 20px; }
.order-soil { background: var(--soil); color: var(--jowar); padding: 56px clamp(20px, 5vw, 120px) 96px; }
.order-soil form { max-width: 34rem; display: grid; gap: 1.1rem; }
.order-soil label { display: grid; gap: .35rem; font-weight: 600; font-size: 15px; }
input, textarea, select, button { font: inherit; }
.order-soil input:not([type=radio]), .order-soil textarea { padding: .7rem .85rem; border: 0; border-radius: 10px; background: var(--jowar); color: var(--soil); }
.order-soil :focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }
.qty { border: 0; padding: 0; margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.qty legend { font: 700 13px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--haldi); margin-bottom: .5rem; }
.qty label { display: block; }
.qty input { position: absolute; opacity: 0; }
.qty span { display: block; padding: .55rem 1.1rem; border: 1.5px solid color-mix(in srgb, var(--jowar) 35%, transparent); border-radius: 999px; cursor: pointer; font-weight: 600; }
.qty input:checked + span { background: var(--haldi); color: var(--soil); border-color: var(--haldi); }
.qty input:focus-visible + span { outline: 3px solid var(--haldi); outline-offset: 2px; }
.sum { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; margin: .5rem 0 0; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--jowar) 20%, transparent); }
.sum dd { margin: 0; text-align: right; }
.order-soil button { padding: .85rem 1.4rem; border: 0; border-radius: 999px; background: var(--haldi); color: var(--soil); font-weight: 700; font-size: 18px; cursor: pointer; justify-self: start; }
button:disabled { opacity: .5; }
#msg { color: var(--haldi); margin: 0; }
.done { font: 650 clamp(36px, 5vw, 60px)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; margin: 0; }
.done small { display: block; margin-top: 1rem; font: 400 18px/1.5 var(--sans); }
.done .dot { background: var(--haldi); }
.foot { background: var(--soil); color: var(--jowar); padding: 40px clamp(20px, 5vw, 120px) 56px; border-top: 1px solid color-mix(in srgb, var(--jowar) 12%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot p { margin: 0; flex: 1; font-size: 15px; opacity: .8; }
.share { padding: .6rem 1.2rem; border-radius: 999px; border: 1.5px solid var(--haldi); background: none; color: var(--haldi); font-weight: 700; cursor: pointer; }

/* backoffice */
.admin { padding: 1rem clamp(16px, 4vw, 48px); max-width: 76rem; margin: 0 auto; font-size: 15px; }
.admin h1 { font-size: 48px; margin: 1rem 0 1.5rem; }
.admin h2 { font-size: 28px; margin-bottom: .75rem; }
.admin section { margin-bottom: 2.5rem; overflow-x: auto; }
.admin table { border-collapse: collapse; width: 100%; margin-bottom: .75rem; background: #fff8ec; }
.admin th { font: 700 12px var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.admin th, .admin td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin form { display: inline-flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.admin input, .admin select { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.admin input[type=number] { width: 6rem; }
.admin button { padding: .4rem .9rem; border: 0; border-radius: 999px; background: var(--matka); color: var(--jowar); font-weight: 700; cursor: pointer; }
.admin .err { color: var(--matka); font-weight: 600; }
.admin .hint { color: var(--muted); }

/* over the 3D film: Jowar captions with a soft soil shadow, whatever the frame behind */
.gl .lines h1, .gl .lines h2, .gl .mr { color: var(--jowar); text-shadow: 0 2px 28px rgba(42,24,16,.55), 0 1px 3px rgba(42,24,16,.35); }
.gl .lines .dot { background: var(--haldi); }
.gl .logo.on-dark { display: block; } .gl .logo.on-light { display: none; }
.gl .pill { background: var(--haldi); color: var(--soil); }
.gl .stage::after { content: ""; position: absolute; inset: 0 0 auto; height: 35%; pointer-events: none; background: linear-gradient(rgba(23,38,52,.16), transparent); }
.gl .lines, .gl .cue { z-index: 1; }
.sky-intro .lines h1, .gl.sky-intro .lines h1, .sky-intro .cue { color: var(--soil); text-shadow: none; }
.sky-intro .logo.on-dark, .gl.sky-intro .logo.on-dark { display: none; }
.sky-intro .logo.on-light, .gl.sky-intro .logo.on-light { display: block; }
.sky-intro .scene-nav button { color: var(--soil); text-shadow: none; }
.sky-intro .scene-nav button[aria-pressed="true"] { color: var(--soil); border-bottom-color: var(--matka); }
.scene-nav { position: absolute; z-index: 4; bottom: 84px; left: clamp(20px,5vw,120px); display: flex; gap: 22px; }
.scene-nav button { padding: 9px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--jowar); font-size: 14px; text-shadow: 0 1px 4px #2a1810; cursor: pointer; }
.scene-nav button[aria-pressed=true] { border-color: var(--haldi); color: var(--haldi); }
.journey-track { position: absolute; z-index: 4; height: 2px; left: 0; right: 0; bottom: 0; background: #f7eedc35; }
.journey-track span { display: block; height: 100%; background: var(--haldi); transform: scaleX(var(--progress,0)); transform-origin: left; }
::selection { background: var(--haldi); color: var(--soil); }
:focus-visible { outline: 2px solid var(--haldi); outline-offset: 5px; }
input, textarea { caret-color: var(--matka); }
@media (max-width: 700px) { .scene-nav { bottom: 100px; gap: 22px; } .lines li { top: 15vh; } .lines h1, .lines h2 { font-size: clamp(34px,8vw,48px); max-width: 17ch; } .facts { font-size: 11px; letter-spacing: .12em; gap: 6px 14px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media (max-width: 700px) {
  .sky-intro .scene-nav button { color: var(--jowar); text-shadow: 0 1px 4px var(--soil), 0 1px 2px var(--soil); }
  .sky-intro .scene-nav button[aria-pressed="true"] { color: var(--haldi); border-bottom-color: var(--haldi); }
}

/* Delivery and bulk enquiries share the same clear, touch-friendly form. */
[hidden] { display: none !important; }
.delivery-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.order-soil select { width: 100%; padding: .7rem .85rem; border: 0; border-radius: 10px; background: var(--jowar); color: var(--soil); min-height: 48px; }
.order-soil input, .order-soil textarea, .order-soil select { min-width: 0; font-size: 16px; }
.order-soil textarea { resize: vertical; }
.qty span { min-height: 48px; display: flex; align-items: center; justify-content: center; }
.form-note { margin: 0; font-size: 16px; color: var(--jowar); }
#order-submit { min-height: 52px; }
#availability-retry { font-size: 16px; }
.done p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.admin a { color: var(--mehendi); }
.admin h1 { margin-block: 1rem 2rem; }
.admin h3 { margin: 0 0 .7rem; font: 600 24px var(--serif); }
.admin-control { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; background: #e7e5cf; padding: 1.5rem; }
.admin-control p { margin-bottom: 0; max-width: 55ch; }
.inventory-grid,.callback-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.stock-panel,.callback-panel { padding: 1.25rem; border: 1px solid var(--line); }
.admin .stock-panel form,.admin .callback-panel form { display: flex; margin-top: 1rem; align-items: end; }
.admin form label { display: grid; gap: .3rem; }
.admin input,.admin select,.admin button { min-height: 44px; font-size: 16px; }
.admin input[type=number] { width: 8rem; }
.admin .secondary { background: var(--soil); }
.admin .transfer-form,.admin .affiliate-form { display: flex; align-items: end; gap: .8rem; padding-top: 1.25rem; }
.table-scroll { overflow-x: auto; }
.admin .table-scroll table { min-width: 700px; width: 100%; }
.admin .table-scroll small { white-space: normal; }
@media(max-width:700px){
  .delivery-fields { grid-template-columns: 1fr; }
  .qty { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; }
  .qty label:last-child { grid-column: span 3; }
  .qty legend { margin-bottom: .75rem; }
  #order-submit { width: 100%; }
  .admin-control { align-items: stretch; flex-direction: column; }
  .inventory-grid,.callback-grid { grid-template-columns: 1fr; }
  .admin .transfer-form,.admin .affiliate-form { display: grid; grid-template-columns: 1fr 1fr; }
  .admin .transfer-form button,.admin .affiliate-form button { grid-column: 1 / -1; }
  .admin input,.admin select { max-width: 100%; }
}

html { scroll-padding-top: 88px; }
.ordering .bar { background: var(--soil); border-bottom: 1px solid #f7eedc24; }
.ordering .bar .on-dark { display: block; }
.ordering .bar .on-light { display: none; }
.order-soil label { scroll-margin-top: 100px; }
.order-soil input,.order-soil textarea,.order-soil select { scroll-margin-top: 100px; }
.admin section,.admin form,.admin form label,.stock-panel,.callback-panel { min-width: 0; }
.admin .table-scroll { max-width: 100%; }
.admin form input:not([type=hidden]),.admin form select { min-width: 0; }
@media(max-width:700px){
  .admin .transfer-form,.admin .affiliate-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin .affiliate-form input { width: 100%; }
}
.admin .table-scroll { position: relative; }
.sr-only { left: 0; top: 0; }

/* Each ordering step occupies one fold; content can still scroll with a keyboard or zoom. */
.order { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); height:calc(100svh - 76px); min-height:0; scroll-margin-top:0; }
.order-sky { padding:clamp(24px,5vw,72px); display:flex; flex-direction:column; justify-content:center; }
.order-sky h2 { font-size:clamp(40px,5.5vw,80px); }
.order-sky p { font-size:18px; }
.order-soil { min-height:0; padding:24px clamp(20px,4vw,64px); display:flex; align-items:center; }
.order-soil form { width:100%; max-width:38rem; max-height:100%; grid-template-rows:auto minmax(0,1fr) auto auto; gap:14px; }
.form-progress { margin:0; font-size:15px; color:var(--haldi); }
.form-panel { min-height:0; overflow-y:auto; overscroll-behavior:contain; display:grid; align-content:start; gap:14px; padding:4px; margin:-4px; scrollbar-color:var(--haldi) var(--soil); scrollbar-width:thin; }
.contact-fields,.delivery-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.order-soil label { min-width:0; }
.qty { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.qty label:last-child { grid-column:1 / -1; }
.qty span { padding:8px 4px; min-height:44px; }
.form-actions { display:flex; gap:12px; }
.form-actions button { min-height:48px; flex:1; }
.order-soil #order-back { flex:0 0 auto; color:var(--jowar); background:transparent; border:1px solid #f7eedc66; }
.order-soil input:not([type=radio]),.order-soil select { min-height:44px; padding:8px 12px; }
.order-soil textarea { min-height:64px; padding:8px 12px; }
.sum { font-size:16px; padding-top:10px; margin:0; gap:0 16px; }
#msg:empty { display:none; }
#msg { font-size:15px; max-height:4.5em; overflow:auto; }
@media(max-width:700px){
  html { scroll-padding-top:64px; }
  .ordering .bar { height:64px; padding-block:12px; }
  .ordering .logo { height:32px; }
  .order { height:calc(100svh - 64px); grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .order-sky { padding:18px 20px; }
  .order-sky h2 { font-size:34px; max-width:none; }
  .order-sky p { font-size:15px; line-height:1.3; margin:8px 0 0; max-width:45ch; }
  .order-soil { padding:16px 20px max(16px,env(safe-area-inset-bottom)); align-items:stretch; }
  .order-soil form { gap:10px; max-width:none; }
  .form-panel { gap:10px; }
  .order-soil label { font-size:14px; gap:4px; }
  .qty legend { margin-bottom:8px; }
  .form-note { font-size:14px; line-height:1.3; }
  .order-soil button { padding:10px 18px; }
}
@media(max-height:600px){
  .order-sky { padding:12px 20px; }
  .order-sky h2 { font-size:30px; }
  .order-sky p { font-size:14px; margin-top:6px; }
  .order-soil { padding:12px 20px; }
  .order-soil form,.form-panel { gap:8px; }
}
@media(max-height:480px) and (min-width:600px){
  .order { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); grid-template-rows:minmax(0,1fr); }
}

@media(max-width:700px){
  .order[data-step="2"] .order-sky p { display:none; }
  .sum { line-height:1.25; }
}
@media(min-width:701px){ html { scroll-padding-top:76px; } }

@media(max-width:700px){ .order[data-bulk="true"] .order-sky p { display:none; } }

.quantity-total { margin:0; display:flex; justify-content:space-between; align-items:baseline; font-size:18px; color:var(--jowar); }
.quantity-total strong { color:var(--haldi); font-size:24px; font-variant-numeric:tabular-nums; }

.admin .price-form { display:grid; gap:16px; }
.price-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.admin .price-grid input { width:100%; }
.admin .price-form button { justify-self:start; }
@media(max-width:700px){ .price-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }

/* A checked sun rises above planted rows; sprouts unfurl and one harvest burst settles. */
.order-confirmation { width:100%; max-width:38rem; max-height:100%; overflow-y:auto; overflow-x:hidden; padding:4px; margin:-4px; text-align:center; font:400 18px/1.4 var(--sans); scrollbar-color:var(--haldi) var(--soil); scrollbar-width:thin; }
.harvest-seal { position:relative; width:240px; height:180px; margin:0 auto 12px; isolation:isolate; }
.harvest-seal svg { position:relative; display:block; width:100%; height:100%; z-index:1; overflow:visible; }
.confirmation-stamp { transform-origin:120px 67px; animation:confirmation-stamp-land 780ms both; }
.confirmation-check { transform-origin:120px 67px; animation:confirmation-check-land 520ms 420ms both; }
.confirmation-impact { transform-origin:120px 67px; opacity:0; animation:confirmation-impact 850ms 430ms cubic-bezier(.16,1,.3,1) both; }
.confirmation-impact-2 { animation-delay:560ms; }
.confirmation-field { transform-origin:120px 166px; animation:confirmation-field-grow 650ms 120ms cubic-bezier(.16,1,.3,1) both; }
.confirmation-sprout { transform-origin:46px 119px; animation:confirmation-sprout-grow 750ms 550ms cubic-bezier(.16,1,.3,1) both; }
.confirmation-sprout-right { animation-delay:670ms; }
.confirmation-burst { position:absolute; top:50%; left:50%; z-index:2; display:block; pointer-events:none; width:8px; height:16px; background:#b8ce85; opacity:0; animation:confirmation-burst var(--burst-duration) var(--burst-delay) both; }
.confirmation-burst:nth-of-type(3n) { background:var(--haldi); }
.confirmation-burst:nth-of-type(3n + 1) { background:var(--mehendi); }
.confirmation-burst-leaf { border-radius:2px 100% 2px 100%; }
.confirmation-burst-spark { width:16px; height:16px; clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%); }
.confirmation-title { margin:0; font:650 clamp(32px,3.8vw,48px)/1.05 var(--serif); font-variation-settings:"SOFT" 100,"WONK" 1; letter-spacing:-.02em; text-wrap:balance; }
.order-confirmation .confirmation-reference { margin:10px 0 2px; color:var(--haldi); font-size:16px; }
.order-confirmation .confirmation-quantity { font-size:18px; }
.confirmation-delivery { display:grid; gap:4px; margin:22px 0 16px; }
.confirmation-label { font-size:16px; }
.confirmation-date { color:var(--haldi); font:600 clamp(22px,2.3vw,30px)/1.2 var(--sans); text-wrap:balance; }
.confirmation-receipt { display:grid; grid-template-columns:1fr auto; gap:6px 16px; text-align:left; border-block:1px solid #f7eedc33; padding:14px 0; margin:0 auto; max-width:28rem; font-size:16px; }
.confirmation-receipt dt { overflow-wrap:anywhere; }.confirmation-receipt dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.confirmation-total { font-weight:600; }
.order-confirmation .confirmation-note { max-width:38ch; margin:16px auto 0; font-size:16px; line-height:1.4; color:var(--jowar); }
@keyframes confirmation-stamp-land {
  0% { transform:translateY(34px) scale(.65) rotate(-12deg); opacity:.15; animation-timing-function:cubic-bezier(.32,0,.67,0); }
  54% { transform:translateY(3px) scale(1.12,.94) rotate(3deg); opacity:1; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  78% { transform:translateY(-2px) scale(.98,1.02) rotate(-1deg); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  100% { transform:translateY(0) scale(1) rotate(0); opacity:1; }
}
@keyframes confirmation-field-grow {
  from { transform:scaleY(.15); opacity:.3; }
  to { transform:scaleY(1); opacity:1; }
}
@keyframes confirmation-sprout-grow {
  from { transform:scale(.05) rotate(-16deg); opacity:0; }
  to { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes confirmation-check-land {
  0% { transform:scale(.25) rotate(-10deg); opacity:0; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  58% { transform:scale(1.13) rotate(2deg); opacity:1; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes confirmation-impact {
  0% { transform:scale(.8); opacity:.75; }
  100% { transform:scale(1.65); opacity:0; }
}
@keyframes confirmation-burst {
  0% { transform:translate(calc(-50% + var(--burst-from-x)),calc(-50% + var(--burst-from-y))) scale(.3) rotate(0); opacity:0; animation-timing-function:cubic-bezier(.12,.8,.2,1); }
  6% { opacity:1; }
  45% { transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(1) rotate(var(--burst-turn)); opacity:1; animation-timing-function:cubic-bezier(.4,0,1,1); }
  100% { transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-fall-y))) scale(.5) rotate(calc(var(--burst-turn) * 1.5)); opacity:0; }
}
@media(max-width:700px){
  .order[data-confirmed="true"] { grid-template-rows:minmax(0,1fr); }
  .order[data-confirmed="true"] .order-sky { display:none; }
  .order[data-confirmed="true"] .order-soil { align-items:center; }
  .harvest-seal { width:216px; height:162px; margin-bottom:10px; }
  .confirmation-title { font-size:36px; }
  .confirmation-delivery { margin-top:20px; }
}
@media(max-height:650px){
  .harvest-seal { width:160px; height:120px; margin-bottom:8px; }
  .confirmation-title { font-size:30px; }
  .confirmation-delivery { margin:14px 0 12px; }
  .confirmation-receipt { padding-block:10px; }
  .order-confirmation .confirmation-note { margin-top:12px; }
}
@media(prefers-reduced-motion:reduce){
  .confirmation-stamp,.confirmation-check,.confirmation-impact,.confirmation-burst,.confirmation-field,.confirmation-sprout { animation:none; }
  .confirmation-impact,.confirmation-burst { display:none; }
}
