@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');
* {font-family: 'Montserrat', Arial, Helvetica, sans-serif;}
main {margin: 150px auto; max-width: 1200px;}
:root {
  --togl-h: 120px;
  --togl-shift: -75px;
  --figure-shift: 20%;
  --togl-active-w: 55%;
  --togl-easing: cubic-bezier(0.36, 0.42, 0.49, 1.16);
  --togl-ttl: #1fb10099;

  --gardn-clr: #1fb10099;
  --farm-clr: #baa80099;
}
.isFarm {
    --brand: #baa800;
    --brand-dark: #9a8000;
    --brand-lite: #ddcc00;
    --togl-ttl: #baa80099;
    --gradient: linear-gradient(to right, var(--brand-dark), var(--brand-lite));
    --ftr-bg: #eeeade;
}
.Toggle-wrap {display: flex; gap: 1rem; border-radius:var(--togl-h); 
  /* transition: all ease-in .3s; */
}
/* body:not(.-toggle-hide) .Toggle-wrap {
  transform: scale(.5); opacity: 0;
} */
.Toggle { 
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1em;
  flex: 1 1 50%; position: relative;
  outline: #ffffff00 10px solid;
  margin: 0 var(--togl-shift) 0 0;
  transition:all var(--togl-easing) .3s;
  height: var(--togl-h);
  background: url(img/garden-bg.webp) 50% 50%/auto 120%;
  border-radius: var(--togl-h) 0 0 var(--togl-h);
  display: flex;
  align-items: center;
}
.Toggle figcaption {padding: 1em 1.5em;
  color: var(--brand); opacity: .5;
  font-weight: 500;
  position: absolute; bottom: -3em;
  z-index: 11;
  display: inline-flex;
  gap: .5em;
  align-items: center;
}
.Toggle figcaption svg {display: none; height: 1.5em; width: 1.5em;}
.Toggle img { 
  transform-origin: 50% 100%;
  position: absolute; z-index: 10;
  height: 120%;
  bottom: 0; left: var(--figure-shift);
  transition: all ease-out .15s;
  pointer-events: none;
  opacity: 0;
}
.isFarm .frmrTgl img, .isGarden .grdnrTgl img {opacity: 1;}
.Toggle:nth-child(2) {
  justify-content: flex-end;
  background: url(img/farmer-bg.webp) 0% 50%/auto 120%;
  margin: 0 0 0 var(--togl-shift);
  border-radius: 0 var(--togl-h) var(--togl-h) 0;
}
.Toggle:nth-child(2) img { left: auto; right: var(--figure-shift);}

.isFarm .frmrTgl{
  outline: #fff 10px solid;
  flex-basis: var(--togl-active-w);
  z-index: 1;
  border-radius: var(--togl-h);
  animation: toggle-bg 30s linear;
}
.isGarden .grdnrTgl{
  outline: #fff 10px solid;
  flex-basis: var(--togl-active-w);
  z-index: 1;
  border-radius: var(--togl-h);
  animation: toggle-bg 30s linear;
}
.isGarden .grdnrTgl img {transform: translateX(30%); }
.isFarm .frmrTgl img {transform: translateX(-30%);}
.isGarden .grdnrTgl img, .isFarm .frmrTgl img{
  /* transform: scale(1.4) */
  transition: all ease-out .4s .15s; opacity: 1;
}
.isGarden .grdnrTgl figcaption, .isFarm .frmrTgl figcaption{
  opacity: 1;
}

.isGarden .frmrTgl, .isFarm .grdnrTgl{
  filter: grayscale(1); cursor: pointer;
}
.isGarden .frmrTgl:hover, .isFarm .grdnrTgl:hover{
  /* flex-basis: var(--togl-active-w); */
  filter: grayscale(.5);
}
.isGarden .frmrTgl:hover img, .isFarm .grdnrTgl:hover img{
  /* transform: scale(1.05);  */
  transition: all cubic-bezier(0.66, 1.27, 0.73, 0.98) .4s .15s;
}



@keyframes toggle-bg {
  0% {background-position-x: 0%;}
  50% {background-position-x: 100%;}
  100% {background-position-x: 0%;}
}

.Hdr-toggle, .Toggle-wrap {
  background: linear-gradient(90deg, var(--brand-dark), var(--brand-lite));}
.Hdr-toggle { justify-content: space-between; 
  cursor: pointer;
  padding: 5px; border-radius: 2em;
  /* position: relative; */
  display: inline-flex;
  visibility: visible;
  opacity: 1;
  transition: all ease-out .2s;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
}
.isGarden .HdrGTgl, .isFarm .HdrFTgl{
  color: var(--brand-dark);
}
.-toggle-hide .Hdr-toggle {opacity: 0; visibility: hidden; transform: scale(.5);} 
.Hdr-toggle:hover{transform: scale(1.02);}
.Hdr-toggle:active{transform: scale(.97);}
.Hdr-toggle div {padding: .2em .6em; position: relative; z-index: 2; color: #fff; display: flex;}
.Hdr-toggle svg {width: 1.2em; height: 1.2em; transition: all ease-out .3s}
.Hdr-toggle span { position: absolute; z-index: 0; background: #fff; border-radius: 2em; width: 2.4em; right:2.7em; 
bottom: .2em; top:.2em; transition: all ease-out .3s}
/* .Hdr-toggle div.active + span {right: .3em;} */
.isFarm .HdrFTgl + span{
  right: .2em; 
}

.isGarden .garden-state, .isFarm .farm-state {
  position: relative;
}
.isGarden .garden-state .-state-swipe {animation: toggleFarm .2s ease-out forwards; opacity: 0;}
.isFarm .farm-state .-state-swipe {animation: toggleGarden .2s ease-out forwards; opacity: 0;}
.isGarden .garden-state .-state-fade {animation: fadeGarden .2s .1s ease-out forwards; opacity: 0;}
.isFarm .farm-state .-state-fade {animation: fadeFarm .2s .1s ease-out forwards; opacity: 0;}

/* .isGarden .garden-state > div + div, .isFarm .farm-state > div + div {animation-delay: .1s;} */
.isGarden .farm-state, .isFarm .garden-state {
  /* transition: opacity linear .3s; */
  opacity: 0;
  position: absolute;
  /* animation: farmGarden .5s ease-out forwards; */
  /* visibility: hidden; */
}

.-delay-01 {animation-delay: .1s !important;}
.-delay-02 {animation-delay: .2s !important;}
.-delay-03 {animation-delay: .3s !important;}

@keyframes fadeGarden {
  0% {opacity: 0; top:10px }
  100% {opacity: 1; top:0px }
}
@keyframes fadeFarm {
  0% {opacity: 0;  top:10px }
  100% {opacity: 1; top:0px }
}
@keyframes farmGarden {
  0% {opacity: 1; }
  100% {opacity: 0;}
}
@keyframes toggleFarm {
  0% {opacity: 0; right: -90px;}
  33% {opacity: 0; right: -60px;}
  100% {opacity: 1; right: 0px;}
}
/* @keyframes toggleTypeOff {
  0% {opacity: 1; left: 0px;}
  99.9% {opacity: 0; left: 50px;}
  100% {opacity: 0; left: -50px;}
} */
@keyframes toggleGarden {
  0% {opacity: 0; right: 90px;}
  33% {opacity: 0; right: 60px;}
  100% {opacity: 1; right: 0px;}
}



  /* @media screen and  (min-width:22.5rem) { */
@media screen and  (max-width:35.5rem) {
  .Hdr-toggle {right: -2em;}
} 
@media screen and  (min-width:35.5rem) {

  
}
@media (min-width: 48rem) {
  :root {
  --figure-shift: 35%;
  --togl-active-w: 60%;
  --togl-h: 200px;
  }
  .Hdr-toggle span {right: 2.6em;}
  .Toggle, .Toggle:nth-child(2) {padding: 0 2em; background-size: 150% auto;}
  .Toggle figcaption { border-radius: 2em; position: relative; opacity: 1;
    color: #fff; 
    backdrop-filter: blur(10px);
    bottom: auto;
  }
  .grdnrTgl figcaption {background:var(--gardn-clr)}
  .frmrTgl figcaption {background:var(--farm-clr)}

  .Toggle figcaption svg { display: block;}
}
@media screen and  (min-width:990px) {
  .Toggle figcaption {z-index: 9;}
}