/* =====================================================================
   FARM DRAWINGS
   The drawings are still pictures by default. Everything that moves is
   scoped to html.af-farmart-js, which is only set when the reader has not
   asked for reduced motion (AF_Farm_Art::motion_flag). Under that class
   each drawing waits on its first frame, paused, until farm-art.js adds
   .is-in as it scrolls into view. Only transform and opacity animate,
   inside boxes whose size is fixed by the SVG's own width and height, so
   nothing around a drawing ever moves.
   ===================================================================== */

.af-farmart{
  display:block;
  height:auto;
  max-width:100%;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
}

/* Parts that turn or tip do so around their own centre or foot. */
.af-farmart .afa-wb__wheel,
.af-farmart .afa-tr__w,
.af-farmart .afa-bn__rays{transform-box:fill-box;transform-origin:50% 50%}
.af-farmart .afa-wm__flower,
.af-farmart .afa-bn__tree,
.af-farmart .afa-bn__pine,
.af-farmart .afa-wc__sprout{transform-box:fill-box;transform-origin:50% 100%}
.af-farmart .afa-wm__sails{transform-box:view-box;transform-origin:90px 60px}
.af-farmart .afa-wc__can{transform-box:view-box;transform-origin:78px 112px}

/* ---- the timing, shared ------------------------------------------ */
/* Every part's animation is written as one shorthand carrying its own
   easing and fill ("both", so a delayed part waits on its first frame
   and every part ends on the drawing's still pose). The hold below is
   !important because a shorthand resets play-state to running, and it
   has to beat all of them until the drawing is in view. */
.af-farmart{--afa-ease:cubic-bezier(.22,1,.36,1)}
.af-farmart-js .af-farmart:not(.is-in) *{animation-play-state:paused!important}
.af-farmart-js .af-farmart.is-reset *{animation:none!important}

/* ---- wheelbarrow: rolls in, the wheel turning with the distance --- */
.af-farmart-js .afa-wb{animation:afa-roll-in 1.1s var(--afa-ease) both}
.af-farmart-js .afa-wb__wheel{animation:afa-wb-wheel 1.1s var(--afa-ease) both}
@keyframes afa-roll-in{from{transform:translateX(-44px);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
/* 44px along a 15px wheel is 168 degrees. */
@keyframes afa-wb-wheel{from{transform:rotate(-168deg)}to{transform:none}}

/* ---- windmill: one and a half turns, coming to rest --------------- */
.af-farmart-js .afa-wm__sails{animation:afa-spin 2.6s cubic-bezier(.16,1,.3,1) both}
.af-farmart-js .afa-wm__cloud--a{animation:afa-drift 2.6s var(--afa-ease) both}
.af-farmart-js .afa-wm__cloud--b{animation:afa-drift-b 2.6s var(--afa-ease) both}
.af-farmart-js .afa-wm__flower{animation:afa-nod 1.6s ease-in-out .3s both}
.af-farmart-js .afa-wm__flower--b{animation-delay:.5s}
@keyframes afa-spin{from{transform:rotate(-540deg)}to{transform:none}}
@keyframes afa-drift{from{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}
@keyframes afa-drift-b{from{transform:translateX(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes afa-nod{0%,100%{transform:none}35%{transform:rotate(-7deg)}70%{transform:rotate(3deg)}}

/* ---- tractor: pulls the hay in and stops ------------------------- */
.af-farmart-js .afa-tr{animation:afa-drive 1.6s var(--afa-ease) both}
/* 60px of road: 191deg on the 18px rear wheel, 312 on the 11px front,
   491 on the trailer's 7px wheels. */
.af-farmart-js .afa-tr__w--rear{animation:afa-w-rear 1.6s var(--afa-ease) both}
.af-farmart-js .afa-tr__w--front{animation:afa-w-front 1.6s var(--afa-ease) both}
.af-farmart-js .afa-tr__w--cart{animation:afa-w-cart 1.6s var(--afa-ease) both}
.af-farmart-js .afa-tr__load{animation:afa-settle 1.9s ease-out both}
.af-farmart-js .afa-tr__puff{animation:afa-puff 1.4s ease-out .4s both}
@keyframes afa-drive{from{transform:translateX(-60px);opacity:0}25%{opacity:1}to{transform:none;opacity:1}}
@keyframes afa-w-rear{from{transform:rotate(-191deg)}to{transform:none}}
@keyframes afa-w-front{from{transform:rotate(-312deg)}to{transform:none}}
@keyframes afa-w-cart{from{transform:rotate(-491deg)}to{transform:none}}
@keyframes afa-settle{0%,70%,100%{transform:none}80%{transform:translateX(2px)}90%{transform:translateX(-1px)}}
@keyframes afa-puff{from{transform:translate(-4px,10px) scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---- barn: the sun comes up, the trees move in the breeze -------- */
.af-farmart-js .afa-bn__sun{animation:afa-rise 1.6s var(--afa-ease) both}
.af-farmart-js .afa-bn__rays{animation:afa-rays 2.2s var(--afa-ease) both}
.af-farmart-js .afa-bn__tree{animation:afa-nod 1.8s ease-in-out .4s both}
.af-farmart-js .afa-bn__pine{animation:afa-nod 1.8s ease-in-out .6s both}
@keyframes afa-rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes afa-rays{from{transform:rotate(-60deg);opacity:0}to{transform:none;opacity:1}}

/* ---- watering can: tips, three drops fall, a sprout comes up ----- */
.af-farmart-js .afa-wc__can{animation:afa-tip 2s ease-in-out both}
.af-farmart-js .afa-wc__drop{animation:afa-drop .8s ease-in .5s both}
.af-farmart-js .afa-wc__drop--2{animation-delay:.7s}
.af-farmart-js .afa-wc__drop--3{animation-delay:.9s}
.af-farmart-js .afa-wc__sprout{animation:afa-grow .9s cubic-bezier(.34,1.56,.64,1) 1.3s both}
@keyframes afa-tip{0%,100%{transform:none}30%,65%{transform:rotate(-9deg)}}
@keyframes afa-drop{from{transform:translateY(-12px);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
@keyframes afa-grow{from{transform:scale(.1);opacity:0}to{transform:none;opacity:1}}

/* A belt and braces for readers who asked for less motion after the
   page had loaded (the head flag is read once). */
@media (prefers-reduced-motion:reduce){
  .af-farmart *{animation:none!important}
}

/* =====================================================================
   PLACEMENTS
   ===================================================================== */

/* ---- the cart page, empty: in place of the grey trolley disc ------ */
.af-empty .af-empty__art{
  width:170px;
  margin:0 auto 20px;
}

/* ---- the basket drawer, empty ------------------------------------ */
.woocommerce-mini-cart__empty-message .af-farmart--drawer{
  width:150px;
  margin:8px auto 0;
  align-self:center;
}

/* ---- order confirmation: the tractor in the hero's top corner -----
   Printed on woocommerce_before_thankyou, so it is the grid's first child
   rather than inside the hero (whose template belongs to the thank-you
   module). Taken out of the grid with position:absolute and pinned inside
   the hero's top right corner, which is the container's top right in both
   the one- and two-column layouts: no grid track, no hole, nothing moves.
   The sizes keep it clear of "Am primit comanda ta." at every width: the
   title starts 106px down, below the tick. */
body.af-ty .af-ty{position:relative}
body.af-ty .af-farmart--thankyou{
  position:absolute;
  z-index:1;
  top:30px;
  right:22px;
  width:120px;
  pointer-events:auto;
}
@media (min-width:700px){body.af-ty .af-farmart--thankyou{width:150px;top:26px}}
@media (min-width:1080px){body.af-ty .af-farmart--thankyou{width:210px;top:34px;right:34px}}

/* ---- contact and FAQ: the drawing beside the opening words -------
   WAITING FOR ONE LINE in the owning module. The contact page
   (inc/ux/class-af-contact.php) and the FAQ (inc/faq/class-af-faq.php)
   belong to other modules and offer no hook inside their introduction,
   so the drawings are ready here but only appear once those owners add
     do_action( 'af_farm_art', 'barn', 'af-farmart--contact' );
     do_action( 'af_farm_art', 'watering-can', 'af-farmart--faq' );
   as the first child of .af-contact__lead / .af-faq__lead. Until then
   these rules match nothing. The same goes for .af-empty__art on the
   cart page (woocommerce/cart/cart-empty.php, the checkout module's).

   On a phone the drawing sits on its own line above the heading, small
   and to the left like the heading itself. It used to float beside the
   words, but a 390px screen minus a 112px drawing left a column so
   narrow the subtitle broke every two or three words. With room, the
   introduction becomes two columns and the drawing sits centred against
   the words instead of adding its own height under them. */
.af-contact__lead .af-farmart--contact,
.af-faq__lead .af-farmart--faq{
  width:96px;
  margin:0 0 12px;
}

@media (min-width:768px){
  .af-contact__lead:has(> .af-farmart),
  .af-faq__lead:has(> .af-farmart){
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:40px;
    align-items:center;
  }
  .af-contact__lead > :not(.af-farmart),
  .af-faq__lead > :not(.af-farmart){grid-column:1}
  .af-contact__lead .af-farmart--contact,
  .af-faq__lead .af-farmart--faq{
    grid-column:2;
    grid-row:1 / span 6;
    margin:0;
  }
  .af-contact__lead .af-farmart--contact{width:140px}
  .af-faq__lead .af-farmart--faq{width:140px}
}

@media (max-width:600px){
  .af-empty .af-empty__art{width:150px}
}

/* ---- the 404 page ------------------------------------------------ */
.af-nf{
  max-width:640px;
  margin:0 auto;
  padding:8px 0 64px;
  text-align:center;
  color:#1d1d1f;
}
.af-nf .af-nf__art{width:220px;margin:0 auto 20px}
.af-nf .af-nf__title{
  margin:0 0 10px;
  font-size:28px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
  color:#1d1d1f;
}
.af-nf .af-nf__lead{
  margin:0 auto 28px;
  max-width:34em;
  font-size:18px;
  line-height:1.55;
  color:#3a3a3c;
}
.af-nf__search{margin:0 0 20px;text-align:left}
.af-nf .af-nf__label{
  display:block;
  margin:0 0 8px;
  font-size:17px;
  font-weight:600;
  color:#1d1d1f;
}
.af-nf__row{display:flex;gap:10px}
.af-nf .af-nf__input{
  flex:1 1 auto;
  min-width:0;
  height:56px;
  margin:0;
  padding:0 22px;
  border:1.5px solid #c7c7cc;
  /* A pill, like the button beside it and the header search. ux.css
     rounds every field to --afr-sm with !important, so this has to be
     !important too to pair the field with its own button. */
  border-radius:9999px!important;
  background:#fff;
  font-size:18px;
  color:#1d1d1f;
  box-shadow:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.af-nf .af-nf__input:focus{
  outline:none;
  border-color:#2e7d32;
  box-shadow:0 0 0 4px rgba(46,125,50,.18);
}
.af-nf .af-nf__submit{
  flex:0 0 auto;
  height:56px;
  margin:0;
  padding:0 26px;
  border:0;
  border-radius:9999px;
  background:#1b5e20;
  color:#fff;
  font-size:17px;
  font-weight:600;
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
  transition:background-color .2s ease;
}
.af-nf .af-nf__submit:hover{background:#154a19}
.af-nf .af-nf__submit:focus-visible,
.af-nf .af-nf__btn:focus-visible{outline:3px solid #0b65c2;outline-offset:3px}
.af-nf .af-nf__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:0 0 24px;
}
.af-nf .af-nf__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 26px;
  border-radius:9999px;
  background:#2e7d32;
  color:#fff;
  font-size:17px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .2s ease;
}
.af-nf .af-nf__btn:hover{background:#1b5e20;color:#fff}
.af-nf .af-nf__btn--ghost{
  background:#fff;
  color:#1d1d1f;
  box-shadow:inset 0 0 0 1.5px #d2d2d7;
}
.af-nf .af-nf__btn--ghost:hover{background:#f5f5f7;color:#1d1d1f}
.af-nf .af-nf__call{margin:0;font-size:17px;line-height:1.55;color:#6e6e73}
.af-nf .af-nf__call a{color:#1b5e20;font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media (max-width:600px){
  .af-nf .af-nf__art{width:170px;margin-bottom:12px}
  .af-nf .af-nf__title{font-size:24px}
  .af-nf .af-nf__lead{font-size:17px}
  .af-nf .af-nf__row{flex-direction:column}
  .af-nf .af-nf__submit{width:100%}
  .af-nf .af-nf__actions{flex-direction:column}
  .af-nf .af-nf__btn{width:100%}
}